@seafile/comment-editor 0.0.1-alpha.0 → 0.0.1-alpha.10

package/README.md

@@ -17,7 +17,6 @@ comment-editor/
     assets                  // css 文件, 图片文件
     commons                 // 公共组件
     components              // 应用组件
-    containers              // 容器组件
     pages                   // 页面组件
     app.js                  // 应用对象
     index.html              // 主页
@@ -27,11 +26,10 @@ comment-editor/
     setting.local.dist      // 用户基于 setting.local.dist.js copy 一份的配置文件
   src/(组件库)
     assets                  // css 文件, 资源文件
+    basic-sdk               // 编辑器元素包
     components              // 封装的视图组件
-    editor                  // 封装的编辑器组件
-    lib                     // 底层接口
     utils                   // 工具接口
-    viewer                  // 封装的视图组件
+    pages                   // 封装的视图组件
     index.js                // 组件库导出内容入口文件
   tests                     // 测试
   webpack                   // site 打包文件   

package/dist/basic-sdk/assets/css/layout.css

@@ -113,48 +113,4 @@
   margin: 0 auto;
   padding-top: 20px;
   padding-bottom: 20px;
-}
-
-/* article style --> ./sdoc-editor-article.css */
-
-.sdoc-editor-container .seafile-block-container {
-  position: relative;
-}
-
-.sdoc-editor-container .seafile-block-container .comment-count {
-  position: absolute;
-  right: -55px;
-  top: 0px;
-  border-radius: 4px;
-  width: 15px;
-  height: 15px;
-  line-height: 18px;
-  pointer-events: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  background: rgba(0, 0, 0, .3);
-}
-
-.sdoc-editor-container .seafile-block-container .comment-count__btn {
-  font-size: 12px;
-  transform: scale(.75);
-}
-
-.sdoc-comment-editor-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 32px;
-  user-select: none;
-  border-top: 1px solid #e5e6e8;
-  z-index: 102;
-  margin: 0 8px;
-  margin-top: 5px;
-}
-
-.sdoc-comment-editor-menu-group {
-  border-right: none;
-  padding-left: 0 !important;
-}
+}

package/dist/basic-sdk/assets/css/sdoc-comment-editor-plugin.css

@@ -1,19 +1,19 @@
 /* List */
-.sdoc-editor-container .sdoc-comment-editor .list-container {
+.sdoc-editor-container .comment-editor .list-container {
   padding-left: 2em !important; 
 }
 
-.sdoc-comment-editor .list-container li p {
+.comment-editor .list-container li p {
   margin: 0 !important;
 }
 
 /* Paragraph */
-.sdoc-comment-editor .sdoc-comment-editor-paragraph {
+.comment-editor .comment-editor-paragraph {
   margin: 0.8em 0 !important;
   padding: 0 !important;
 }
 
 /* Image */
-.sdoc-comment-editor .sdoc-image-wrapper  {
+.comment-editor .sdoc-image-wrapper  {
   padding: 1px !important;
 }

package/dist/basic-sdk/comment/utils.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.searchCollaborators = void 0;
+var _helper = require("../extension/plugins/mention/helper");
+const searchCollaborators = (collaborators, searchValue, editor) => {
+  const validSearchValue = searchValue ? searchValue.trim().toLowerCase() : '';
+  const validCollaborators = Array.isArray(collaborators) && collaborators.length > 0 ? collaborators : [];
+  if (!validSearchValue) return validCollaborators;
+
+  // The current character is '@' and the previous character is a null character
+  const beforeStr = (0, _helper.getPreCharacters)(editor);
+  const isEmptyStr = beforeStr.slice(-2, -1).trim().length === 0;
+  if (beforeStr.slice(-1) === '@' && isEmptyStr) {
+    return validCollaborators;
+  }
+  return validCollaborators.filter(collaborator => {
+    const {
+      name,
+      name_pinyin = ''
+    } = collaborator;
+    if (name.toString().toLowerCase().indexOf(validSearchValue) > -1) return true;
+    if (!name_pinyin) return false;
+    const validNamePinyin = name_pinyin.toString().toLowerCase();
+    const validSearchPinyinValue = validSearchValue.replace(/ |'/g, '');
+
+    // complete: For example, seatable can be retrieved when searching for sea.
+    if (validNamePinyin.indexOf(validSearchPinyinValue) > -1) return true;
+    if (validNamePinyin.replace(/'/g, '').indexOf(validSearchPinyinValue) > -1) return true;
+    const validNamePinyinList = validNamePinyin.split('\'');
+    // acronym: For example, sea table can be retrieved when searching for st.
+    const namePinyinAcronym = validNamePinyinList.map(item => item && item.trim() ? item.trim().slice(0, 1) : '');
+    if (namePinyinAcronym.join('').indexOf(validSearchPinyinValue) > -1) return true;
+    return false;
+  });
+};
+exports.searchCollaborators = searchCollaborators;

package/dist/basic-sdk/constants/index.js

@@ -19,7 +19,7 @@ Object.defineProperty(exports, "PLUGIN_DISPLAY_TYPE", {
     return _plugin.PLUGIN_DISPLAY_TYPE;
   }
 });
-exports.Z_INDEX = exports.WIKI_OUTLINE = exports.WIKI_EDITOR_EDIT_AREA_WIDTH = exports.WIKI_EDITOR = exports.SDOC_STORAGE = exports.REBASE_TYPES = exports.REBASE_TYPE = exports.REBASE_ORIGIN = exports.REBASE_MARK_KEY = exports.REBASE_MARKS = void 0;
+exports.Z_INDEX = exports.WIKI_OUTLINE = exports.WIKI_EDITOR = exports.SDOC_STORAGE = exports.REBASE_TYPES = exports.REBASE_TYPE = exports.REBASE_ORIGIN = exports.REBASE_MARK_KEY = exports.REBASE_MARKS = void 0;
 var _keyCodes = _interopRequireDefault(require("./key-codes"));
 var _plugin = require("./plugin");
 var _Z_INDEX = _interopRequireWildcard(require("./z-index"));
@@ -72,7 +72,6 @@ const INTERNAL_EVENT = exports.INTERNAL_EVENT = {
 };
 const PAGE_EDIT_AREA_WIDTH = exports.PAGE_EDIT_AREA_WIDTH = 672; // 672 = 794 - 2[borderLeft + borderRight] - 120[paddingLeft + paddingRight]
 const COMMENT_EDITOR_EDIT_AREA_WIDTH = exports.COMMENT_EDITOR_EDIT_AREA_WIDTH = 364;
-const WIKI_EDITOR_EDIT_AREA_WIDTH = exports.WIKI_EDITOR_EDIT_AREA_WIDTH = 714;
 const COMMENT_EDITOR = exports.COMMENT_EDITOR = 'comment_editor';
 const WIKI_EDITOR = exports.WIKI_EDITOR = 'wiki_editor';
 const DOCUMENT_PLUGIN_EDITOR = exports.DOCUMENT_PLUGIN_EDITOR = 'document_plugin_editor';

package/dist/basic-sdk/context.js

@@ -55,15 +55,16 @@ class Context {
     this.api = null;
     this.config = null;
   }
-  initApi() {
+  init(api) {
     this.initSettings(); // lazy init context class
-    const server = this.getSetting('serviceUrl');
-    const token = this.getSetting('accessToken');
-    this.api = new _seafileApi.default(server, token);
-    const isOpenSocket = this.getSetting('isOpenSocket');
-    if (isOpenSocket) {
-      this.sdocServerApi = new _sdocServerApi.default(this.settings);
-    }
+    this.api = api;
+    // const server = this.getSetting('serviceUrl');
+    // const token = this.getSetting('accessToken');
+    // this.api = new SeafileAPI(server, token);
+    // const isOpenSocket = this.getSetting('isOpenSocket');
+    // if (isOpenSocket) {
+    //   this.sdocServerApi = new SDocServerApi(this.settings);
+    // }
   }
   getSettings() {
     return this.settings;

package/dist/basic-sdk/editor/comment-editor.css

@@ -0,0 +1,138 @@
+.comment-editor-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  cursor: text;
+}
+
+.comment-editor-wrapper .comment-editor-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.comment-editor-wrapper .comment-editor-content {
+  border: 1px solid #ececec;
+  border-radius: 3px;
+  transition: border-color .3s ease;
+}
+
+.comment-editor-wrapper .comment-editor-content:focus-within {
+ border-color: #ff8e03;
+}
+
+/* comment-editor */
+.comment-editor-wrapper .comment-editor-content .article.comment-editor {
+  width: 100%;
+  padding: 8px;
+  padding-bottom: 0;
+  min-height: 60px;
+  max-height: 130px;
+  box-shadow: none;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border: none;
+  background-color: transparent;
+}
+
+.comment-editor-wrapper .comment-editor-content .article.comment-editor :first-child {
+  margin-top: 0 !important;
+}
+
+.comment-editor-wrapper .comment-editor:empty:before {
+  content: attr(placeholder);
+  opacity: .6;
+}
+
+.comment-editor-wrapper .comment-editor:focus-visible {
+  outline: none;
+}
+
+.comment-editor-wrapper .comment-editor:focus {
+  border: 1px solid rgba(0, 0, 0, .12);
+}
+
+.comment-editor-wrapper .comment-editor-user-info {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.comment-editor-wrapper .comment-editor-user-info .comment-editor-user-img {
+  height: 30px;
+  width: 30px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin-right: 8px;
+}
+
+.comment-editor-wrapper .comment-editor-user-info .comment-editor-user-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.comment-editor-wrapper .comment-operations {
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* comment-editor-toolbar */
+.comment-editor-wrapper .comment-editor-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 32px;
+  user-select: none;
+  z-index: 102;
+  margin: 0 8px;
+  margin-top: 5px;
+}
+
+.comment-editor-wrapper .comment-editor-toolbar .comment-editor-menu-group {
+  border-right: none !important;
+  padding-left: 0 !important;
+}
+
+.comment-editor-wrapper .comment-editor-toolbar .menu-group {
+  height: 100%;
+  padding: 6px 0 6px 8px;
+  font-size: 0.75rem;
+  border-right: 1px solid #e5e6e8;
+  border-radius: 0 !important;
+  color: #444;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.comment-editor-wrapper .comment-editor-toolbar .menu-group .menu-group-item {
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  margin-right: 8px;
+  border: none !important;
+  color: #444;
+  background-color: transparent;
+}
+
+.comment-editor-wrapper .comment-editor-toolbar .menu-group .menu-group-item:disabled {
+  color: #BDBDBD;
+}
+
+.comment-editor-wrapper .comment-editor-toolbar .menu-group .menu-group-item:hover {
+  background-color: #F2F2F2;
+  border-radius: 2px;
+}
+
+.comment-editor-wrapper .comment-editor-toolbar .menu-group .menu-group-item[data-active='true'] {
+  color: #eb8205;
+}
+
+.comment-editor-wrapper .comment-editor-toolbar .menu-group .menu-group-item .sdocfont,
+.sdoc-menu-with-dropdown .sdoc-menu-with-dropdown-icon .sdocfont {
+  font-size: 12px;
+}

package/dist/basic-sdk/editor/comment-editor.js

@@ -0,0 +1,289 @@
+"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 _reactI18next = require("react-i18next");
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _scrollIntoViewIfNeeded = _interopRequireDefault(require("scroll-into-view-if-needed"));
+var _constants = require("../constants");
+var _context = _interopRequireDefault(require("../context"));
+var _useCursors = require("../cursor/use-cursors");
+var _decorates = require("../decorates");
+var _extension = require("../extension");
+var _insertElementDialog = _interopRequireDefault(require("../extension/commons/insert-element-dialog"));
+var _constants2 = require("../extension/constants");
+var _core = require("../extension/core");
+var _renderCommentEditorElement = _interopRequireDefault(require("../extension/render/render-comment-editor-element"));
+var _commentEditorToolbar = _interopRequireDefault(require("../extension/toolbar/comment-editor-toolbar"));
+var _useComment = require("../hooks/use-comment");
+var _useScrollContext = require("../hooks/use-scroll-context");
+var _nodeId = _interopRequireDefault(require("../node-id"));
+var _mdToSlate = _interopRequireDefault(require("../slate-convert/md-to-slate"));
+var _slateToMd = _interopRequireDefault(require("../slate-convert/slate-to-md"));
+var _eventBus = _interopRequireDefault(require("../utils/event-bus"));
+var _eventHandler = _interopRequireDefault(require("../utils/event-handler"));
+require("./comment-editor.css");
+const getSubmitTip = (type, content) => {
+  if (content) return 'Save';
+  return type === 'comment' ? 'Comment' : 'Reply';
+};
+const DEFAULT_PLACEHOLDER = 'Enter_comment_shift_enter_for_new_line_Enter_to_send';
+const CommentEditor = _ref => {
+  let {
+    content,
+    commentContent,
+    placeholder = DEFAULT_PLACEHOLDER,
+    insertContent,
+    updateContent,
+    onContentChange,
+    setIsEditing,
+    hiddenComment,
+    hiddenUserInfo,
+    closeComment,
+    addParticipants
+  } = _ref;
+  const commentWrapperRef = (0, _react.useRef)();
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const {
+    className,
+    userInfo,
+    type
+  } = (0, _useComment.useComment)();
+  const submitTip = (0, _react.useMemo)(() => getSubmitTip(type, content), [content, type]);
+  const document = (0, _react.useMemo)(() => {
+    const cursor = {};
+    let elements = null;
+    elements = [(0, _core.generateEmptyElement)(_constants2.PARAGRAPH, {
+      placeholder
+    })];
+    return {
+      elements,
+      cursor
+    };
+  }, [placeholder]);
+  const [slateValue, setSlateValue] = (0, _react.useState)(document.elements);
+  const commentEditorContainerRef = (0, _react.useRef)(null);
+  const editor = (0, _react.useMemo)(() => {
+    const defaultEditor = (0, _extension.createCommentEditor)();
+    const newEditor = (0, _nodeId.default)(defaultEditor);
+    const {
+      cursors
+    } = document;
+    newEditor.cursors = cursors || {};
+    newEditor.width = _constants.COMMENT_EDITOR_EDIT_AREA_WIDTH; // default width
+    newEditor.editorType = _constants.COMMENT_EDITOR;
+    return newEditor;
+  }, [document]);
+  const {
+    cursors
+  } = (0, _useCursors.useCursors)(editor);
+  const decorate = (0, _decorates.usePipDecorate)(editor);
+  // init eventHandler
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const eventProxy = (0, _react.useMemo)(() => new _eventHandler.default(editor), []);
+  const updateValue = (0, _react.useCallback)(value => {
+    if (!value || value.trim() === '') return;
+    if (!content) return insertContent(value);
+    updateContent && updateContent(value);
+  }, [content, insertContent, updateContent]);
+  const onSubmit = (0, _react.useCallback)(event => {
+    event && event.stopPropagation();
+    const mdString = (0, _slateToMd.default)(editor.children);
+    updateValue(mdString);
+    addParticipants(userInfo.username);
+    editor.children = [(0, _core.generateEmptyElement)(_constants2.PARAGRAPH, {
+      placeholder
+    })];
+    _slate.Transforms.select(editor, _slate.Editor.start(editor, []));
+    onContentChange && onContentChange(null);
+    closeComment && closeComment();
+  }, [editor, updateValue, addParticipants, userInfo.username, placeholder, onContentChange, closeComment]);
+  const onSubmitByEnterKey = (0, _react.useCallback)(event => {
+    if (!_slateReact.ReactEditor.isFocused(editor)) return;
+    onSubmit(event);
+  }, [editor, onSubmit]);
+
+  // addEventListener
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    const unsubscribePostComment = eventBus.subscribe(_constants.INTERNAL_EVENT.COMMENT_EDITOR_POST_COMMENT, onSubmitByEnterKey);
+    return () => {
+      unsubscribePostComment();
+    };
+  }, [onSubmitByEnterKey]);
+  const onCancel = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    const {
+      type: eventType,
+      keyCode,
+      target
+    } = event;
+    if (eventType === 'keydown' && keyCode !== _constants.KeyCodes.Esc) return;
+    if (eventType === 'click') {
+      const isSdocContentWrapper = target.classList.contains('sdoc-content-wrapper');
+      const listContainer = window.document.querySelector('#global-comment-list-container');
+      const resizeContainer = window.document.querySelector('.sdoc-comment-resize-handler');
+      const isClickOnListContainer = listContainer && listContainer.contains(target);
+      const isClickOnCommentEditorContainer = commentWrapperRef.current.contains(target);
+      const isClickResizeContainer = resizeContainer && resizeContainer.contains(target);
+      const isPreventCancel = isClickOnListContainer || isClickOnCommentEditorContainer || isClickResizeContainer || isSdocContentWrapper;
+      if (isPreventCancel) return;
+    }
+    setIsEditing && setIsEditing(false);
+    hiddenComment && hiddenComment(false);
+    if (onContentChange) {
+      if (editor.children.find(n => _slate.Node.string(n).trim())) {
+        onContentChange((0, _slateToMd.default)(editor.children));
+      } else {
+        onContentChange(null);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setIsEditing]);
+
+  // set editor children
+  (0, _react.useEffect)(() => {
+    let children = (0, _mdToSlate.default)(content);
+    if (commentContent) {
+      children = (0, _mdToSlate.default)(commentContent);
+    }
+    editor.children = children;
+    _slate.Transforms.select(editor, _slate.Editor.end(editor, []));
+  }, [editor, content, commentContent]);
+
+  // useMount: focus editor
+  (0, _react.useEffect)(() => {
+    const [firstNode] = editor.children;
+    if (firstNode) {
+      const [firstNodeFirstChild] = firstNode.children;
+      if (firstNodeFirstChild) {
+        const endOfFirstNode = _slate.Editor.end(editor, [0, 0]);
+        const range = {
+          anchor: endOfFirstNode,
+          focus: endOfFirstNode
+        };
+        (0, _core.focusEditor)(editor, range);
+      }
+      // Force refresh to fix comment list
+      setSlateValue([...editor.children]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const handleFocusEditor = e => {
+    if (e.target === commentEditorContainerRef.current) {
+      const focusPoint = _slate.Editor.end(editor, []);
+      (0, _core.focusEditor)(editor, focusPoint);
+    }
+  };
+  const handleScrollIntoView = (0, _react.useCallback)((editor, domRange) => {
+    try {
+      const {
+        selection
+      } = editor;
+      // Do not scroll into view, when focus on image
+      const [imageNodeEntry] = _slate.Editor.nodes(editor, {
+        match: n => [_constants2.IMAGE, _constants2.IMAGE_BLOCK].includes(n.type),
+        at: selection
+      });
+      if (imageNodeEntry) return;
+      const focusedNode = _slate.Node.get(editor, selection.focus.path);
+      const domNode = _slateReact.ReactEditor.toDOMNode(editor, focusedNode);
+      if (!domNode) return;
+      (0, _scrollIntoViewIfNeeded.default)(domNode, {
+        'scrollMode': 'if-needed'
+      });
+    } catch (error) {
+      //
+    }
+  }, []);
+  const onMouseDown = (0, _react.useCallback)(event => {
+    if (event.button === 0) {
+      // Compatible with the editor which unload table plugin
+      editor.reSetTableSelectedRange && editor.reSetTableSelectedRange();
+      const eventBus = _eventBus.default.getInstance();
+      eventBus.dispatch(_constants.INTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onKeyDown = (0, _react.useCallback)(event => {
+    if ((0, _isHotkey.default)('enter', event)) {
+      event.preventDefault();
+      const eventBus = _eventBus.default.getInstance();
+      eventBus.dispatch(_constants.INTERNAL_EVENT.COMMENT_EDITOR_POST_COMMENT, event);
+      return;
+    }
+    if ((0, _isHotkey.default)('shift+enter', event)) {
+      event.preventDefault();
+      _slate.Editor.insertBreak(editor);
+      return;
+    }
+    eventProxy.onKeyDown(event);
+  }, [eventProxy, editor]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('comment-editor-wrapper', className),
+    ref: commentWrapperRef
+  }, type === 'comment' && !hiddenUserInfo && /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-editor-user-info"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-editor-user-img"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: userInfo.avatar_url,
+    alt: "",
+    height: "100%",
+    width: "100%"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-editor-user-name"
+  }, userInfo.name)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-editor-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-editor-content"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: commentEditorContainerRef,
+    className: "article comment-editor",
+    onClick: handleFocusEditor
+  }, /*#__PURE__*/_react.default.createElement(_useScrollContext.ScrollContext.Provider, {
+    value: {
+      scrollRef: commentEditorContainerRef
+    }
+  }, /*#__PURE__*/_react.default.createElement(_slateReact.Slate, {
+    editor: editor,
+    value: slateValue,
+    onChange: setSlateValue
+  }, /*#__PURE__*/_react.default.createElement(_slateReact.Editable, {
+    id: "sdoc-editor",
+    scrollSelectionIntoView: handleScrollIntoView,
+    cursors: cursors,
+    renderElement: props => (0, _renderCommentEditorElement.default)({
+      ...props,
+      commentType: type
+    }),
+    renderLeaf: _extension.renderLeaf,
+    onMouseDown: onMouseDown,
+    decorate: decorate,
+    onCut: eventProxy.onCut,
+    onCopy: eventProxy.onCopy,
+    onCompositionStart: eventProxy.onCompositionStart,
+    onCompositionUpdate: eventProxy.onCompositionUpdate,
+    onCompositionEnd: eventProxy.onCompositionEnd,
+    onKeyDown: onKeyDown,
+    onBeforeInput: eventProxy.onBeforeInput
+  })))), /*#__PURE__*/_react.default.createElement(_commentEditorToolbar.default, {
+    editor: editor,
+    onSubmit: onSubmit,
+    submitBtnText: t(submitTip),
+    onCancel: onCancel
+  }))), /*#__PURE__*/_react.default.createElement(_insertElementDialog.default, {
+    editor: editor
+  }));
+};
+var _default = exports.default = CommentEditor;

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

@@ -291,7 +291,7 @@ const handleBase64Image = (editor, path, imgData) => {
   const file = new File([blob], `${_slugid.default.nice()}.jpg`, {
     type: unit8Array.mime
   });
-  _context.default.uploadLocalImage([file]).then(res => {
+  _context.default.api.uploadLocalImage([file]).then(res => {
     const _data = {
       ...imgData,
       src: res[0]

package/dist/basic-sdk/extension/plugins/image/use-copy-image.js

@@ -51,7 +51,7 @@ const useCopyImage = _ref => {
           const file = new File([blob], 'downloaded_image.png', {
             type: blob.type
           });
-          const imageUrl = await _context.default.uploadLocalImage([file]);
+          const imageUrl = await _context.default.api.uploadLocalImage([file]);
           if (imageUrl && imageUrl[0]) {
             updateImageNode(editor, element, imageUrl[0]);
           }

package/dist/basic-sdk/extension/plugins/image/use-upload-image.js

@@ -42,7 +42,8 @@ const useUploadImage = _ref => {
     const uploadCurrentImage = async () => {
       try {
         const fileItem = _imageCache.default.getImage(file_uuid);
-        const imageUrl = await _context.default.uploadLocalImage([fileItem]);
+        console.log(111, _context.default.api.uploadLocalImage);
+        const imageUrl = await _context.default.api.uploadLocalImage([fileItem]);
         if (imageUrl && imageUrl[0]) {
           updateImageNode(editor, element, imageUrl[0]);
         }

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

@@ -44,7 +44,7 @@ const LinkMenu = _ref => {
       isActive: false,
       onMouseDown: openLinkDialog
     };
-    menuProps.id = 'sdoc-comment-editor' + menuConfig.id;
+    menuProps.id = 'comment-editor' + menuConfig.id;
     return /*#__PURE__*/_react.default.createElement(_commons.MenuItem, menuProps);
   }
 

package/dist/basic-sdk/extension/plugins/mention/render-elem/participant-popover.js

@@ -9,10 +9,9 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _slate = require("@seafile/slate");
 var _constants = require("../../../../comment/constants");
-var _useParticipants = require("../../../../comment/hooks/use-participants");
 var _utils = require("../../../../comment/utils");
 var _constants2 = require("../../../../constants");
-var _useCollaborators = require("../../../../hooks/use-collaborators");
+var _useComment = require("../../../../hooks/use-comment");
 var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
 var _mouseEvent = require("../../../../utils/mouse-event");
 var _commons = require("../../../commons");
@@ -27,12 +26,10 @@ const ParticipantPopover = _ref => {
   } = _ref;
   const collaboratorsPopoverRef = (0, _react.useRef)(null);
   const {
-    collaborators
-  } = (0, _useCollaborators.useCollaborators)();
-  const {
+    collaborators,
     addParticipants,
     participants
-  } = (0, _useParticipants.useParticipantsContext)();
+  } = (0, _useComment.useComment)();
   const [searchedCollaborators, setSearchedCollaborators] = (0, _react.useState)([]);
   const [activeCollaboratorIndex, setActiveCollaboratorIndex] = (0, _react.useState)(-1);
   const [validCollaborators, setValidCollaborators] = (0, _react.useState)([]);