@seafile/sdoc-editor 0.5.32 → 0.5.34

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

@@ -120,6 +120,7 @@
   border-top: 1px solid #e5e6e8;
   z-index: 102;
   margin: 0 8px;
+  margin-top: 5px;
 }
 
 .sdoc-comment-editor-menu-group {

package/dist/basic-sdk/comment/components/comment-item-resolved-reply.js

@@ -23,7 +23,7 @@ const CommentItemResolvedReply = _ref => {
     className: "name"
   }, reply.user_name), /*#__PURE__*/React.createElement("span", {
     className: "time"
-  }, dayjs(reply.updated_at).format('MM-DD HH:mm'))))), /*#__PURE__*/React.createElement("div", {
+  }, dayjs(reply.updated_at).format('MM-DD HH:mm'))))), /*#__PURE__*/React.createElement("p", {
     className: "comment-content"
   }, reply.reply === 'True' && /*#__PURE__*/React.createElement("div", null, t('Mark_as_Resolved')), reply.reply === 'False' && /*#__PURE__*/React.createElement("div", null, t('Resubmitted')))));
 };

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

@@ -4,6 +4,7 @@
 
 .sdoc-comment-list-container {
   position: absolute;
+  margin-top: 5px;
 }
 
 .sdoc-comment-list-container .comment-ui-container {
@@ -19,11 +20,12 @@
   position: relative;
   left: -24px;
   background: rgba(255, 255, 255, .92);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .15), 0 4px 8px 3px rgba(0, 0, 0, .15);
 }
 
 .sdoc-comment-drawer .sdoc-comment-list-container .comment-ui-container {
-  padding: 16px 0;
+  padding: 0;
+  padding-bottom: 16px;
 }
 
 .sdoc-comment-list-container .comment-item-selected-text-container {
@@ -93,7 +95,7 @@
 }
 
 .comment-item .comment-content {
-  font-size: 11pt;
+  font-size: 14px;
 }
 
 .comment-item .comment-content ol,
@@ -250,6 +252,10 @@
   width: 365px;
 }
 
+.sdoc-comment-container .comment-container-right .sdoc-editor-container {
+  width: auto;
+}
+
 .article.sdoc-comment-editor :first-child {
   margin-top: 0 !important;
 }

package/dist/basic-sdk/comment/components/global-comment/global-comment-body-header.js

@@ -60,7 +60,7 @@ const GlobalCommentBodyHeader = _ref2 => {
   }, /*#__PURE__*/React.createElement("div", {
     id: id
   }, t(commentType))), /*#__PURE__*/React.createElement(DropdownMenu, {
-    className: "sdoc-dropdown-menu",
+    className: "sdoc-dropdown-menu sdoc-comment-filter-dropdown",
     container: "comment-types"
   }, /*#__PURE__*/React.createElement(CommentTypeDropdownItem, {
     type: COMMENT_TYPES.ALL,

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

@@ -1,12 +1,16 @@
 import React from 'react';
+import classNames from 'classnames';
 import CommentEditor from '../comment-editor';
 const GlobalCommentEditor = _ref => {
   let {
     insertDocComment,
-    hiddenCommentEditor
+    hiddenCommentEditor,
+    isScrollDisplayed
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-doc-comment-editor-container sdoc-comment-list-container"
+    className: classNames('sdoc-doc-comment-editor-container', 'sdoc-comment-list-container', {
+      'scrolled': isScrollDisplayed
+    })
   }, /*#__PURE__*/React.createElement("div", {
     className: "comment-ui-container active"
   }, /*#__PURE__*/React.createElement(CommentEditor, {

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

@@ -25,14 +25,14 @@
 }
 
 .sdoc-comment-drawer .sdoc-comment-resize-handler:hover {
-  border-left: 2px solid #d8d8d8;
+  border-left: 1px solid #d8d8d8;
 }
 
 .sdoc-comment-resize-handler .sdoc-comment-move-dragger {
   display: none;
   position: absolute;
   top: 0px;
-  left: -3px;
+  left: -4px;
   width: 6px;
   height: 30px;
   border-radius: 3px;
@@ -139,16 +139,21 @@
 
 /* doc comment add editor */
 .sdoc-comment-drawer .comments-panel-body .sdoc-doc-comment-editor-container {
+  padding: 0 16px;
   position: absolute;
-  left: 16px;
-  width: calc(100% - 32px);
-  background-color: #fff;
-  top: 78px;
+  top: 120px;
+  width: 100%;
+}
+
+.sdoc-comment-drawer .comments-panel-body .sdoc-doc-comment-editor-container.scrolled {
+  width: calc(100% - 1em);
 }
 
+
 .sdoc-comment-drawer .sdoc-doc-comment-editor-container .comment-ui-container.active {
-  left: 0;
   margin-bottom: 0;
+  padding: 16px;
+  left: 0;
 }
 
 /* custom */
@@ -161,3 +166,7 @@
   background-color: #F5F5F5;
   border-bottom: 1px solid #c7c7c7;
 }
+
+.comments-panel-body__header .sdoc-comment-filter-dropdown.sdoc-dropdown-menu {
+  border: 1px solid #dee3eb;
+}

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

@@ -1,5 +1,5 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import dayjs from 'dayjs';
 import EventBus from '../../../utils/event-bus';
 import useCommentList from '../../hooks/comment-hooks/use-comment-list';
@@ -22,6 +22,7 @@ const GlobalComment = _ref => {
   const [isShowCommentList, setShowCommentList] = useState(false);
   const [showEditor, setShowEditor] = useState(false);
   const [draggerStyle, setDraggerStyle] = useState({});
+  const [isScrollDisplayed, setIsScrollDisplayed] = useState(false);
   const commentRef = useRef(null);
   const contentRef = useRef(null);
   const commentDrawerRef = useRef(null);
@@ -59,17 +60,20 @@ const GlobalComment = _ref => {
     });
   }, []);
   const handleResizeEnd = useCallback(e => {
-    e.preventDefault();
-    e.stopPropagation();
     isResizingRef.current = false;
     document.removeEventListener('mouseup', handleResizeEnd);
     handleHideDragger();
   }, [handleHideDragger]);
+  const detectScroll = useCallback(() => {
+    if (!contentRef.current) return;
+    const contentContainer = contentRef.current;
+    const isShowScroll = contentContainer.scrollHeight > contentContainer.clientHeight;
+    setIsScrollDisplayed(isShowScroll);
+  }, []);
   const handleResizing = useCallback(e => {
-    e.preventDefault();
-    e.stopPropagation();
     const commentDrawer = commentDrawerRef.current;
     if (isResizingRef.current && commentDrawer) {
+      console.log('999', 999);
       let width = commentDrawer.offsetWidth - e.movementX;
       // Limit the width of the comment drawer
       width = Math.min(width, 620);
@@ -80,11 +84,10 @@ const GlobalComment = _ref => {
         width,
         isShrink
       });
+      detectScroll();
     }
-  }, [setArticleContainerStyle]);
+  }, [detectScroll, setArticleContainerStyle]);
   const handleResizeStart = useCallback(e => {
-    e.preventDefault();
-    e.stopPropagation();
     isResizingRef.current = true;
     document.addEventListener('mouseup', handleResizeEnd);
     document.addEventListener('mousemove', handleResizing);
@@ -98,6 +101,9 @@ const GlobalComment = _ref => {
       eventBus.dispatch(INTERNAL_EVENT.OUTLINE_STATE_CHANGED);
     };
   }, [handleResizing, toggle]);
+  useEffect(() => {
+    detectScroll();
+  }, [commentList, detectScroll, isShowCommentList]);
   const updateScrollPosition = useCallback(() => {
     const resolvedDom = document.querySelector('.sdoc-resolved');
     contentRef.current.scrollTo({
@@ -152,7 +158,8 @@ const GlobalComment = _ref => {
       updated_at: time
     };
     insertComment(elementId, comment);
-  }, [insertComment]);
+    detectScroll();
+  }, [detectScroll, insertComment]);
   const toggleGlobalCommentEditor = useCallback(() => {
     setShowEditor(!showEditor);
     setActiveComment(null);
@@ -227,6 +234,7 @@ const GlobalComment = _ref => {
       isClickCommentPanelBody: isClickCommentPanelBody
     });
   }))), showEditor && /*#__PURE__*/React.createElement(GlobalCommentEditor, {
+    isScrollDisplayed: isScrollDisplayed,
     isClickCommentPanelBody: isClickCommentPanelBody,
     hiddenCommentEditor: hiddenCommentEditor,
     insertDocComment: insertDocComment

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

@@ -4,7 +4,7 @@
   z-index: 101;
   width: auto;
 }
-  
+
 .sdoc-image-hover-menu-container .hover-menu-container {
   height: 36px;
   background-color: #fff;
@@ -16,7 +16,11 @@
   border: 1px solid #e8e8e8;
 }
 
-.sdoc-image-hover-menu-container .hover-menu-container > span:not(:last-of-type) {
+.sdoc-image-hover-menu-container .hover-menu-container>span {
+  padding: 0 8px;
+}
+
+.sdoc-image-hover-menu-container .hover-menu-container>span:not(:last-of-type) {
   padding: 0 8px;
   border-right: 1px solid #e5e5e5;
 }
@@ -40,10 +44,6 @@
   background: #f1f1f1;
 }
 
-.sdoc-image-hover-menu-container .op-group-item:last-child .op-item {
-  margin-left: 8px;
-}
-
 .sdoc-image-hover-menu-container .hover-menu-container .active {
   background: #f1f1f1;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.5.32",
+  "version": "0.5.34",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",