@seafile/sdoc-editor 2.0.134 → 2.0.136-alpha.0

package/dist/comment/components/comment-item-content.js

@@ -13,12 +13,14 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm
 var _react = _interopRequireWildcard(require("react"));
 var _reactI18next = require("react-i18next");
 var _reactstrap = require("reactstrap");
+var _commentEditor = require("@seafile/comment-editor");
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
 var _context2 = _interopRequireDefault(require("../../context"));
+var _useCollaborators2 = require("../../hooks/use-collaborators");
 var _mdToHtml = _interopRequireDefault(require("../../slate-convert/md-to-html"));
 var _notificationHooks = require("../hooks/notification-hooks");
-var _commentEditor = _interopRequireDefault(require("./comment-editor"));
+var _useParticipants = require("../hooks/use-participants");
 var _commentImagePreviewer = _interopRequireDefault(require("./comment-image-previewer"));
 var CommentItemContent = function CommentItemContent(_ref) {
   var isActive = _ref.isActive,
@@ -29,6 +31,11 @@ var CommentItemContent = function CommentItemContent(_ref) {
     onDeleteComment = _ref.onDeleteComment,
     t = _ref.t,
     targetId = _ref.targetId;
+  var _useParticipantsConte = (0, _useParticipants.useParticipantsContext)(),
+    addParticipants = _useParticipantsConte.addParticipants,
+    participants = _useParticipantsConte.participants;
+  var _useCollaborators = (0, _useCollaborators2.useCollaborators)(),
+    collaborators = _useCollaborators.collaborators;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     isDropdownOpen = _useState2[0],
@@ -119,6 +126,18 @@ var CommentItemContent = function CommentItemContent(_ref) {
       setImageUrl(event.target.src);
     }
   }, []);
+  var commentEditorProps = {
+    className: 'pb-3',
+    addParticipants: addParticipants,
+    participants: participants,
+    collaborators: collaborators,
+    content: comment.comment,
+    insertContent: updateContent,
+    hiddenComment: setIsEditing,
+    api: {
+      uploadLocalImage: _context2["default"].uploadLocalImage
+    }
+  };
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "comment-item"
   }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -187,12 +206,7 @@ var CommentItemContent = function CommentItemContent(_ref) {
     dangerouslySetInnerHTML: {
       __html: editorContent
     }
-  })), isEditing && /*#__PURE__*/_react["default"].createElement(_commentEditor["default"], {
-    className: "pb-3",
-    content: comment.comment,
-    updateContent: updateContent,
-    setIsEditing: setIsEditing
-  }), imageUrl && /*#__PURE__*/_react["default"].createElement(_commentImagePreviewer["default"], {
+  })), isEditing && /*#__PURE__*/_react["default"].createElement(_commentEditor.SeafileCommentEditor, commentEditorProps), imageUrl && /*#__PURE__*/_react["default"].createElement(_commentImagePreviewer["default"], {
     imageUrl: imageUrl,
     toggle: function toggle() {
       return setImageUrl('');

package/dist/comment/components/comment-item-reply.js

@@ -12,11 +12,13 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm
 var _react = _interopRequireWildcard(require("react"));
 var _reactI18next = require("react-i18next");
 var _reactstrap = require("reactstrap");
+var _commentEditor = require("@seafile/comment-editor");
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _context2 = _interopRequireDefault(require("../../context"));
+var _useCollaborators2 = require("../../hooks/use-collaborators");
 var _mdToHtml = _interopRequireDefault(require("../../slate-convert/md-to-html"));
+var _useParticipants = require("../hooks/use-participants");
 var _commentDeletePopover = _interopRequireDefault(require("./comment-delete-popover"));
-var _commentEditor = _interopRequireDefault(require("./comment-editor"));
 var _commentImagePreviewer = _interopRequireDefault(require("./comment-image-previewer"));
 var CommentItemReply = function CommentItemReply(_ref) {
   var isActive = _ref.isActive,
@@ -25,6 +27,11 @@ var CommentItemReply = function CommentItemReply(_ref) {
     deleteReply = _ref.deleteReply,
     updateReply = _ref.updateReply,
     t = _ref.t;
+  var _useParticipantsConte = (0, _useParticipants.useParticipantsContext)(),
+    addParticipants = _useParticipantsConte.addParticipants,
+    participants = _useParticipantsConte.participants;
+  var _useCollaborators = (0, _useCollaborators2.useCollaborators)(),
+    collaborators = _useCollaborators.collaborators;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     isDropdownOpen = _useState2[0],
@@ -101,6 +108,19 @@ var CommentItemReply = function CommentItemReply(_ref) {
       setImageUrl(event.target.src);
     }
   }, []);
+  var commentEditorProps = {
+    type: 'reply',
+    className: 'pb-3',
+    addParticipants: addParticipants,
+    participants: participants,
+    collaborators: collaborators,
+    content: editorContent,
+    insertContent: updateContent,
+    hiddenComment: setIsEditing,
+    api: {
+      uploadLocalImage: _context2["default"].uploadLocalImage
+    }
+  };
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "comment-item",
     ref: itemRef
@@ -150,13 +170,7 @@ var CommentItemReply = function CommentItemReply(_ref) {
     dangerouslySetInnerHTML: {
       __html: editorContent
     }
-  })), isEditing && /*#__PURE__*/_react["default"].createElement(_commentEditor["default"], {
-    className: "pb-3",
-    type: "reply",
-    content: editorContent,
-    updateContent: updateContent,
-    setIsEditing: setIsEditing
-  }), isShowDeletePopover && isActive && /*#__PURE__*/_react["default"].createElement(_commentDeletePopover["default"], {
+  })), isEditing && /*#__PURE__*/_react["default"].createElement(_commentEditor.SeafileCommentEditor, commentEditorProps), isShowDeletePopover && isActive && /*#__PURE__*/_react["default"].createElement(_commentDeletePopover["default"], {
     parentDom: itemRef.current,
     type: "reply",
     deleteConfirm: _deleteReply,

package/dist/comment/components/comment-list.js

@@ -14,14 +14,16 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm
 var _react = _interopRequireWildcard(require("react"));
 var _reactI18next = require("react-i18next");
 var _reactstrap = require("reactstrap");
+var _commentEditor = require("@seafile/comment-editor");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _slugid = _interopRequireDefault(require("slugid"));
 var _context2 = _interopRequireDefault(require("../../context"));
+var _useCollaborators2 = require("../../hooks/use-collaborators");
 var _useSelectionPosition = require("../../hooks/use-selection-position");
 var _helper = require("../helper");
 var _useCommentContext2 = require("../hooks/comment-hooks/use-comment-context");
-var _commentEditor = _interopRequireDefault(require("./comment-editor"));
+var _useParticipants = require("../hooks/use-participants");
 var _commentItemWrapper = _interopRequireDefault(require("./comment-item-wrapper"));
 require("./comment-list.css");
 var CommentList = function CommentList(_ref) {
@@ -41,7 +43,12 @@ var CommentList = function CommentList(_ref) {
     t = _ref.t;
   var commentPopover = (0, _react.useRef)(null);
   var commentDetailRef = (0, _react.useRef)(null);
-  var position = (0, _useSelectionPosition.useCommentListPosition)(activeElementIds, isContextComment, isClickedContextComment, commentedDom, commentDetail, closeComment);
+  var position = (0, _useSelectionPosition.useCommentListPosition)(activeElementIds, isContextComment, isClickedContextComment, commentedDom, commentDetail, closeComment, editor);
+  var _useParticipantsConte = (0, _useParticipants.useParticipantsContext)(),
+    addParticipants = _useParticipantsConte.addParticipants,
+    participants = _useParticipantsConte.participants;
+  var _useCollaborators = (0, _useCollaborators2.useCollaborators)(),
+    collaborators = _useCollaborators.collaborators;
   var _useCommentContext = (0, _useCommentContext2.useCommentContext)(),
     dispatch = _useCommentContext.dispatch;
   var _useState = (0, _react.useState)(false),
@@ -202,12 +209,17 @@ var CommentList = function CommentList(_ref) {
       style: {
         paddingTop: isEmptyComment ? '16px' : ''
       }
-    }, isEmptyComment && /*#__PURE__*/_react["default"].createElement(_commentEditor["default"], {
+    }, isEmptyComment && /*#__PURE__*/_react["default"].createElement(_commentEditor.SeafileCommentEditor, {
+      addParticipants: addParticipants,
+      participants: participants,
+      collaborators: collaborators,
       type: "comment",
       insertContent: addNewComment,
       hiddenComment: hiddenComment,
-      isContextComment: isContextComment,
-      closeComment: closeComment
+      closePanel: closeComment,
+      api: {
+        uploadLocalImage: _context2["default"].uploadLocalImage
+      }
     }), !isEmptyComment && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !isActiveEditor && /*#__PURE__*/_react["default"].createElement(_reactstrap.Input, {
       value: inputContent !== null && inputContent !== void 0 && inputContent.trim() ? '.....' : '',
       readOnly: true,
@@ -215,29 +227,40 @@ var CommentList = function CommentList(_ref) {
       onFocus: function onFocus() {
         setActiveCommentKey(index);
       }
-    }), isActiveEditor && /*#__PURE__*/_react["default"].createElement(_commentEditor["default"], {
+    }), isActiveEditor && /*#__PURE__*/_react["default"].createElement(_commentEditor.SeafileCommentEditor, {
       type: "reply",
       placeholder: 'Enter_reply_shift_Enter_for_new_line_Enter_to_send',
-      commentContent: commentInputs[item.id] || '',
+      addParticipants: addParticipants,
+      participants: participants,
+      collaborators: collaborators,
+      content: commentInputs[item.id] || '',
       insertContent: function insertContent(value) {
         return handleReplySubmit(value, item.id);
       },
       onContentChange: function onContentChange(content) {
         return handleInputChange(item.id, content);
       },
-      hiddenComment: hiddenComment
+      hiddenComment: hiddenComment,
+      api: {
+        uploadLocalImage: _context2["default"].uploadLocalImage
+      }
     }))));
   }), Object.values(commentDetail).length === 0 && /*#__PURE__*/_react["default"].createElement("div", {
     className: "non-global-comment-input-wrapper",
     style: {
       paddingTop: isEmptyComment ? '16px' : ''
     }
-  }, isEmptyComment && /*#__PURE__*/_react["default"].createElement(_commentEditor["default"], {
+  }, isEmptyComment && /*#__PURE__*/_react["default"].createElement(_commentEditor.SeafileCommentEditor, {
     type: "comment",
+    addParticipants: addParticipants,
+    participants: participants,
+    collaborators: collaborators,
     insertContent: addNewComment,
     hiddenComment: hiddenComment,
-    isContextComment: isContextComment,
-    closeComment: closeComment
+    closePanel: closeComment,
+    api: {
+      uploadLocalImage: _context2["default"].uploadLocalImage
+    }
   }), !isEmptyComment && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !showEditor && /*#__PURE__*/_react["default"].createElement(_reactstrap.Input, {
     value: inputContent !== null && inputContent !== void 0 && inputContent.trim() ? '.....' : '',
     readOnly: true,
@@ -245,15 +268,21 @@ var CommentList = function CommentList(_ref) {
     onFocus: function onFocus() {
       setShowEditor(true);
     }
-  }), showEditor && /*#__PURE__*/_react["default"].createElement(_commentEditor["default"], {
+  }), showEditor && /*#__PURE__*/_react["default"].createElement(_commentEditor.SeafileCommentEditor, {
     type: "reply",
     placeholder: 'Enter_reply_shift_Enter_for_new_line_Enter_to_send',
-    commentContent: inputContent,
+    addParticipants: addParticipants,
+    participants: participants,
+    collaborators: collaborators,
+    content: inputContent,
     insertContent: replyComment,
     onContentChange: function onContentChange(content) {
       setInputContent(content);
     },
-    hiddenComment: hiddenComment
+    hiddenComment: hiddenComment,
+    api: {
+      uploadLocalImage: _context2["default"].uploadLocalImage
+    }
   }))));
 };
 var _default = exports["default"] = (0, _reactI18next.withTranslation)('sdoc-editor')(CommentList);

package/dist/comment/components/editor-comment.js

@@ -194,7 +194,7 @@ var EditorComment = function EditorComment(_ref) {
     className: "comment-container-main"
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])('comment-container-right', {
-      'isContextComment': isContextComment
+      'is-context-comment': isContextComment
     })
   }, /*#__PURE__*/_react["default"].createElement(_elementsCommentCount["default"], {
     elementCommentsMap: element_comments_map,

package/dist/comment/components/global-comment/global-comment-editor.js

@@ -6,8 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _commentEditor = require("@seafile/comment-editor");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _commentEditor = _interopRequireDefault(require("../comment-editor"));
+var _context = _interopRequireDefault(require("../../../context"));
+var _useCollaborators2 = require("../../../hooks/use-collaborators");
+var _useParticipants = require("../../hooks/use-participants");
 var GlobalCommentEditor = function GlobalCommentEditor(_ref) {
   var isScrollDisplayed = _ref.isScrollDisplayed,
     globalCommentContent = _ref.globalCommentContent,
@@ -15,20 +18,32 @@ var GlobalCommentEditor = function GlobalCommentEditor(_ref) {
     insertDocComment = _ref.insertDocComment,
     hiddenCommentEditor = _ref.hiddenCommentEditor,
     onContentChange = _ref.onContentChange;
+  var _useParticipantsConte = (0, _useParticipants.useParticipantsContext)(),
+    addParticipants = _useParticipantsConte.addParticipants,
+    participants = _useParticipantsConte.participants;
+  var _useCollaborators = (0, _useCollaborators2.useCollaborators)(),
+    collaborators = _useCollaborators.collaborators;
+  var commentEditorProps = {
+    type: type,
+    className: 'sdoc-doc-comment-editor',
+    hiddenUserInfo: true,
+    content: globalCommentContent,
+    insertContent: insertDocComment,
+    onContentChange: onContentChange,
+    hiddenComment: hiddenCommentEditor,
+    addParticipants: addParticipants,
+    collaborators: collaborators,
+    participants: participants,
+    api: {
+      uploadLocalImage: _context["default"].uploadLocalImage
+    }
+  };
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])('sdoc-doc-comment-editor-container', 'sdoc-comment-list-container', {
       'scrolled': isScrollDisplayed
     })
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-doc-comment-editor-content"
-  }, /*#__PURE__*/_react["default"].createElement(_commentEditor["default"], {
-    type: type,
-    className: "sdoc-doc-comment-editor",
-    commentContent: globalCommentContent,
-    hiddenUserInfo: true,
-    insertContent: insertDocComment,
-    hiddenComment: hiddenCommentEditor,
-    onContentChange: onContentChange
-  })));
+  }, /*#__PURE__*/_react["default"].createElement(_commentEditor.SeafileCommentEditor, commentEditorProps)));
 };
 var _default = exports["default"] = GlobalCommentEditor;

package/dist/comment/components/global-comment/index.css

@@ -321,6 +321,6 @@
   font-weight: unset;
 }
 
-.sdoc-comment-drawer .sdoc-comment-list-container .global-comment-item-detail-wrapper .comment-item:not(:last-child){
+.sdoc-comment-drawer .sdoc-comment-list-container .global-comment-item-detail-wrapper .comment-item:not(:last-child) {
   margin-bottom: 16px;
 }

package/dist/comment/helper.js

@@ -4,13 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCursorPosition = exports.updateElementsAttrs = exports.updateCommentedElementsAttrs = exports.getSelectionRange = exports.getSelectedElemIds = exports.getPrimaryElementId = exports.getElementCommentCountTop = exports.getDomById = exports.getCursorPosition = exports.getCommentedTextsByElementId = exports.getAvatarUrl = void 0;
+exports.useCursorPosition = exports.updateElementsAttrs = exports.updateCommentedElementsAttrs = exports.getSelectionRange = exports.getSelectedElemIds = exports.getPrimaryElementId = exports.getElementCommentCountTop = exports.getDomById = exports.getCursorPosition = exports.getCommentedTextsByElementId = exports.getAvatarUrl = exports.commentContainerWikiTransfer = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
+var _constants = require("../constants");
 var _context = _interopRequireDefault(require("../context"));
 var _core = require("../extension/core");
 var _useScrollContext = require("../hooks/use-scroll-context");
@@ -56,6 +57,24 @@ var getAvatarUrl = exports.getAvatarUrl = function getAvatarUrl() {
   var avatarUrl = "".concat(server, "/media/avatars/default.png");
   return avatarUrl;
 };
+var commentContainerWikiTransfer = exports.commentContainerWikiTransfer = function commentContainerWikiTransfer(result, value) {
+  var newResult;
+  var isWikiTitleIcon = document.querySelector('.wiki-page-icon-wrapper');
+  var isWikiTitleCover = document.getElementById('wiki-page-cover');
+  if (isWikiTitleIcon && !isWikiTitleCover) {
+    // 90 is icon height in wiki
+    newResult = result - value - 90;
+  } else if (!isWikiTitleIcon && isWikiTitleCover) {
+    // 203 is icon height in wiki
+    newResult = result - value - 203;
+  } else if (isWikiTitleIcon && isWikiTitleCover) {
+    // 205 is icon and cover height in wiki
+    newResult = result - value - 205;
+  } else {
+    newResult = result - value;
+  }
+  return newResult;
+};
 var getElementCommentCountTop = exports.getElementCommentCountTop = function getElementCommentCountTop(editor, element, scrollTop) {
   var minY;
   var children = element.children || [];
@@ -71,7 +90,13 @@ var getElementCommentCountTop = exports.getElementCommentCountTop = function get
     if (!minY) minY = y;
     minY = Math.min(minY, y);
   });
-  return minY - 93 + scrollTop; // 100: header height(56) + toolbar height(37)
+  var resultY;
+  resultY = minY - 93 + scrollTop; // 100: header height(56) + toolbar height(37)
+  if (editor.editorType === _constants.WIKI_EDITOR) {
+    // 55 is basic top title height in wiki
+    resultY = commentContainerWikiTransfer(resultY, 55);
+  }
+  return resultY;
 };
 var getSelectedElemIds = exports.getSelectedElemIds = function getSelectedElemIds(editor) {
   var selection = editor.selection;

package/dist/editor/wiki-editor.js

@@ -18,7 +18,7 @@ var _constants = require("../constants");
 var _context = _interopRequireDefault(require("../context"));
 var _extension = require("../extension");
 var _insertElementDialog = _interopRequireDefault(require("../extension/commons/insert-element-dialog"));
-var _core = require("../extension/core");
+var _helpers = require("../extension/plugins/ai/ai-module/helpers");
 var _useColorContext = require("../hooks/use-color-context");
 var _useScrollContext = require("../hooks/use-scroll-context");
 var _layout = require("../layout");
@@ -34,7 +34,9 @@ var WikiEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     document = _ref.document,
     isReloading = _ref.isReloading,
     isWikiReadOnly = _ref.isWikiReadOnly,
-    scrollRef = _ref.scrollRef;
+    scrollRef = _ref.scrollRef,
+    showComment = _ref.showComment,
+    isShowRightPanel = _ref.isShowRightPanel;
   var validEditor = (0, _react.useMemo)(function () {
     if (propsEditor) return propsEditor;
     var defaultEditor = (0, _extension.createDefaultEditor)();
@@ -90,6 +92,18 @@ var WikiEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   (0, _react.useEffect)(function () {
     var eventBus = _eventBus["default"].getInstance();
     eventBus.subscribe(_constants.INTERNAL_EVENT.REFRESH_DOCUMENT, onRefreshDocument);
+
+    // Remove Marks on special conditions like unexpected exit or refresh page using AI or context comment
+    var hasSpecialMark = !_slate.Editor.nodes(validEditor, {
+      at: [],
+      match: function match(n) {
+        return _slate.Text.isText(n) && (n.sdoc_ai === true || n.comment === true);
+      }
+    }).next().done;
+    if (hasSpecialMark) {
+      (0, _helpers.removeMarks)(validEditor);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [onRefreshDocument]);
 
   // The parent component can call the method of this component through ref
@@ -162,7 +176,7 @@ var WikiEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     editor: validEditor,
     slateValue: slateValue,
     updateSlateValue: onValueChange,
-    showComment: false
+    showComment: showComment
   })), /*#__PURE__*/_react["default"].createElement(_wikiOutline["default"], {
     doc: slateValue
   }))))), /*#__PURE__*/_react["default"].createElement(_insertElementDialog["default"], {

package/dist/extension/plugins/table/render/table-header/index.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactI18next = require("react-i18next");
+var _objectUtils = _interopRequireDefault(require("../../../../../utils/object-utils"));
 var _constants = require("../../../../constants");
 var _constants2 = require("../../constants");
 var _helpers = require("../../helpers");
@@ -54,6 +55,10 @@ var TableHeader = function TableHeader(_ref) {
   var handleDragStart = function handleDragStart(event) {
     event.stopPropagation();
     var tableSelectedRange = editor.tableSelectedRange;
+    if (_objectUtils["default"].isSameObject(tableSelectedRange, _constants2.EMPTY_SELECTED_RANGE)) {
+      event.preventDefault();
+      return;
+    }
     var tableId = table.id;
     var minColIndex = tableSelectedRange.minColIndex,
       maxColIndex = tableSelectedRange.maxColIndex,
@@ -85,7 +90,9 @@ var TableHeader = function TableHeader(_ref) {
   var handleDragEnd = function handleDragEnd(event) {
     setIsDragMove(false);
     var indicator = document.getElementById('sdoc-drag-image');
-    indicator.style.display = 'none';
+    if (indicator) {
+      indicator.style.display = 'none';
+    }
   };
   return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_columnsHeader["default"], {
     table: table,

package/dist/extension/plugins/text-style/menu/index.js

@@ -156,7 +156,7 @@ var TextStyleMenuList = function TextStyleMenuList(_ref) {
     tipMessage: t('Reduce_font_size')
   }, /*#__PURE__*/_react["default"].createElement("i", {
     className: "sdocfont sdoc-reduce-font-size"
-  }))), idPrefix && ![_constants.DOCUMENT_PLUGIN_EDITOR, _constants.WIKI_EDITOR].includes(editor.editorType) && /*#__PURE__*/_react["default"].createElement(_commentContextMenu["default"], null), idPrefix && enableSeafileAI && /*#__PURE__*/_react["default"].createElement(_aiMenu.AIContextMenu, {
+  }))), idPrefix && ![_constants.DOCUMENT_PLUGIN_EDITOR].includes(editor.editorType) && /*#__PURE__*/_react["default"].createElement(_commentContextMenu["default"], null), idPrefix && enableSeafileAI && /*#__PURE__*/_react["default"].createElement(_aiMenu.AIContextMenu, {
     isRichEditor: isRichEditor
   }));
 };

package/dist/extension/plugins/whiteboard/hover-menu/index.css

@@ -0,0 +1,50 @@
+.sdoc-whiteboard-hover-menu-container {
+  position: absolute;
+  height: 42px;
+  z-index: 101;
+  width: auto;
+}
+
+.sdoc-whiteboard-hover-menu-container .hover-menu-container {
+  height: 36px;
+  background-color: #fff;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
+  border: 1px solid #e8e8e8;
+}
+
+.sdoc-whiteboard-hover-menu-container .hover-menu-container>span {
+  padding: 0 8px;
+}
+
+.sdoc-whiteboard-hover-menu-container .hover-menu-container>span:not(:last-of-type) {
+  padding: 0 8px;
+  border-right: 1px solid #e5e5e5;
+}
+
+.sdoc-whiteboard-hover-menu-container .hover-menu-container .op-item {
+  position: relative;
+  font-size: 12px;
+  color: #212529;
+  padding: 0 5px;
+  border-radius: 2px;
+  min-width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sdoc-whiteboard-hover-menu-container .hover-menu-container .op-item:hover {
+  color: #212529;
+  text-decoration: none;
+  background: #f1f1f1;
+}
+
+.sdoc-whiteboard-hover-menu-container .hover-menu-container .icon-font {
+  font-size: 12px;
+  color: #999999;
+}

package/dist/extension/plugins/whiteboard/hover-menu/index.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _tooltip = _interopRequireDefault(require("../../../../components/tooltip"));
+var _commons = require("../../../commons");
+require("./index.css");
+var WhiteboardHoverMenu = function WhiteboardHoverMenu(_ref) {
+  var menuPosition = _ref.menuPosition,
+    onOpen = _ref.onOpen,
+    openFullscreen = _ref.openFullscreen,
+    onDeleteWhiteboard = _ref.onDeleteWhiteboard;
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    showTooltip = _useState2[0],
+    setShowTooltip = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setShowTooltip(true);
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_commons.ElementPopover, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-whiteboard-hover-menu-container",
+    style: menuPosition
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "hover-menu-container"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "op-group-item"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    id: "sdoc_whiteboard_open",
+    role: "button",
+    className: "op-item",
+    onClick: onOpen
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "mr-1"
+  }, t('Open')))), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "op-group-item"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    id: "sdoc_whiteboard_delete",
+    role: "button",
+    className: "op-item",
+    onClick: onDeleteWhiteboard
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-delete icon-font"
+  }), showTooltip && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: "sdoc_whiteboard_delete",
+    placement: "top",
+    fade: true
+  }, t('Delete')))), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "op-group-item"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    id: "sdoc_whiteboard_full_screen_mode",
+    role: "button",
+    className: "op-item",
+    onClick: openFullscreen
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-fullscreen icon-font"
+  }), showTooltip && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: "sdoc_whiteboard_full_screen_mode",
+    placement: "top",
+    fade: true
+  }, t('Full_screen_mode')))))));
+};
+var _default = exports["default"] = WhiteboardHoverMenu;

package/dist/extension/plugins/whiteboard/render-elem.js

@@ -1,17 +1,23 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderWhiteboard = renderWhiteboard;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../../constants");
 var _context = _interopRequireDefault(require("../../../context"));
+var _useScrollContext = require("../../../hooks/use-scroll-context");
 var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+var _core = require("../../core");
+var _utils = require("../../utils");
+var _hoverMenu = _interopRequireDefault(require("./hover-menu"));
 require("./index.css");
 var Whiteboard = function Whiteboard(_ref) {
   var editor = _ref.editor,
@@ -21,7 +27,16 @@ var Whiteboard = function Whiteboard(_ref) {
     title = element.title,
     link = element.link;
   var whiteboardRef = (0, _react.useRef)();
+  var scrollRef = (0, _useScrollContext.useScrollContext)();
   var isSelected = (0, _slateReact.useSelected)();
+  var readOnly = (0, _slateReact.useReadOnly)();
+  var _useState = (0, _react.useState)({
+      top: '',
+      left: ''
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    menuPosition = _useState2[0],
+    setMenuPosition = _useState2[1];
   (0, _react.useEffect)(function () {
     var handleMessage = function handleMessage(event) {
       var _event$data;
@@ -47,6 +62,14 @@ var Whiteboard = function Whiteboard(_ref) {
       unsubscribeResizeArticle();
     };
   }, []);
+  var onDeleteWhiteboard = (0, _react.useCallback)(function () {
+    var path = _slateReact.ReactEditor.findPath(editor, element);
+    _slate.Transforms.removeNodes(editor, {
+      at: path
+    });
+    (0, _core.focusEditor)(editor);
+    _slate.Transforms.select(editor, editor.selection);
+  }, [editor, element]);
   var handleDoubleClick = function handleDoubleClick(event) {
     event.preventDefault();
     var siteRoot = _context["default"].getSetting('siteRoot');
@@ -54,7 +77,45 @@ var Whiteboard = function Whiteboard(_ref) {
     window.open(url, '_blank');
     return;
   };
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  var handleScroll = (0, _react.useCallback)(function (e) {
+    if (readOnly) return;
+    if (!isSelected) return;
+    if (e.currentTarget.scrollTop) {
+      var _menuPosition = (0, _utils.getMenuPosition)(whiteboardRef.current, editor);
+      setMenuPosition(_menuPosition);
+    }
+  }, [editor, isSelected, readOnly]);
+  (0, _react.useEffect)(function () {
+    if (readOnly) return;
+    var observerRefValue = null;
+    if (scrollRef.current) {
+      scrollRef.current.addEventListener('scroll', handleScroll);
+      observerRefValue = scrollRef.current;
+    }
+    return function () {
+      observerRefValue.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleScroll, readOnly, scrollRef]);
+  var handleOnClick = (0, _react.useCallback)(function () {
+    if (readOnly) return;
+    if (isSelected) {
+      var _menuPosition2 = (0, _utils.getMenuPosition)(whiteboardRef.current, editor);
+      setMenuPosition(_menuPosition2);
+    }
+  }, [editor, isSelected, readOnly]);
+  var openFullscreen = function openFullscreen() {
+    if (whiteboardRef.current.requestFullscreen) {
+      // Chrome
+      whiteboardRef.current.requestFullscreen();
+    } else if (whiteboardRef.current.webkitRequestFullscreen) {
+      // Safari
+      whiteboardRef.current.webkitRequestFullscreen();
+    } else if (whiteboardRef.current.msRequestFullscreen) {
+      // IE11
+      whiteboardRef.current.msRequestFullscreen();
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])('sdoc-whiteboard-container', {
       'isSelected': isSelected
     }),
@@ -69,7 +130,13 @@ var Whiteboard = function Whiteboard(_ref) {
     ref: whiteboardRef
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: "iframe-overlay",
-    onDoubleClick: handleDoubleClick
+    onDoubleClick: handleDoubleClick,
+    onClick: handleOnClick
+  })), isSelected && !readOnly && /*#__PURE__*/_react["default"].createElement(_hoverMenu["default"], {
+    menuPosition: menuPosition,
+    onOpen: handleDoubleClick,
+    openFullscreen: openFullscreen,
+    onDeleteWhiteboard: onDeleteWhiteboard
   }));
 };
 function renderWhiteboard(props, editor) {

package/dist/hooks/use-plugins.js

@@ -15,13 +15,17 @@ var PluginsContext = /*#__PURE__*/_react["default"].createContext(null);
 var PluginsProvider = exports.PluginsProvider = function PluginsProvider(_ref) {
   var showComment = _ref.showComment,
     propsPlugins = _ref.plugins,
-    children = _ref.children;
+    children = _ref.children,
+    setIsShowRightPanel = _ref.setIsShowRightPanel;
   var _useState = (0, _react.useState)(''),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     displayName = _useState2[0],
     setDisplayName = _useState2[1];
   var closePlugin = (0, _react.useCallback)(function () {
     setDisplayName('');
+    // Deal with comment component in wiki
+    setIsShowRightPanel && setIsShowRightPanel(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   var plugins = (0, _react.useMemo)(function () {
     var allPlugins = propsPlugins;

package/dist/hooks/use-selection-position.js

@@ -4,8 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useCommentListPosition = void 0;
+var _helper = require("../comment/helper");
+var _constants = require("../constants");
 var _useScrollContext = require("./use-scroll-context");
-var useCommentListPosition = exports.useCommentListPosition = function useCommentListPosition(selectedElementIds, isContextComment, isClickedContextComment, commentedDom, commentDetail, closeComment) {
+var useCommentListPosition = exports.useCommentListPosition = function useCommentListPosition(selectedElementIds, isContextComment, isClickedContextComment, commentedDom, commentDetail, closeComment, editor) {
   var _document$querySelect;
   var headerHeight = 100;
   var scrollRef = (0, _useScrollContext.useScrollContext)();
@@ -51,7 +53,12 @@ var useCommentListPosition = exports.useCommentListPosition = function useCommen
       }
     }
     var editorArticleRight = document.getElementById('sdoc-editor-print-wrapper').getBoundingClientRect().right;
-    var topPara = rect.bottom - headerHeight + 10 + scrollTop;
+    var topPara;
+    topPara = rect.bottom - headerHeight + 10 + scrollTop;
+    if (editor.editorType === _constants.WIKI_EDITOR) {
+      // 55 is basic top title height in wiki
+      topPara = (0, _helper.commentContainerWikiTransfer)(topPara, 55);
+    }
     var rightPara = editorArticleRight - rect.left - 300; // 300 is comment container's width
     return {
       right: rightPara,
@@ -63,6 +70,10 @@ var useCommentListPosition = exports.useCommentListPosition = function useCommen
   if (!selectionPosition) closeComment();
   if (selectionPosition && selectionPosition.y !== 0) {
     selectionPosition.y = selectionPosition.y - headerHeight + scrollTop;
+    if (editor.editorType === _constants.WIKI_EDITOR) {
+      // 47 is top nav bar height in wiki
+      selectionPosition.y = (0, _helper.commentContainerWikiTransfer)(selectionPosition.y, 47);
+    }
   }
   return {
     x: selectionPosition === null || selectionPosition === void 0 ? void 0 : selectionPosition.x,

package/dist/index.js

@@ -10,6 +10,12 @@ Object.defineProperty(exports, "CollaboratorsProvider", {
     return _useCollaborators.CollaboratorsProvider;
   }
 });
+Object.defineProperty(exports, "CommentContextProvider", {
+  enumerable: true,
+  get: function get() {
+    return _provider["default"];
+  }
+});
 Object.defineProperty(exports, "DiffViewer", {
   enumerable: true,
   get: function get() {
@@ -88,6 +94,12 @@ Object.defineProperty(exports, "RevisionEditor", {
     return _revisionEditor["default"];
   }
 });
+Object.defineProperty(exports, "RightPanel", {
+  enumerable: true,
+  get: function get() {
+    return _index["default"];
+  }
+});
 Object.defineProperty(exports, "SDocEditor", {
   enumerable: true,
   get: function get() {
@@ -244,6 +256,7 @@ Object.defineProperty(exports, "withSocketIO", {
     return _socket.withSocketIO;
   }
 });
+var _provider = _interopRequireDefault(require("./comment/provider"));
 var _fileLoading = _interopRequireDefault(require("./components/file-loading"));
 var _loading = _interopRequireDefault(require("./components/loading"));
 var _toast = _interopRequireDefault(require("./components/toast"));
@@ -260,6 +273,7 @@ var _useCollaborators = require("./hooks/use-collaborators");
 var _usePlugins = require("./hooks/use-plugins");
 var _nodeId = _interopRequireDefault(require("./node-id"));
 var _outline = _interopRequireDefault(require("./outline"));
+var _index = _interopRequireDefault(require("./right-panel/index"));
 var _slateConvert = require("./slate-convert");
 var _socket = require("./socket");
 var _commonUtils = require("./utils/common-utils");

package/dist/layout/article-container.js

@@ -17,7 +17,8 @@ var _fullWidthMode = require("../utils/full-width-mode");
 var _localStorageUtils = _interopRequireDefault(require("../utils/local-storage-utils"));
 function ArticleContainer(_ref) {
   var editor = _ref.editor,
-    children = _ref.children;
+    children = _ref.children,
+    isShowCommentPanelInWiki = _ref.isShowCommentPanelInWiki;
   var scrollRef = (0, _useScrollContext.useScrollContext)();
   var articleRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)({}),
@@ -63,7 +64,6 @@ function ArticleContainer(_ref) {
     };
   }, [editor.editorType, handleWindowResize]);
   (0, _react.useEffect)(function () {
-    if (editor.editorType === _constants.WIKI_EDITOR) return;
     if (editor.editorType === _constants.DOCUMENT_PLUGIN_EDITOR) return;
     handleWindowResize();
     window.addEventListener('resize', handleWindowResize);
@@ -73,7 +73,7 @@ function ArticleContainer(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   var articleStyle = editor.getArticleStyle && editor.getArticleStyle();
-  var articleContainerStyle = editor.getArticleStyle ? {
+  var articleContainerStyle = editor.editorType !== _constants.WIKI_EDITOR && editor.getArticleStyle ? {
     width: articleStyle.width
   } : containerStyle;
   return /*#__PURE__*/_react["default"].createElement("div", {

package/dist/right-panel/index.js

@@ -9,6 +9,8 @@ exports["default"] = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _comment = _interopRequireDefault(require("../comment"));
+var _commentOperation = _interopRequireDefault(require("../comment/components/comment-operation"));
 var _constants = require("../constants");
 var _usePlugins2 = require("../hooks/use-plugins");
 var _eventBus = _interopRequireDefault(require("../utils/event-bus"));
@@ -27,6 +29,16 @@ var RightPanel = function RightPanel(_ref) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     width = _useState2[0],
     setWidth = _useState2[1];
+  if (editor.editorType === _constants.WIKI_EDITOR) {
+    plugins = [{
+      name: 'sdoc-comment',
+      icon: /*#__PURE__*/_react["default"].createElement(_commentOperation["default"], null),
+      resizable_width: true,
+      display_type: _constants.PLUGIN_DISPLAY_TYPE.RIGHT_PANEL,
+      component: _comment["default"]
+    }];
+    displayPluginName = 'sdoc-comment';
+  }
   var panelWrapperStyle = (0, _react.useMemo)(function () {
     if (!displayPluginName) return null;
     var style = {

package/dist/utils/default-mode.js

@@ -10,9 +10,9 @@ var _localStorageUtils = _interopRequireDefault(require("./local-storage-utils")
 var getStyleByDefaultMode = exports.getStyleByDefaultMode = function getStyleByDefaultMode(scrollRef, editor) {
   var sdocStorage = _localStorageUtils["default"].getItem(_constants.SDOC_STORAGE) || {};
   var isShowOutline = sdocStorage.outlineOpen;
-  var containerStyle = {
+  var containerStyle = editor.editorType !== _constants.WIKI_EDITOR ? {
     width: _constants.ARTICLE_DEFAULT_WIDTH
-  };
+  } : {};
 
   // Has outline
   if (isShowOutline && editor.editorType !== _constants.WIKI_EDITOR) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "2.0.134",
+  "version": "2.0.136-alpha.0",
   "main": "dist/index.js",
   "scripts": {
     "test": "jest",
@@ -17,6 +17,7 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
+    "@seafile/comment-editor": "^0.0.3",
     "@seafile/print-js": "1.6.6",
     "@seafile/react-image-lightbox": "4.0.2",
     "@seafile/slate": "0.91.8",
@@ -69,6 +70,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "gitHead": "5ab8c21594b1d82f829e8d8fe6fa39954e2ed463"
-}
+  }
+}

package/LICENSE.txt

@@ -1,13 +0,0 @@
-Copyright (c) 2025 Seafile Ltd.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.

package/dist/comment/components/comment-editor.js

@@ -1,162 +0,0 @@
-"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 _constants = require("../../constants");
-var _context = _interopRequireDefault(require("../../context"));
-var _sdocCommentEditor = _interopRequireDefault(require("../../editor/sdoc-comment-editor"));
-var _extension = require("../../extension");
-var _constants2 = require("../../extension/constants");
-var _core = require("../../extension/core");
-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 _useParticipants = require("../hooks/use-participants");
-var getSubmitTip = function getSubmitTip(type, content) {
-  if (content) return 'Save';
-  return type === 'comment' ? 'Comment' : 'Reply';
-};
-var DEFAULT_PLACEHOLDER = 'Enter_comment_shift_enter_for_new_line_Enter_to_send';
-var CommentEditor = function CommentEditor(_ref) {
-  var type = _ref.type,
-    className = _ref.className,
-    content = _ref.content,
-    commentContent = _ref.commentContent,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? DEFAULT_PLACEHOLDER : _ref$placeholder,
-    insertContent = _ref.insertContent,
-    updateContent = _ref.updateContent,
-    setIsEditing = _ref.setIsEditing,
-    hiddenComment = _ref.hiddenComment,
-    hiddenUserInfo = _ref.hiddenUserInfo,
-    onContentChange = _ref.onContentChange,
-    isContextComment = _ref.isContextComment,
-    closeComment = _ref.closeComment;
-  var commentWrapperRef = (0, _react.useRef)();
-  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
-    t = _useTranslation.t;
-  var _useParticipantsConte = (0, _useParticipants.useParticipantsContext)(),
-    addParticipants = _useParticipantsConte.addParticipants;
-  var submitTip = (0, _react.useMemo)(function () {
-    return getSubmitTip(type, content);
-  }, [content, type]);
-  var userInfo = _context["default"].getUserInfo();
-  var document = (0, _react.useMemo)(function () {
-    var cursor = {};
-    var elements = null;
-    elements = [(0, _core.generateEmptyElement)(_constants2.PARAGRAPH, {
-      placeholder: placeholder
-    })];
-    return {
-      elements: elements,
-      cursor: cursor
-    };
-  }, [placeholder]);
-  var editor = (0, _react.useMemo)(function () {
-    var defaultEditor = (0, _extension.createCommentEditor)();
-    var newEditor = (0, _nodeId["default"])(defaultEditor);
-    var cursors = document.cursors;
-    newEditor.cursors = cursors || {};
-    newEditor.width = _constants.COMMENT_EDITOR_EDIT_AREA_WIDTH; // default width
-    newEditor.editorType = _constants.COMMENT_EDITOR;
-    return newEditor;
-  }, [document]);
-  var updateValue = (0, _react.useCallback)(function (value) {
-    if (!value || value.trim() === '') return;
-    if (!content) return insertContent(value);
-    updateContent && updateContent(value);
-  }, [content, insertContent, updateContent]);
-  var onSubmit = (0, _react.useCallback)(function (event) {
-    event && event.stopPropagation();
-    var mdString = (0, _slateToMd["default"])(editor.children);
-    updateValue(mdString);
-    addParticipants(userInfo.username);
-    editor.children = [(0, _core.generateEmptyElement)(_constants2.PARAGRAPH, {
-      placeholder: placeholder
-    })];
-    _slate.Transforms.select(editor, _slate.Editor.start(editor, []));
-    onContentChange && onContentChange(null);
-    closeComment && closeComment();
-  }, [editor, updateValue, addParticipants, userInfo.username, placeholder, onContentChange, closeComment]);
-  var onSubmitByEnterKey = (0, _react.useCallback)(function (event) {
-    if (!_slateReact.ReactEditor.isFocused(editor)) return;
-    onSubmit(event);
-  }, [editor, onSubmit]);
-  (0, _react.useEffect)(function () {
-    var eventBus = _eventBus["default"].getInstance();
-    var unsubscribePostComment = eventBus.subscribe(_constants.INTERNAL_EVENT.COMMENT_EDITOR_POST_COMMENT, onSubmitByEnterKey);
-    return function () {
-      unsubscribePostComment();
-    };
-  }, [onSubmitByEnterKey]);
-  var onCancel = (0, _react.useCallback)(function (event) {
-    event.stopPropagation();
-    var eventType = event.type,
-      keyCode = event.keyCode,
-      target = event.target;
-    if (eventType === 'keydown' && keyCode !== _constants.KeyCodes.Esc) return;
-    if (eventType === 'click') {
-      var isSdocContentWrapper = target.classList.contains('sdoc-content-wrapper');
-      var listContainer = window.document.querySelector('#global-comment-list-container');
-      var resizeContainer = window.document.querySelector('.sdoc-comment-resize-handler');
-      var isClickOnListContainer = listContainer && listContainer.contains(target);
-      var isClickOnCommentEditorContainer = commentWrapperRef.current.contains(target);
-      var isClickResizeContainer = resizeContainer && resizeContainer.contains(target);
-      var isPreventCancel = isClickOnListContainer || isClickOnCommentEditorContainer || isClickResizeContainer || isSdocContentWrapper;
-      if (isPreventCancel) return;
-    }
-    setIsEditing && setIsEditing(false);
-    hiddenComment && hiddenComment(false);
-    if (onContentChange) {
-      if (editor.children.find(function (n) {
-        return _slate.Node.string(n).trim();
-      })) {
-        onContentChange((0, _slateToMd["default"])(editor.children));
-      } else {
-        onContentChange(null);
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [setIsEditing]);
-  (0, _react.useEffect)(function () {
-    var 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]);
-  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(_sdocCommentEditor["default"], {
-    editor: editor,
-    type: type,
-    document: document,
-    onSubmit: onSubmit,
-    submitBtnText: t(submitTip),
-    onCancel: onCancel
-  }));
-};
-var _default = exports["default"] = CommentEditor;

package/dist/editor/sdoc-comment-editor.js

@@ -1,209 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
-var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/regeneratorRuntime"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactI18next = require("react-i18next");
-var _slate = require("@seafile/slate");
-var _deepCopy = _interopRequireDefault(require("deep-copy"));
-var _notificationHooks = require("../comment/hooks/notification-hooks");
-var _fileLoading = _interopRequireDefault(require("../components/file-loading"));
-var _toast = _interopRequireDefault(require("../components/toast"));
-var _constants = require("../constants");
-var _context2 = _interopRequireDefault(require("../context"));
-var _extension = require("../extension");
-var _core = require("../extension/core");
-var _commentEditorToolbar = _interopRequireDefault(require("../extension/toolbar/comment-editor-toolbar"));
-var _useCollaborators = require("../hooks/use-collaborators");
-var _useScrollContext = require("../hooks/use-scroll-context");
-var _layout = require("../layout");
-var _nodeId = _interopRequireDefault(require("../node-id"));
-var _socket = require("../socket");
-var _commonUtils = require("../utils/common-utils");
-var _eventBus = _interopRequireDefault(require("../utils/event-bus"));
-var _commentArticle = _interopRequireDefault(require("./comment-article"));
-var SdocCommentEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var propsEditor = _ref.editor,
-    document = _ref.document,
-    isReloading = _ref.isReloading,
-    type = _ref.type,
-    onSubmit = _ref.onSubmit,
-    submitBtnText = _ref.submitBtnText,
-    onCancel = _ref.onCancel;
-  var _useState = (0, _react.useState)(document.elements),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    slateValue = _useState2[0],
-    _setSlateValue = _useState2[1];
-  var commentEditorContainerRef = (0, _react.useRef)(null);
-  var commentTimeoutRef = (0, _react.useRef)(null);
-  var _useNotificationConte = (0, _notificationHooks.useNotificationContext)(),
-    notificationsInfo = _useNotificationConte.notificationsInfo;
-  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
-    t = _useTranslation.t;
-  var validEditor = (0, _react.useMemo)(function () {
-    if (propsEditor) return propsEditor;
-    var defaultEditor = (0, _extension.createCommentEditor)();
-    var editorConfig = _context2["default"].getEditorConfig();
-    var newEditor = (0, _nodeId["default"])((0, _socket.withSocketIO)(defaultEditor, {
-      document: document,
-      config: editorConfig
-    }));
-    var cursors = document.cursors;
-    newEditor.cursors = cursors || {};
-    newEditor.width = _constants.COMMENT_EDITOR_EDIT_AREA_WIDTH; // default width
-
-    return newEditor;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  (0, _react.useEffect)(function () {
-    if (!(commentEditorContainerRef !== null && commentEditorContainerRef !== void 0 && commentEditorContainerRef.current)) return;
-    if (Object.keys(notificationsInfo.notifications_map || {}).length === 0) return;
-    if (!commentEditorContainerRef.current.closest('.global-comment-input-wrapper')) return;
-    var clearAllNotification = /*#__PURE__*/function () {
-      var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
-        var res, notifications, eventBus, errorMessage;
-        return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              _context.prev = 0;
-              _context.next = 3;
-              return _context2["default"].readAllNotifications();
-            case 3:
-              _context.next = 5;
-              return _context2["default"].listUnseenNotifications();
-            case 5:
-              res = _context.sent;
-              notifications = res.data.notifications;
-              eventBus = _eventBus["default"].getInstance();
-              eventBus.dispatch(_constants.INTERNAL_EVENT.UNSEEN_NOTIFICATIONS_COUNT, notifications === null || notifications === void 0 ? void 0 : notifications.length);
-              eventBus.dispatch(_constants.INTERNAL_EVENT.NEW_NOTIFICATION);
-              eventBus.dispatch(_constants.INTERNAL_EVENT.CLEAR_NOTIFICATION);
-              _context.next = 17;
-              break;
-            case 13:
-              _context.prev = 13;
-              _context.t0 = _context["catch"](0);
-              errorMessage = (0, _commonUtils.getErrorMsg)(_context.t0);
-              _toast["default"].danger(t(errorMessage));
-            case 17:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, null, [[0, 13]]);
-      }));
-      return function clearAllNotification() {
-        return _ref2.apply(this, arguments);
-      };
-    }();
-    var el = commentEditorContainerRef && commentEditorContainerRef.current;
-
-    // Mark comment as read if focusing commentEditorContainerRef over 3s
-    var handleFocusIn = function handleFocusIn(e) {
-      commentTimeoutRef.current = setTimeout(function () {
-        clearAllNotification();
-        commentTimeoutRef.current = null;
-      }, 3000);
-    };
-    var handleBlur = function handleBlur() {
-      clearTimeout(commentTimeoutRef.current);
-      commentTimeoutRef.current = null;
-    };
-    el.addEventListener('focusin', handleFocusIn);
-    el.addEventListener('focusout', handleBlur);
-    return function () {
-      el.removeEventListener('focusin', handleFocusIn);
-      el.removeEventListener('focusout', handleBlur);
-      if (commentTimeoutRef.current) {
-        clearTimeout(commentTimeoutRef.current);
-        commentTimeoutRef.current = null;
-      }
-    };
-  }, [notificationsInfo]);
-
-  // useMount: focus editor
-  (0, _react.useEffect)(function () {
-    var _validEditor$children = (0, _slicedToArray2["default"])(validEditor.children, 1),
-      firstNode = _validEditor$children[0];
-    if (firstNode) {
-      var _firstNode$children = (0, _slicedToArray2["default"])(firstNode.children, 1),
-        firstNodeFirstChild = _firstNode$children[0];
-      if (firstNodeFirstChild) {
-        var endOfFirstNode = _slate.Editor.end(validEditor, [0, 0]);
-        var range = {
-          anchor: endOfFirstNode,
-          focus: endOfFirstNode
-        };
-        (0, _core.focusEditor)(validEditor, range);
-      }
-      // Force refresh to fix comment list
-      _setSlateValue((0, _toConsumableArray2["default"])(validEditor.children));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // The parent component can call the method of this component through ref
-  (0, _react.useImperativeHandle)(ref, function () {
-    return {
-      setSlateValue: function setSlateValue(document) {
-        // Force update of editor's child elements
-        validEditor.children = document.elements;
-        _setSlateValue((0, _toConsumableArray2["default"])(document.elements));
-      },
-      updateDocumentVersion: function updateDocumentVersion(document) {
-        validEditor.updateDocumentVersion(document);
-      },
-      // get value
-      getSlateValue: function getSlateValue() {
-        return (0, _deepCopy["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, document), {}, {
-          elements: slateValue
-        }));
-      }
-
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    };
-  }, [document, validEditor, slateValue]);
-  if (isReloading) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "h-100 w-100 d-flex align-items-center justify-content-center"
-    }, /*#__PURE__*/_react["default"].createElement(_fileLoading["default"], null));
-  }
-  var handleFocusEditor = function handleFocusEditor(e) {
-    if (e.target === commentEditorContainerRef.current) {
-      var focusPoint = _slate.Editor.end(validEditor, []);
-      (0, _core.focusEditor)(validEditor, focusPoint);
-    }
-  };
-  return /*#__PURE__*/_react["default"].createElement(_layout.EditorContainer, {
-    editor: validEditor
-  }, /*#__PURE__*/_react["default"].createElement(_useCollaborators.CollaboratorsProvider, null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "sdoc-comment-editor-wrapper"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    ref: commentEditorContainerRef,
-    className: "article sdoc-comment-editor",
-    onClick: handleFocusEditor
-  }, /*#__PURE__*/_react["default"].createElement(_useScrollContext.ScrollContext.Provider, {
-    value: {
-      scrollRef: commentEditorContainerRef
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_commentArticle["default"], {
-    type: type,
-    editor: validEditor,
-    slateValue: slateValue,
-    updateSlateValue: _setSlateValue
-  }))), /*#__PURE__*/_react["default"].createElement(_commentEditorToolbar["default"], {
-    editor: validEditor,
-    onSubmit: onSubmit,
-    submitBtnText: submitBtnText,
-    onCancel: onCancel
-  }))));
-});
-var _default = exports["default"] = SdocCommentEditor;