Value to React view

Do you want to request a feature or report a bug?

Feature

What’s the current behavior?

If you want to display rich text edited by Slate in React, you have to use the html serializer, and then put it as the html content of some div. If you want to use a custom component, you can’t do this.

It would be great if there was a stripped-down “react serializer component” that takes a value (result of .toJSON()) and some rules and then can be used as a regular component.

It would be even greater if it would not need Immutable to do this.

What’s the expected behavior?

<SlateValue value={value} rules={rules} /> puts the edited text where it’s mounted, using the components defined in the rules.

If there is already something like this somewhere, it would be great if that could be made into a package for slate.

[wmertens]

We made slateToReact.js which converts from slate JSON representation to a React tree.

• This is mostly the serialize logic from slate-html-serializer, except that it works on the JSON and not the Immutable object.
  • In particular, it doesn’t call getLeaves but just uses the leaves array
• I wonder if maybe this code can be factored out somehow? I’d love to see this be part of the Slate packages
• Will the JSON representation change in the future?
  • In particular, it seems to be rather wordy and it keeps all the empty objects and arrays.
  • It would be nice if the JSON could be made more compact and get a version field so that parsers know if/how they are supposed to parse this.
  • I also wonder if the JSON structure could be memoized, since it gets built on every keystroke.

[ianstormtaylor]

I believe that this may be fixed by https://github.com/ianstormtaylor/slate/pull/3093, which has changed a lot of the logic in Slate and slate-react especially. I’m going to close this out, but as always, feel free to open a new issue if it persists for you. Thanks for understanding.