wix-style-react/dist/es/src/RichTextArea/htmlSerializer.js

wix-style-react

import React from 'react';
import { Html } from 'slate';

var BLOCK_TAGS = {
  p: 'paragraph',
  ul: 'unordered-list',
  li: 'list-item',
  ol: 'ordered-list',
  img: 'image'
};

var MARK_TAGS = {
  em: 'italic',
  strong: 'bold',
  u: 'underline'
};

var INLINE_TAGS = {
  a: 'link'
};

var rules = [{
  deserialize: function deserialize(el, next) {
    var type = BLOCK_TAGS[el.tagName];
    if (!type) {
      return;
    }

    var data = {};
    switch (type) {
      case 'image':
        {
          data.src = el.attribs.src;
          break;
        }
      default:
        break;
    }

    return {
      kind: 'block',
      type: type,
      data: data,
      nodes: next(el.children)
    };
  },
  serialize: function serialize(object, children) {
    if (object.kind !== 'block') {
      return;
    }

    switch (object.type) {
      case 'paragraph':
        return React.createElement(
          'p',
          null,
          children
        );
      case 'list-item':
        return React.createElement(
          'li',
          null,
          children
        );
      case 'ordered-list':
        return React.createElement(
          'ol',
          null,
          children
        );
      case 'unordered-list':
        return React.createElement(
          'ul',
          null,
          children
        ); //data-hook="editor-image"
      case 'image':
        return React.createElement('img', { 'data-hook': 'editor-image', src: object.data.get('src') });
      default:
        return { children: children };
    }
  }
}, {
  deserialize: function deserialize(el, next) {
    var type = MARK_TAGS[el.tagName];
    if (!type) {
      return;
    }

    return {
      kind: 'mark',
      type: type,
      nodes: next(el.children)
    };
  },
  serialize: function serialize(object, children) {
    if (object.kind !== 'mark') {
      return;
    }

    switch (object.type) {
      case 'bold':
        return React.createElement(
          'strong',
          null,
          children
        );
      case 'italic':
        return React.createElement(
          'em',
          null,
          children
        );
      case 'underline':
        return React.createElement(
          'u',
          null,
          children
        );
      default:
        return { children: children };
    }
  }
}, {
  deserialize: function deserialize(el, next) {
    var type = INLINE_TAGS[el.tagName];
    if (!type) {
      return;
    }

    return {
      kind: 'inline',
      type: type,
      data: {
        href: el.attribs.href
      },
      nodes: next(el.children)
    };
  },
  serialize: function serialize(object, children) {
    if (object.kind !== 'inline') {
      return;
    }

    switch (object.type) {
      case 'link':
        return React.createElement(
          'a',
          {
            rel: 'noopener noreferrer',
            target: '_blank',
            href: object.data.get('href')
          },
          children
        );
      default:
        return { children: children };
    }
  }
}];

export default new Html({ rules: rules });