@seafile/comment-editor 0.0.1-alpha.0

package/dist/basic-sdk/extension/plugins/link/hover/index.css

@@ -0,0 +1,66 @@
+.link-op-menu {
+  height: 36px;
+  padding: 7px 8px;
+  display: flex;
+  position: absolute;
+  background-color: #fff;
+  border: 1px solid #e5e5e5;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
+  z-index: 101;
+}
+
+.link-op-menu .link-op-menu-triangle {
+  width: 8px;
+  height: 8px;
+  transform: rotate(45deg);
+  background: #fff;
+  border-right: 1px solid rgba(0, 40, 100, 0.12);
+  border-bottom: 1px solid rgba(0, 40, 100, 0.12);
+  position: absolute;
+  top: 31px;
+  right: 50%;
+  z-index: 1001;
+}
+
+.link-op-menu-link {
+  font-size: 12px;
+  color: #212529;
+  padding: 0 5px;
+  border-radius: 2px;
+  line-height: 20px;
+  cursor: pointer;
+}
+
+.link-op-menu-link:hover {
+  color: #212529;
+  text-decoration: none;
+  background: #f1f1f1;
+}
+
+.link-op-icons {
+  margin-left: 8px;
+  border-left: 1px solid #e5e5e5;
+}
+
+.link-op-icon {
+  color: #999999;
+  padding: 4px;
+  border-radius: 2px;
+  margin-left: 8px;
+  display: flex;
+  align-items: center;
+}
+
+.link-op-icon .sdocfont {
+  font-size: 12px;
+  color: #444;
+}
+
+.link-op-icon:hover {
+  background: #f2f2f2;
+}
+
+.seafile-ed-hovermenu-mouseclick {
+  background-color: #e5e5e5;
+}

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

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _reactI18next = require("react-i18next");
+var _slateReact = require("@seafile/slate-react");
+var _helpers = require("../helpers");
+require("./index.css");
+const LinkHover = _ref => {
+  let {
+    editor,
+    element,
+    menuPosition,
+    onDeleteLink,
+    onEditLink
+  } = _ref;
+  const readOnly = (0, _slateReact.useReadOnly)();
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const onMouseDown = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    if (!(0, _helpers.isWeChat)()) {
+      window.open(element.href);
+    } else {
+      // eslint-disable-next-line no-restricted-globals
+      location.href = element.href;
+    }
+  }, [element.href]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement("div", {
+    id: "link-op-menu",
+    className: "link-op-menu",
+    style: menuPosition
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    target: "_blank",
+    rel: "noopener noreferrer",
+    className: "link-op-menu-link",
+    onMouseDown: onMouseDown
+  }, t('Open_link')), !readOnly && /*#__PURE__*/_react.default.createElement("div", {
+    className: "link-op-icons d-flex"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    role: "button",
+    className: "link-op-icon",
+    onClick: onEditLink
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-rename"
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    role: "button",
+    className: "link-op-icon",
+    onClick: onDeleteLink
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-unlink"
+  })))), document.body));
+};
+var _default = exports.default = LinkHover;

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

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _constants = require("../../constants");
+var _menu = _interopRequireDefault(require("./menu"));
+var _model = _interopRequireDefault(require("./model"));
+var _plugin = _interopRequireDefault(require("./plugin"));
+var _renderElem = _interopRequireDefault(require("./render-elem"));
+const LinkPlugin = {
+  type: _constants.LINK,
+  nodeType: 'element',
+  model: _model.default,
+  editorMenus: [_menu.default],
+  editorPlugin: _plugin.default,
+  renderElements: [_renderElem.default]
+};
+var _default = exports.default = LinkPlugin;

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

@@ -0,0 +1,63 @@
+"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.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _constants = require("../../../../constants");
+var _commonUtils = require("../../../../utils/common-utils");
+var _commons = require("../../../commons");
+var _dropdownMenuItem = _interopRequireDefault(require("../../../commons/dropdown-menu-item"));
+var _constants2 = require("../../../constants");
+var _helpers = require("../helpers");
+const LinkMenu = _ref => {
+  let {
+    editor,
+    readonly,
+    toggle,
+    eventBus,
+    isRichEditor,
+    className
+  } = _ref;
+  const disabled = (0, _helpers.isMenuDisabled)(editor, readonly);
+  const menuConfig = _constants2.MENUS_CONFIG_MAP[_constants2.ELEMENT_TYPE.LINK];
+  const openLinkDialog = (0, _react.useCallback)(() => {
+    eventBus.dispatch(_constants.INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: _constants2.ELEMENT_TYPE.LINK,
+      editor
+    });
+    toggle && toggle();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [toggle, eventBus]);
+
+  // Apply for comment Editor
+  if (editor.editorType === _constants.COMMENT_EDITOR) {
+    const menuProps = {
+      isRichEditor,
+      className,
+      ...menuConfig,
+      disabled: disabled,
+      isActive: false,
+      onMouseDown: openLinkDialog
+    };
+    menuProps.id = 'sdoc-comment-editor' + menuConfig.id;
+    return /*#__PURE__*/_react.default.createElement(_commons.MenuItem, menuProps);
+  }
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const linkShortCutTexts = (0, _react.useMemo)(() => {
+    const printTexts = (0, _commonUtils.isMac)() ? ['⌘', 'k'] : ['Ctrl', 'k'];
+    return printTexts;
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+    disabled: disabled,
+    menuConfig: menuConfig,
+    onClick: openLinkDialog,
+    shortcut: linkShortCutTexts
+  });
+};
+var _default = exports.default = LinkMenu;

package/dist/basic-sdk/extension/plugins/link/model.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _constants = require("../../constants");
+class Link {
+  constructor(options) {
+    this.type = options.type || _constants.LINK;
+    this.children = options.children || [{
+      text: ''
+    }];
+    this.href = options.href || '';
+    this.title = options.title || '';
+  }
+}
+var _default = exports.default = Link;

package/dist/basic-sdk/extension/plugins/link/plugin.js

@@ -0,0 +1,148 @@
+"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 _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _isUrl = _interopRequireDefault(require("is-url"));
+var _constants = require("../../../constants");
+var _context = _interopRequireDefault(require("../../../context"));
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+var _constants2 = require("../../constants");
+var _core = require("../../core");
+var _utils = require("../../utils");
+var _helpers = require("../sdoc-link/helpers");
+var _helpers2 = require("./helpers");
+const withLink = editor => {
+  const {
+    normalizeNode,
+    isInline,
+    insertData,
+    insertFragment,
+    onHotKeyDown
+  } = editor;
+  const newEditor = editor;
+
+  // Rewrite isInline
+  newEditor.isInline = elem => {
+    const {
+      type
+    } = elem;
+    if (type === _constants2.LINK) {
+      return true;
+    }
+    return isInline(elem);
+  };
+  newEditor.insertData = async data => {
+    // Paste link content
+    const text = data.getData('text/plain');
+    // Internal link, insert sdoc file link
+    if ((0, _isUrl.default)(text) && !(0, _utils.isImage)(text)) {
+      if ((0, _utils.isSameDomain)(text, _context.default.getSetting('serviceUrl'))) {
+        try {
+          const res = await _context.default.getLinkFilesInfo([text]);
+          if ((0, _helpers2.isSdocFile)(res, text)) {
+            const fileName = res.data.files_info[text].name;
+            const fileUuid = res.data.files_info[text].file_uuid;
+            (0, _helpers.insertSdocFileLink)(editor, fileName, fileUuid);
+          } else {
+            const link = (0, _helpers2.genLinkNode)(text, text);
+            _slate.Transforms.insertNodes(newEditor, link);
+          }
+        } catch (err) {
+          const link = (0, _helpers2.genLinkNode)(text, text);
+          _slate.Transforms.insertNodes(newEditor, link);
+        }
+      } else {
+        const link = (0, _helpers2.genLinkNode)(text, text);
+        _slate.Transforms.insertNodes(newEditor, link);
+      }
+      // Void merging text from link
+      const [, focusPath] = _slate.Editor.next(newEditor);
+      const focusPoint = _slate.Editor.start(newEditor, focusPath);
+      _slate.Transforms.select(newEditor, focusPoint);
+      return;
+    }
+    insertData(data);
+  };
+  newEditor.insertFragment = data => {
+    // Paste into link
+    if ((0, _core.getSelectedNodeByType)(newEditor, _constants2.LINK)) {
+      const fragments = data.slice(0).filter(item => _slate.Node.string(item).length !== 0);
+      // Prevent fragments containing list blocks
+      if (fragments.length > 1 && fragments.some(item => [_constants2.ORDERED_LIST, _constants2.UNORDERED_LIST].includes(item.type))) return;
+      // Prevent multiple list-items in a single list block
+      if (fragments.length === 1 && [_constants2.ORDERED_LIST, _constants2.UNORDERED_LIST].includes(fragments[0].type) && fragments[0].children.length > 1) return;
+    }
+    return insertFragment(data);
+  };
+  newEditor.onHotKeyDown = e => {
+    if ((0, _isHotkey.default)('mod+k', e)) {
+      // Prevent edge behavior
+      e.preventDefault();
+      const {
+        selection
+      } = newEditor;
+      const isCollapsed = _slate.Range.isCollapsed(selection);
+      const eventBus = _eventBus.default.getInstance();
+      if (isCollapsed) {
+        eventBus.dispatch(_constants.INTERNAL_EVENT.INSERT_ELEMENT, {
+          type: _constants2.ELEMENT_TYPE.LINK,
+          editor
+        });
+      } else {
+        const [firstSelectedNode, ...restNodes] = (0, _core.getSelectedElems)(newEditor);
+        if (!firstSelectedNode || restNodes.length) return; // If select more than one node or not select any node, return
+        const isSelectTextNodes = firstSelectedNode.children.some(node => _slate.Text.isText(node));
+        if (!isSelectTextNodes) return;
+        const selectContent = window.getSelection().toString();
+        const replaceLinkNode = () => _slate.Editor.deleteBackward(editor, selection);
+        eventBus.dispatch(_constants.INTERNAL_EVENT.INSERT_ELEMENT, {
+          type: _constants2.ELEMENT_TYPE.LINK,
+          editor: newEditor,
+          linkTitle: selectContent,
+          handleSubmit: replaceLinkNode
+        });
+      }
+    }
+    return onHotKeyDown && onHotKeyDown(e);
+  };
+
+  // Rewrite normalizeNode
+  newEditor.normalizeNode = _ref => {
+    let [node, path] = _ref;
+    const type = (0, _core.getNodeType)(node);
+    if (type !== _constants2.LINK) {
+      // If the type is not link, perform default normalizeNode
+      return normalizeNode([node, path]);
+    }
+
+    // If the link is empty, delete it
+    const str = _slate.Node.string(node);
+    if (str === '') {
+      return _slate.Transforms.removeNodes(newEditor, {
+        at: path
+      });
+    }
+    return normalizeNode([node, path]);
+  };
+  newEditor.onCompositionStart = e => {
+    const {
+      selection
+    } = editor;
+    if (_slate.Range.isCollapsed(selection)) {
+      const [LinkNodeEntry] = _slate.Editor.nodes(editor, {
+        match: n => _slate.Element.isElement && n.type === _constants2.LINK
+      });
+      if (LinkNodeEntry) {
+        e.preventDefault();
+        return true;
+      }
+    }
+  };
+  return newEditor;
+};
+var _default = exports.default = withLink;

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

@@ -0,0 +1,142 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _slate = require("@seafile/slate");
+var _constants = require("../../../constants");
+var _useScrollContext = require("../../../hooks/use-scroll-context");
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+var _InlineBugFixWrapper = _interopRequireDefault(require("../../commons/Inline-bug-fix-wrapper"));
+var _constants2 = require("../../constants");
+var _helpers = require("./helpers");
+var _hover = _interopRequireDefault(require("./hover"));
+class Link extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "registerEventHandle", () => {
+      document.addEventListener('click', this.onHideLinkMenu);
+      const {
+        scrollRef
+      } = this.context;
+      if (scrollRef.current) {
+        scrollRef.current.addEventListener('scroll', this.onScroll);
+      }
+    });
+    (0, _defineProperty2.default)(this, "unregisterEventHandle", () => {
+      document.removeEventListener('click', this.onHideLinkMenu);
+      const {
+        scrollRef
+      } = this.context;
+      if (scrollRef.current) {
+        scrollRef.current.addEventListener('scroll', this.onScroll);
+      }
+    });
+    (0, _defineProperty2.default)(this, "onHideLinkMenu", () => {
+      this.setState({
+        isShowLinkMenu: false
+      }, () => {
+        this.unregisterEventHandle();
+      });
+    });
+    (0, _defineProperty2.default)(this, "onScroll", e => {
+      this.setPosition(this.linkRef);
+    });
+    (0, _defineProperty2.default)(this, "setPosition", element => {
+      const {
+        editor
+      } = this.props;
+      const menuPosition = (0, _helpers.getMenuPosition)(element, editor);
+      this.setState({
+        menuPosition
+      });
+    });
+    (0, _defineProperty2.default)(this, "onLinkClick", e => {
+      this.setPosition(e.target);
+      this.setState({
+        isShowLinkMenu: true
+      });
+      setTimeout(() => {
+        this.registerEventHandle();
+      }, 0);
+    });
+    (0, _defineProperty2.default)(this, "deleteLink", event => {
+      event.stopPropagation();
+      const {
+        editor
+      } = this.props;
+      (0, _helpers.unWrapLinkNode)(editor);
+    });
+    (0, _defineProperty2.default)(this, "openDialog", () => {
+      const {
+        element
+      } = this.props;
+      this.eventBus.dispatch(_constants.INTERNAL_EVENT.INSERT_ELEMENT, {
+        type: _constants2.ELEMENT_TYPE.LINK,
+        element
+      });
+    });
+    (0, _defineProperty2.default)(this, "setRef", ref => {
+      this.linkRef = ref;
+    });
+    this.state = {
+      isShowLinkMenu: false,
+      menuPosition: null
+    };
+    this.eventBus = _eventBus.default.getInstance();
+  }
+  componentWillUnmount() {
+    this.unregisterEventHandle();
+  }
+  render() {
+    const {
+      attributes,
+      children,
+      element,
+      editor,
+      readonly
+    } = this.props;
+    const {
+      isShowLinkMenu,
+      menuPosition
+    } = this.state;
+    const className = isShowLinkMenu ? 'seafile-ed-hovermenu-mouseclick' : null;
+    if (readonly) {
+      return /*#__PURE__*/_react.default.createElement("span", Object.assign({
+        className: className
+      }, attributes), /*#__PURE__*/_react.default.createElement("a", {
+        href: element.href,
+        title: element.title,
+        target: "_blank",
+        rel: "noreferrer"
+      }, children));
+    }
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", Object.assign({
+      className: className
+    }, attributes, {
+      onClick: this.onLinkClick
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      ref: this.setRef,
+      className: "virtual-link",
+      title: element.title
+    }, /*#__PURE__*/_react.default.createElement(_InlineBugFixWrapper.default, null), children, /*#__PURE__*/_react.default.createElement(_InlineBugFixWrapper.default, null))), isShowLinkMenu && (this.props.readonly || _slate.Range.isCollapsed(editor.selection)) && /*#__PURE__*/_react.default.createElement(_hover.default, {
+      editor: editor,
+      menuPosition: menuPosition,
+      element: element,
+      onDeleteLink: this.deleteLink,
+      onEditLink: this.openDialog
+    }));
+  }
+}
+(0, _defineProperty2.default)(Link, "contextType", _useScrollContext.ScrollContext);
+const renderLink = (props, editor, readonly) => {
+  return /*#__PURE__*/_react.default.createElement(Link, Object.assign({}, props, {
+    editor: editor,
+    readonly: readonly
+  }));
+};
+var _default = exports.default = renderLink;

package/dist/basic-sdk/extension/plugins/list/helpers.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setListType = exports.isSingleListItem = exports.isMenuDisabled = exports.getListType = exports.getBeforeText = void 0;
+var _slate = require("@seafile/slate");
+var _constants = require("../../constants");
+var _queries = require("./queries");
+var _transforms = require("./transforms");
+const isMenuDisabled = (editor, readonly) => {
+  if (readonly) return true;
+  if (editor.selection == null) return true;
+  let selectedElements = [];
+  const nodeEntries = _slate.Editor.nodes(editor, {
+    universal: true
+  });
+  for (let nodeEntry of nodeEntries) {
+    const [node] = nodeEntry;
+    if (_slate.Element.isElement(node)) selectedElements.push(node);
+  }
+  const notMatch = selectedElements.some(element => {
+    if (_slate.Editor.isVoid(editor, element) && _slate.Editor.isBlock(editor, element)) return true;
+    const {
+      type
+    } = element;
+    if ([_constants.CODE_LINE, _constants.CODE_BLOCK, _constants.TABLE, _constants.CHECK_LIST_ITEM].includes(type)) return true;
+    return false;
+  });
+  if (notMatch) return true;
+  return false;
+};
+exports.isMenuDisabled = isMenuDisabled;
+const getListType = (editor, type) => {
+  const {
+    selection
+  } = editor;
+  if (!selection) return;
+  let selectedListNodeEntry;
+  if (_slate.Range.isCollapsed(selection)) {
+    const [nodeEntry] = _slate.Editor.nodes(editor, {
+      match: node => (0, _queries.getListTypes)().includes(node.type),
+      mode: 'lowest'
+    });
+    selectedListNodeEntry = nodeEntry;
+  } else {
+    const {
+      anchor,
+      focus
+    } = selection;
+    const commonNodeEntry = _slate.Node.common(editor, anchor.path, focus.path);
+    //  Select condition:
+    // 1. Select in one list
+    // 2. Select in one list item
+    // 3. Select in one line
+    if ((0, _queries.getListTypes)().includes(commonNodeEntry[0].type)) {
+      // Select in one list
+      selectedListNodeEntry = commonNodeEntry;
+    } else if (commonNodeEntry[0].type === _constants.LIST_ITEM) {
+      // Select in one list item
+      selectedListNodeEntry = _slate.Editor.parent(editor, commonNodeEntry[1]);
+    } else if (_slate.Text.isText(commonNodeEntry[0])) {
+      // Select in one line
+      const [nodeEntry] = _slate.Editor.nodes(editor, {
+        at: commonNodeEntry[1],
+        match: node => (0, _queries.getListTypes)().includes(node.type),
+        mode: 'lowest'
+      });
+      selectedListNodeEntry = nodeEntry;
+    }
+  }
+  return selectedListNodeEntry ? selectedListNodeEntry[0].type : _constants.PARAGRAPH;
+};
+exports.getListType = getListType;
+const setListType = (editor, type) => {
+  (0, _transforms.toggleList)(editor, type);
+};
+exports.setListType = setListType;
+const getBeforeText = editor => {
+  const {
+    selection
+  } = editor;
+  if (selection == null) return {
+    beforeText: '',
+    range: null
+  };
+  const {
+    anchor
+  } = selection;
+  // Find the near text node above the current text
+  const [, aboveNodePath] = _slate.Editor.above(editor);
+  const aboveNodeStartPoint = _slate.Editor.start(editor, aboveNodePath); // The starting position of the text node
+  const range = {
+    anchor,
+    focus: aboveNodeStartPoint
+  };
+  const beforeText = _slate.Editor.string(editor, range) || '';
+  return {
+    beforeText,
+    range
+  };
+};
+exports.getBeforeText = getBeforeText;
+const isSingleListItem = node => {
+  // ordered_list/unordered_list -> list-item.children -> paragraph
+  //                                                   -> ordered_list/unordered_list
+  if (![_constants.ORDERED_LIST, _constants.UNORDERED_LIST].includes(node.type)) return false;
+  // list children
+  if (node.children.length !== 1) return false;
+  // listItem children
+  const listItem = node.children[0];
+  if (listItem.children.length !== 1) return false;
+  return true;
+};
+exports.isSingleListItem = isSingleListItem;

package/dist/basic-sdk/extension/plugins/list/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _menu = _interopRequireDefault(require("./menu"));
+var _plugin = _interopRequireDefault(require("./plugin"));
+var _renderElem = require("./render-elem");
+const ListPlugin = {
+  type: 'list',
+  nodeType: 'element',
+  editorMenus: [_menu.default],
+  editorPlugin: _plugin.default,
+  renderElements: [_renderElem.renderList, _renderElem.renderListItem, _renderElem.renderListLic]
+};
+var _default = exports.default = ListPlugin;