serializeHtml - server side

[fbolcic]

Hello!

I am reading the plate docs about HTML serialization and it is stated that the plugin provides functionality to convert Slate value to HTML without requiring an editor instance.

All the examples I see require an editor instance. We need to do HTML serialisation on the server so using an editor instance is not an option.

Thank you!

[fbolcic]

If this is not an option, is it possible to initialise an editor instance on the server and use that it as a parameter to serializeHtml?

[12joan]

Thanks for pointing out the issue in the docs!

Initializing an editor instance on the server should work; just call createPlateEditor({ plugins }). You'll probably need to include any plugins responsible for rendering nodes, such as the paragraph plugin, along with their UI components. Behaviour-related plugins like soft-break shouldn't be necessary.

[12joan]

If you let us know once you get it working, we can add instructions to the docs. 🙂

[fbolcic]

@12joan
The API works. Here is a simplified snippet of our working code:

const plugins = createPlugins(
  [
    createParagraphPlugin(),
    createBlockquotePlugin(),
    createCodeBlockPlugin({
      component: (props) => (
        <pre>
          <code>{props.children}</code>
        </pre>
      ),
    }),
    createHeadingPlugin(),
    createBoldPlugin(),
    createItalicPlugin(),
    createUnderlinePlugin(),
    createCodePlugin(),
    createLinkPlugin(),
    createListPlugin(),
    createHorizontalRulePlugin(),
  ],
  {
    components: createPlateUI(),
  },
);

const editor = createPlateEditor({ plugins });

export function generatePlateHtml(plateString: string) {
  const plateValue = JSON.parse(plateString);
  insertNodes(editor, plateValue);

  const html = serializeHtml(editor, {
    nodes: editor.children,
    stripWhitespace: false,
    convertNewLinesToHtmlBr: true,
  });

  return html;
}

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