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

[remusris]

I'm right here with you

[gaithoben]

@rbutera, did you finally manage to serialize html within the onChange callBack?

[rbutera]

If I remember correctly, it turns out you can't use the serialize method with hooks because you end up calling a hook within a hook and this kills the form. It has been a while since I implemented this in my app but I recall that I had to do the serialization in the POST server action. Funnily enough later on this week I am revising that form with the editor to add more functionality, so when I do that I will have a look at what I did back then and paste it here.

[siggemattsson]

@rbutera Have you revisited the form yet?
Would be highly appreciated if you posted your solution to it?
Think I've tried all recommended solutions but just get stuck in the different errors already posted here: mostly "calling a hook within a hook".

[jaredcbaum]

I'd also be interested in hearing a more detailed explanation on "I had to do the serialization in the POST server action". How you accessing the editor object and serializeHtml function in a server context?

[ritwanxidig]

I have still same issue, could you please provide example of the full code of the editor with serializing to html

[Lokheim]

Just use

JSON.stringify(editorValue)

and

JSON.parse(editorValue)

And allways use console.log(data) so you know what are you working with, hope it will help you, if so let me know.

[ritwanxidig]

Thanks, I utilized that approach but I spent two days for searching to serialize to HTML and lost it proper way, I was getting "invalid hook call" error and I didn't misuse any hook I think its inside the serializeHtml function, but now I stored the editor's value as a JSON string.

[linhtrinh18]

Me too.

[linhtrinh18]

me too, I read it somewhere it now only fully support md searizalize, the one with html serializeHtml is getting hooks violation error..

[kualta]

same invalid hook call issue with both serializeHtml and api.reactHtml.serialize calls

[diki]

same here

[kualta]

@diki see this #2804 (comment)

[zbeyens]

We are deprecating @udecode/plate-html. The serializeHtml function has been migrated to @udecode/plate-core and @udecode/plate-common. The migration process for this stable fix requires creating a static version of all your components, that will make it work SSR.

You can find a detailed guide here. And the complete example including export to HTML, Tailwind CSS, and Prism.

[RDanned]

Hello. How can I serialize plate to html? I installed plate using this command:
npx shadcx@latest add plate/editor-ai

I tried like this but it doesnt work. Docs didnt help me, there is only about createSlateEditor:

import {DndProvider} from 'react-dnd';
import {HTML5Backend} from 'react-dnd-html5-backend';

import {Plate} from '@udecode/plate-common/react';

import {createSlateEditor, serializeHtml} from '@udecode/plate-common';
import {useCreateEditor} from '@/components/editor/use-create-editor';
import {SettingsDialog} from '@/components/editor/settings';
import {Editor, EditorContainer} from '@/components/plate-ui/editor';
import {EditorStatic} from '@/components/plate-ui/editor-static';
import {components} from '@/components/editor/use-create-editor';

interface PlateEditorProps {
  onChange: (value: any) => void;
  defaultValue: string;
}

export function PlateEditor({defaultValue, onChange}: PlateEditorProps) {
  const editor = useCreateEditor({
    defaultValue: defaultValue,
  });

  function handleChange() {
    serializeHtml(editor, {
      components,
      editorComponent: EditorStatic,
      props: {variant: 'none', className: 'p-2'},
    }).then((value) => {
      console.log('onchange')
      console.log(value);
      onChange(value);
    });
  }

  return (
    <DndProvider backend={HTML5Backend}>
      <Plate editor={editor} onChange={({editor, value}) => handleChange()}>
        <EditorContainer>
          <Editor variant="demo"/>
        </EditorContainer>

        <SettingsDialog/>
      </Plate>
    </DndProvider>
  );
}```

But instead I get an error:
`Error: useEditorRef must be used inside a Plate or PlateController`

[felixfeng33]

You should take this as ref So can not useuseCreateEditor to create editor should use createSlateEditor with Base*Plugin and components should also be static components it's from v41.

[zbeyens]

Please read the docs https://platejs.org/docs/html