@seafile/seafile-editor 0.3.76

package/dist/editor/editor-utils/common-editor-utils.js

@@ -0,0 +1,587 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React from 'react';
+import Prism from 'prismjs';
+import MarkUtils from './mark-utils';
+import BlockElementUtils from './block-element-utils';
+import InlineElementUtils from './inline-element-utils';
+import ListUtils from '../editor-utils/block-element-utils/list-utils';
+import TableUtils from '../editor-utils/block-element-utils/table-utils';
+import CodeUtils from '../editor-utils/block-element-utils/code-utils';
+import FormulaUtils from '../editor-utils/block-element-utils/formula-utils';
+import BlockquoteUtils from '../editor-utils/block-element-utils/blockquote-utils';
+import Link from '../editor-component/link';
+import Image from '../editor-component/image';
+import CheckListItem from '../editor-component/check-list-item';
+import CodeBlock from '../editor-component/code-block';
+import Formula from '../editor-component/formula';
+import TableContainer from '../editor-component/table';
+import { useSelected } from '@seafile/slate-react';
+import { Node, Path } from 'slate';
+
+function WithSelectedState(props) {
+  var isSelected = useSelected();
+  var SlateNode = props.SlateNode;
+  return /*#__PURE__*/React.createElement(SlateNode, {
+    editor: props.editor,
+    attributes: props.attributes,
+    children: props.children,
+    isSelected: isSelected,
+    node: props.element
+  });
+}
+
+function renderNode(props, editor) {
+  var attributes = props.attributes,
+      children = props.children,
+      node = props.element;
+
+  switch (node.type) {
+    case 'paragraph':
+      return /*#__PURE__*/React.createElement("p", attributes, children);
+
+    case 'header_one':
+      return /*#__PURE__*/React.createElement("h1", Object.assign({}, attributes, {
+        id: 'user-content-' + node.children[0].text
+      }), children);
+
+    case 'header_two':
+      return /*#__PURE__*/React.createElement("h2", Object.assign({}, attributes, {
+        id: 'user-content-' + node.children[0].text
+      }), children);
+
+    case 'header_three':
+      return /*#__PURE__*/React.createElement("h3", Object.assign({}, attributes, {
+        id: 'user-content-' + node.children[0].text
+      }), children);
+
+    case 'header_four':
+      return /*#__PURE__*/React.createElement("h4", attributes, children);
+
+    case 'header_five':
+      return /*#__PURE__*/React.createElement("h5", attributes, children);
+
+    case 'header_six':
+      return /*#__PURE__*/React.createElement("h6", attributes, children);
+
+    case 'link':
+      return /*#__PURE__*/React.createElement(Link, {
+        attributes: attributes,
+        children: children,
+        node: node
+      });
+
+    case 'image':
+      return /*#__PURE__*/React.createElement(WithSelectedState, Object.assign({}, props, {
+        SlateNode: Image
+      }));
+
+    case 'blockquote':
+      return /*#__PURE__*/React.createElement("blockquote", attributes, children);
+
+    case 'list_item':
+      var checked = node.data.checked;
+      if (checked === undefined) return /*#__PURE__*/React.createElement("li", attributes, children);
+      return /*#__PURE__*/React.createElement(CheckListItem, Object.assign({
+        editor: editor
+      }, props));
+
+    case 'code_block':
+      return /*#__PURE__*/React.createElement(WithSelectedState, Object.assign({}, props, {
+        editor: editor,
+        SlateNode: CodeBlock
+      }));
+
+    case 'code_line':
+      return /*#__PURE__*/React.createElement("p", attributes, children);
+
+    case 'unordered_list':
+      return /*#__PURE__*/React.createElement("ul", attributes, children);
+
+    case 'ordered_list':
+      return /*#__PURE__*/React.createElement("ol", attributes, children);
+
+    case 'table':
+      return /*#__PURE__*/React.createElement(TableContainer, Object.assign({
+        editor: editor
+      }, props));
+
+    case 'table_row':
+      return /*#__PURE__*/React.createElement("tr", attributes, children);
+
+    case 'table_cell':
+      var align = node.data.align;
+      align = ['left', 'right', 'center'].find(function (item) {
+        return item === align;
+      }) ? align : 'left';
+      return /*#__PURE__*/React.createElement("td", Object.assign({
+        style: {
+          textAlign: align
+        }
+      }, attributes), children);
+
+    case 'formula':
+      return /*#__PURE__*/React.createElement(WithSelectedState, Object.assign({}, props, {
+        editor: editor,
+        SlateNode: Formula
+      }));
+
+    default:
+      return /*#__PURE__*/React.createElement("p", attributes, children);
+  }
+}
+
+var renderLeaf = function renderLeaf(_ref) {
+  var attributes = _ref.attributes,
+      children = _ref.children,
+      leaf = _ref.leaf;
+  var markedChildren = React.cloneElement(children);
+
+  if (leaf.BOLD) {
+    markedChildren = /*#__PURE__*/React.createElement("strong", null, markedChildren);
+  }
+
+  if (leaf.CODE) {
+    markedChildren = /*#__PURE__*/React.createElement("code", null, markedChildren);
+  }
+
+  if (leaf.ITALIC) {
+    markedChildren = /*#__PURE__*/React.createElement("i", null, markedChildren);
+  }
+
+  if (leaf.DELETE) {
+    markedChildren = /*#__PURE__*/React.createElement("del", null, markedChildren);
+  }
+
+  if (leaf.ADD) {
+    markedChildren = /*#__PURE__*/React.createElement("ins", null, markedChildren);
+  }
+
+  if (leaf.decoration) {
+    markedChildren = /*#__PURE__*/React.createElement("span", {
+      className: "token ".concat(leaf.type)
+    }, markedChildren);
+  }
+
+  return /*#__PURE__*/React.createElement("span", attributes, markedChildren);
+};
+
+var decorationNode = function decorationNode(_ref2) {
+  var _ref3 = _slicedToArray(_ref2, 2),
+      node = _ref3[0],
+      path = _ref3[1];
+
+  if (node.type !== 'code_block') return [];
+  var languageType = node.data.syntax;
+  if (languageType === 'none') return [];
+  var grammer = Prism.languages[languageType];
+  var codeLines = node.children;
+
+  if (!grammer) {
+    return [];
+  }
+
+  var blockText = codeLines.map(function (codeLine) {
+    return codeLine.children[0].text;
+  }).join('\n');
+  var tokens = Prism.tokenize(blockText, grammer);
+  var decorations = [];
+  var textLine = 0;
+  var offset = 0;
+
+  var _iterator = _createForOfIteratorHelper(tokens),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var token = _step.value;
+
+      if (typeof token === 'string' && token.indexOf('\n') >= 0) {
+        //the varialble enterNum is the num of \n in the token
+        // get the number of \n buy split the token by '\n'
+        var newlineTokens = token.split('\n');
+        var enterNum = newlineTokens.length - 1; // get the next code_line which the content of is is not ' ' or null;
+
+        textLine += enterNum; // get the initial offset of the code_line
+
+        offset = newlineTokens.pop().length;
+        continue;
+      }
+
+      if (typeof token === 'string') {
+        var textPath = path.slice();
+        textPath.push(textLine, 0);
+        var decoration = {
+          anchor: {
+            path: textPath,
+            offset: offset
+          },
+          focus: {
+            path: textPath,
+            offset: offset + token.length
+          },
+          type: 'text'
+        };
+        decorations.push(decoration);
+        offset += token.length;
+      } else if (typeof token.content === 'string') {
+        var _textPath = path.slice();
+
+        _textPath.push(textLine, 0);
+
+        var _decoration = {
+          anchor: {
+            path: _textPath,
+            offset: offset
+          },
+          focus: {
+            path: _textPath,
+            offset: offset + token.content.length
+          },
+          decoration: true,
+          type: token.type
+        };
+        decorations.push(_decoration);
+        offset += token.content.length;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  return decorations;
+};
+
+var EditorUtils = /*#__PURE__*/function () {
+  function EditorUtils(editor) {
+    var _this = this;
+
+    _classCallCheck(this, EditorUtils);
+
+    this.onClickMark = function (event, type) {
+      event.preventDefault();
+
+      _this.markUtils.setMark(type);
+    };
+
+    this.onClickHeader = function (event, type) {
+      event.preventDefault();
+
+      _this.editor.exec({
+        type: 'set_header',
+        headerType: type
+      });
+    };
+
+    this.onClickBlock = function (event, type) {
+      event.preventDefault();
+
+      if (!_this.blockElementUtils.isBlockActive(type)) {
+        _this.editor.exec({
+          type: "set_".concat(type)
+        });
+      } else {
+        _this.editor.exec({
+          type: "unwrap_".concat(type)
+        });
+      }
+    };
+
+    this.onClickBlock = function (event, type) {
+      event.preventDefault();
+
+      if (type === 'blockquote') {
+        if (_this.blockquoteUtils.isInBlockquote()) {
+          _this.editor.exec({
+            type: 'unwrap_blockquote'
+          });
+        } else {
+          _this.editor.exec({
+            type: 'set_blockquote'
+          });
+        }
+      }
+
+      if (type === 'code_block') {
+        if (_this.codeUtils.isInCodeBlock()) {
+          _this.editor.exec({
+            type: 'unwrap_code_block'
+          });
+        } else {
+          _this.editor.exec({
+            type: 'set_code_block'
+          });
+        }
+      }
+
+      if (type === 'ordered_list' || type === 'unordered_list') {
+        if (_this.listUtils.isInlist()) {
+          var items = _this.listUtils.getCurrentListItem();
+
+          var item = items[0];
+          var currentList = Node.parent(_this.editor, item[1]);
+
+          if (currentList.type === type) {
+            if (typeof item[0].data.checked === 'boolean') {
+              _this.editor.exec({
+                type: 'unwrap_check_list_item'
+              });
+
+              return;
+            }
+
+            _this.editor.exec({
+              type: "unwrap_".concat(currentList.type)
+            });
+          } else {
+            var currentListPath = Path.parent(item[1]);
+            var listAncesstor = Node.get(_this.editor, Path.parent(currentListPath)); // if the current selected list is a children of a different kind of list prevent modify the list type
+
+            if (listAncesstor.type && listAncesstor.type.includes('list')) {
+              return;
+            }
+
+            _this.editor.exec({
+              type: "unwrap_".concat(currentList.type)
+            });
+
+            _this.editor.exec({
+              type: "set_".concat(type)
+            });
+          }
+        } else {
+          _this.editor.exec({
+            type: "set_".concat(type)
+          });
+        }
+      }
+    };
+
+    this.unwrapLink = function () {
+      _this.inlineElementUtils.unwrapLink();
+    };
+
+    this.isLinkActive = function () {
+      return _this.inlineElementUtils.isLinkActive();
+    };
+
+    this.getLinkText = function (linkNode) {
+      return _this.inlineElementUtils.getLinkText(linkNode);
+    };
+
+    this.insertLink = function (elementData) {
+      return _this.inlineElementUtils.insertLink(elementData);
+    };
+
+    this.setLink = function (elementData) {
+      return _this.inlineElementUtils.setLink(elementData);
+    };
+
+    this.getSelectedText = function () {
+      var selection = window.getSelection();
+      var range = selection.getRangeAt(0);
+      return range.toString();
+    };
+
+    this.insertImage = function (data) {
+      _this.inlineElementUtils.insertImage(data);
+    };
+
+    this.getCurrentLinkNode = function () {
+      return _this.inlineElementUtils.getCurrentLinkNode();
+    };
+
+    this.onToggleCheckItem = function (event) {
+      event.preventDefault();
+
+      if (_this.listUtils.isInlist()) {
+        var items = _this.listUtils.getCurrentListItem();
+
+        var item = items[0];
+
+        if (typeof item[0].data.checked === 'boolean') {
+          _this.editor.exec({
+            type: 'unwrap_check_list_item'
+          });
+
+          return;
+        }
+      }
+
+      _this.editor.exec({
+        type: 'wrap_check_list_item'
+      });
+    };
+
+    this.onAddTable = function (event) {
+      event.preventDefault();
+
+      _this.editor.exec({
+        type: 'insert_table'
+      });
+    };
+
+    this.onAddFormula = function (data) {
+      _this.editor.exec({
+        type: 'insert_formula',
+        data: data
+      });
+    };
+
+    this.setFormula = function (data) {
+      _this.editor.exec({
+        type: 'set_formula',
+        data: data
+      });
+    };
+
+    this.onRemoveTable = function (event) {
+      event.preventDefault();
+
+      _this.editor.exec({
+        type: 'remove_table'
+      });
+    };
+
+    this.onInsertColumn = function (event) {
+      event.preventDefault();
+
+      _this.editor.exec({
+        type: 'insert_column'
+      });
+    };
+
+    this.onRemoveColumn = function (event) {
+      event.preventDefault();
+
+      _this.editor.exec({
+        type: 'remove_column'
+      });
+    };
+
+    this.onInsertRow = function (event) {
+      event.preventDefault();
+
+      _this.editor.exec({
+        type: 'insert_row'
+      });
+    };
+
+    this.onRemoveRow = function (event) {
+      event.preventDefault();
+
+      _this.editor.exec({
+        type: 'remove_row'
+      });
+    };
+
+    this.onSetAlign = function (event, align) {
+      event.preventDefault();
+
+      _this.editor.exec({
+        type: 'set_table_cell_align',
+        align: align
+      });
+    };
+
+    this.adjustImageSize = function (options) {
+      return _this.inineElementUtils.adjustImageSize(options);
+    };
+
+    this.editor = editor;
+    this.markUtils = new MarkUtils(editor);
+    this.blockElementUtils = new BlockElementUtils(editor);
+    this.inlineElementUtils = new InlineElementUtils(editor);
+    this.listUtils = new ListUtils(editor);
+    this.tableUtils = new TableUtils(editor);
+    this.codeUtils = new CodeUtils(editor);
+    this.blockquoteUtils = new BlockquoteUtils(editor);
+    this.formulaUtils = new FormulaUtils(editor);
+  }
+
+  _createClass(EditorUtils, [{
+    key: "getToolbarStatus",
+    value: // set is Active of each button
+    function getToolbarStatus() {
+      var selection = this.editor.selection;
+      var toolbarStatus = {
+        headerType: 'paragraph'
+      };
+      if (!selection) return toolbarStatus;
+      var activeHeader = this.blockElementUtils.getActiveHeader([{
+        type: 'paragraph'
+      }, {
+        type: 'header_one'
+      }, {
+        type: 'header_two'
+      }, {
+        type: 'header_three'
+      }, {
+        type: 'header_four'
+      }, {
+        type: 'header_five'
+      }, {
+        type: 'header_six'
+      }]);
+      var isLinkActive = this.isLinkActive();
+      var isBlockquoteActive = this.blockquoteUtils.isInBlockquote();
+      var isCodeActive = this.codeUtils.isInCodeBlock();
+      var isTableActive = this.tableUtils.isInTable();
+      var block = activeHeader[0];
+      var activeMarks = this.markUtils.getActiveMarks();
+      var isCheckListActive = false;
+      var isOrderedListActive = false;
+      var isUnorderedListActive = false;
+      var isSelectedInList = this.listUtils.isInlist();
+
+      if (isSelectedInList) {
+        var items = this.listUtils.getCurrentListItem();
+        var item = items[0];
+
+        if (item[0].data && typeof item[0].data.checked === 'boolean') {
+          isCheckListActive = true;
+          isUnorderedListActive = false;
+        } else {
+          var currentList = Node.parent(this.editor, item[1]);
+          var listType = currentList.type;
+
+          if (listType === 'unordered_list') {
+            isUnorderedListActive = true;
+          } else {
+            isOrderedListActive = true;
+          }
+        }
+      }
+
+      toolbarStatus = {
+        headerType: block.type,
+        isBoldActive: activeMarks.BOLD,
+        isItalicActive: activeMarks.ITALIC,
+        isInlineCodeActive: activeMarks.CODE,
+        isLinkActive: isLinkActive,
+        isBlockquoteActive: isBlockquoteActive,
+        isOrderedListActive: isOrderedListActive,
+        isUnorderedListActive: isUnorderedListActive,
+        isCheckListActive: isCheckListActive,
+        isCodeActive: isCodeActive,
+        isTableActive: isTableActive
+      };
+      var isFormulaActive = false;
+
+      if (window.canInsertFormula) {
+        isFormulaActive = this.formulaUtils.isFormulaActive();
+        toolbarStatus.isFormulaActive = isFormulaActive;
+      }
+
+      return toolbarStatus;
+    }
+  }]);
+
+  return EditorUtils;
+}();
+
+export { renderNode, renderLeaf, EditorUtils, decorationNode };

package/dist/editor/editor-utils/inline-element-utils/index.js

@@ -0,0 +1,95 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import { Editor } from 'slate';
+
+var InlineElementUtils = /*#__PURE__*/function () {
+  function InlineElementUtils(editor) {
+    var _this = this;
+
+    _classCallCheck(this, InlineElementUtils);
+
+    this.isLinkActive = function () {
+      var _Editor$nodes = Editor.nodes(_this.editor, {
+        match: {
+          type: 'link'
+        }
+      }),
+          _Editor$nodes2 = _slicedToArray(_Editor$nodes, 1),
+          link = _Editor$nodes2[0];
+
+      return !!link;
+    };
+
+    this.getLinkText = function (linkNode) {
+      var linkText = '';
+      linkNode.children.forEach(function (textNode) {
+        linkText += textNode.text;
+      });
+      return linkText;
+    };
+
+    this.getCurrentLinkNode = function () {
+      var _Editor$nodes3 = Editor.nodes(_this.editor, {
+        match: {
+          type: 'link'
+        }
+      }),
+          _Editor$nodes4 = _slicedToArray(_Editor$nodes3, 1),
+          link = _Editor$nodes4[0];
+
+      if (link) {
+        return link[0];
+      }
+
+      return null;
+    };
+
+    this.unwrapLink = function () {
+      _this.editor.exec({
+        type: 'unwrap_link'
+      });
+    };
+
+    this.insertLink = function (elementData) {
+      _this.editor.exec({
+        type: 'insert_link_at_selection',
+        elementData: elementData
+      });
+    };
+
+    this.setLink = function (elementData) {
+      _this.editor.exec({
+        type: 'set_link',
+        elementData: elementData
+      });
+    };
+
+    this.insertImage = function (data) {
+      _this.editor.exec({
+        type: 'insert_image_at_selection',
+        data: {
+          src: data.url
+        },
+        at: data.selection
+      });
+    };
+
+    this.editor = editor;
+  }
+
+  _createClass(InlineElementUtils, [{
+    key: "adjustImageSize",
+    value: function adjustImageSize(options) {
+      var data = Object.assign({}, {}, options);
+      this.editor.exec({
+        type: 'set_image',
+        data: data
+      });
+    }
+  }]);
+
+  return InlineElementUtils;
+}();
+
+export default InlineElementUtils;

package/dist/editor/editor-utils/mark-utils.js

@@ -0,0 +1,25 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import { Editor } from 'slate';
+
+var MarkUtils = function MarkUtils(editor) {
+  var _this = this;
+
+  _classCallCheck(this, MarkUtils);
+
+  this.getActiveMarks = function () {
+    var marks = Editor.marks(_this.editor);
+    return marks;
+  };
+
+  this.setMark = function (type) {
+    _this.editor.exec({
+      type: 'format_text',
+      properties: _defineProperty({}, type, true)
+    });
+  };
+
+  this.editor = editor;
+};
+
+export default MarkUtils;

package/dist/editor/editor-utils/range-utils.js

@@ -0,0 +1,9 @@
+import { Range } from 'slate';
+
+var isRangeCollapsed = function isRangeCollapsed(range) {
+  if (range) {
+    return Range.isCollapsed(range);
+  }
+};
+
+export { isRangeCollapsed };