Need help exporting the content and display editor content as HTML.

[polisen]

Hey, I am really impressed by this project, and love to use it.

The problem I'm facing is that I cannot seem to wrap my head around how to export the stored values and display them as static content, for the viewer of the content.

I've found the mention of the serialization plugin - but I can't seem to understand how to get the required nodes from the editor state.

Furthermore, I'd rather not save the HTML in my db and would rather rely on rendering the content using plate ui components just bypassing the live editor. Is that possible?

This is an extremly flawed and naive way of attempting this:

const componentMap = {
  h1: StyledH1,
  p: ELEMENT_PARAGRAPH,
};

const extractTextProps = ({ underline, bold, italic, text }) => {
  return {
    value: text,
    props: {
      underline,
      bold,
      italic,
    },
  };
};

const DisplayValue = ({ editorValue }) =>
  editorValue.map(({ type, children }) => {
    const { value, props } = extractTextProps(children[0]);

    return React.createElement(componentMap[type] || type, [props], value);
  });

This obviously doesn't work well as there is no clear 1to1 mapping between the attributes.
Am I right in assuming that there is a reliable and easy way to do this?
Since the editor store syntax is really compact, I'd like to be able to keep it in that format if possible and render using the plate ui components.

I'm really confused about which approach to take so I'd love some guidance in using this otherwise crystal clear package.

Cheers

[zbeyens]

Thanks for the feedback

I'd save the slate json value in the database, and use the HTML serializer client-side.

There is a WIP attempt of bypassing slate-react #1274

[polisen]

Thank you, what I don't understand is how I can use the serialiser to generate html from plate json. It seems as if though it accepts react nodes. I don't understand where I would plug it in.

[haydencarlson]

You can pass the "plate json" as the nodes value in serializeHtml.

Example:

const html = serializeHtml(serializerEditor, {
  nodes: plateJson
});

[polisen]

Thank you - that makes sense :)

[CloudDrivenSolutions]

Where is the serializerEditor coming from?

[haydencarlson]

const serializerEditor = createPlateEditor({
  plugins
});