// 富文本编辑器插件
import React from 'react';
import BraftEditor from 'braft-editor';
import MaxLength from 'braft-extensions/dist/max-length'; // 最大输入长度限制
import CodeHighlighter from 'braft-extensions/dist/code-highlighter'; // 代码高亮
import 'braft-extensions/dist/code-highlighter.css';

// 可选字段标签
var entityTags = {
  // 指定扩展类型
  type: 'entity',
  // 指定扩展的entity名称，推荐使用全部大写，内部也会将小写转换为大写
  name: 'KEYWORD-ITEM',
  // 在编辑器工具栏中增加一个控制按钮，点击时会将所选文字转换为该entity
  // control: {
  //     text: '标签'
  // },
  // 指定entity的mutability属性，可选值为MUTABLE和IMMUTABLE，表明该entity是否可编辑，默认为MUTABLE
  mutability: 'IMMUTABLE',
  // 指定通过上面新增的按钮创建entity时的默认附加数据
  // data: {},
  // 指定entity在编辑器中的渲染组件
  component: function component(props) {
    return /*#__PURE__*/React.createElement("span", {
      className: "keyword-item",
      contentEditable: false
    }, props.children);
  },
  // 指定html转换为editorState时，何种规则的内容将会转换成该entity
  importer: function importer(nodeName, node) {
    // source属性表明输入来源，可能值为create、paste或undefined
    // console.log(node)
    if (nodeName.toLowerCase() === 'span' && node.classList && node.classList.contains('keyword-item')) {
      // 此处可以返回true或者一个包含mutability和data属性的对象
      return {
        mutability: 'IMMUTABLE',
        data: {}
      };
    }
    return;
  },
  // 指定输出该entity在输出的html中的呈现方式
  exporter: function exporter(entityObject, originalText) {
    // 注意此处的entityObject并不是一个entity实例，而是一个包含type、mutability和data属性的对象
    return /*#__PURE__*/React.createElement("span", {
      className: "keyword-item"
    }, originalText);
  }
};
BraftEditor.use([MaxLength({}), CodeHighlighter({
  syntaxs: [{
    name: 'CODE',
    syntax: 'javascript'
  }]
}), entityTags]);