dtable-ui-component 0.1.61 → 0.1.65

package/es/utils/slate2markdown/deserialize.js

@@ -0,0 +1,645 @@
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import { Value, Document, Block, Inline, Text, Mark, Leaf } from 'slate';
+
+var unified = require('./unified');
+
+var markdown = require('remark-parse');
+
+var definitions = require('mdast-util-definitions');
+
+var processor = unified().use(markdown, {
+  commonmark: true
+}); // transform code value: a function used to tranform code value of markdown format to slate document
+
+function mdCodeNodeToSlate(codeValue) {
+  // statement an array : filled width code value splited by '\n'
+  var codeValueArr = codeValue.split('\n');
+  var slateTextObj, slateBlockObj; // map codeValueArr item to slate document 'code_line'
+
+  var slate_code_arr = codeValueArr.map(function (text) {
+    // transform string to slateText object
+    slateTextObj = Text.create({
+      text: text
+    }); // transform slateText to Block object
+
+    slateBlockObj = Block.create({
+      nodes: [slateTextObj],
+      type: 'code_line'
+    });
+    return slateBlockObj;
+  });
+  return slate_code_arr;
+} // deserialize mdTable to SlateNode
+
+
+function mdTableToSlateTable(tableNode, opts) {
+  // get align array
+  var tableAlignArr = tableNode.align; // get all table_rows, return：array
+
+  var tableRows = tableNode.children; // slate table_row Node into it
+
+  var tableRowsArr = []; // traverse table_rows
+
+  for (var rowIndex = 0; rowIndex < tableRows.length; rowIndex++) {
+    // slate table_cell Node into it
+    var tableCellsArr = [];
+    /*
+    * traverse every table_cells of an table_rows,
+    * the length of every table_rows is equal to tableAlign array
+    * */
+
+    for (var columnsIndex = 0; columnsIndex < tableAlignArr.length; columnsIndex++) {
+      // get table_cell and tranlate it to slate Node: table_cell
+      var tableCell = tableRows[rowIndex].children[columnsIndex];
+
+      if (!tableCell) {
+        tableCell = {
+          type: 'tableCell',
+          children: [{
+            type: 'text',
+            value: ''
+          }]
+        };
+      }
+
+      var children = parseChildren(tableCell, opts);
+      tableCell = Block.create({
+        type: 'table_cell',
+        nodes: [Block.create({
+          type: 'paragraph',
+          nodes: children
+        })],
+        data: {
+          align: tableAlignArr[columnsIndex]
+        }
+      });
+      tableCellsArr.push(tableCell);
+    } // push add table_rows into tableRowsArr
+
+
+    tableRowsArr.push(Block.create({
+      type: 'table_row',
+      nodes: tableCellsArr
+    }));
+  }
+
+  return tableRowsArr;
+}
+
+function mdImageToSlate(node, opts) {
+  var _DOMParser$parseFromS = new DOMParser().parseFromString(node.value, 'text/html'),
+      body = _DOMParser$parseFromS.body;
+
+  var img = body.firstChild;
+  var data = {};
+  data['src'] = img.getAttribute('src');
+
+  if (!isNaN(img.getAttribute('width')) && img.getAttribute('width') > 0) {
+    data['width'] = img.getAttribute('width');
+  }
+
+  if (!isNaN(img.getAttribute('height')) && img.getAttribute('height') > 0) {
+    data['height'] = img.getAttribute('height');
+  }
+
+  if (img.getAttribute('alt')) {
+    data['alt'] = img.getAttribute('alt');
+  }
+
+  if (img.getAttribute('title')) {
+    data['title'] = img.getAttribute('title');
+  }
+
+  if (data['src']) {
+    return Inline.create({
+      type: 'image',
+      data: data
+    });
+  }
+}
+
+function _applyMark(childNodeOrNodes, mark) {
+  if (childNodeOrNodes instanceof Array) {
+    return childNodeOrNodes.map(function (item) {
+      return _applyMark(item, mark);
+    });
+  } else if (childNodeOrNodes.object == 'text') {
+    var length = childNodeOrNodes.text.length;
+    return childNodeOrNodes.addMark(0, length, mark);
+  } else {
+    return childNodeOrNodes;
+  }
+}
+
+function addChildNodeOrNodes(children, childNodeOrNodes) {
+  if (childNodeOrNodes instanceof Array) {
+    childNodeOrNodes.map(function (item) {
+      return children.push(item);
+    });
+  } else {
+    if (childNodeOrNodes !== undefined) children.push(childNodeOrNodes);
+  }
+}
+/*
+ parse a mark node.
+ Always return an array.
+
+ Example
+     *fdsfd __fdsf__ fdf*
+*/
+
+
+function parseMark(node, markString, opts) {
+  var mark = Mark.create({
+    type: markString
+  });
+  var children = [];
+
+  var _iterator = _createForOfIteratorHelper(node.children),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var child = _step.value;
+
+      var childNodeOrNodes = _nodeToSlate(child, opts);
+
+      childNodeOrNodes = _applyMark(childNodeOrNodes, mark);
+      addChildNodeOrNodes(children, childNodeOrNodes);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  return children;
+}
+
+function parseChildren(node, opts) {
+  var children = [];
+
+  var _iterator2 = _createForOfIteratorHelper(node.children),
+      _step2;
+
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var child = _step2.value;
+
+      var ret = _nodeToSlate(child, opts);
+
+      addChildNodeOrNodes(children, ret);
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+
+  return children;
+}
+
+function _nodeToSlate(node, opts) {
+  var children = [];
+  var mark;
+  var definition = opts.definition;
+
+  switch (node.type) {
+    case 'heading':
+      var header_string;
+      children = parseChildren(node, opts);
+
+      switch (node.depth) {
+        case 1:
+          header_string = 'header_one';
+          break;
+
+        case 2:
+          header_string = 'header_two';
+          break;
+
+        case 3:
+          header_string = 'header_three';
+          break;
+
+        case 4:
+          header_string = 'header_four';
+          break;
+
+        case 5:
+          header_string = 'header_five';
+          break;
+
+        case 6:
+          header_string = 'header_six';
+          break;
+
+        default:
+          console.log('Invalid depth: ' + node.depth);
+          header_string = 'header_one';
+          break;
+      }
+
+      return Block.create({
+        type: header_string,
+        nodes: children
+      });
+
+    case 'paragraph':
+      children = parseChildren(node, opts);
+      return Block.create({
+        type: 'paragraph',
+        nodes: children
+      });
+
+    case 'blockquote':
+      children = parseChildren(node, opts);
+      return Block.create({
+        type: 'blockquote',
+        nodes: children
+      });
+
+    case 'list':
+      opts.loose = node.loose;
+      children = parseChildren(node, opts);
+
+      if (node.ordered) {
+        return Block.create({
+          type: 'ordered_list',
+          nodes: children
+        });
+      } else {
+        return Block.create({
+          type: 'unordered_list',
+          nodes: children
+        });
+      }
+
+    case 'listItem':
+      children = parseChildren(node, opts);
+
+      if (children.length === 0) {
+        /** 
+         * if children is an empty array push an empy paragaph to it
+        */
+        children.push(Block.create({
+          type: 'paragraph',
+          nodes: [Text.create('')]
+        }));
+      }
+
+      var data = {};
+
+      if (node.checked !== null) {
+        data.checked = node.checked;
+      }
+
+      return Block.create({
+        type: 'list_item',
+        data: data,
+        nodes: children
+      });
+
+    case 'code':
+      var data = {};
+
+      if (node.lang) {
+        data.syntax = node.lang;
+      }
+
+      var slate_code_arr = mdCodeNodeToSlate(node.value);
+      return Block.create({
+        type: 'code_block',
+        data: data,
+        nodes: slate_code_arr
+      });
+
+    case 'strong':
+      return parseMark(node, 'BOLD', opts);
+
+    case 'emphasis':
+      return parseMark(node, 'ITALIC', opts);
+
+    case 'inlineCode':
+      // Inline code need to be handled differently
+      var mark = Mark.create({
+        type: 'CODE'
+      });
+      return Text.create({
+        text: node.value,
+        marks: [mark]
+      });
+
+    case 'text':
+      // A plain text in markdown
+      // text is the botton node in Markdown AST
+      return Text.create({
+        text: node.value
+      });
+
+    case 'break':
+      return Text.create({
+        text: '\n'
+      });
+
+    case 'thematicBreak':
+      return Block.create({
+        type: 'hr'
+      });
+
+    case 'table':
+      // get all children of table by mdTableToSlateTable
+      children = mdTableToSlateTable(node, opts);
+      return Block.create({
+        type: 'table',
+        nodes: children,
+        data: {
+          align: node.align
+        }
+      });
+
+    case 'html':
+      if (node.value.slice(0, 4).toLowerCase() === '<img') {
+        return mdImageToSlate(node, opts);
+      } else {
+        var child = Text.create({
+          text: ''
+        });
+        children.push(child);
+        return Inline.create({
+          type: 'html_block',
+          data: {
+            html: node.value
+          },
+          nodes: children
+        });
+      }
+
+    case 'link':
+      children = parseChildren(node, opts);
+      var data = {
+        href: node.url
+      };
+
+      if (node.title) {
+        data.title = node.title;
+      }
+
+      return Inline.create({
+        type: 'link',
+        data: data,
+        nodes: children
+      });
+
+    case 'image':
+      var data = {
+        src: node.url
+      };
+
+      if (node.title) {
+        data.title = node.title;
+      }
+
+      if (node.alt) {
+        data.alt = node.alt;
+      }
+
+      if (node.width) {
+        data.width = node.width;
+      }
+
+      if (node.height) {
+        data.height = node.height;
+      }
+
+      return Inline.create({
+        type: 'image',
+        data: data
+      });
+
+    case 'linkReference':
+      children = parseChildren(node, opts);
+      var def = definition(node.identifier);
+      var data = {};
+
+      if (def) {
+        data.href = def.url;
+
+        if (def.title) {
+          data.title = def.title;
+        }
+
+        return Inline.create({
+          type: 'link',
+          data: data,
+          nodes: children
+        });
+      } else {
+        return Text.create({
+          text: '[' + node.identifier + ']'
+        });
+      }
+
+    case 'imageReference':
+      var def = definition(node.identifier);
+      var data = {};
+
+      if (def) {
+        data.src = def.url;
+
+        if (def.title) {
+          data.title = def.title;
+        }
+
+        if (node.alt) {
+          data.alt = node.alt;
+        }
+
+        return Inline.create({
+          type: 'image',
+          data: data
+        });
+      } else {
+        return Text.create({
+          text: '![' + node.alt + ']'
+        });
+      }
+
+    case 'definition':
+      return;
+
+    default:
+      console.log('unrecognized type: ' + node.type);
+      return;
+  }
+}
+
+function fixValue(nodes) {
+  var c = [];
+
+  var _iterator3 = _createForOfIteratorHelper(nodes),
+      _step3;
+
+  try {
+    for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+      var node = _step3.value;
+
+      if (node.object === 'inline') {
+        if (node.type === 'image') {
+          var data = {};
+          data['src'] = node.data.get('src');
+          data['width'] = node.data.get('width') || null;
+          data['height'] = node.data.get('height') || null;
+
+          if (node.data.get('alt')) {
+            data['alt'] = node.data.get('alt');
+          }
+
+          if (node.data.get('title')) {
+            data['title'] = node.data.get('title');
+          }
+
+          var nodeNew = Block.create({
+            type: 'paragraph',
+            nodes: [Text.create(''), Inline.create({
+              type: 'image',
+              data: data
+            }), Text.create('')]
+          });
+          c.push(nodeNew);
+        } else {
+          c.push(node);
+        }
+      } else if (node.object === 'block') {
+        if (node.type === 'html_block') {
+          // convert from inline to block
+          node = Block.create({
+            type: 'html_block',
+            data: {
+              html: node.get('data').get('html')
+            },
+            nodes: node.nodes
+          });
+          c.push(node);
+        } else if (node.type === 'code_block') {
+          c.push(node);
+        } else if (node.type === 'paragraph') {
+          (function () {
+            var nodes = [];
+            var textLeaves = [];
+
+            if (node.nodes.size === 0) {
+              nodes.push(Text.create(''));
+            } else {
+              node.nodes.forEach(function (node, index, nodesList) {
+                if (node.object === 'text') {
+                  textLeaves.push(Leaf.create({
+                    text: node.text,
+                    marks: node.leaves.get(0).get('marks')
+                  }));
+
+                  if (index === nodesList.size - 1) {
+                    nodes.push(Text.create({
+                      leaves: textLeaves
+                    }));
+                    textLeaves = [];
+                  }
+                } else {
+                  nodes.push(Text.create({
+                    leaves: textLeaves
+                  }));
+                  textLeaves = [];
+                  var nextNode = nodesList.get(index + 1);
+                  nodes.push(node);
+
+                  if (!nextNode || nextNode.object !== 'text') {
+                    nodes.push(Text.create(''));
+                  }
+                }
+              });
+            }
+
+            c.push(Block.create({
+              type: 'paragraph',
+              nodes: nodes
+            }));
+          })();
+        } else {
+          var newNodes = fixValue(node.nodes);
+          c.push(Block.create({
+            type: node.type,
+            nodes: newNodes,
+            data: node.data
+          }));
+        }
+      } else if (node.object === 'text') {
+        c.push(node);
+      }
+    }
+  } catch (err) {
+    _iterator3.e(err);
+  } finally {
+    _iterator3.f();
+  }
+
+  return c;
+}
+
+function deserialize(content) {
+  var root = processor.parse(content);
+  var definition = definitions(root);
+  var nodes = [];
+
+  var _iterator4 = _createForOfIteratorHelper(root.children),
+      _step4;
+
+  try {
+    for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+      var _child = _step4.value;
+      addChildNodeOrNodes(nodes, _nodeToSlate(_child, {
+        definition: definition
+      }));
+    }
+  } catch (err) {
+    _iterator4.e(err);
+  } finally {
+    _iterator4.f();
+  }
+
+  if (nodes.length === 0) {
+    // add default paragraph
+    var child = Text.create({
+      text: ''
+    });
+    var node = Block.create({
+      type: 'paragraph',
+      nodes: [child]
+    });
+    nodes.push(node);
+  } // handle image and html_block
+
+
+  var c;
+  c = fixValue(nodes);
+  var firstBlockType = c[0].type;
+
+  if (firstBlockType === 'table' || firstBlockType === 'code_block' || firstBlockType === 'blockquote') {
+    c.unshift(Block.create({
+      type: 'paragraph',
+      nodes: [Text.create('')]
+    }));
+  }
+
+  var document = Document.create({
+    nodes: c
+  }); // normalize will cost a lot time, for 40K document, it costs 1.5 seconds
+
+  var value = Value.create({
+    document: document
+  }, {
+    normalize: false
+  });
+  return value;
+}
+
+export { deserialize };

package/es/utils/slate2markdown/index.js

@@ -0,0 +1,4 @@
+import { serialize } from './serialize';
+import { deserialize } from './deserialize';
+import { processor, processorGetAST } from './markdown2html';
+export { serialize, deserialize, processor, processorGetAST };

package/es/utils/slate2markdown/markdown2html.js

@@ -0,0 +1,43 @@
+import gh from 'hast-util-sanitize/lib/github.json';
+import unified from './unified';
+import markdown from 'remark-parse';
+import slug from 'remark-slug';
+import breaks from 'remark-breaks';
+import remark2rehype from 'remark-rehype';
+import format from 'rehype-format';
+import raw from 'rehype-raw';
+import xtend from 'xtend';
+import toHTML from 'hast-util-to-html';
+import sanitize from 'hast-util-sanitize';
+import deepmerge from 'deepmerge';
+
+function stringify(config) {
+  var settings = xtend(config, this.data('settings'));
+  var schema = deepmerge(gh, {
+    'attributes': {
+      'input': ['type'],
+      'li': ['className'],
+      'code': ['className']
+    },
+    'tagNames': ['input', 'code']
+  });
+  this.Compiler = compiler;
+
+  function compiler(tree) {
+    // use sanity to remove dangerous html, the default is
+    // GitHub style sanitation
+    var hast = sanitize(tree, schema);
+    return toHTML(hast, settings);
+  }
+} // markdown -> mdast -> html AST -> html
+
+
+var processor = unified().use(markdown, {
+  commonmark: true
+}).use(breaks).use(slug).use(remark2rehype, {
+  allowDangerousHTML: true
+}).use(raw).use(format).use(stringify);
+var processorGetAST = unified().use(markdown, {
+  commonmark: true
+}).use(slug);
+export { processor, processorGetAST };