@seafile/sdoc-editor 1.0.182 → 1.0.184-alpha.0

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

@@ -32,15 +32,14 @@ const CommentEditor = _ref => {
     type,
     className,
     content,
-    globalCommentContent,
+    commentContent,
     placeholder,
     insertContent,
     updateContent,
     setIsEditing,
     hiddenComment,
-    globalComment,
     hiddenUserInfo,
-    updateGlobalCommentContent
+    onContentChange
   } = _ref;
   const commentWrapperRef = (0, _react.useRef)();
   const {
@@ -87,8 +86,8 @@ const CommentEditor = _ref => {
       placeholder
     })];
     _slate.Transforms.select(editor, _slate.Editor.start(editor, []));
-    updateGlobalCommentContent && updateGlobalCommentContent(null);
-  }, [editor, updateValue, addParticipants, userInfo.username, placeholder, updateGlobalCommentContent]);
+    onContentChange && onContentChange(null);
+  }, [editor, updateValue, addParticipants, userInfo.username, placeholder, onContentChange]);
   const onSubmitByEnterKey = (0, _react.useCallback)(event => {
     if (!_slateReact.ReactEditor.isFocused(editor)) return;
     onSubmit(event);
@@ -111,37 +110,32 @@ const CommentEditor = _ref => {
     if (eventType === 'click') {
       const isSdocContentWrapper = target.classList.contains('sdoc-content-wrapper');
       const listContainer = window.document.querySelector('#global-comment-list-container');
-      const commentEditorContainer = window.document.querySelector('.sdoc-doc-comment-editor-container');
       const resizeContainer = window.document.querySelector('.sdoc-comment-resize-handler');
-      const scrollContainer = window.document.querySelector('.sdoc-scroll-container');
       const isClickOnListContainer = listContainer && listContainer.contains(target);
-      const isClickOnCommentEditorContainer = commentEditorContainer && commentEditorContainer.contains(target);
+      const isClickOnCommentEditorContainer = commentWrapperRef.current.contains(target);
       const isClickResizeContainer = resizeContainer && resizeContainer.contains(target);
-      const isClickScrollContainer = scrollContainer && scrollContainer.contains(target);
-      const isPreventCancel = isClickOnListContainer || isClickOnCommentEditorContainer || isClickResizeContainer || isClickScrollContainer || isSdocContentWrapper;
-      // Global comment could not be canceled by clicking outside
-      if (globalComment && !isClickScrollContainer) return;
+      const isPreventCancel = isClickOnListContainer || isClickOnCommentEditorContainer || isClickResizeContainer || isSdocContentWrapper;
       if (isPreventCancel) return;
     }
     setIsEditing && setIsEditing(false);
     hiddenComment && hiddenComment(false);
-    if (updateGlobalCommentContent) {
+    if (onContentChange) {
       if (editor.children.find(n => _slate.Node.string(n).trim())) {
-        updateGlobalCommentContent((0, _slateToMd.default)(editor.children));
+        onContentChange((0, _slateToMd.default)(editor.children));
       } else {
-        updateGlobalCommentContent(null);
+        onContentChange(null);
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [setIsEditing]);
   (0, _react.useEffect)(() => {
     let children = (0, _mdToSlate.default)(content);
-    if (globalCommentContent) {
-      children = (0, _mdToSlate.default)(globalCommentContent);
+    if (commentContent) {
+      children = (0, _mdToSlate.default)(commentContent);
     }
     editor.children = children;
     _slate.Transforms.select(editor, _slate.Editor.end(editor, []));
-  }, [editor, content, globalCommentContent]);
+  }, [editor, content, commentContent]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('comment-editor-wrapper', className),
     ref: commentWrapperRef

package/dist/basic-sdk/comment/components/comment-item-collapse-wrapper.js

@@ -77,7 +77,7 @@ const CommentItemCollapseWrapper = _ref => {
   }, [setCurrentCommentGroup, topLevelComment.id]);
   return /*#__PURE__*/_react.default.createElement("div", {
     id: `comment-item-wrapper_${topLevelComment.id}`,
-    className: (0, _classnames.default)('comment-ui-container', {
+    className: (0, _classnames.default)('comment-collapse-wrapper', 'comment-ui-container', {
       'sdoc-resolved': topLevelComment.resolved,
       'd-flex flex-column': element
     }),

package/dist/basic-sdk/comment/components/comment-item-wrapper.js

@@ -15,7 +15,6 @@ var _context = _interopRequireDefault(require("../../../context"));
 var _useCommentContext = require("../hooks/comment-hooks/use-comment-context");
 var _commentItemContent = _interopRequireDefault(require("./comment-item-content"));
 var _commentItemReply = _interopRequireDefault(require("./comment-item-reply"));
-var _commentEditor = _interopRequireDefault(require("./comment-editor"));
 var _constants = require("../constants");
 var _commentDeletePopover = _interopRequireDefault(require("./comment-delete-popover"));
 const CommentItemWrapper = _ref => {
@@ -28,11 +27,10 @@ const CommentItemWrapper = _ref => {
     isGlobalComment,
     commentDetailRef,
     updateScrollPosition,
-    hiddenComment,
     setCurrentCommentGroup,
     onCommentClick,
     isEmptyComment,
-    addNewComment
+    isCollapseCommentEditor
   } = _ref;
   const listRef = (0, _react.useRef)(null);
   const {
@@ -41,6 +39,9 @@ const CommentItemWrapper = _ref => {
   const scrollRef = (0, _react.useRef)(document.querySelector('.sdoc-scroll-container'));
   const [isShowDeleteDialog, setIsShowDeleteDialog] = (0, _react.useState)(false);
   const commentOpToolsId = `commentOpTools_${comment === null || comment === void 0 ? void 0 : comment.id}`;
+  const style = !isGlobalComment && isCollapseCommentEditor ? {
+    maxHeight: '341px'
+  } : {};
   const deleteComment = (0, _react.useCallback)(async commentId => {
     await _context.default.deleteComment(commentId);
     const {
@@ -278,7 +279,8 @@ const CommentItemWrapper = _ref => {
     className: "comment-item-selected-text"
   }, _slate.Node.string(element))), !isEmptyComment && /*#__PURE__*/_react.default.createElement("div", {
     ref: listRef,
-    className: "comment-item-list"
+    className: "comment-item-list",
+    style: style
   }, /*#__PURE__*/_react.default.createElement(_commentItemContent.default, {
     key: comment.id,
     container: container,
@@ -298,21 +300,6 @@ const CommentItemWrapper = _ref => {
       updateReply
     };
     return /*#__PURE__*/_react.default.createElement(_commentItemReply.default, props);
-  })), !isGlobalComment && /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-reply-wrapper",
-    style: {
-      paddingTop: isEmptyComment ? '16px' : ''
-    }
-  }, isEmptyComment && /*#__PURE__*/_react.default.createElement(_commentEditor.default, {
-    type: "comment",
-    placeholder: 'Enter_reply_shift_Enter_for_new_line_Enter_to_send',
-    insertContent: addNewComment,
-    hiddenComment: hiddenComment
-  }), !isEmptyComment && /*#__PURE__*/_react.default.createElement(_commentEditor.default, {
-    type: "reply",
-    placeholder: 'Enter_reply_shift_Enter_for_new_line_Enter_to_send',
-    insertContent: insertContent,
-    hiddenComment: hiddenComment
   })), isShowDeleteDialog && isActive && /*#__PURE__*/_react.default.createElement(_commentDeletePopover.default, {
     type: "comment",
     setIsShowDeleteDialog: setIsShowDeleteDialog,

package/dist/basic-sdk/comment/components/comment-list.css

@@ -1,6 +1,5 @@
 .sdoc-comment-list-container {
   position: absolute;
-  margin-top: 5px;
   right: 0;
 }
 
@@ -8,20 +7,7 @@
   font-size: 14px;
 }
 
-.sdoc-comment-list-container .comment-ui-container {
-  background-color: rgba(255, 255, 255);
-  margin-bottom: 0px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, .15), 0 4px 8px 3px rgba(0, 0, 0, .15);
-  padding: 16px;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
 /* comment detail list */
-.sdoc-comment-list-container .comment-item-detail-wrapper .comment-item-list {
-  margin-bottom: 16px;
-}
-
 .sdoc-comment-list-container .comment-item-detail-wrapper .comment-item-list .comment-item .comment-content {
   margin-bottom: 0px;
 }
@@ -30,27 +16,6 @@
   padding: 16px 16px 0px;
 }
 
-.sdoc-comment-list-container .comment-ui-container.sdoc-resolved {
-  background: #f5f5f5;
-}
-
-.sdoc-comment-list-container .comment-ui-container.active {
-  position: relative;
-  left: -5px;
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, .15), 0 4px 8px 3px rgba(0, 0, 0, .15);
-}
-
-.sdoc-comment-list-container .comment-item-selected-text-container {
-  width: 100%;
-  height: 32px;
-  display: flex;
-  padding: 6px 16px;
-  align-items: center;
-  overflow: hidden;
-  border-radius: 3px 3px 0 0;
-}
-
 .sdoc-comment-list-container .comment-item-selected-text-container .sdoc-comment-quote {
   font-size: 12px;
   flex-shrink: 0;
@@ -73,14 +38,9 @@
   padding-bottom: 0px;
 }
 
-.sdoc-comment-list-container-popover .comment-item-list {
-  max-height: 280px;
-}
-
 .sdoc-comment-list-container .comment-item {
   position: relative;
   padding: 0px;
-  cursor: pointer;
 }
 
 .sdoc-comment-list-container .comment-item .comment-item-operation-wrapper {
@@ -172,7 +132,6 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  cursor: pointer;
 }
 
 .sdoc-comment-list-container .comment-header .comment-author__info .name {
@@ -340,11 +299,6 @@
   justify-content: flex-end;
 }
 
-.sdoc-doc-comment-editor-container.sdoc-comment-list-container .comment-ui-container {
-  padding-left: 10px;
-  padding-right: 10px;
-}
-
 /* Side comment style */
 .sdoc-article-container .sdoc-comment-list-container .comment-item .comment-header .comment-author__avatar {
   display: flex;
@@ -380,21 +334,49 @@
   padding-left: 8px;
 }
 
-.sdoc-article-container .sdoc-comment-list-container .sdoc-reply-wrapper {
-  padding: 0 16px 16px;
-}
-
 .sdoc-article-container .sdoc-comment-list-container .comment-content div:last-child p {
   margin-bottom: 0;
 }
 
-/* editor side comment editor */
-.sdoc-article-container .sdoc-comment-list-container .comment-list .comment-ui-container.active {
-  padding: 0;
+.sdoc-comment-list-container-popover {
+  background-color: rgba(255, 255, 255);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .15), 0 4px 8px 3px rgba(0, 0, 0, .15);
+  border-radius: 5px;
 }
 
-.sdoc-article-container .sdoc-comment-list-container .comment-ui-container.active {
-  padding: 16px;
+.sdoc-comment-list-container-popover .comment-item-list {
+  max-height: 260px;
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #ececec;
+}
+
+.sdoc-comment-list-container-popover .non-global-comment-input-wrapper {
+  padding: 0px 16px 16px 16px;
+  width: 100%;
+}
+
+.sdoc-comment-list-container-popover .non-global-comment-input-wrapper .form-control[readonly] {
+  background-color: #fff;
+}
+
+.sdoc-comment-list-container-popover .non-global-comment-input-wrapper .form-control {
+  font-size: 14px;
+  font-weight: unset;
+  border: 1px solid #ececec;
+}
+
+.sdoc-comment-list-container-popover .non-global-comment-input-wrapper.active .form-control {
+  padding-top: 14px;
+}
+
+.sdoc-comment-list-container-popover .non-global-comment-input-wrapper .form-control:focus {
+  box-shadow: none;
+  border-color: #e1e2e5;
+}
+
+.sdoc-comment-list-container-popover .non-global-comment-input-wrapper .form-control::placeholder {
+  color: rgb(191, 191, 191);
 }
 
 /* Override seafile ui */

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

@@ -8,26 +8,32 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
+var _reactstrap = require("reactstrap");
+var _reactI18next = require("react-i18next");
 var _context = _interopRequireDefault(require("../../../context"));
 var _useSelectionPosition = require("../../hooks/use-selection-position");
 var _useCommentContext = require("../hooks/comment-hooks/use-comment-context");
 var _commentItemWrapper = _interopRequireDefault(require("./comment-item-wrapper"));
-var _commentItemCollapseWrapper = _interopRequireDefault(require("./comment-item-collapse-wrapper"));
+var _commentEditor = _interopRequireDefault(require("./comment-editor"));
 require("./comment-list.css");
 const CommentList = _ref => {
   let {
-    editor,
-    comments = [],
-    commentDetail = {},
     activeElement,
-    isShowCommentDetail,
+    commentDetail = {},
     onSetCommentDetail,
-    deleteUnseenNotifications
+    t
   } = _ref;
+  const commentPopover = (0, _react.useRef)(null);
+  const commentDetailRef = (0, _react.useRef)(null);
   const position = (0, _useSelectionPosition.useCommentListPosition)(activeElement);
   const {
     dispatch
   } = (0, _useCommentContext.useCommentContext)();
+  const [showEditor, setShowEditor] = (0, _react.useState)(false);
+  const [inputContent, setInputContent] = (0, _react.useState)(null);
+  const [top, setTop] = (0, _react.useState)('-999px');
+  const isEmptyComment = Object.keys(commentDetail).length ? false : true;
+  const isCollapseCommentEditor = !isEmptyComment && !showEditor;
   const insertComment = (0, _react.useCallback)(async (elementId, comment) => {
     const res = await _context.default.insertComment(comment);
     const {
@@ -48,8 +54,9 @@ const CommentList = _ref => {
       }
     });
     onSetCommentDetail(newComment);
+    setShowEditor(true);
   }, [dispatch, onSetCommentDetail]);
-  const insertContent = (0, _react.useCallback)(content => {
+  const addNewComment = (0, _react.useCallback)(content => {
     const user = _context.default.getUserInfo();
     const elementId = activeElement === null || activeElement === void 0 ? void 0 : activeElement.id;
     const time = (0, _dayjs.default)().format('YYYY-MM-DD HH:mm:ss');
@@ -64,36 +71,67 @@ const CommentList = _ref => {
     };
     insertComment(elementId, comment);
   }, [insertComment, activeElement === null || activeElement === void 0 ? void 0 : activeElement.id]);
+  const replyComment = (0, _react.useCallback)(content => {
+    if (commentDetailRef !== null && commentDetailRef !== void 0 && commentDetailRef.current) {
+      commentDetailRef.current.insertContent(content);
+    }
+  }, []);
+  const hiddenComment = (0, _react.useCallback)(() => {
+    setShowEditor(false);
+  }, []);
+  (0, _react.useEffect)(() => {
+    console.log('position.y', position.y);
+    setTop(`${position.y}px`);
+    if (commentPopover !== null && commentPopover !== void 0 && commentPopover.current) {
+      const {
+        height
+      } = commentPopover.current.getBoundingClientRect();
+      const popoverBottomY = position.y + height;
+      const viewportHeight = window.innerHeight;
+      if (popoverBottomY > viewportHeight) {
+        console.log('超出');
+      }
+    }
+  }, [position.y]);
   return /*#__PURE__*/_react.default.createElement("div", {
+    ref: commentPopover,
     id: "sdoc-comment-list-container",
     className: "sdoc-comment-list-container sdoc-comment-list-container-popover",
     style: {
-      top: position.y,
+      top,
       width: '300px'
     }
-  }, !isShowCommentDetail && comments.map(comment => {
-    var _topLevelComment$repl, _topLevelComment$repl2;
-    const topLevelComment = comment || {};
-    const replyCount = topLevelComment === null || topLevelComment === void 0 ? void 0 : (_topLevelComment$repl = topLevelComment.replies) === null || _topLevelComment$repl === void 0 ? void 0 : _topLevelComment$repl.length;
-    const latestReply = ((_topLevelComment$repl2 = topLevelComment.replies) === null || _topLevelComment$repl2 === void 0 ? void 0 : _topLevelComment$repl2.length) > 0 ? topLevelComment.replies[topLevelComment.replies.length - 1] : null;
-    return /*#__PURE__*/_react.default.createElement(_commentItemCollapseWrapper.default, {
-      key: topLevelComment.id,
-      editor: editor,
-      topLevelComment: topLevelComment,
-      replyCount: replyCount,
-      latestReply: latestReply,
-      setCurrentCommentGroup: () => {
-        deleteUnseenNotifications && deleteUnseenNotifications(topLevelComment);
-        onSetCommentDetail(topLevelComment);
-      }
-    });
-  }), isShowCommentDetail && /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-list"
   }, /*#__PURE__*/_react.default.createElement(_commentItemWrapper.default, {
+    commentDetailRef: commentDetailRef,
     comment: commentDetail,
     isActive: true,
-    isEmptyComment: Object.keys(commentDetail).length ? false : true,
-    addNewComment: insertContent
-  })));
+    isEmptyComment: isEmptyComment,
+    isCollapseCommentEditor: isCollapseCommentEditor
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "non-global-comment-input-wrapper",
+    style: {
+      paddingTop: isEmptyComment ? '16px' : ''
+    }
+  }, isEmptyComment && /*#__PURE__*/_react.default.createElement(_commentEditor.default, {
+    type: "comment",
+    insertContent: addNewComment,
+    hiddenComment: hiddenComment
+  }), !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,
+    placeholder: t('Enter_reply'),
+    onFocus: () => {
+      setShowEditor(true);
+    }
+  }), showEditor && /*#__PURE__*/_react.default.createElement(_commentEditor.default, {
+    type: "reply",
+    placeholder: 'Enter_reply_shift_Enter_for_new_line_Enter_to_send',
+    commentContent: inputContent,
+    insertContent: replyComment,
+    onContentChange: content => {
+      setInputContent(content);
+    },
+    hiddenComment: hiddenComment
+  }))));
 };
-var _default = exports.default = CommentList;
+var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(CommentList);

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

@@ -30,9 +30,7 @@ const EditorComment = _ref => {
     editor
   }); // The slate node of the current cursor line
   const [activeElement, setActiveElement] = (0, _react.useState)(null); // The slate node currently activated by clicking
-  const [comments, setComments] = (0, _react.useState)([]);
   const [isShowComments, setIsShowComments] = (0, _react.useState)(false);
-  const [isShowCommentDetail, setIsShowCommentDetail] = (0, _react.useState)(true);
   const [commentDetail, setCommentDetail] = (0, _react.useState)({});
   const onAddCommentToggle = (0, _react.useCallback)(event => {
     event.stopPropagation();
@@ -43,23 +41,19 @@ const EditorComment = _ref => {
     }
     setActiveElement(activeElement);
     setIsShowComments(true);
-    setIsShowCommentDetail(true);
     setCommentDetail({});
   }, [currentSelectionElement]);
   const onSelectElement = (0, _react.useCallback)(elementId => {
     const activeElement = (0, _index.getCommentElementById)(elementId, editor);
     setActiveElement(activeElement);
     const unresolvedComments = element_comments_map[elementId].filter(item => !item.resolved);
-    setComments(unresolvedComments);
+    setCommentDetail(unresolvedComments[0]);
     setIsShowComments(true);
-    setIsShowCommentDetail(false);
   }, [editor, element_comments_map]);
   const onSetCommentDetail = (0, _react.useCallback)(comment => {
     setCommentDetail(comment);
-    setIsShowCommentDetail(true);
   }, []);
   const hiddenComment = (0, _react.useCallback)(() => {
-    setComments([]);
     setCommentDetail({});
     setIsShowComments(false);
   }, []);
@@ -68,7 +62,6 @@ const EditorComment = _ref => {
   (0, _react.useEffect)(() => {
     if (activeElement) {
       const unresolvedComments = element_comments_map[activeElement.id].filter(item => !item.resolved);
-      setComments(unresolvedComments);
       if (unresolvedComments.length === 0) {
         setIsShowComments(false);
       }
@@ -124,13 +117,9 @@ const EditorComment = _ref => {
     editor: editor,
     onSelectElement: onSelectElement
   }), isShowComments && /*#__PURE__*/_react.default.createElement(_commentList.default, {
-    editor: editor,
-    comments: comments,
     activeElement: activeElement,
-    isShowCommentDetail: isShowCommentDetail,
     commentDetail: commentDetail,
-    onSetCommentDetail: onSetCommentDetail,
-    deleteUnseenNotifications: deleteUnseenNotifications
+    onSetCommentDetail: onSetCommentDetail
   })));
 };
 var _default = exports.default = EditorComment;

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

@@ -15,22 +15,22 @@ const GlobalCommentEditor = _ref => {
     type,
     insertDocComment,
     hiddenCommentEditor,
-    updateGlobalCommentContent
+    onContentChange
   } = _ref;
   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: "comment-ui-container active"
+    className: "sdoc-doc-comment-editor-content"
   }, /*#__PURE__*/_react.default.createElement(_commentEditor.default, {
     type: type,
     className: "sdoc-doc-comment-editor",
-    globalCommentContent: globalCommentContent,
+    commentContent: globalCommentContent,
     hiddenUserInfo: true,
     insertContent: insertDocComment,
     hiddenComment: hiddenCommentEditor,
-    updateGlobalCommentContent: updateGlobalCommentContent
+    onContentChange: onContentChange
   })));
 };
 var _default = exports.default = GlobalCommentEditor;

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

@@ -178,16 +178,15 @@
   width: 100%;
 }
 
-.sdoc-comment-drawer .sdoc-doc-comment-editor-container .comment-ui-container.active {
+.sdoc-comment-drawer .sdoc-doc-comment-editor-container .sdoc-doc-comment-editor-content {
+  position: relative;
   margin-bottom: 0;
   padding: 0px;
   left: 0;
   border: 0px;
-}
-
-.sdoc-comment-drawer .sdoc-doc-comment-editor-container .comment-ui-container:hover {
-  background-color: #FFF !important;
+  background-color: #FFF;
   box-shadow: none;
+  border-radius: 0px;
 }
 
 /* custom */
@@ -196,23 +195,22 @@
   left: 0;
 }
 
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-collapse-wrapper {
+  cursor: pointer;
+}
+
 .sdoc-comment-drawer .sdoc-comment-list-container .comment-ui-container {
   background-color: #FFF;
   margin-bottom: 0px;
   box-shadow: none;
   padding: 16px;
   border-radius: 0px;
-  cursor: pointer;
 }
 
 .sdoc-comment-drawer .sdoc-comment-list-container .comment-ui-container:hover {
   background-color: #f5f5f5;
 }
 
-.sdoc-comment-drawer .sdoc-comment-list-container .comment-ui-container .comment-item-list {
-  padding-bottom: 0px;
-}
-
 .sdoc-comment-drawer .sdoc-comment-list-container .comment-ui-container.active .comment-item:hover {
   background-color: unset;
 }
@@ -277,9 +275,15 @@
 }
 
 .sdoc-comment-drawer .sdoc-comment-list-container .comment-item-selected-text-container {
+  width: 100%;
+  height: auto;
   color: #666666;
+  display: flex;
+  align-items: center;
   padding: 0px 0px 16px 0px;
-  height: auto;
+  border-radius: 3px 3px 0 0;
+  cursor: pointer;
+  overflow: hidden;
 }
 
 .comments-panel-body__header .sdoc-comment-filter-dropdown.sdoc-dropdown-menu {

package/dist/basic-sdk/comment/components/global-comment/index.js

@@ -208,7 +208,7 @@ const GlobalComment = _ref => {
     type: activeCommentGroup ? 'replay' : 'comment',
     hiddenCommentEditor: hiddenCommentEditor,
     insertDocComment: insertDocComment,
-    updateGlobalCommentContent: content => {
+    onContentChange: content => {
       setGlobalCommentContent(content);
     }
   })))));

package/dist/basic-sdk/extension/plugins/ai/ai-menu/style.css

@@ -5,6 +5,7 @@
 }
 
 .sdoc-context-menu-divider {
+  margin-right: 8px;
   border-left: 1px solid #e5e5e5;
   width: 1px;
   height: 24px;

package/dist/basic-sdk/extension/plugins/ai/ai-module/index.js

@@ -44,6 +44,7 @@ function AIModule(_ref) {
   const [searchResult, setSearchResult] = (0, _react.useState)(null);
   const [currentLang, setCurrentLang] = (0, _react.useState)('en');
   const [isShowTipDialog, setIsShowTipDialog] = (0, _react.useState)(false);
+  const [selectDom, setSelectDom] = (0, _react.useState)(null);
   const toggleAskAI = (0, _react.useCallback)(() => {
     scrollRef.current = document.querySelector('.sdoc-scroll-container');
     const {
@@ -57,6 +58,7 @@ function AIModule(_ref) {
       }
       const domSelection = window.getSelection();
       const domRange = domSelection.getRangeAt(0);
+      setSelectDom(domRange);
       const rect = domRange.getBoundingClientRect();
       const needPaddingBottomHeight = scrollTop + rect.bottom + _constants.AI_MIN_HEIGHT - scrollHeight;
       if (needPaddingBottomHeight > 0) {
@@ -66,7 +68,7 @@ function AIModule(_ref) {
       const heightDiff = rect.bottom + _constants.AI_MIN_HEIGHT - window.innerHeight;
       if (heightDiff > 0) {
         scrollRef.current.scrollTo({
-          top: scrollRef.current.scrollTop + heightDiff + 100,
+          top: scrollRef.current.scrollTop + heightDiff + 32,
           behavior: 'smooth'
         });
       }
@@ -99,7 +101,7 @@ function AIModule(_ref) {
     const heightDiff = slateRect.bottom + _constants.AI_MIN_HEIGHT - window.innerHeight;
     if (heightDiff > 0) {
       scrollRef.current.scrollTo({
-        top: scrollRef.current.scrollTop + heightDiff + 100,
+        top: scrollRef.current.scrollTop + heightDiff + 32,
         behavior: 'smooth'
       });
     }
@@ -156,33 +158,55 @@ function AIModule(_ref) {
       window.removeEventListener('click', onDocumentClick);
     };
   }, [onDocumentClick]);
+  const onScroll = (0, _react.useCallback)(event => {
+    if (!element) {
+      console.log(selectDom);
+      const newRect = selectDom.getBoundingClientRect();
+      const aboveNode = (0, _core.getAboveBlockNode)(editor);
+      const slateDom = _slateReact.ReactEditor.toDOMNode(editor, aboveNode[0]);
+      const slateRect = slateDom.getBoundingClientRect();
+      console.log(newRect);
+      console.log(slateRect);
+      const el = aiRef.current;
+      el.style.top = `${newRect.bottom + 8}px`; // top = Current top + Element height
+      el.style.left = `${slateRect.left}px`;
+      el.style.display = 'block';
+    } else {
+      const slateDom = _slateReact.ReactEditor.toDOMNode(editor, element);
+      const slateRect = slateDom.getBoundingClientRect();
+      const el = aiRef.current;
+      el.style.top = `${slateRect.bottom + 8}px`; // top = Current top + Element height
+      el.style.left = `${slateRect.left}px`;
+      el.style.display = 'block';
+    }
+  }, [editor, element, selectDom]);
   (0, _react.useEffect)(() => {
     let observerRefValue = null;
     if (isShowAIPopover) {
-      scrollRef.current && scrollRef.current.addEventListener('scroll', onCloseClick);
+      scrollRef.current && scrollRef.current.addEventListener('scroll', onScroll);
       observerRefValue = scrollRef.current;
     } else {
-      scrollRef.current && scrollRef.current.removeEventListener('scroll', onCloseClick);
+      scrollRef.current && scrollRef.current.removeEventListener('scroll', onScroll);
     }
     return () => {
       if (observerRefValue) {
-        observerRefValue.removeEventListener('scroll', onCloseClick);
+        observerRefValue.removeEventListener('scroll', onScroll);
       }
     };
-  }, [isShowAIPopover, onCloseClick]);
+  }, [isShowAIPopover, onScroll]);
   const onSearchValueChanged = (0, _react.useCallback)(event => {
     const value = event.target.value;
     if (value === searchValue) return;
     setSearchValue(value);
   }, [searchValue]);
-  const onEnter = (0, _react.useCallback)(() => {
+  const onEnter = (0, _react.useCallback)(event => {
     if (!searchValue) return;
     setOpType(_constants.OPERATION_TYPES.DEFAULT);
     setIsGenerating(true);
     setTimeout(() => {
       setIsGenerating(false);
       setSearchResult('[Feature is under development...]Thank you, the world becomes more beautiful because of you!');
-    });
+    }, 2000);
   }, [searchValue]);
   const onKeyDown = (0, _react.useCallback)(event => {
     if ((0, _isHotkey.default)('enter', event)) {
@@ -335,20 +359,14 @@ function AIModule(_ref) {
   const isShowReplace = (0, _react.useMemo)(() => {
     return opType !== _constants.OPERATION_TYPES.DEFAULT;
   }, [opType]);
-  const resultMenu = (0, _react.useMemo)(() => {
-    const type = opType && opType.toUpperCase();
-    if (opType === _constants.OPERATION_TYPES.TRANSLATE) {
-      return _constants.LANG_MENU_CONFIG[currentLang.toUpperCase()];
-    }
-    return _constants.OPERATION_MENUS_CONFIG[type];
-  }, [currentLang, opType]);
   const closeTipDialog = (0, _react.useCallback)(() => {
     setIsShowTipDialog(false);
   }, []);
   const discardCurrentContent = (0, _react.useCallback)(() => {
     onCloseClick();
     setIsShowTipDialog(false);
-  }, [onCloseClick]);
+    (0, _core.focusEditor)(editor);
+  }, [editor, onCloseClick]);
   return /*#__PURE__*/_react.default.createElement(_commons.ElementPopover, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-ai-module-container",
     ref: aiRef
@@ -402,18 +420,9 @@ function AIModule(_ref) {
     className: "sdoc-ai-content has-result"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-ai-result"
-  }, resultMenu && /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-ai-result-header"
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_aiIcon.default, null), /*#__PURE__*/_react.default.createElement("span", null, t(resultMenu.text))), /*#__PURE__*/_react.default.createElement("span", {
-    className: "sdocfont sdoc-close",
-    onClick: onDeprecationClick
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-ai-result-content"
-  }, isGenerating ? t('Processing_message') : searchResult), /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-ai-statistic"
-  }, t('Generated_content_x_words', {
-    count: searchResult.length
-  }))), /*#__PURE__*/_react.default.createElement("div", {
+  }, isGenerating ? t('Processing_message') : searchResult)), /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-ai-search"
   }, /*#__PURE__*/_react.default.createElement(_aiIcon.default, null), /*#__PURE__*/_react.default.createElement("input", {
     placeholder: t('Ask_AI_anything'),
@@ -421,7 +430,7 @@ function AIModule(_ref) {
     onKeyDown: onKeyDown,
     onChange: onSearchValueChanged
   }), /*#__PURE__*/_react.default.createElement("span", {
-    className: "sdocfont sdoc-send-arrow",
+    className: `sdocfont sdoc-send-arrow ${!searchValue ? 'disable' : ''}`,
     onClick: onEnter
   }))), /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-ai-operations sdoc-dropdown-menu"

package/dist/basic-sdk/extension/plugins/ai/ai-module/style.css

@@ -1,6 +1,6 @@
 .sdoc-ai-module-container {
   position: absolute;
-  z-index: 1000;
+  z-index: 101;
   width: 100%;
   max-width: 672px;
   display: none;
@@ -40,13 +40,17 @@
   position: absolute;
   right: 16px;
   color: #ff9800;
-  cursor: pointer;
+
 }
 
 .sdoc-ai-content .sdoc-ai-search .sdoc-send-arrow.disable {
   color: #BDBDBD;
 }
 
+.sdoc-ai-content .sdoc-ai-search .sdoc-send-arrow:not(.disable) {
+  cursor: pointer;
+}
+
 .sdoc-ai-content .sdoc-ai-result {
   position: relative;
   height: 50px;
@@ -56,9 +60,9 @@
   width: 200px;
   margin-top: 8px;
   padding: 8px 0;
-  border: 1px solid #eee;
-  border-radius: 10px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e5e6e8;
+  border-radius: 2px;
+  box-shadow: 0 0 10px #ccc;
   background-color: #fff;
 }
 
@@ -83,6 +87,10 @@
   align-items: center;
 }
 
+.sdoc-ai-module-container .sdoc-ai-result .sdoc-ai-result-header span {
+  color: #666;
+}
+
 .sdoc-ai-module-container .sdoc-ai-result .sdoc-ai-result-header .sdocfont {
   font-size: 14px;
 }
@@ -99,6 +107,15 @@
   color: #555;
 }
 
-.sdoc-ai-module-container .sdoc-ai-result .sdoc-ai-result-content {
-  padding: 16px 0;
+.sdoc-ai-module-container .sdoc-ai-result .sdoc-ai-statistic {
+  color: #666;
+}
+
+.ai-lang-sub-menu .popover,
+.ai-adjust-sub-menu .popover {
+  padding: 8px 0;
+  border: 1px solid #e5e6e8;
+  border-radius: 2px;
+  box-shadow: 0 0 10px #ccc;
+  background-color: #fff;
 }

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

@@ -125,4 +125,4 @@ const LANG_MENU_CONFIG = exports.LANG_MENU_CONFIG = {
     iconClass: 'sdocfont sdoc-ai-translate'
   }
 };
-const AI_MIN_HEIGHT = exports.AI_MIN_HEIGHT = 474;
+const AI_MIN_HEIGHT = exports.AI_MIN_HEIGHT = 358;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "1.0.182",
+  "version": "1.0.184-alpha.0",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",
@@ -16,7 +16,7 @@
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "1.10.7",
     "deep-copy": "1.4.2",
-    "dtable-ui-component": "^5.2.10",
+    "dtable-ui-component": "^5.1.9",
     "is-hotkey": "0.2.0",
     "is-url": "^1.2.4",
     "lodash.isequal": "4.5.0",

package/public/locales/cs/sdoc-editor.json

@@ -603,5 +603,6 @@
   "Discard": "Zrušit změny",
   "English": "English",
   "Chinese": "Chinese",
-  "Ask_AI": "Ask AI"
+  "Ask_AI": "Ask AI",
+  "Enter_reply": "Enter reply"
 }

package/public/locales/de/sdoc-editor.json

@@ -603,5 +603,6 @@
   "Discard": "Verwerfen",
   "English": "English",
   "Chinese": "Chinese",
-  "Ask_AI": "KI fragen"
+  "Ask_AI": "KI fragen",
+  "Enter_reply": "Enter reply"
 }

package/public/locales/en/sdoc-editor.json

@@ -603,5 +603,6 @@
   "Discard": "Discard",
   "English": "English",
   "Chinese": "Chinese",
-  "Ask_AI": "Ask AI"
+  "Ask_AI": "Ask AI",
+  "Enter_reply": "Enter reply"
 }

package/public/locales/es/sdoc-editor.json

@@ -603,5 +603,6 @@
   "Discard": "Descartar",
   "English": "English",
   "Chinese": "Chinese",
-  "Ask_AI": "Ask AI"
+  "Ask_AI": "Ask AI",
+  "Enter_reply": "Enter reply"
 }

package/public/locales/es_AR/sdoc-editor.json

@@ -603,5 +603,6 @@
   "Discard": "Descartar",
   "English": "English",
   "Chinese": "Chinese",
-  "Ask_AI": "Ask AI"
+  "Ask_AI": "Ask AI",
+  "Enter_reply": "Enter reply"
 }

package/public/locales/es_MX/sdoc-editor.json

@@ -603,5 +603,6 @@
   "Discard": "Descartar",
   "English": "English",
   "Chinese": "Chinese",
-  "Ask_AI": "Ask AI"
+  "Ask_AI": "Ask AI",
+  "Enter_reply": "Enter reply"
 }

package/public/locales/fr/sdoc-editor.json

@@ -603,5 +603,6 @@
   "Discard": "Abandonner",
   "English": "English",
   "Chinese": "Chinese",
-  "Ask_AI": "Ask AI"
+  "Ask_AI": "Ask AI",
+  "Enter_reply": "Enter reply"
 }

package/public/locales/it/sdoc-editor.json

@@ -603,5 +603,6 @@
   "Discard": "Scarta",
   "English": "English",
   "Chinese": "Chinese",
-  "Ask_AI": "Ask AI"
+  "Ask_AI": "Ask AI",
+  "Enter_reply": "Enter reply"
 }

package/public/locales/ru/sdoc-editor.json

@@ -585,23 +585,24 @@
   "Link_to_file": "Ссылка на файл",
   "Create_a_new_file": "Создать новый файл",
   "Suggestion": "Предложение",
-  "Continuation": "Continuation",
-  "More_details": "More details",
-  "More_concise": "More concise",
-  "More_vivid": "More vivid",
-  "Translate": "Translate",
-  "Adjustment": "Adjustment",
-  "Try_again": "Try again",
-  "Deprecation": "Deprecation",
-  "Generated_content_x_words": "Generated content {{count}} words",
-  "Ask_AI_anything": "Ask AI anything...",
-  "Thinking": "Thinking...",
-  "Translation_error_message": "Translation error, please try again.",
-  "The_translation_content_cannot_be_empty": "The translation content cannot be empty",
-  "Processing_message": "Processing, please wait...",
-  "AI_tip_content": "Discard current content?",
+  "Continuation": "Продолжение",
+  "More_details": "Более подробный",
+  "More_concise": "Более краткий",
+  "More_vivid": "Более яркий",
+  "Translate": "Перевести",
+  "Adjustment": "Регулировка",
+  "Try_again": "Попробовать еще раз",
+  "Deprecation": "Устаревание",
+  "Generated_content_x_words": "Сгенерированный контент {{count}} слов",
+  "Ask_AI_anything": "Спросите ИИ о чем угодно...",
+  "Thinking": "Думаю...",
+  "Translation_error_message": "Ошибка перевода, попробуйте еще раз.",
+  "The_translation_content_cannot_be_empty": "Содержание перевода не может быть пустым",
+  "Processing_message": "Обработка, подождите...",
+  "AI_tip_content": "Удалить текущий контент?",
   "Discard": "Отменить",
   "English": "English",
-  "Chinese": "Chinese",
-  "Ask_AI": "Спросить ИИ"
+  "Chinese": "Китайский",
+  "Ask_AI": "Спросить ИИ",
+  "Enter_reply": "Enter reply"
 }

package/public/locales/zh_CN/sdoc-editor.json

@@ -594,7 +594,7 @@
   "Try_again": "再试一次",
   "Deprecation": "弃用",
   "Generated_content_x_words": "已生成内容 {{count}} 字",
-  "Ask_AI_anything": "向 AI 询问任何事情...",
+  "Ask_AI_anything": "询问 AI 任何事情...",
   "Thinking": "思考...",
   "Translation_error_message": "翻译出错，请重试",
   "The_translation_content_cannot_be_empty": "翻译内容不能为空",
@@ -603,5 +603,6 @@
   "Discard": "丢弃",
   "English": "英语",
   "Chinese": "中文",
-  "Ask_AI": "询问 AI"
+  "Ask_AI": "询问 AI",
+  "Enter_reply": "输入回复"
 }