Why my html serialization is empty ?

[Mimachh]

Hello all !
I'm trying to save the rich text editor in my database. To do that I'm following what I could found in the doc about serialization.

I show you my component (for the import and plugin, I reuse exactly the component from the getting started page).

My issue is that html is always an empty string, what did I missed?

Thanks all !

Edit : I'm sorry about the indent, I do not know why but export function does not want to format ..
`
export function PlateEditor() {
const editor = createPlateEditor({ plugins });

const html = serializeHtml(editor, {
  nodes: editor.children,
  dndWrapper: (props) => <DndProvider backend={HTML5Backend} {...props} />,
});

// console.log({editor})



return (
    <>
  <DndProvider backend={HTML5Backend}>
    <CommentsProvider users={{}} myUserId="1">
      <Plate plugins={plugins} initialValue={initialValue}
        editor={editor as any}
        onChange={() => {
            // setEditorContent(editor.children);
            console.log({html})
          }}
        >
        <FixedToolbar>
          <FixedToolbarButtons />
        </FixedToolbar>
        

        {/* <CustomEffect /> */}
        <Editor 
          
        />
        
        <FloatingToolbar>
          <FloatingToolbarButtons />
        </FloatingToolbar>
        <MentionCombobox items={[]} />
        <CommentsPopover />
      </Plate>
    </CommentsProvider>
  </DndProvider>
   <button
   onClick={() => {
     console.log(html);
   }}
 >
   Click
 </button>
 </>
);

}`

[12joan]

You're calling serializeHtml at the top level of your editor component, which I'm guessing doesn't re-render very often. The html value you're logging is stale.

[Mimachh]

Where do you think I could put it ? Because I tried to put in useEffect and in the onChange but I got an error telling me hook can not be recalled or something.

[aacmal]

Has anyone successfully serialized from Plate to HTML? I'm really stuck.

[zbeyens]

From v37, you can pass a string value to createPlateEditor https://platejs.org/docs/html#html---slate

[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.