How to use slate-html-serializer - 10 common examples

import EditPrism from "slate-prism";
import EditCode from "slate-edit-code";
import TrailingBlock from "slate-trailing-block";
import EditTable from "slate-edit-table";

import Prism from "prismjs";
import "prismjs/themes/prism.css";

import initialValue from "./initialValue";

// rules
import Html from "slate-html-serializer";
import { DEFAULT_RULES } from "packages/renderer/slate-editor-html";

const html = new Html({ rules: DEFAULT_RULES });
const TabPane = Tabs.TabPane;

import "./style.css";
import "github-markdown-css";

const selectors = [FontSize, LineHeight, LetterSpacing];

const icons = [
  AlignLeft,
  AlignCenter,
  AlignRight,
  Blockquote,
  Bold,
  Clean,
  Code,
  CodeBlock,

if (i !== 0) array.push(<br>);
        // BEGIN CHANGE
        // Replace "a   b c" with "a&nbsp;&nbsp; b c" (to match Gmail's behavior exactly.)
        // In a long run of spaces, all but the last space are converted to &nbsp;.
        // Note: This text is pushed through React's HTML serializer after we're done,
        // so we need to use `\u00A0` which is the unicode character for &nbsp;
        text = text.replace(/([ ]+) /g, (str, match) =&gt; match.replace(/ /g, '\u00A0') + ' ');
        // END CHANGE
        array.push(text);
        return array;
      }, []);
    }
  },
};

const HtmlSerializer = new Html({
  defaultBlock: { type: BLOCK_CONFIG.div.type },
  rules: [].concat(...plugins.filter(p =&gt; p.rules).map(p =&gt; p.rules)).concat([TEXT_RULE_IMPROVED]),
  parseHtml: parseHtml,
});

/* Patch: The HTML Serializer doesn't properly handle nested marks
because when it discovers another mark it fails to call applyMark
on the result. */
HtmlSerializer.deserializeMark = function(mark) {
  const type = mark.type;
  const data = mark.data;

  const applyMark = function applyMark(node) {
    if (node.object === 'mark') {
      // THIS LINE CONTAINS THE CHANGE. +map
      let result = HtmlSerializer.deserializeMark(node);

/** @jsx h */
/* eslint-disable react/jsx-key */

const Html = require('slate-html-serializer').default
const { JSDOM } = require('jsdom') // eslint-disable-line import/no-extraneous-dependencies

const html = new Html({
  parseHtml: JSDOM.fragment,
  rules: [
    {
      deserialize(el, next) {
        switch (el.tagName.toLowerCase()) {
          case 'blockquote':
            return {
              object: 'block',
              type: 'quote',
              nodes: next(el.childNodes),
            }
          case 'p': {
            return {
              object: 'block',
              type: 'paragraph',
              nodes: next(el.childNodes),

/** @jsx h */
/* eslint-disable react/jsx-key */

const Html = require('slate-html-serializer').default
const React = require('react')
const h = require('../../helpers/h')
const { JSDOM } = require('jsdom') // eslint-disable-line import/no-extraneous-dependencies

const html = new Html({
  parseHtml: JSDOM.fragment,
  rules: [
    {
      serialize(obj, children) {
        switch (obj.object) {
          case 'block': {
            switch (obj.type) {
              case 'paragraph':
                return React.createElement('p', {}, children)
              case 'quote':
                return React.createElement('blockquote', {}, children)
            }
          }
          case 'mark': {
            switch (obj.type) {
              case 'bold':

deserialize(el, next) {
      if (el.tagName.toLowerCase() === 'a') {
        return {
          object: 'inline',
          type: 'link',
          nodes: next(el.childNodes),
          data: {
            href: el.getAttribute('href'),
          },
        }
      }
    },
  },
]

const html = new Html({ rules: RULES })

export async function findDoc() {
  const authProvider = JSON.parse(localStorage.getItem('authProvider'));
  if(authProvider === 'uPort') {
    await loadDocs();
    console.log(getGlobal().value);
    let value = getGlobal().value;
    const thisDoc = value.find((doc) => {
      if(typeof doc.id === "string") {
        if(doc.id) {
          if(window.location.href.includes('did:')) {
            return doc.id === window.location.href.split('shared/')[1].split('/')[1].split('#')[0];
          } else {
            return doc.id === window.location.href.split('shared/')[1].split('/')[1].split('#')[0];
          }
        }

}
              case 'italic': {
                return <em>{children}</em>;
              }
              case 'underline': {
                return <u>{children}</u>;
              }
              case 'strikethrough': {
                return <s>{children}</s>;
              }
            }
          }
        },
      },
    ];
    const html = new Html({ rules });
    return value =&gt; html.serialize(value, { render: false });
  }, [props.blocks, props.inlines]);
  let serialized = useMemo(() =&gt; {

deserialize(el, next) {
      if (el.tagName.toLowerCase() === 'a') {
        return {
          object: 'inline',
          type: 'link',
          nodes: next(el.childNodes),
          data: {
            href: el.getAttribute('href'),
          },
        }
      }
    },
  },
]

const html = new Html({ rules: RULES })

class SlateEditor extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      modalOpen: false,
      modalTwoOpen: false,
      showCollab: false,
      uniqueID: "",
      versions: [],
      v: '',
      timelineModal: false,
      timelineTitleOpen: false,
      timelineEventOpen: false
    };
    this.editor = null;

import { UnderlinePlugin, UnderlineButton } from "./plugins/underline";
import { HighlightPlugin, HighlightButton } from "./plugins/highlight";
import { ListPlugin, ListButtonBar } from "./plugins/list";
import { ImageButton, ImagePlugin } from "./plugins/image";
import { LinkPlugin, LinkButton } from "./plugins/link";
import { MarkdownPlugin } from "./plugins/markdown";
import { HeadingsPlugin, HeadingsButton } from "./plugins/headings";
import { LinebreakPlugin, LinebreakButton } from "./plugins/linebreak";
import { BlockquotePlugin, BlockquoteButton } from "./plugins/blockquote";
import PluginPrism from "slate-prism";
import { CodeblockPlugin, CodeblockButton } from "./plugins/codeblock";
import styled from "styled-components";
import { AutoScrollPlugin } from "./plugins/autoscroll";
import scrollToCursor from "./helper/scrollToCursor";

const html = new Html({ rules });

const StyledMenu = styled(TextMenu)`
  padding: 8px 7px 6px;
  position: absolute;
  z-index: 1;
  top: -10000px;
  left: -10000px;
  margin-top: -6px;
  opacity: 0;
  background-color: var(--bg-sections);
  border-radius: 4px;
  transition: opacity 0.75s;

  > * + * {
    margin-left: 8px;
  }

import Html from "slate-html-serializer"

import {RULES_DESERIALIZE} from "../constants/rules-deserialize"

export const html = new Html({rules: RULES_DESERIALIZE})