Webiny-js: Headless CMS - Rich Text Editor for consumers

[doitadrian]

For users that will be consuming the Headless CMS API, we'll need to expose a simple React component that will render the content of "rich text" fields.

Currently, the users just receive an object with all of the data / content, and they cannot do anything with it.

Implementaiton details

We'll need to opt-out from importing the rich text editor from the app-i18n package, like the app-form-builder is doing. There is OK because we're just using simple I18N Rich Text inputs, but here, it works a bit differently. In other words, we only need a simple Rich Text Editor, without any I18N functionality, because the ContentForm component is responsible for locale switching and doing proper data binding in the form.

EDIT by @Pavel910:

The idea is to create a standalone package rich-text-editor, which exports a React component you can use in your project and pass plugins for rendering to it. That package will also provide a set of default plugins you can import and pass to the editor via props (that way you can use our default plugins or provide your own).

[icy-meteor]

@Pavel910 Can this not be parsed by the slate logic that you were talking about?

[Pavel910]

@icy-meteor It can, absolutely. You can ignore this issue, it's more of being evaluated than actually something we'll implement.

[alanchrt]

I just ran into a need for this. Webiny CMS backend/gatsby frontend. As a shot in the dark, I tried installing @webiny/app-page-builder and importing the readonly slate editor from there:

import Slate from '@webiny/app-page-builder/render/components/Slate';

But, no dice due to lack of slate plugins actually being loaded.

Any advice for the short term on rendering rich text in consumers?

[Pavel910]

@alanchrt the fastest way at this point is to use a package created by one of our community members: https://www.npmjs.com/package/webiny-richtext-serializer

And for usage example please see this sandbox: https://codesandbox.io/s/cold-frog-vfu5j?file=/src/App.js

Besides that, I'll review our existing plugins and Slate component and will post some instructions on how to connect them together and use in your site. Will keep you posted!

[Pavel910]

IMPORTANT @webiny/developers:

I'm moving this issue to our v5 project, as we currently have a blocking issue which is preventing us from creating a standalone package for rich text editor. The blocker comes in form of a Page Builder, which still uses a very old version of Slate editor. It's creating a huge dependency mismatch problem which is not at all easy to resolve.

The idea is to migrate PB Slate to the same version as the rest of the system. Then we'll be able to create a standalone package for rich-text component which will be reusable, and then we can solve this problem of rendering CMS Slate content on in user's sites.

[alanchrt]

@Pavel910 thanks so much! This is really helpful for the interim.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[webiny-bot]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days.