@seafile/seafile-editor 0.3.76

package/dist/utils/slate2markdown/serialize.js

@@ -0,0 +1,407 @@
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import { Text, Node } from 'slate';
+import { isEmptyParagraph } from '../utils';
+
+var unified = require('../../lib/unified');
+
+var stringify = require('remark-stringify');
+
+var math = require('remark-math/block');
+
+var processor = unified().use(stringify, {
+  rule: '-',
+  ruleSpaces: false,
+  listItemIndent: 1,
+  bullet: '*',
+  commonmark: true,
+  fences: true
+}).use(math);
+
+function _applyMark(node, markString) {
+  switch (markString) {
+    case 'BOLD':
+      return {
+        type: 'strong',
+        children: [node]
+      };
+
+    case 'ITALIC':
+      return {
+        type: 'emphasis',
+        children: [node]
+      };
+
+    case 'CODE':
+      return {
+        type: 'inlineCode',
+        value: node.value
+      };
+
+    default:
+      console.log('unknown mark string: ' + markString);
+      return node;
+  }
+}
+
+function _text2MdNodes(node) {
+  var mdNode = {};
+  var textKeys = Object.keys(node);
+  var marks = [];
+  textKeys.forEach(function (key) {
+    if (node[key] && key !== 'text') marks.push(key);
+  });
+
+  if (marks.length === 0) {
+    mdNode = {
+      type: 'text',
+      value: node.text
+    };
+  } else {
+    mdNode = {
+      type: 'text',
+      value: node.text
+    };
+
+    var _iterator = _createForOfIteratorHelper(marks),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var mark = _step.value;
+        mdNode = _applyMark(mdNode, mark);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  }
+
+  return mdNode;
+}
+
+function _image2MdNode(node) {
+  if (node.data.height || node.data.width) {
+    var text = '<img ';
+
+    for (var key in node.data) {
+      text = text + key + '="' + node.data[key] + '" ';
+    }
+
+    text += '/>';
+    return [{
+      type: 'html',
+      value: text
+    }];
+  } else {
+    return {
+      type: 'image',
+      url: node.data.src,
+      alt: node.data.alt ? node.data.alt : null,
+      title: node.data.title ? node.data.title : null
+    };
+  }
+}
+
+function getTableAlignments(node) {
+  var alignments = [];
+  node.children[0].children.forEach(function (cell) {
+    var alignment = cell.data ? cell.data.align : 'left';
+    alignments.push(alignment);
+  });
+  return alignments;
+}
+
+function addChildNodeOrNodes(children, childNodeOrNodes) {
+  if (childNodeOrNodes instanceof Array) {
+    childNodeOrNodes.map(function (item) {
+      return children.push(item);
+    });
+  } else {
+    if (childNodeOrNodes !== undefined) children.push(childNodeOrNodes);
+  }
+}
+
+function parseChildren(node) {
+  var children = [];
+
+  var _iterator2 = _createForOfIteratorHelper(node.children),
+      _step2;
+
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var child = _step2.value;
+
+      var ret = _slateNodeToMD(child);
+
+      addChildNodeOrNodes(children, ret);
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+
+  return children;
+}
+
+function _slateNodeToMD(node) {
+  if (!Text.isText(node)) {
+    var mdNodes;
+
+    switch (node.type) {
+      case 'paragraph':
+        mdNodes = parseChildren(node);
+        return {
+          type: 'paragraph',
+          children: mdNodes
+        };
+
+      case 'header_one':
+        mdNodes = parseChildren(node);
+        return {
+          type: 'heading',
+          depth: 1,
+          children: mdNodes
+        };
+
+      case 'header_two':
+        mdNodes = parseChildren(node);
+        return {
+          type: 'heading',
+          depth: 2,
+          children: mdNodes
+        };
+
+      case 'header_three':
+        mdNodes = parseChildren(node);
+        return {
+          type: 'heading',
+          depth: 3,
+          children: mdNodes
+        };
+
+      case 'header_four':
+        mdNodes = parseChildren(node);
+        return {
+          type: 'heading',
+          depth: 4,
+          children: mdNodes
+        };
+
+      case 'header_five':
+        mdNodes = parseChildren(node);
+        return {
+          type: 'heading',
+          depth: 5,
+          children: mdNodes
+        };
+
+      case 'header_six':
+        mdNodes = parseChildren(node);
+        return {
+          type: 'heading',
+          depth: 6,
+          children: mdNodes
+        };
+
+      case 'hr':
+        return {
+          type: 'thematicBreak'
+        };
+
+      case 'ordered_list':
+        mdNodes = parseChildren(node);
+        var loose = false;
+
+        var _iterator3 = _createForOfIteratorHelper(mdNodes),
+            _step3;
+
+        try {
+          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+            var _node = _step3.value;
+
+            if (_node.loose === true) {
+              loose = true;
+              break;
+            }
+          }
+        } catch (err) {
+          _iterator3.e(err);
+        } finally {
+          _iterator3.f();
+        }
+
+        return {
+          type: 'list',
+          ordered: true,
+          start: 1,
+          loose: loose,
+          children: mdNodes
+        };
+
+      case 'unordered_list':
+        mdNodes = parseChildren(node);
+        var loose = false;
+
+        var _iterator4 = _createForOfIteratorHelper(mdNodes),
+            _step4;
+
+        try {
+          for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+            var _node2 = _step4.value;
+
+            if (_node2.loose === true) {
+              loose = true;
+              break;
+            }
+          }
+        } catch (err) {
+          _iterator4.e(err);
+        } finally {
+          _iterator4.f();
+        }
+
+        return {
+          type: 'list',
+          ordered: false,
+          start: 1,
+          loose: loose,
+          children: mdNodes
+        };
+
+      case 'list_item':
+        mdNodes = parseChildren(node);
+        var loose = false;
+
+        if (mdNodes) {
+          if (mdNodes.length === 1) {
+            loose = false;
+          } else if (mdNodes.length === 2 && mdNodes[1].type === 'list') {
+            loose = false;
+          } else {
+            loose = true;
+          }
+        }
+
+        return {
+          type: 'listItem',
+          loose: loose,
+          checked: node.data.checked !== undefined ? node.data.checked : null,
+          children: mdNodes
+        };
+
+      case 'code_block':
+        mdNodes = parseChildren(node);
+        return {
+          type: 'code',
+          lang: node.data.syntax ? node.data.syntax : null,
+          value: mdNodes.join('')
+        };
+
+      case 'code_line':
+        return Node.text(node) + '\n';
+
+      case 'table':
+        mdNodes = parseChildren(node);
+        return {
+          type: 'table',
+          align: getTableAlignments(node),
+          children: mdNodes
+        };
+
+      case 'table_row':
+        mdNodes = parseChildren(node);
+        return {
+          type: 'tableRow',
+          children: mdNodes
+        };
+
+      case 'table_cell':
+        mdNodes = parseChildren(node);
+        return {
+          type: 'tableCell',
+          children: mdNodes
+        };
+
+      case 'blockquote':
+        mdNodes = parseChildren(node);
+        return {
+          type: 'blockquote',
+          children: mdNodes
+        };
+
+      case 'html_block':
+        return {
+          type: 'html',
+          value: node.data.html
+        };
+
+      case 'image':
+        return _image2MdNode(node);
+
+      case 'link':
+        mdNodes = parseChildren(node);
+        return {
+          type: 'link',
+          url: node.data.href,
+          title: node.data.title ? node.data.title : null,
+          children: mdNodes
+        };
+
+      case 'formula':
+        var data = node.data;
+        return {
+          type: 'math',
+          value: data.formula
+        };
+
+      default:
+        // turn the block to paragraph default when it`s type is unknown
+        mdNodes = parseChildren(node);
+        return {
+          type: 'paragraph',
+          children: mdNodes
+        };
+    }
+  } else if (Text.isText(node)) {
+    return _text2MdNodes(node);
+  }
+}
+/**
+ * @param value : a JSON object of editor value
+ * @returns markdownContent
+ */
+
+
+function serialize(value) {
+  // Return an empty string when the article only has an empty paragraph
+  if (value.length === 1 && isEmptyParagraph(value[0])) {
+    return '';
+  }
+
+  var children = [];
+
+  var _iterator5 = _createForOfIteratorHelper(value),
+      _step5;
+
+  try {
+    for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+      var child = _step5.value;
+      addChildNodeOrNodes(children, _slateNodeToMD(child));
+    }
+  } catch (err) {
+    _iterator5.e(err);
+  } finally {
+    _iterator5.f();
+  }
+
+  var root = {
+    type: 'root',
+    children: children
+  };
+  var content = processor.stringify(root);
+  return content;
+}
+
+export { serialize };

package/dist/utils/utils.js

@@ -0,0 +1,28 @@
+import { Node, Text } from 'slate';
+export var Utils = {
+  pathNormalize: function pathNormalize(originalPath) {
+    var oldPath = originalPath.split('/');
+    var newPath = [];
+
+    for (var i = 0; i < oldPath.length; i++) {
+      if (oldPath[i] === '.' || oldPath[i] === '') {
+        continue;
+      } else if (oldPath[i] === '..') {
+        newPath.pop();
+      } else {
+        newPath.push(oldPath[i]);
+      }
+    }
+
+    return newPath.join('/');
+  }
+};
+export var isEmptyParagraph = function isEmptyParagraph(node) {
+  if (node.type !== 'paragraph') return false;
+
+  if (node.children.length === 1 && Text.isText(node.children[0]) && Node.text(node).length === 0) {
+    return true;
+  }
+
+  return false;
+};

package/dist/viewer/diff-viewer.js

@@ -0,0 +1,98 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import { SlateDiff } from '../utils/diff';
+import { renderNode, renderLeaf } from '../utils/render-slate';
+import SlateViewer from '../viewer/slate-viewer';
+import LoadScript from '../editor/load-script';
+import '../css/diff-viewer.css';
+
+var DiffViewer = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(DiffViewer, _React$PureComponent);
+
+  var _super = _createSuper(DiffViewer);
+
+  function DiffViewer(_props) {
+    var _this;
+
+    _classCallCheck(this, DiffViewer);
+
+    _this = _super.call(this, _props);
+
+    _this.renderDiffNode = function (props) {
+      var element = props.element;
+      var data = element.data ? element.data : {};
+      var diffState = data['diff_state'];
+      var nodeDepth = data['node_depth'];
+
+      if (diffState === 'diff-added') {
+        if (nodeDepth > 1) {
+          if (element.type === 'blockquote' || element.type === 'code_block') {
+            return /*#__PURE__*/React.createElement("div", {
+              className: 'diff-added-container'
+            }, renderNode(props));
+          }
+
+          return renderNode(props);
+        } else {
+          return /*#__PURE__*/React.createElement("div", {
+            className: 'diff-added'
+          }, renderNode(props));
+        }
+      } else if (diffState === 'diff-removed') {
+        if (nodeDepth > 1) {
+          if (element.type === 'blockquote' || element.type === 'code_block') {
+            return /*#__PURE__*/React.createElement("div", {
+              className: 'diff-removed-container'
+            }, renderNode(props));
+          }
+
+          return renderNode(props);
+        } else {
+          return /*#__PURE__*/React.createElement("div", {
+            className: 'diff-removed'
+          }, renderNode(props));
+        }
+      } else if (diffState === 'diff-replaced') {
+        if (nodeDepth > 1) {
+          return renderNode(props);
+        } else {
+          return /*#__PURE__*/React.createElement("div", {
+            className: 'diff-replaced'
+          }, renderNode(props));
+        }
+      } else {
+        return renderNode(props);
+      }
+    };
+
+    _this.value = [];
+    _this.slateDiff = new SlateDiff();
+    return _this;
+  }
+
+  _createClass(DiffViewer, [{
+    key: "render",
+    value: function render() {
+      var newMarkdownContent = this.props.newMarkdownContent;
+      var oldMarkdownContent = this.props.oldMarkdownContent;
+      this.value = this.slateDiff.getDiffDocument(newMarkdownContent, oldMarkdownContent);
+      return /*#__PURE__*/React.createElement(LoadScript, {
+        scriptSource: this.props.scriptSource
+      }, /*#__PURE__*/React.createElement(SlateViewer, {
+        style: {
+          width: '100%'
+        },
+        renderDiffElement: this.renderDiffNode,
+        renderDiffLeaf: renderLeaf,
+        value: this.value
+      }));
+    }
+  }]);
+
+  return DiffViewer;
+}(React.PureComponent);
+
+export default DiffViewer;

package/dist/viewer/markdown-viewer.js

@@ -0,0 +1,139 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Fragment } from 'react';
+import { deserialize } from '../utils/slate2markdown';
+import OutlineView from '../components/outline';
+import SlateViewer from './slate-viewer';
+import LoadScript from '../editor/load-script';
+import '../css/markdown-viewer.css';
+
+var URL = require('url-parse');
+
+var MarkdownViewer = /*#__PURE__*/function (_React$Component) {
+  _inherits(MarkdownViewer, _React$Component);
+
+  var _super = _createSuper(MarkdownViewer);
+
+  function MarkdownViewer(props) {
+    var _this;
+
+    _classCallCheck(this, MarkdownViewer);
+
+    _this = _super.call(this, props);
+
+    _this.scrollToNode = function (node) {
+      var url = new URL(window.location.href);
+      url.set('hash', 'user-content-' + node.children[0].text);
+      window.location.href = url.toString();
+    };
+
+    _this.getTitlesInfo = function () {
+      var titlesInfo = [];
+      var headingList = document.querySelectorAll('h2[id^="user-content"], h3[id^="user-content"]');
+
+      for (var i = 0; i < headingList.length; i++) {
+        titlesInfo.push(headingList[i].offsetTop);
+      }
+
+      _this.titlesInfo = titlesInfo;
+    };
+
+    _this.deserializeValue = function (markdownContent) {
+      var nodes = deserialize(markdownContent);
+
+      if (_this.props.modifyValueBeforeRender) {
+        nodes = _this.props.modifyValueBeforeRender(nodes);
+      }
+
+      _this.setState({
+        value: nodes
+      });
+    };
+
+    _this.titlesInfo = [];
+    _this.state = {
+      value: null
+    };
+    return _this;
+  }
+
+  _createClass(MarkdownViewer, [{
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      this.deserializeValue(this.props.markdownContent);
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.props.showTOC) {
+        this.getTitlesInfo();
+      }
+
+      if (this.props.onContentRendered) {
+        this.props.onContentRendered(this);
+      }
+
+      window.markdownViewer = this;
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      if (this.props.markdownContent !== nextProps.markdownContent) {
+        this.deserializeValue(nextProps.markdownContent);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.markdownViewer = null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var value = this.state.value;
+      if (!value) return null;
+      var _this$props = this.props,
+          scriptSource = _this$props.scriptSource,
+          showTOC = _this$props.showTOC;
+
+      if (scriptSource) {
+        return /*#__PURE__*/React.createElement(LoadScript, {
+          scriptSource: this.props.scriptSource
+        }, /*#__PURE__*/React.createElement(SlateViewer, {
+          value: value
+        }), showTOC && /*#__PURE__*/React.createElement("div", {
+          className: "seafile-markdown-outline"
+        }, /*#__PURE__*/React.createElement(OutlineView, {
+          document: value,
+          isViewer: true,
+          editor: this,
+          activeTitleIndex: this.props.activeTitleIndex
+        })));
+      } else {
+        return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(SlateViewer, {
+          value: value
+        }), showTOC && /*#__PURE__*/React.createElement("div", {
+          className: "seafile-markdown-outline"
+        }, /*#__PURE__*/React.createElement(OutlineView, {
+          document: value,
+          isViewer: true,
+          editor: this,
+          activeTitleIndex: this.props.activeTitleIndex
+        })));
+      }
+    }
+  }]);
+
+  return MarkdownViewer;
+}(React.Component);
+
+var defaultProps = {
+  activeTitleIndex: 0,
+  markdownContent: '',
+  showTOC: true,
+  isShared: false
+};
+MarkdownViewer.defaultProps = defaultProps;
+export default MarkdownViewer;