Ckeditor5: Create an example of React used inside the editor (in widgets)

[Reinmar]

It's possible to use any external library inside UIElements so we can create a guide showcasing that.

[Reinmar]

It will be very similar to https://github.com/ckeditor/ckeditor5-core/tree/proto/input-widget. In fact, I'd like to see two examples – one of using React and one with those inputs.

[neutraali]

If it means rendering actual React -components inside CKEditor - I'm _very_ interested in this.

[Reinmar]

Yes, but it will be limited to widgets (non-editable islands). The editable part (text, paragraphs, lists, content of table cells, etc.) needs to be rendered by CKEditor 5 itself.

Does this still sound good? 🙂

[neutraali]

We're fighting with having .editable fields which we replace with CKEditor, but also need to have "non-editable" React stuff _inside_ the CKEditor content.

It sure _sounds_ like it might help with our use case! :cat:

[Reinmar]

Take a look at this POC: https://github.com/ckeditor/ckeditor5-core/compare/proto/input-widget. It does not use React (it uses plain DOM and some jQ plugin, because that's what we were asked to show), but it may clarify to you how to actually use React.

[neutraali]

Not really, no - React vs. jQuery are fundamentally incompatible so things aren't immediately apparent to me from that changeset and I don't know which parts to focus on.

Then again, if the answer was evident then this issue wouldn't exist in the first place. :cat:

[Reinmar]

Not really, no - React vs. jQuery are fundamentally incompatible

😅 I didn't mean that rendering React components will look exactly like that sample. But, in general, using jQ or React in CKEditor 5 boils down to the same thing – taking over the DOM rendering from CKEditor 5. In both cases, you need to tell CKEditor 5 what and how it should render.

[neutraali]

Yeah, what this boils down to is that an example or two would be fabulous, hence the issue~ :cat: