@seafile/sdoc-editor 0.5.30 → 0.5.32

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

@@ -28,32 +28,28 @@
   border-right: none;
 }
 
-.sdoc-editor-container .sdoc-editor-content {
+.sdoc-content-wrapper {
   width: 100%;
-  height: calc(100% - 44px);
+  height: calc(100vh - 44px);
   display: flex;
-  background: #f5f5f5;
-  position: relative;
 }
 
-.sdoc-editor-container .sdoc-absolute-wrapper {
+.sdoc-editor-container .sdoc-editor-content {
+  display: flex;
   position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  height: 100%;
+  min-width: 1100px;
   width: 100%;
 }
 
+
 .sdoc-editor-container .sdoc-scroll-container {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
   z-index: 100;
   overflow: auto;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  flex: 1;
+  background: #f5f5f5;
 }
 
 .sdoc-editor-container .sdoc-article-container {

package/dist/basic-sdk/assets/css/simple-viewer.css

@@ -1,13 +1,3 @@
-.sdoc-editor-container .sdoc-editor-content.readonly {
-  height: 100%;
-}
-
-.sdoc-editor-container .sdoc-editor-content.no-outline .sdoc-absolute-wrapper {
-  display: flex;
-  position: relative;
-  min-height: 0;
-}
-
 .sdoc-editor-container .sdoc-editor-content.no-outline .sdoc-article-container {
   margin-left: 0 !important;
 }

package/dist/basic-sdk/comment/components/comment-all-participants/index.css

@@ -1,4 +1,4 @@
-.global-comments-popover .comments-panel-body__header .comments-participants-container {
+.sdoc-comment-drawer .comments-panel-body__header .comments-participants-container {
   width: fit-content;
   max-width: 100%;
   height: 42px;
@@ -8,7 +8,7 @@
   position: relative;
 }
 
-.global-comments-popover .comments-panel-body__header .comments-participants-editor-target {
+.sdoc-comment-drawer .comments-panel-body__header .comments-participants-editor-target {
   position: absolute;
   left: -1px;
   top: 0;
@@ -18,13 +18,13 @@
   background-color: transparent;
 }
 
-.global-comments-popover .comments-panel-body__header .comment-participant-avatar {
+.sdoc-comment-drawer .comments-panel-body__header .comment-participant-avatar {
   border-radius: 50%;
   vertical-align: middle;
   margin-right: -0.5rem;
 }
 
-.global-comments-popover .comments-panel-body__header .comment-participant-avatar img {
+.sdoc-comment-drawer .comments-panel-body__header .comment-participant-avatar img {
   width: 28px;
   height: 28px;
   border: 2px solid #fff;
@@ -41,7 +41,7 @@
   user-select: none;
 }
 
-.global-comments-popover .comments-panel-body__header .add-comments-participants {
+.sdoc-comment-drawer .comments-panel-body__header .add-comments-participants {
   position: relative;
   bottom: -3px;
   cursor: pointer;
@@ -56,13 +56,13 @@
   justify-content: center;
 }
 
-.global-comments-popover .add-comments-participants .sdocfont {
+.sdoc-comment-drawer .add-comments-participants .sdocfont {
   font-size: 16px;
   color: #ff8000;
   border-radius: 50%;
 }
 
-.global-comments-popover .comment-participants-more {
+.sdoc-comment-drawer .comment-participants-more {
   position: absolute;
   top: 0;
   left: 0;
@@ -77,7 +77,7 @@
   border: 2px solid #fff;
 }
 
-.global-comments-popover .comment-participants-more .sdocfont {
+.sdoc-comment-drawer .comment-participants-more .sdocfont {
   color: #fff;
   font-size: 12px;
 }

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

@@ -1,9 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button } from 'reactstrap';
 import classNames from 'classnames';
 import { Editor, Transforms } from '@seafile/slate';
-import { useScrollContext } from '../../hooks/use-scroll-context';
 import context from '../../../context';
 import { useParticipantsContext } from '../hooks/use-participants';
 import SdocCommentEditor from '../../editor/sdoc-comment-editor';
@@ -28,13 +26,14 @@ const CommentEditor = _ref => {
     insertContent,
     updateContent,
     setIsEditing,
-    hiddenComment
+    hiddenComment,
+    commentRef,
+    globalComment
   } = _ref;
   const commentWrapperRef = useRef();
   const {
     t
   } = useTranslation();
-  const scrollRef = useScrollContext();
   const {
     addParticipants
   } = useParticipantsContext();
@@ -66,13 +65,11 @@ const CommentEditor = _ref => {
   // onMount: set scrollLeft
   useEffect(() => {
     if (!commentWrapperRef.current) return;
-    const {
-      right,
-      width
-    } = commentWrapperRef.current.getBoundingClientRect();
-    if (right <= window.innerWidth) return;
-    if (!scrollRef.current) return;
-    scrollRef.current.scrollLeft = scrollRef.current.scrollLeft + width;
+    (commentRef === null || commentRef === void 0 ? void 0 : commentRef.current) && commentRef.current.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest'
+    });
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const updateValue = useCallback(value => {
@@ -99,15 +96,18 @@ const CommentEditor = _ref => {
     } = event;
     if (eventType === 'keydown' && keyCode !== KeyCodes.Esc) return;
     if (eventType === 'click') {
+      const isSdocContentWrapper = target.classList.contains('sdoc-content-wrapper');
       const listContainer = window.document.querySelector('#global-comment-list-container');
-      const addCommentSideBtn = window.document.querySelector('.comment-add-wrapper');
-      const addCommentPopover = window.document.querySelector('.sdoc-doc-comment-editor-container');
-      const globalCommentPopover = window.document.querySelector('.comment-ui-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 isClickOnAddCommentPopover = type === 'comment' && addCommentPopover && addCommentPopover.contains(target);
-      const isClickOnAddCommentSideBtn = addCommentSideBtn && addCommentSideBtn.contains(target);
-      const isClickOnGlobalCommentPopover = globalCommentPopover && globalCommentPopover.contains(target);
-      const isPreventCancel = isClickOnListContainer || isClickOnAddCommentPopover || isClickOnAddCommentSideBtn || isClickOnGlobalCommentPopover;
+      const isClickOnCommentEditorContainer = commentEditorContainer && commentEditorContainer.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;
       if (isPreventCancel) return;
     }
     setIsEditing && setIsEditing(false);

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

@@ -277,12 +277,14 @@ const CommentItemWrapper = _ref => {
       key: reply.id,
       reply: reply
     });
-  })), isActive && /*#__PURE__*/React.createElement(CommentEditor, {
+  })), isActive && /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-reply-wrapper"
+  }, /*#__PURE__*/React.createElement(CommentEditor, {
     type: "reply",
     placeholder: tip,
     insertContent: insertContent,
     hiddenComment: hiddenComment
-  }), isShowDeleteDialog && isActive && /*#__PURE__*/React.createElement(CommentDeletePopover, {
+  })), isShowDeleteDialog && isActive && /*#__PURE__*/React.createElement(CommentDeletePopover, {
     type: "comment",
     setIsShowDeleteDialog: setIsShowDeleteDialog,
     targetId: commentOpToolsId,

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

@@ -1,14 +1,16 @@
+.sdoc-article-container .sdoc-comment-list-container {
+  width: 312px;
+}
+
 .sdoc-comment-list-container {
   position: absolute;
 }
 
 .sdoc-comment-list-container .comment-ui-container {
-  min-width: 330px;
-  max-width: 400px;
   background-color: #edf2fa;
-  border-radius: 8px;
+  border-radius: 3px;
   box-shadow: 0 0 2px rgba(0, 0, 0, .04);
-  padding: 16px;
+  padding: 16px 16px;
   margin-bottom: 10px;
   cursor: pointer;
 }
@@ -20,6 +22,10 @@
   box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15);
 }
 
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-ui-container {
+  padding: 16px 0;
+}
+
 .sdoc-comment-list-container .comment-item-selected-text-container {
   width: 100%;
   height: 32px;
@@ -27,7 +33,7 @@
   padding: 6px 16px;
   align-items: center;
   overflow: hidden;
-  border-radius: 8px 8px 0 0;
+  border-radius: 3px 3px 0 0;
 }
 
 .sdoc-comment-list-container .comment-item-selected-text-container .sdoc-comment-quote {
@@ -64,7 +70,7 @@
 
 .comment-delete-popover-container .delete-control {
   display: flex;
-  justify-content: end;
+  justify-content: flex-end;
   width: 100%;
 }
 
@@ -80,7 +86,6 @@
 }
 
 .sdoc-comment-list-container .comment-item .comment-content {
-  padding-bottom: 10px;
   margin-top: 10px;
   margin-left: 41px;
   word-break: keep-all;
@@ -229,7 +234,7 @@
 }
 
 .comment-editor-wrapper .sdoc-comment-editor-wrapper .article.sdoc-comment-editor {
-  width: 365px;
+  width: 100%;
   padding: 8px;
   padding-bottom: 0;
   min-height: 130px;
@@ -241,6 +246,10 @@
   background-color: transparent;
 }
 
+.comment-container-right .sdoc-editor-container {
+  width: 365px;
+}
+
 .article.sdoc-comment-editor :first-child {
   margin-top: 0 !important;
 }
@@ -291,3 +300,12 @@
   display: flex;
   justify-content: flex-end;
 }
+
+.sdoc-reply-wrapper {
+  padding: 0 10px;
+}
+
+.sdoc-doc-comment-editor-container.sdoc-comment-list-container .comment-ui-container {
+  padding-left: 10px;
+  padding-right: 10px;
+}

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

@@ -23,7 +23,6 @@ const CommentList = _ref => {
     if (event.target.className !== 'article') return;
     hiddenComment();
   }, [hiddenComment]);
-
   // onMount: hidden comment
   useEffect(() => {
     const eventBus = EventBus.getInstance();
@@ -83,6 +82,10 @@ const CommentList = _ref => {
   }, []);
   useEffect(() => {
     document.addEventListener('click', resetActiveComment);
+    commentRef.current.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest'
+    });
     return () => {
       document.removeEventListener('click', resetActiveComment);
     };
@@ -111,8 +114,10 @@ const CommentList = _ref => {
     className: "comment-ui-container active"
   }, /*#__PURE__*/React.createElement(CommentEditor, {
     type: "comment",
+    globalComment: true,
     insertContent: insertContent,
-    hiddenComment: hiddenComment
+    hiddenComment: hiddenComment,
+    commentRef: commentRef
   })));
 };
 export default CommentList;

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

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useSlateStatic } from '@seafile/slate-react';
 import { Node } from '@seafile/slate';
 import useSelectionUpdate from '../../hooks/use-selection-update';
 import { useCursorPosition } from '../helper';
@@ -11,11 +10,13 @@ import { ELEMENT_TYPE } from '../../extension/constants';
 import { Z_INDEX } from '../../constants';
 const EditorComment = _ref => {
   let {
-    deleteUnseenNotifications
+    deleteUnseenNotifications,
+    editor
   } = _ref;
   useSelectionUpdate();
-  const editor = useSlateStatic();
-  const selectionElement = useSelectionElement();
+  const selectionElement = useSelectionElement({
+    editor
+  });
   const [isShowComments, setIsShowComments] = useState(false);
   const onAddCommentToggle = useCallback(() => {
     setIsShowComments(true);
@@ -38,6 +39,10 @@ const EditorComment = _ref => {
     setComments([]);
     setIsShowComments(false);
   }, [element_comments_map, selectionElement, editor.selection]);
+  const hiddenComment = useCallback(() => {
+    setComments([]);
+    setIsShowComments(false);
+  }, []);
   const cursor = useCursorPosition();
   const style = useMemo(() => {
     var _Node$string;
@@ -59,11 +64,7 @@ const EditorComment = _ref => {
       top: cursor.y,
       zIndex: Z_INDEX.COMMENT_ADD
     };
-  }, [cursor, isShowComments, selectionElement, element_comments_map]);
-  const hiddenComment = useCallback(() => {
-    setComments([]);
-    setIsShowComments(false);
-  }, []);
+  }, [selectionElement, element_comments_map, cursor.y, isShowComments]);
   return /*#__PURE__*/React.createElement("div", {
     className: "sdoc-comment-container"
   }, /*#__PURE__*/React.createElement("div", {
@@ -80,7 +81,8 @@ const EditorComment = _ref => {
     className: "sdocfont sdoc-add-comment mr-1"
   }))), /*#__PURE__*/React.createElement(ElementsCommentCount, {
     elementCommentsMap: element_comments_map,
-    selectionElement: selectionElement
+    selectionElement: selectionElement,
+    editor: editor
   }), /*#__PURE__*/React.createElement("div", {
     className: "comment-list-wrapper",
     style: isShowComments ? {

package/dist/basic-sdk/comment/components/elements-comment-count/element-comment-count.js

@@ -1,7 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { useSlateStatic } from '@seafile/slate-react';
 import { getNodeById } from '../../../extension/core';
-import { useScrollContext } from '../../../hooks/use-scroll-context';
 import { getElementCommentCountTop } from '../../helper';
 import { eventStopPropagation } from '../../../utils/mouse-event';
 import { focusToCommentElement } from '../../utils';
@@ -10,23 +8,21 @@ const ElementCommentCount = _ref => {
   let {
     elementId,
     isElementSelected,
-    commentsCount
+    commentsCount,
+    editor
   } = _ref;
-  const editor = useSlateStatic();
   const element = getNodeById(editor.children, elementId);
-  const scrollRef = useScrollContext();
   const [top, setTop] = useState(-9999);
   const onClick = useCallback(event => {
     eventStopPropagation(event);
     focusToCommentElement(editor, element);
   }, [editor, element]);
   useEffect(() => {
-    var _scrollRef$current;
     if (!element) return;
-    const scrollTop = (scrollRef === null || scrollRef === void 0 ? void 0 : (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollTop) || 0;
+    const scrollTop = 0;
     const newTop = getElementCommentCountTop(editor, element, scrollTop);
     setTop(newTop);
-  }, [editor, elementId, element, scrollRef, isElementSelected]);
+  }, [editor, elementId, element, isElementSelected]);
   if (!element) return null;
   let style = {
     top

package/dist/basic-sdk/comment/components/elements-comment-count/index.js

@@ -4,7 +4,8 @@ import './index.css';
 const ElementsCommentCount = _ref => {
   let {
     elementCommentsMap,
-    selectionElement
+    selectionElement,
+    editor
   } = _ref;
   if (!elementCommentsMap) return null;
   return /*#__PURE__*/React.createElement("div", {
@@ -20,7 +21,8 @@ const ElementsCommentCount = _ref => {
       key: elementId,
       elementId: elementId,
       isElementSelected: isSelected,
-      commentsCount: unresolvedCommentCount
+      commentsCount: unresolvedCommentCount,
+      editor: editor
     });
   }));
 };

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

@@ -1,28 +1,12 @@
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 import CommentEditor from '../comment-editor';
 const GlobalCommentEditor = _ref => {
   let {
     insertDocComment,
     hiddenCommentEditor
   } = _ref;
-  const ref = useRef(null);
-  useEffect(() => {
-    const hidden = event => {
-      var _ref$current;
-      if (!((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.contains(event.target))) {
-        hiddenCommentEditor();
-      }
-    };
-    document.addEventListener('click', hidden);
-    return () => {
-      document.removeEventListener('click', hidden);
-    };
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-doc-comment-editor-container sdoc-comment-list-container",
-    ref: ref
+    className: "sdoc-doc-comment-editor-container sdoc-comment-list-container"
   }, /*#__PURE__*/React.createElement("div", {
     className: "comment-ui-container active"
   }, /*#__PURE__*/React.createElement(CommentEditor, {

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

@@ -1,23 +1,46 @@
-.global-comments-popover {
-  position: absolute;
-  right: 10px;
-  top: 50px;
-  z-index: 103;
-  width: 432px;
-  height: 540px;
+.sdoc-comment-drawer {
+  position: relative;
+  width: 360px;
+  min-width: 360px;
+  max-width: 620px;
+  border-left: 1px solid #e2e3e6;
 }
 
-.global-comments-popover .comments-panel-wrapper {
-  height: 100%;
+.sdoc-comment-drawer .comments-panel-wrapper {
+  /* 100vh - toolbar height*/
+  height: calc(100vh - 93px);
   display: flex;
   flex-direction: column;
   background: #fff;
-  border: 1px solid #EAECEF;
-  border-radius: 4px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
 }
 
-.global-comments-popover .comments-panel-header {
+.sdoc-comment-drawer .sdoc-comment-resize-handler {
+  position: absolute;
+  left: 0;
+  height: 100%;
+  margin-right: -2px;
+  width: 6px;
+  cursor: ew-resize;
+  z-index: 103;
+}
+
+.sdoc-comment-drawer .sdoc-comment-resize-handler:hover {
+  border-left: 2px solid #d8d8d8;
+}
+
+.sdoc-comment-resize-handler .sdoc-comment-move-dragger {
+  display: none;
+  position: absolute;
+  top: 0px;
+  left: -3px;
+  width: 6px;
+  height: 30px;
+  border-radius: 3px;
+  background-color: #2674f8;
+  cursor: ew-resize;
+}
+
+.sdoc-comment-drawer .comments-panel-header {
   padding: 0 16px;
   height: 46px;
   display: flex;
@@ -26,64 +49,65 @@
   border-bottom: 1px solid #EAECEF;
 }
 
-.global-comments-popover .comments-panel-header .title {
+.sdoc-comment-drawer .comments-panel-header .title {
   color: #212529;
   font-size: 16px;
   font-weight: 500;
 }
 
-.global-comments-popover .comments-panel-header .comments-panel-header-right {
+.sdoc-comment-drawer .comments-panel-header .comments-panel-header-right {
   display: flex;
 }
 
-.global-comments-popover .comments-panel-header-right .sdoc-icon-btn:not(:last-child) {
+.sdoc-comment-drawer .comments-panel-header-right .sdoc-icon-btn:not(:last-child) {
   margin-right: 4px;
 }
 
-.global-comments-popover .comments-panel-header .sdoc-icon-btn .sdocfont {
+.sdoc-comment-drawer .comments-panel-header .sdoc-icon-btn .sdocfont.sdoc-sm-close {
   font-weight: 700;
 }
 
-.global-comments-popover .comments-panel-body {
+.sdoc-comment-drawer .comments-panel-body {
   flex: 1;
   display: flex;
   flex-direction: column;
   min-height: 0;
-  position: relative;
   background-color: #F5F5F5;
 }
 
-.global-comments-popover .comments-panel-body__header {
+.sdoc-comment-drawer .comments-panel-body__header {
   height: 80px;
   display: flex;
   flex-direction: column;
   padding: 0 16px;
 }
 
-.global-comments-popover .comments-panel-body__header .comments-types-count {
+.sdoc-comment-drawer .comments-panel-body__header .comments-types-count {
   height: 38px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 16px 0;
+  margin-top: 10px;
+  border-top: 1px solid #e1e2e5;
 }
 
-.global-comments-popover .comments-panel-body__header .comment-type {
+.sdoc-comment-drawer .comments-panel-body__header .comment-type {
   color: #212529;
   font-size: 12px;
 }
 
-.global-comments-popover .comments-panel-body__header .comment-type {
+.sdoc-comment-drawer .comments-panel-body__header .comment-type {
   color: #212529;
   font-size: 12px;
 }
 
-.global-comments-popover .comments-panel-body__header .comment-count-tip {
+.sdoc-comment-drawer .comments-panel-body__header .comment-count-tip {
   color: #999;
   font-size: 12px;
 }
 
-.global-comments-popover .comments-panel-body__content {
+.sdoc-comment-drawer .comments-panel-body__content {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -92,19 +116,19 @@
   overflow: auto;
 }
 
-.global-comments-popover .comments-panel-body__content .sdoc-comment-list-container {
+.sdoc-comment-drawer .comments-panel-body__content .sdoc-comment-list-container {
   position: relative;
 }
 
-.global-comments-popover .comments-panel-body__content .comment-ui-container.active {
+.sdoc-comment-drawer .comments-panel-body__content .comment-ui-container.active {
   left: 0;
 }
 
-.global-comments-popover .comments-panel-body__content .comment-ui-container.sdoc-resolved {
+.sdoc-comment-drawer .comments-panel-body__content .comment-ui-container.sdoc-resolved {
   background: #f5f5f5;
 }
 
-.global-comments-popover .comments-panel-body__content .comment-ui-container.active.sdoc-resolved {
+.sdoc-comment-drawer .comments-panel-body__content .comment-ui-container.active.sdoc-resolved {
   background: #f5f5f5;
 }
 
@@ -114,7 +138,7 @@
 }
 
 /* doc comment add editor */
-.global-comments-popover .comments-panel-body .sdoc-doc-comment-editor-container {
+.sdoc-comment-drawer .comments-panel-body .sdoc-doc-comment-editor-container {
   position: absolute;
   left: 16px;
   width: calc(100% - 32px);
@@ -122,18 +146,18 @@
   top: 78px;
 }
 
-.global-comments-popover .sdoc-doc-comment-editor-container .comment-ui-container.active {
+.sdoc-comment-drawer .sdoc-doc-comment-editor-container .comment-ui-container.active {
   left: 0;
   margin-bottom: 0;
 }
 
 /* custom */
-.global-comments-popover .sdoc-comment-list-container .comment-ui-container {
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-ui-container {
   background-color: #FFF;
   border: 1px solid #c7c7c7;
 }
 
-.global-comments-popover .sdoc-comment-list-container .comment-item-selected-text-container {
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item-selected-text-container {
   background-color: #F5F5F5;
   border-bottom: 1px solid #c7c7c7;
 }