Serializing HTML

[leooism]

Currently, when calling serializeHTML inside event callback, throws react hook error.
Is there any better way to execute this function to transform plate nodes to html?

[atharvashukla]

If you're serializing HTML in the parent of the <Plate /> component, you can simply add a ref to it:

const editorRef = useRef(null);

Then access it within a function (which you should be able to call from anywhere):

const htmlOut = (editor) => {
  if (editor) {
    const currentEditor = editor.current;
    const html = serializeHtml(currentEditor, {
      nodes: currentEditor.children,
    });
    console.log(`html`, html);
  } else {
    throw new Error("editor not present", editor);
  }
};

[PONYAWKA]

Tried your solution but got an error

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