decorator is not defined

[jamesbillinger]

I'm trying to call AddBlock with asJson = true, but I'm getting an error: Uncaugh ReferenceError: decorator is not defined

This is my code (relevant lines):

import {AddBlock, RemoveBlock} from 'draft-wysiwyg/lib/draft-utils';

this.change(AddBlock(editorState,this.refs.draft.state.value.getSelection(), 'image', {url:imagePath}, true));

It looks to me like the following lines in add-block.js are to blame.

    if (!editorState) {
        editorState = _draftJs.EditorState.createEmpty(decorator);
    }
    // If json -> convert to editorstate
    else if (asJson) {
            editorState = _draftJs.EditorState.push(_draftJs.EditorState.createEmpty(decorator), _draftJs.ContentState.createFromBlockArray(convertFromRaw(editorState)));
        }

Maybe this is not a fully developed feature...or maybe I'm doing something wrong. Let me know if thoughts.

By the way, I used to do the conversion to JSON myself, but I started getting errors following a recent upgrade. I will see if I can get that fixed as well so that I don't have to rely on asJson.

[jamesbillinger]

FYI, I figured out why I was getting errors trying to call AddBlock and then convertToRaw myself. I was importing my global version of 'draft-js' rather than the one bundled with draft-wysiwyg. draft-wysiwig is listing a dependency of draft-js@^0.2.2 - which via npm prerelease versioning spec does NOT match draft-js@^0.5.x (my global). Hence, Entity.create was creating the entity in the global 0.5 version, not the wysiwyg 0.2 version.

Could we bump the dependency to ^0.5?

Thanks again.

[bkniffler]

Hey @jamesbillinger, thanks for bringing this up!

I updated to the latest version 0.6.0 via https://github.com/bkniffler/draft-wysiwyg/commit/bd7c221b45eac27cf41f19def4d12f09a6f49101

Are you okay with ^0.6.0?

[jamesbillinger]

Thanks @bkniffler for the quick response! I upgrade and immediately ran into an issue.

BlockMapBuilder.js?e9bd:23 Uncaught TypeError: block.getKey is not a function

It looks to me like on line 54 of draft.js:

value = _draftJs.EditorState.push(value, _draftJs.ContentState.createFromBlockArray((0, _draftJs.convertFromRaw)(props.value)));

EditorState.push is expecting a ContentState as it's second argument. This would be fine if the result of _draftJs.convertFromRaw were a [BlockArray]. However, the result of _draftJs.convertFromRaw is an actual ContentState object (as of 0.6.0).

For me at least, if I remove the createFromBlockArray altogether it works fine:

value = _draftJs.EditorState.push(value, ((0, _draftJs.convertFromRaw)(props.value)));

As I mentioned, this is probably due to the below change in 0.6.0:

convertFromRaw now returns a ContentState object instead of an Array<ContentBlock>

If I get a chance I will put together a PR. I know there are several places in my own code I'll have to update to work with 0.6.0. Let me know if I'm missing something.

[jamesbillinger]

Create #6

[bkniffler]

Thank you for the PR and the research 👍 , I just merged it! And sorry I didn't give this project to much love lately, I'm still exploring https://github.com/draft-js-plugins/draft-js-plugins and trying to merge draft-wysiwyg into the plugin structure, though it prooves to be a bit harder than I thought :)

[jamesbillinger]

Sweet...thanks. Is it worth a 0.1.1 in npm?

I agree that the plugin structure seems to be the way to go. It feels like we could end up with a really nice react Editor at some point. I'm just not sure that any of them are quite there yet. Yours seems like the furthest along.

[bkniffler]

I've released 0.1.1 👍

You're right, there is surprisingly little editors in the wild, mostly proof of concept for single features or simple use cases. I've given it a lot of thoughts, it is tempting to develop a project without bothering about modularization and extendability, side effects, edge-cases, etc. Especially when thinking about implementing a markdown/rtf syntax switcher I came to the conclusion that draft-wysiwyg would get too bloated to live within a single library.

Keep an eye on https://github.com/draft-js-plugins/draft-js-plugins and the wysiwyg branch, there will be some movement in the next week, with more stability, a smoother experience and all the flexibility you need compared to draft-wysiwyg. I just need to fix a few more annoying issues.

[KaySackey]

Actually I think that if you just wrote a little documentation on how to export the data from the WSYSGI and put it on a page in static format, you'd be golden. Even if the export/import API does change over time, it'll be a good foundation.

[bkniffler]

Thanks for the feedback @KaySackey. The biggest problem is that this library is hacked together. Some work would be necessary to separate the features (dnd, resizeable blocks, toolbars, captions, editor nesting, block focusing, whatnot) and make those reusable or at least demonstrable.

This work is slowly contributed to draft-js-plugins instead. In fact, I submitted a PR today that incorporates a lot of stuff from draft-wysiwyg into plugins, in a more portable way that will hopefully serve better for documentation and demonstration: https://github.com/draft-js-plugins/draft-js-plugins/pull/243

The code is commented to a small but hopefully sufficient extend.

You guys should check it out, this for example is the entry point for the dnd stuff https://github.com/draft-js-plugins/draft-js-plugins/blob/wysiwyg/draft-js-dnd-plugin/src/index.js

What do you think?

[jamesbillinger]

For my part, it almost seems like the architecture to accept plugins should have been part of draft js itself. That said, most of what's going on here is custom blockrenderers and custom styles, so I guess it's about as modular as it can get at the moment. It'd just be nice if each of these plugins which add functionality to draft-js could be unique npm modules of their own right.

I suppose that would be possible by chaining decorators. Hmm...

At any rate, I love what you're doing. Once your stuff is merged into plugins I hope I can contribute. Maybe a text-align or a color picker or something.

Thanks again.