Current support for HTML serialization

[gisete]

Hi there, thanks so much for all your work with Plate!

I'm reading the documentation and trying to understand how everything works and I'm having trouble finding a definite answer if it's possible to save the Plate returned data as HTML.
Something like this:

<Plate
  plugins={plugins}
  onChange={(newValue) => {
    setNewValue(serializeHtml(editor, { nodes: newValue }));
  }}
/>

As a secondary solution I'm using what it's being done in this Sandbox example but as you can see you get a useLayoutEffect error that keeps popping up at every change. Any thoughts?

Thanks!

[durdenx]

Same things for me. I can't figure out how to do a simple thing like onChange with a form library...

[12joan]

Hopefully this answer will be helpful to you.

[12joan]

I'm not sure what's causing the warning about useLayoutEffect; it seems to be a problem relating to SSR in slate-react. It should be safe to ignore if you're not using SSR in your app. In reality, you probably won't be calling serializeHtml on every render anyway, and certainly not when rendering on the server.

The reason you can't use editor in the onChange handler of your Plate component is because the editor state is only available inside the Plate component (or PlateProvider if you're using it). This is consistent with how state normally works in React: you can't access state higher up in the component tree than it's defined unless you pass it up manually using callbacks.

I don't know why onChange doesn't accept an argument like (value, editor) => .... @zbeyens would know if that would be feasible. (It might be Slate's responsibility, not Plate's.)

In the meantime, here are some solutions you can try:

• Use useEditorState and serializeHtml inside a child of Plate (recommended)
  • This is almost identical to the sandbox example you linked.
  • Just pass setNewValue in as a prop of Serialized and use useEffect to call it when editor.children changes.
• Wrap your component that uses useState inside a PlateProvider
  • This will let you use usePlateEditorState (mostly equivalent to useEditorState) outside of the Plate component.
  • You can render <Plate /> anywhere inside the PlateProvider.
• Use serializeHtml inside a custom plugin
  • Plugins are fairly easy to create; just take a look at some examples in the Plate source code.
  • The onChange handler you have access to in plugins accepts handlers like this: (editor) => (value) => console.log(editor, value).
  • To make this work with your example, you might need to pass setNewValue in as an option to the plugin, so it probably isn't the most convenient in this case.
• Create a one-off editor object inside the onChange handler
  • This is definitely a hack, but it doesn't require any structual changes to your code. Use it only if necessary.
  • You can use createPlateEditor to construct a one-off editor object with the same set of plugins as your real editor.
  • Since you already have access to the real editor's value through onChange, you can pass this value to the one-off editor to perform the serializeHtml.

[Eskalifer1]

Can you please help with this: https://stackoverflow.com/questions/77549872/platejs-serializing-html
I would be very grateful

[12joan]

@Eskalifer1 Can you try moving the serializeHtml call into the onClick callback? I suspect that React isn't rerendering your top-level component, so the value inside your callback is stale.

It's also possible that Plate is failing to mutate your passed editor instance; I haven't checked recently how the editor prop works with regard to this. If that's the problem, you can use an alternative way to access the editor.

[Lokheim]

Can you give me example on how would I use it ? I am lost and when it works it only prints empty string

[fbolcic]

We are encountering the same issue. Basically we have to think of hacks to work around the serializeHtml function.

The function's dependency on the editor seems to me like the problem, which basically means it has to be used only inside some plate context. And this results in hacky solutions like the ones @12joan proposed.
I would expect it to work something like this: serializeHtml(value, options) which would allow me to serialise in whatever situation I
need to.

My intention is not to flame on the maintainers, but instead to provide some feedback for possible improvements.
Thanks for all your work and effort in any case!

[12joan]

The way a value is serialized to HTML depends on which plugins are loaded, and the simplest way of getting that information into serializeHtml is through the editor object. There are various ways serializeHtml could be improved (such as decoupling its implementation from the render pipeline to use a serializeHtml: (node: TNode) => JSX.Element plugin option instead), but removing the dependency on editor wouldn't be feasible.

The best solution I can think of is to refactor out a separate helper function (which serializeHtml would use internally) which takes a value and a plugin list as part of its arguments. This should be fairly simple to do once the serialization process is decoupled as described above. There's no plan for @zbeyens or myself to make these changes, as far as I'm aware, but we'd welcome contributions from the community.

[rbutera]

my mind has been absolutely fried going down the rabbit hole of trying to implement a simple react form with a plate editor that serializes the plate contents to html so that it can be consumed by setValue . Can anyone produce a codesandbox / codepen example? I'm so lost