@jswork/next-slate-deserialize

Deserializing html to slate nodes.

Usage no npm install needed!

<script type="module">
  import jsworkNextSlateDeserialize from 'https://cdn.skypack.dev/@jswork/next-slate-deserialize';
</script>

README

next-slate-deserialize

Deserializing html to slate nodes.

version license size download

installation

npm install -S @jswork/next-slate-deserialize

apis

api params description
parse - Parse html to slate nodes.

usage

import NxSlateDeserialize from '@jswork/next-slate-deserialize';

const process = (el, children) => {
  switch (el.nodeName) {
    case 'BODY':
      return jsx('fragment', {}, children);
    case 'BR':
      return '\n';
    case 'BLOCKQUOTE':
      return jsx('element', { type: 'quote' }, children);
    case 'P':
      return jsx('element', { type: 'paragraph' }, children);
    case 'A':
      return jsx('element', { type: 'link', url: el.getAttribute('href') }, children);
    default:
      return el.textContent;
  }
};

const html = `<p>An opening paragraph with a <a href="https://example.com">link</a> in it.</p><blockquote><p>A wise quote.</p></blockquote><p>A closing paragraph!</p>`;

const nodes = NxSlateDeserialize.parse(html, { process });

/*
[
  {
    type: 'paragraph',
    children: [
      { text: 'An opening paragraph with a ' },
      {
        type: 'link',
        url: 'https://example.com',
        children: [{ text: 'link' }]
      },
      { text: ' in it.' }
    ]
  },
  {
    type: 'quote',
    children: [
      {
        type: 'paragraph',
        children: [{ text: 'A wise quote.' }]
      }
    ]
  },
  {
    type: 'paragraph',
    children: [{ text: 'A closing paragraph!' }]
  }
]
*/

license

Code released under the MIT license.