Serialize HTML

[eivindw]

Thanks for a great set of plugins! This project might replace a lot of stuff for us :)

We have an editor which needs to serialize to HTML. Is there a quick way to make these plugins do that serialization? Seems to me the renderLeaf/renderElement functions could be made to do the trick - but I haven't quite found out a good and clean way to do it. Something like the deserialize function in the paste-html plugin - except going the other way. A general serialize using a list of plugins to create HTML output from the editor value.

Hope it's ok for me to ask here. Been spending some time without quite finding a good solution. Thought maybe you would be able to answer this one.

[zbeyens]

Thanks for the feedback!

Indeed, we can create a serialize-html plugin exporting a serialize(plugins) function, where any plugin can have a serialize option. I suppose it would be mainly used in onChange.

[spetex]

Hi guys, any progress on this feature? This is an essential requirement in our project.

I will be happy for anything now, thought, idea, example.

[spetex]

My idea is a function that recursively parses the Slate json format. For each item in an array it will try to find a corresponding plugin based on the name of the mark. If successful it will call the renderLeaf function. If children are present it will recursively call itself and place the result in between the current html tags. The return of the function will be string (html).

I will try to write a prototype over the weekend so we can discuss this over an actual code.

[zbeyens]

Someone sent me this piece of code, it may be a good starting point. Next step would be to add a serialize field in the SlatePlugin interface for SoC, and use them in htmlSerialize 🙂

const getNode = ({ element, children }) => {
  switch (element.type) {
    case BLOCKQUOTE:
      // the plugin may have an optional parameter for the wrapping tag, default to blockquote
      return `<blockquote>${children}</blockquote>`;
    case PARAGRAPH:
      return `<p>${children}</p>`;
    case LINK:
      return `<a href="${escapeHtml(element.url)}">${children}</a>`;
    case HeadingType.h1:
      return `<h1>${children}</h1>`;
    case HeadingType.h2:
      return `<h2>${children}</h2>`;
    case ListType.OL:
      return `<ol>${children}</ol>`;
    case ListType.UL:
      return `<ul>${children}</ul>`;
    case ListType.LI:
      return `<li>${children}</li>`;
    case TableType.TABLE:
      return `<table>${children}</table>`;
    case TableType.TR:
      return `<tr>${children}</tr>`;
    case TableType.TD:
      return `<td>${children}</td>`;
    case IMAGE:
      return `<img src="${escapeHtml(element.url)}">${children}</img>`;
    default:
      return children;
  }
};

const getLeaf = ({ leaf, children }) => {
  let newChildren = children;
  if (leaf[MARK_BOLD]) {
    newChildren = `<strong>${newChildren}</strong>`;
  }
  if (leaf[MARK_ITALIC]) {
    newChildren = `<i>${newChildren}</i>`;
  }
  if (leaf[MARK_UNDERLINE]) {
    newChildren = `<u>${newChildren}</u>`;
  }
  return newChildren;
};

// should iterate over the plugins, see htmlDeserialize
export const htmlSerialize = (nodes) =>
  nodes
    .map((node) => {
      if (Text.isText(node)) {
        return getLeaf({ leaf: node, children: node.text });
      }
      return getNode({ element: node, children: serialize(node.children) });
    })
    .join("");

(credits to Essam, thanks again!)