How to deserialize html

[fdrissi]

Hello 👋
I am getting from the API HTML string, and I want to deseriliaze to plate format, for example, I am getting something like this:
<h2 class="slate-h2"><strong class="slate-bold">vbdfgbfgbf</strong></h2>
if I pass it directly to Plate editor, it will throw errors, I need to deserialize it to be in plate document format (for example):
[{ type: 'paragraph', children: [{ text: 'A line of text.' }], }]

I have tried deserializeHtml utility, but it doesn't work, here is how I am trying to use it:

import { deserializeHtml } from '@udecode/plate'

const App = () => {
  const editorRef = useMyPlateEditorRef()
  const deserialized = deserializeHtml(editorRef!, {
      element:
        '<h2 class="slate-h2"><strong class="slate-bold">vbdfgbfgbf</strong></h2>',
    })
  }
  
  return (<div>Test editor</div>)
}

But it throws this error:

Uncaught TypeError: Cannot read properties of null (reading 'plugins')

and when I add the plugins this is what I get:

and this is the version I am using:
"@udecode/plate": "^16.2.3",

Thanks in advance 🙏

[rmacy]

This is also an issue I have.

<Plate
        id={id}
        plugins={platePlugs}
        editableProps={{ placeholder: "Type... " }}
        initialValue={
          value ? deserializeHtml(editor, { element: value }) : null
        }
        onChange={(val) => setEmailBody(serializeHtml(editor, { nodes: val }))}
      />

I get the same error, I want to hydrate the Plate editor value from HTML content.

[davevilela]

any updates?

[12joan]

You need to create a temporary editor object using createPlateEditor({ plugins }). I recommend doing so and computing the initial value inside a useMemo.

const initialValue = useMemo(() => {
  const tmpEditor = createPlateEditor({ plugins });
  return deserializeHtml(tmpEditor, { element: htmlValue });
}, [];

Incidentally, I strongly recommend using JSON, not serialized HTML, for storing Plate documents, since deserializeHtml and serializeHtml aren't perfect inverse functions and some data may be lost in translation. Deserializing an existing document as a one-time operation and serializing HTML for read-only use are the intended uses of those functions. I just thought I'd mention that in case anyone's reading this who wasn't aware of that. 🙂