Alloy Editor crashes on React 16

[emilecantin]

React.PropTypes and React.createClass have been deprecated since React 15.5, released April 2017. Alloy still uses them, which crashes on React 16.

Here is the crash:

Uncaught (in promise) TypeError: Cannot read property 'string' of undefined
    at alloy-editor-no-react.js:8526
    at alloy-editor-no-react.js:8557
    at Object.<anonymous> (alloy-editor-no-react.js:16541)
    at Object.Array.concat.module.exports.root (alloy-editor-no-react.js:16541)
    at __webpack_require__ ...

This references this line, which uses React.PropTypes.string.

[jbalsas]

Hey @emilecantin, thanks for letting us know!

We were planning to switch to Metal.js as part of our 2.0 milestone, so we wouldn't have a dependency with React.

Would that change the way you're using AlloyEditor? Can you add some more context on how you're consuming it? That way we can properly plan for it.

[emilecantin]

We're a React app, so we're simply importing AlloyEditor in our app, and using it as the documentation states. I believe a switch to another library would probably change the way we use it.

Honestly, we'd prefer keeping everything React-based, so we'd probably end up switching if the bundle size goes up significantly.

[jbalsas]

Thanks for the answer, @emilecantin, that certainly will help us shape the roadmap in the upcoming months...

Did you pick AlloyEditor just for that reason? Is there something you'd like to see in the future?

[emilecantin]

Mostly, we wanted a rich text editor that would play well with React, and we liked the "tooltip" UI (that appears on highlight).

[JiriZidek]

For us AlloyEditor (as a CKE editor wrapper) has value only as React component. Switching to anything else is like telling "we switch from Java to .NET": showstopper. Then we would consider forking current status and maintaining pace with React or completely leaving Alloy because of incompatibility.

[MiniCodeMonkey]

Would it make sense to just to get rid of the PropTypes definitions for now? It doesn't look like it's very easy to add the new prop-types dependency in this project.

[jbalsas]

Thanks a lot for the feedback, @emilecantin, @JiriZidek, @MiniCodeMonkey (and almost anonymous reaction commenters 😉)!

This is very valuable for us to plan for the future. AlloyEditor was conceived from the beginning to allow for different UIs, so we can simply provide another one and keep the React one for React consumption.

@vbence86, could you take a look at what else might be needed to support React16 while you're looking at replacing the mixins and old usage of .createClass?

@JiriZidek, @MiniCodeMonkey, is there any feature you might be missing or you'd like to have? All feedback/suggestions are welcome! :)

[JiriZidek]

Regarding PropTypes - we consume AlloyEditor form TypeScript and we use homemade .d.ts file - so no benefit of PropTypes for us at all.

[JiriZidek]

There is one difficult feature we miss: Paste from Word. We never made it work perfectly. But I guess it's more CKE feature.

[vbence86]

I'll keep all these remarks in mind while updating the implementation.

[jbalsas]

Hey @JiriZidek, yeah, Paste from Word is a CKEditor plugin that should be working out of the box, but it is definitely hard to get right. We could try to work together on those, but the fastest way to fix them would be to open issues directly in the CKEditor GitHub repo.

Regarding your TypeScript usage and custom .d.ts, we'd be very interested in knowing more about it. Is there something (code, examples, tutorial drafts) that you'd be interested in sharing with us? We could add examples in the Use section of the AlloyEditor site. We might even be able to adopt and maintain the .d.ts declaration file as part of a larger Dev.Experience story... what do you think?

[JiriZidek]

Feel free to use attached files as example editor component to be used in TSX. React 15.x d.ts files come from DefinitelyTyped and I included them just for completeness (otherwise it won't compile in TypeScript 2.0-2.5).

AlloyEditor.zip

[lserwatka]

Hey @jbalsas

We are using AlloyEditor at eZ (https://github.com/ezsystems), mainly in eZ Platform CMS. We recently switched from legacy YUI JS framework to React 16, and I have to admit that switching to Metal.js will force use to reconsider other options for online editor. All our UI components are React based, as we invested quite some time to rewrite them from legacy code. Have you made your final decision yet about React vs. Metal.js for 2.x?