@seafile/comment-editor 0.0.1-alpha.0

package/dist/basic-sdk/extension/plugins/code-block/plugin.js

@@ -0,0 +1,229 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _slugid = _interopRequireDefault(require("slugid"));
+var _constants = require("../../constants");
+var _core = require("../../core");
+var _helpers = require("./helpers");
+const withCodeBlock = editor => {
+  const {
+    normalizeNode,
+    insertFragment,
+    insertText,
+    insertBreak,
+    insertData,
+    deleteBackward
+  } = editor;
+  const newEditor = editor;
+
+  // If you enter two Spaces in quick succession, a period and a space appear （Default Settings for mac）
+  newEditor.insertText = data => {
+    if (data === '. ') {
+      return insertText('  ');
+    }
+    return insertText(data);
+  };
+  newEditor.deleteBackward = unit => {
+    const node = (0, _core.getSelectedNodeByType)(editor, _constants.CODE_BLOCK);
+    if (node) {
+      if ((0, _core.isSelectionAtBlockStart)(editor)) return;
+    }
+    deleteBackward(unit);
+  };
+  newEditor.insertData = data => {
+    // Paste a single code block element somewhere other than a code block
+    if (data.types.includes('text/code-block') && !(0, _core.getSelectedNodeByType)(editor, _constants.CODE_BLOCK)) {
+      const options = {};
+      // Paste into quote block
+      if ((0, _core.getSelectedNodeByType)(newEditor, _constants.BLOCKQUOTE)) {
+        const path = _slate.Editor.path(newEditor, newEditor.selection);
+        options['at'] = [path[0]];
+      }
+      const codeBlockNode = JSON.parse(data.getData('text/code-block'));
+      return _slate.Transforms.insertNodes(newEditor, codeBlockNode, {
+        ...options
+      });
+    }
+    insertData(data);
+  };
+  newEditor.insertFragment = data => {
+    // Only selected code block content
+    if (data.length === 1 && data[0].type === _constants.CODE_BLOCK && !(0, _core.getSelectedNodeByType)(editor, _constants.CODE_BLOCK)) {
+      data.forEach((node, index) => {
+        if (node.type === _constants.CODE_BLOCK) {
+          const newBlock = node.children.map(line => {
+            const text = _slate.Node.string(line);
+            const p = (0, _core.generateEmptyElement)(_constants.PARAGRAPH);
+            p.children[0].text = text;
+            return p;
+          });
+          data.splice(index, 1, ...newBlock);
+        }
+      });
+      return insertFragment(data);
+    }
+
+    // Paste into code block
+    if ((0, _core.getSelectedNodeByType)(editor, _constants.CODE_BLOCK)) {
+      // Pasted data is code block split with code-line
+      data.forEach((node, index) => {
+        if (node.type === _constants.CODE_BLOCK) {
+          const codeLineArr = node.children.map(line => line);
+          data.splice(index, 1, ...codeLineArr);
+        }
+      });
+      const newData = data.map(node => {
+        const text = _slate.Node.string(node);
+        const codeLine = {
+          id: _slugid.default.nice(),
+          type: _constants.CODE_LINE,
+          children: [{
+            text: text,
+            id: _slugid.default.nice()
+          }]
+        };
+        return codeLine;
+      });
+
+      // current focus code-line string not empty
+      const string = _slate.Editor.string(newEditor, newEditor.selection.focus.path);
+      if (string.length !== 0 && _slate.Range.isCollapsed(newEditor.selection)) {
+        const [node, ...restNode] = newData;
+        const text = _slate.Node.string(node);
+        insertText(text);
+        if (restNode.length !== 0) {
+          insertBreak();
+          insertFragment(restNode);
+        }
+        return;
+      }
+      return insertFragment(newData);
+    }
+
+    // Paste into not a code block
+    return insertFragment(data);
+  };
+
+  // Rewrite normalizeNode
+  newEditor.normalizeNode = _ref => {
+    let [node, path] = _ref;
+    const type = (0, _core.getNodeType)(node);
+    if (type === _constants.CODE_LINE && path.length <= 1) {
+      _slate.Transforms.setNodes(newEditor, {
+        type: _constants.PARAGRAPH
+      }, {
+        at: path
+      });
+      return;
+    }
+    if (type === _constants.CODE_BLOCK) {
+      if (node.children.length === 0) {
+        _slate.Transforms.delete(newEditor, {
+          at: path
+        });
+        return;
+      }
+
+      // code-block is the last node in the editor and needs to be followed by a p node
+      const isLast = (0, _core.isLastNode)(newEditor, node);
+      if (isLast) {
+        const paragraph = (0, _core.generateEmptyElement)(_constants.PARAGRAPH);
+        _slate.Transforms.insertNodes(newEditor, paragraph, {
+          at: [path[0] + 1]
+        });
+      }
+
+      // There must be a code node below code-block
+      if ((0, _core.getNodeType)(node.children[0]) !== _constants.CODE_LINE) {
+        _slate.Transforms.unwrapNodes(newEditor);
+        _slate.Transforms.setNodes(newEditor, {
+          type: _constants.PARAGRAPH
+        }, {
+          mode: 'highest'
+        });
+      }
+      if (node.children.length > 1) {
+        node.children.forEach((child, index) => {
+          if (child.type !== _constants.CODE_LINE) {
+            _slate.Transforms.setNodes(newEditor, {
+              type: _constants.CODE_LINE
+            }, {
+              at: [...path, index]
+            });
+          }
+        });
+      }
+    }
+
+    // Perform default behavior
+    return normalizeNode([node, path]);
+  };
+  newEditor.codeBlockOnKeyDown = event => {
+    if ((0, _isHotkey.default)(['command+enter', 'ctrl+enter'], event)) {
+      if (newEditor.selection && !_slate.Range.isExpanded(newEditor.selection)) {
+        const path = _slate.Editor.path(newEditor, newEditor.selection);
+        const p = (0, _core.generateEmptyElement)(_constants.PARAGRAPH);
+        _slate.Transforms.insertNodes(newEditor, p, {
+          at: [path[0] + 1]
+        });
+        _slate.Transforms.select(newEditor, [path[0] + 1]);
+      }
+    }
+    if ((0, _isHotkey.default)('tab', event)) {
+      const {
+        selection
+      } = newEditor;
+      event.preventDefault();
+      // By default, tab key will insert 4 spaces
+      const indent = ' '.repeat(4);
+      if (_slate.Range.isCollapsed(selection)) {
+        newEditor.insertText(indent);
+      } else {
+        const selectedElements = (0, _core.getSelectedElems)(newEditor);
+        selectedElements.forEach(elem => {
+          if (elem.type !== _constants.CODE_LINE) return;
+          const text = indent + _slate.Node.string(elem);
+          const insertPoint = _slateReact.ReactEditor.findPath(newEditor, elem);
+          _slate.Transforms.insertText(editor, text, {
+            at: insertPoint
+          });
+        });
+      }
+    }
+    if ((0, _isHotkey.default)('shift+tab', event)) {
+      const range = {
+        anchor: {
+          offset: 0,
+          path: newEditor.selection.focus.path
+        },
+        focus: {
+          ...newEditor.selection.focus
+        }
+      };
+      const str = _slate.Editor.string(newEditor, range);
+      if (str.trim() === '') {
+        (0, _helpers.deleteBackwardByLength)(newEditor, str.length);
+      }
+    }
+  };
+  newEditor.insertBreak = () => {
+    const selectedNode = (0, _core.getSelectedNodeByType)(newEditor, _constants.CODE_LINE);
+    if (selectedNode != null && (0, _core.isCursorAtBlockStart)(newEditor)) {
+      const line = (0, _core.generateEmptyElement)(_constants.CODE_LINE);
+      _slate.Transforms.insertNodes(editor, line, {
+        at: selectedNode[1]
+      });
+      return;
+    }
+    insertBreak();
+  };
+  return newEditor;
+};
+var _default = exports.default = withCodeBlock;

package/dist/basic-sdk/extension/plugins/code-block/prismjs.js

@@ -0,0 +1,189 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.normalizeTokensByLanguageType = exports.normalizeTokens = exports.genCodeLangs = exports.default = void 0;
+var _prismjs = _interopRequireDefault(require("prismjs"));
+require("prismjs/themes/prism.css");
+require("prismjs/components/prism-javascript");
+require("prismjs/components/prism-typescript");
+require("prismjs/components/prism-markup");
+require("prismjs/components/prism-go");
+require("prismjs/components/prism-php");
+require("prismjs/components/prism-c");
+require("prismjs/components/prism-python");
+require("prismjs/components/prism-java");
+require("prismjs/components/prism-cpp");
+require("prismjs/components/prism-csharp");
+require("prismjs/components/prism-sql");
+require("prismjs/components/prism-ruby");
+require("prismjs/components/prism-swift");
+require("prismjs/components/prism-bash");
+require("prismjs/components/prism-lua");
+require("prismjs/components/prism-json.js");
+require("prismjs/components/prism-yaml");
+// languages
+
+const newlineRe = /\r\n|\r|\n/;
+const genCodeLangs = () => {
+  return [{
+    text: 'Plain Text',
+    value: 'plaintext'
+  }, {
+    text: 'Bash',
+    value: 'bash'
+  }, {
+    text: 'CSS',
+    value: 'css'
+  }, {
+    text: 'C',
+    value: 'c'
+  }, {
+    text: 'C++',
+    value: 'cpp'
+  }, {
+    text: 'C#',
+    value: 'csharp'
+  }, {
+    text: 'Go',
+    value: 'go'
+  }, {
+    text: 'HTML',
+    value: 'html'
+  }, {
+    text: 'Javascript',
+    value: 'javascript'
+  }, {
+    text: 'Java',
+    value: 'java'
+  }, {
+    text: 'JSON',
+    value: 'json'
+  }, {
+    text: 'PHP',
+    value: 'php'
+  }, {
+    text: 'Python',
+    value: 'python'
+  }, {
+    text: 'Ruby',
+    value: 'ruby'
+  }, {
+    text: 'SQL',
+    value: 'sql'
+  }, {
+    text: 'Swift',
+    value: 'swift'
+  }, {
+    text: 'Typescript',
+    value: 'typescript'
+  }, {
+    text: 'XML',
+    value: 'xml'
+  }, {
+    text: 'YAML',
+    value: 'yaml'
+  }];
+};
+exports.genCodeLangs = genCodeLangs;
+const normalizeTokensByLanguageType = exports.normalizeTokensByLanguageType = {
+  'php': tokens => {
+    tokens.forEach(token => {
+      if (['<?', '?>'].includes(token.content)) {
+        token.type = 'operator';
+        token.alias = '';
+      }
+    });
+    return tokens;
+  }
+};
+const normalizeEmptyLines = line => {
+  if (line.length === 0) {
+    line.push({
+      types: ['plain'],
+      content: '\n',
+      empty: true
+    });
+  } else if (line.length === 1 && line[0].content === '') {
+    line[0].content = '\n';
+    line[0].empty = true;
+  }
+};
+const appendTypes = (types, add) => {
+  const typesSize = types.length;
+  if (typesSize > 0 && types[typesSize - 1] === add) {
+    return types;
+  }
+  return types.concat(add);
+};
+const normalizeTokens = tokens => {
+  const typeArrStack = [[]];
+  const tokenArrStack = [tokens];
+  const tokenArrIndexStack = [0];
+  const tokenArrSizeStack = [tokens.length];
+  let i = 0;
+  let stackIndex = 0;
+  let currentLine = [];
+  const acc = [currentLine];
+  while (stackIndex > -1) {
+    while ((i = tokenArrIndexStack[stackIndex]++) < tokenArrSizeStack[stackIndex]) {
+      let content;
+      let types = typeArrStack[stackIndex];
+      const tokenArr = tokenArrStack[stackIndex];
+      const token = tokenArr[i];
+
+      // Determine content and append type to types if necessary
+      if (typeof token === 'string') {
+        types = stackIndex > 0 ? types : ['plain'];
+        content = token;
+      } else {
+        types = appendTypes(types, token.type);
+        if (token.alias) {
+          types = appendTypes(types, token.alias);
+        }
+        content = token.content;
+      }
+
+      // If token.content is an array, increase the stack depth and repeat this while-loop
+      if (typeof content !== 'string') {
+        stackIndex++;
+        typeArrStack.push(types);
+        tokenArrStack.push(content);
+        tokenArrIndexStack.push(0);
+        tokenArrSizeStack.push(content.length);
+        continue;
+      }
+
+      // Split by newlines
+      const splitByNewlines = content.split(newlineRe);
+      const newlineCount = splitByNewlines.length;
+      currentLine.push({
+        types,
+        content: splitByNewlines[0]
+      });
+
+      // Create a new line for each string on a new line
+      for (let i = 1; i < newlineCount; i++) {
+        normalizeEmptyLines(currentLine);
+        acc.push(currentLine = []);
+        currentLine.push({
+          types,
+          content: splitByNewlines[i]
+        });
+      }
+    }
+
+    // Decreate the stack depth
+    stackIndex--;
+    typeArrStack.pop();
+    tokenArrStack.pop();
+    tokenArrIndexStack.pop();
+    tokenArrSizeStack.pop();
+  }
+  normalizeEmptyLines(currentLine);
+  return acc;
+};
+exports.normalizeTokens = normalizeTokens;
+var _default = exports.default = _prismjs.default;

package/dist/basic-sdk/extension/plugins/code-block/render-elem.js

@@ -0,0 +1,182 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderCodeLine = exports.renderCodeBlock = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _constants = require("../../../constants");
+var _useScrollContext = require("../../../hooks/use-scroll-context");
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+var _core = require("../../core");
+var _helpers = require("./helpers");
+var _hoverMenu = _interopRequireDefault(require("./hover-menu"));
+const CodeBlock = _ref => {
+  let {
+    attributes,
+    children,
+    element,
+    editor
+  } = _ref;
+  const readOnly = (0, _slateReact.useReadOnly)();
+  const codeBlockRef = (0, _react.useRef)();
+  const scrollRef = (0, _useScrollContext.useScrollContext)();
+  const {
+    style = {
+      white_space: 'nowrap'
+    }
+  } = element;
+  const {
+    white_space
+  } = style;
+  const [menuPosition, setMenuPosition] = (0, _react.useState)({
+    top: '',
+    left: ''
+  });
+  const [showHoverMenu, setShowHoverMenu] = (0, _react.useState)(false);
+  const onChangeLanguage = (0, _react.useCallback)(lang => {
+    const {
+      value: language
+    } = lang;
+    const path = _slateReact.ReactEditor.findPath(editor, element);
+    _slate.Transforms.setNodes(editor, {
+      language
+    }, {
+      at: path
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onChangeAutoLineWrap = (0, _react.useCallback)(autoWrap => {
+    const path = _slateReact.ReactEditor.findPath(editor, element);
+    const newStyle = {
+      ...style,
+      white_space: autoWrap
+    };
+    _slate.Transforms.setNodes(editor, {
+      style: newStyle
+    }, {
+      at: path
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onCopyCodeBlock = (0, _react.useCallback)(() => {
+    (0, _helpers.setClipboardCodeBlockData)(element);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [element]);
+  const onDeleteCodeBlock = (0, _react.useCallback)(() => {
+    const path = _slateReact.ReactEditor.findPath(editor, element);
+    _slate.Transforms.removeNodes(editor, {
+      at: path
+    });
+    (0, _core.focusEditor)(editor);
+    _slate.Transforms.select(editor, editor.selection);
+  }, [editor, element]);
+  const onFocusCodeBlock = (0, _react.useCallback)(e => {
+    if (readOnly) return;
+    if (codeBlockRef.current) {
+      const {
+        top,
+        left
+      } = codeBlockRef.current.getBoundingClientRect();
+      const menuTop = top - 42; // top = top distance - menu height
+      const newMenuPosition = {
+        top: menuTop,
+        left: left // left = code-block left distance
+      };
+      setMenuPosition(newMenuPosition);
+    }
+    setShowHoverMenu(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onMouseLeave = (0, _react.useCallback)(e => {
+    if (readOnly) return;
+    setShowHoverMenu(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onScroll = (0, _react.useCallback)(e => {
+    if (readOnly) return;
+    if (!showHoverMenu) return;
+    if (e.currentTarget.scrollTop) {
+      const {
+        top,
+        left
+      } = codeBlockRef.current.getBoundingClientRect();
+      const menuTop = top - 42; // top = top distance - menu height
+      const newMenuPosition = {
+        top: menuTop,
+        left: left // left = code-block left distance
+      };
+      setMenuPosition(newMenuPosition);
+    }
+  }, [readOnly, showHoverMenu]);
+  (0, _react.useEffect)(() => {
+    if (readOnly) return;
+    let observerRefValue = null;
+    if (scrollRef.current) {
+      scrollRef.current.addEventListener('scroll', onScroll);
+      observerRefValue = scrollRef.current;
+    }
+    return () => {
+      observerRefValue.removeEventListener('scroll', onScroll);
+    };
+  }, [onScroll, readOnly, scrollRef]);
+  const onHiddenHoverMenu = (0, _react.useCallback)(() => {
+    if (codeBlockRef.current) {
+      setShowHoverMenu(false);
+    }
+  }, []);
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    eventBus.subscribe(_constants.INTERNAL_EVENT.HIDDEN_CODE_BLOCK_HOVER_MENU, onHiddenHoverMenu);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const handleScroll = () => {
+    _eventBus.default.getInstance().dispatch(_constants.INTERNAL_EVENT.UPDATE_SEARCH_REPLACE_HIGHLIGHT);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
+    "data-id": element.id
+  }, attributes, {
+    className: `sdoc-code-block-container ${attributes.className}`,
+    onClick: onFocusCodeBlock,
+    onMouseLeave: onMouseLeave
+  }), /*#__PURE__*/_react.default.createElement("pre", {
+    onScroll: handleScroll,
+    className: 'sdoc-code-block-pre',
+    ref: codeBlockRef
+  }, /*#__PURE__*/_react.default.createElement("code", {
+    className: `sdoc-code-block-code ${white_space === 'nowrap' ? 'sdoc-code-no-wrap' : ''}`
+  }, children)), showHoverMenu && /*#__PURE__*/_react.default.createElement(_hoverMenu.default, {
+    menuPosition: menuPosition,
+    onChangeLanguage: onChangeLanguage,
+    language: element.language,
+    style: element.style || {
+      white_space: 'nowrap'
+    },
+    onChangeAutoLineWrap: onChangeAutoLineWrap,
+    onCopyCodeBlock: onCopyCodeBlock,
+    onDeleteCodeBlock: onDeleteCodeBlock
+  }));
+};
+const renderCodeBlock = (props, editor) => {
+  return /*#__PURE__*/_react.default.createElement(CodeBlock, Object.assign({}, props, {
+    editor: editor
+  }));
+};
+exports.renderCodeBlock = renderCodeBlock;
+const renderCodeLine = (props, editor) => {
+  const {
+    element,
+    attributes,
+    children
+  } = props;
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
+    "data-id": element.id
+  }, attributes, {
+    className: 'sdoc-code-line'
+  }), children);
+};
+exports.renderCodeLine = renderCodeLine;

package/dist/basic-sdk/extension/plugins/file-link/constants/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FILE_LINK_TYPE_CONFIG = exports.FILE_LINK_TYPES = exports.FILE_LINK_TYPE = void 0;
+const FILE_LINK_TYPE = exports.FILE_LINK_TYPE = {
+  TEXT_LINK: 'text_link',
+  ICON_LINK: 'icon_link',
+  CARD_LINK: 'card_link'
+};
+const FILE_LINK_TYPE_CONFIG = exports.FILE_LINK_TYPE_CONFIG = {
+  [FILE_LINK_TYPE.TEXT_LINK]: {
+    icon: 'sdocfont sdoc-text-link',
+    text: 'Text_Link'
+  },
+  [FILE_LINK_TYPE.ICON_LINK]: {
+    icon: 'sdocfont sdoc-inline-link',
+    text: 'Icon_and_text_Link'
+  },
+  [FILE_LINK_TYPE.CARD_LINK]: {
+    icon: 'sdocfont sdoc-card-link',
+    text: 'Card'
+  }
+};
+const FILE_LINK_TYPES = exports.FILE_LINK_TYPES = [FILE_LINK_TYPE.TEXT_LINK, FILE_LINK_TYPE.ICON_LINK, FILE_LINK_TYPE.CARD_LINK];