Serializing and deserializing to HTML

[gamegee]

Hi,

I want to create a wysiwyg editor in order to send mails message to a server.
The thing is, the server is waiting for serialized HTML message content, so I want to transform the slate tree structure into html.

I've seen that slate-plugins support deserializeHTML as well as serializeHTML, but I am not sure how to use it.

Here is a simple example of what I am trying to achieve, look at the onSave function:

...

const Editor = () => {

  ...
  
  const [value, setValue] = useState()

  const onSave = async () => {
    // Is it supported by default by Slate-plugins ?
    const serializedHTMLData = serializeHTML(value)
    await saveMessage({ messageContent: serializedHTMLData })
  }

  return (
    <Slate
      editor={editor}
      value={value}
      onChange={(newValue) => {
        setValue(newValue as SlateDocument)
      }}>
    <Toolbar />
    <EditablePlugins
      plugins={plugins}
      decorate={decorate}
      onKeyDown={onKeyDown}
      placeholder={placeholder}
     />
     <button onClick={onSave}>Save</button>
   )
 }

[zbeyens]

You can read the code in this sandbox, it uses serializeHTMLFromNodes and deserializeHTMLToDocumentFragment.

[gamegee]

Thx for your fast answer 🔥

However the serializeHTML function will output HTML code that can only be read by SlateJS editor.
For example, if I have a block set with text-align: center property, it will output the following HTML:

<div class="slate-align-center">
  <div>test</div>
</div>

So other email clients will not be able to read styles from that content, I would expect serialisation to add inline-style.
e.g.

<div style="text-align: center;">
  <div>test</div>
</div>

Also we could keep both class and styles, if needed.

<div class="slate-align-center" style="text-align: center;">
  <div>test</div>
</div>

Is it something I need to configure on my own code, or do you plan to support it ?

[zbeyens]

See #305 for custom serialization.

[TASKMASTER682]

Any simple example to deserialize data tha stored in database?

[tungxd96]

For simplicity, I just store the whole object Descendant[] (whatever object is assigned to the value), convert that to byte[] and store in database.