html-to-slate.js

import { jsx } from "slate-hyperscript";

export const deserialize = el => {
  const TEXT_TAGS = {
    CODE: () => ({ code: true }),
    DEL: () => ({ strikethrough: true }),
    EM: () => ({ italic: true }),
    I: () => ({ italic: true }),
    S: () => ({ strikethrough: true }),
    STRONG: () => ({ bold: true }),
    U: () => ({ underlined: true })
  };
  const ELEMENT_TAGS = {
    P: () => ({ type: "paragraph" }),
    H1: () => ({ type: "heading-one" }),
    H2: () => ({ type: "heading-two" }),
    BLOCKQUOTE: () => ({ type: "quote" }),
    LI: () => ({ type: "list-item" }),
    OL: () => ({ type: "numbered-list" }),
    UL: () => ({ type: "bulleted-list" }),
    LINK: el => ({ type: "link", url: el.getAttribute("href") }),
    IMG: el => ({ type: "image", url: el.getAttribute("src") })
  };

  if (el.nodeType === 3) {
    return el.textContent;
  }
  if (el.nodeType !== 1) {
    return null;
  }
  if (el.nodeName === "BR") {
    return "\n";
  }

  const { nodeName } = el;
  let parent = el;

  if (
    nodeName === "PRE" &&
    el.childNodes[0] &&
    el.childNodes[0].nodeName === "CODE"
  ) {
    [ parent ] = el.childNodes;
  }

  const children = Array.from(parent.childNodes).map(deserialize).flat();

  if (el.nodeName === "BODY") {
    return jsx("fragment", children);
  }

  if (ELEMENT_TAGS[nodeName]) {
    const attrs = ELEMENT_TAGS[nodeName](el);

    return jsx(
      "element",
      attrs,
      children.length > 0 ? children : [ { text: "" } ]
    );
  }

  if (TEXT_TAGS[nodeName]) {
    const attrs = TEXT_TAGS[nodeName](el);
    return children.map(child => jsx("text", attrs, child));
  }

  return children.length > 0 ? children : [ { text: "" } ];
};