@seafile/sdoc-editor 0.1.97 → 0.1.99

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

@@ -0,0 +1,165 @@
+.sdoc-comment-list-container {
+  position: absolute;
+}
+
+.sdoc-comment-list-container .comment-ui-container {
+  background-color: #edf2fa;
+  border-radius: 8px;
+  box-shadow: 0 0 2px rgba(0,0,0,.04);
+  padding: 16px 0;
+  margin-bottom: 10px;
+  cursor: pointer;
+}
+
+.sdoc-comment-list-container .comment-ui-container.active {
+  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);
+}
+
+.sdoc-comment-list-container .comment-item-list {
+  max-height: 350px;
+  min-width: 280px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  margin: 0;
+}
+
+.sdoc-comment-list-container .comment-item {
+  position: relative;
+  padding: 16px 16px 0;
+  cursor: pointer;
+}
+
+.sdoc-comment-list-container .comment-ui-container.active .comment-item:hover {
+  background: #fafafa;
+}
+
+.sdoc-comment-list-container .comment-item .comment-header,
+.sdoc-comment-list-container .comment-item .comment-author {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sdoc-comment-list-container .comment-item .comment-content {
+  padding-bottom: 10px;
+  margin-top: 10px;
+  margin-left: 30px;
+}
+
+.sdoc-comment-list-container .comment-header .comment-author__avatar {
+  display: flex;
+  align-items: center;
+}
+
+.sdoc-comment-list-container .comment-header .comment-author__avatar img {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+}
+
+.sdoc-comment-list-container .comment-header .comment-author__info {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  justify-content: center;
+  padding-left: 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+
+.sdoc-comment-list-container .comment-header .comment-author__info .name {
+  color: #1f1f1f;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
+}
+
+.sdoc-comment-list-container .comment-header .comment-author__info .time {
+  color: #444746;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.sdoc-comment-list-container .comment-header .comment-operation {
+  line-height: 20px;
+  font-size: 20px;
+  color: rgb(70, 77, 90);
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+}
+
+.sdoc-comment-list-container .comment-ui-container .comment-operation {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sdoc-comment-list-container .comment-ui-container.active .comment-operation:hover {
+  border-radius: 100%;
+  background-color: #f0f0f0;
+}
+
+.sdoc-comment-list-container .comment-ui-container .comment-operation .sdoc-confirm {
+  color: #20a0ff;
+  font-weight: 800;
+}
+
+.sdoc-comment-menu {
+  padding: 0;
+  border-radius: 2px;
+}
+
+.sdoc-popover-menu {
+  background: rgb(255, 255, 255);
+  width: 140px;
+  padding: 8px 0;
+  height: auto;
+}
+
+.sdoc-popover-menu__item {
+  padding: 4px 24px;
+  height: 28px;
+  vertical-align: middle;
+  font-size: 14px;
+  background-color: transparent;
+  cursor: default;
+  color: #202428;
+  background-color: #fff;
+}
+
+.sdoc-popover-menu__item:hover {
+  background-color: #20a0ff;
+  color: #fff;
+}
+
+.sdoc-comment-list-container .comment-editor-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 16px;
+}
+
+.sdoc-comment-list-container .comment-editor-wrapper .comment-editor {
+  height: 40px;
+  width: 248px;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, .12);
+  border-radius: 4px;
+  padding: 8px;
+}
+
+.sdoc-comment-list-container .comment-editor-wrapper .comment-editor:focus-visible {
+  outline: none;
+}
+
+.sdoc-comment-list-container .comment-editor-wrapper .comment-editor:focus {
+  border: 1px solid rgba(0, 0, 0, .12);
+}

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

@@ -9,6 +9,7 @@ import { useCommentListPosition } from '../../hooks/use-selection-position';
 import { useCommentContext } from '../hooks/use-comment-context';
 import CommentEditor from './comment-editor';
 import CommentItemWrapper from './comment-item-wrapper';
+import './comment-list.css';
 var CommentList = function CommentList(_ref) {
   var comments = _ref.comments,
     selectionElement = _ref.selectionElement;
@@ -60,7 +61,7 @@ var CommentList = function CommentList(_ref) {
   }(), [dispatch]);
   var insertContent = useCallback(function (content) {
     var user = context.getUserInfo();
-    var elementId = selectionElement.id;
+    var elementId = selectionElement === null || selectionElement === void 0 ? void 0 : selectionElement.id;
     var time = dayjs().format('YYYY-MM-DD HH:mm:ss');
     var comment = {
       comment: content,
@@ -72,11 +73,11 @@ var CommentList = function CommentList(_ref) {
       updated_at: time
     };
     insertComment(elementId, comment);
-  }, [insertComment, selectionElement.id]);
+  }, [insertComment, selectionElement]);
   var resetActiveComment = useCallback(function (e) {
-    var menu = commentRef.current;
-    var clickIsInMenu = menu && menu.contains(e.target) && menu !== e.target;
-    if (clickIsInMenu) return;
+    var commentWrapper = commentRef.current;
+    var clickIsInComment = commentWrapper && commentWrapper.contains(e.target) && commentWrapper !== e.target;
+    if (clickIsInComment) return;
     setActiveComment(null);
   }, []);
   useEffect(function () {
@@ -87,19 +88,20 @@ var CommentList = function CommentList(_ref) {
   }, [resetActiveComment]);
   return /*#__PURE__*/React.createElement("div", {
     ref: commentRef,
-    className: "comment-list-container",
+    id: "sdoc-comment-list-container",
+    className: "sdoc-comment-list-container",
     style: {
       top: position.y
     }
   }, comments.length > 0 && /*#__PURE__*/React.createElement("div", {
     className: "comment-list"
   }, comments.map(function (comment) {
+    if (comment.resolved) return null;
     var isActive = activeComment && activeComment.id === comment.id;
     var props = {
       key: comment.id,
       comment: comment,
       isActive: isActive,
-      selectionElement: selectionElement,
       onCommentClick: onCommentClick
     };
     return /*#__PURE__*/React.createElement(CommentItemWrapper, props);

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

@@ -0,0 +1,66 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import useSelectionUpdate from '../../hooks/use-selection-update';
+import { useCursorPosition } from '../helper';
+import CommentList from './comment-list';
+import { useSelectionElement } from '../../hooks/use-selection-element';
+import { useCommentContext } from '../hooks/use-comment-context';
+var EditorComment = function EditorComment() {
+  useSelectionUpdate();
+  var selectionElement = useSelectionElement();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isShowComments = _useState2[0],
+    setIsShowComments = _useState2[1];
+  var onAddCommentToggle = useCallback(function () {
+    setIsShowComments(true);
+  }, []);
+  var cursor = useCursorPosition();
+  var style = useMemo(function () {
+    return {
+      top: cursor.y === 0 || isShowComments ? '-99999px' : cursor.y
+    };
+  }, [cursor, isShowComments]);
+
+  // When selectionElement update, recalculate comment's panel state
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    comments = _useState4[0],
+    setComments = _useState4[1];
+  var element_comments_map = useCommentContext().commentsInfo.element_comments_map;
+  useEffect(function () {
+    var comments = element_comments_map[selectionElement === null || selectionElement === void 0 ? void 0 : selectionElement.id];
+    var hasComments = comments && comments.length > 0;
+    if (hasComments) {
+      setIsShowComments(true);
+      setComments(comments);
+      return;
+    }
+    setComments([]);
+    setIsShowComments(false);
+  }, [element_comments_map, selectionElement]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-comment-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "comment-container-main"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "comment-container-right"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "comment-add-wrapper",
+    style: style
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "add-comment-icon",
+    onClick: onAddCommentToggle
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-comment mr-1"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "comment-list-wrapper",
+    style: isShowComments ? {
+      width: '294px'
+    } : null
+  }, isShowComments && /*#__PURE__*/React.createElement(CommentList, {
+    comments: comments,
+    selectionElement: selectionElement
+  }))));
+};
+export default EditorComment;

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

@@ -0,0 +1,66 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { withTranslation } from 'react-i18next';
+import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
+export var COMMENT_TYPES = {
+  all: 'All_comments',
+  resolved: 'Resolved_comments',
+  unresolved: 'Unresolved_comments'
+};
+function GlobalCommentHeader(_ref) {
+  var commentType = _ref.commentType,
+    commentList = _ref.commentList,
+    t = _ref.t,
+    onCommentTypeChanged = _ref.onCommentTypeChanged;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDropdownOpen = _useState2[0],
+    setDropdownOpen = _useState2[1];
+  var commentTip = null;
+  if (commentList.length === 1) {
+    commentTip = t('Total_1_comment');
+  } else if (commentList.length > 1) {
+    commentTip = t('Total_count_comments', {
+      count: commentList.length
+    });
+  }
+  var id = 'comment-type-controller';
+  return /*#__PURE__*/React.createElement("div", {
+    className: "comments-panel-body__header"
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "comment-types",
+    className: "comment-type"
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    isOpen: isDropdownOpen,
+    toggle: function toggle() {
+      return setDropdownOpen(!isDropdownOpen);
+    }
+  }, /*#__PURE__*/React.createElement(DropdownToggle, {
+    tag: 'div',
+    caret: true,
+    className: "d-flex align-items-center justify-content-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    id: id
+  }, t(commentType))), /*#__PURE__*/React.createElement(DropdownMenu, {
+    container: "comment-types",
+    className: "sdoc-comment-list-menu"
+  }, /*#__PURE__*/React.createElement(DropdownItem, {
+    tag: 'div',
+    onClick: function onClick() {
+      return onCommentTypeChanged(COMMENT_TYPES.all);
+    }
+  }, t(COMMENT_TYPES.all)), /*#__PURE__*/React.createElement(DropdownItem, {
+    tag: 'div',
+    onClick: function onClick() {
+      return onCommentTypeChanged(COMMENT_TYPES.resolved);
+    }
+  }, t(COMMENT_TYPES.resolved)), /*#__PURE__*/React.createElement(DropdownItem, {
+    tag: 'div',
+    onClick: function onClick() {
+      return onCommentTypeChanged(COMMENT_TYPES.unresolved);
+    }
+  }, t(COMMENT_TYPES.unresolved))))), /*#__PURE__*/React.createElement("div", {
+    className: "comment-count-tip"
+  }, commentTip));
+}
+export default withTranslation('sdoc-editor')(GlobalCommentHeader);

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

@@ -0,0 +1,94 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { ElementPopover } from '../../extension/commons';
+import EventBus from '../../utils/event-bus';
+import useCommentList from '../hooks/use-comment-list';
+import CommentItemWrapper from './comment-item-wrapper';
+import { withTranslation } from 'react-i18next';
+import GlobalCommentHeader from './global-comment-header';
+var GlobalComment = function GlobalComment(_ref) {
+  var t = _ref.t;
+  var commentRef = useRef(null);
+  var _useCommentList = useCommentList(),
+    commentList = _useCommentList.commentList,
+    commentType = _useCommentList.commentType,
+    setCommentType = _useCommentList.setCommentType;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isShowCommentList = _useState2[0],
+    setShowCommentList = _useState2[1];
+  useEffect(function () {
+    var toggleOuterSide = function toggleOuterSide(e) {
+      var commentWrapper = commentRef.current;
+      var clickIsInComment = commentWrapper && commentWrapper.contains(e.target) && commentWrapper !== e.target;
+      if (clickIsInComment) return;
+      setShowCommentList(false);
+    };
+    var eventBus = EventBus.getInstance();
+    var unsubscribe = eventBus.subscribe('COMMENT_LIST_CLICK', function () {
+      return setShowCommentList(!isShowCommentList);
+    });
+    document.addEventListener('click', toggleOuterSide, true);
+    return function () {
+      unsubscribe();
+      document.removeEventListener('click', toggleOuterSide, true);
+    };
+  }, [isShowCommentList]);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeComment = _useState4[0],
+    setActiveComment = _useState4[1];
+  var onCommentClick = useCallback(function (comment) {
+    if (activeComment && activeComment.id === comment.id) return;
+    setActiveComment(comment);
+  }, [activeComment]);
+  var contentRef = useRef(null);
+  var updateScrollPosition = useCallback(function () {
+    var resolvedDom = document.querySelector('.sdoc-resolved');
+    contentRef.current.scrollTo({
+      top: resolvedDom.offsetTop,
+      behavior: 'smooth'
+    });
+  }, []);
+  if (!isShowCommentList) return null;
+  return /*#__PURE__*/React.createElement(ElementPopover, {
+    className: 'global-comments-popover'
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: commentRef,
+    className: "comments-panel-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "comments-panel-header"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "title"
+  }, t('Comments')), /*#__PURE__*/React.createElement("span", {
+    className: "close-wrapper",
+    onClick: function onClick() {
+      return setShowCommentList(false);
+    }
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-close"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "comments-panel-body"
+  }, /*#__PURE__*/React.createElement(GlobalCommentHeader, {
+    commentType: commentType,
+    commentList: commentList,
+    onCommentTypeChanged: setCommentType
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: contentRef,
+    className: "comments-panel-body__content"
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "global-comment-list-container",
+    className: "sdoc-comment-list-container"
+  }, commentList.map(function (comment) {
+    var isActive = activeComment && activeComment.id === comment.id;
+    return /*#__PURE__*/React.createElement(CommentItemWrapper, {
+      key: comment.id,
+      container: 'global-comment-list-container',
+      comment: comment,
+      isActive: isActive,
+      onCommentClick: onCommentClick,
+      updateScrollPosition: updateScrollPosition
+    });
+  }))))));
+};
+export default withTranslation('sdoc-editor')(GlobalComment);

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

@@ -1,67 +1,4 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import useSelectionUpdate from '../../hooks/use-selection-update';
-import { useCursorPosition } from '../helper';
-import CommentList from './comment-list';
-import { useSelectionElement } from '../../hooks/use-selection-element';
-import { useCommentContext } from '../hooks/use-comment-context';
+import EditorComment from './editor-comment';
+import GlobalComment from './global-comment';
 import './style.css';
-var Comment = function Comment() {
-  useSelectionUpdate();
-  var selectionElement = useSelectionElement();
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isShowComments = _useState2[0],
-    setIsShowComments = _useState2[1];
-  var onAddCommentToggle = useCallback(function () {
-    setIsShowComments(true);
-  }, []);
-  var cursor = useCursorPosition();
-  var style = useMemo(function () {
-    return {
-      top: cursor.y === 0 || isShowComments ? '-99999px' : cursor.y
-    };
-  }, [cursor, isShowComments]);
-
-  // When selectionElement update, recalculate comment's panel state
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    comments = _useState4[0],
-    setComments = _useState4[1];
-  var element_comments_map = useCommentContext().commentsInfo.element_comments_map;
-  useEffect(function () {
-    var comments = element_comments_map[selectionElement === null || selectionElement === void 0 ? void 0 : selectionElement.id];
-    var hasComments = comments && comments.length > 0;
-    if (hasComments) {
-      setIsShowComments(true);
-      setComments(comments);
-      return;
-    }
-    setComments([]);
-    setIsShowComments(false);
-  }, [element_comments_map, selectionElement]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-comment-container"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "comment-container-main"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "comment-container-right"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "comment-add-wrapper",
-    style: style
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "add-comment-icon",
-    onClick: onAddCommentToggle
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "sdocfont sdoc-comment mr-1"
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "comment-list-wrapper",
-    style: isShowComments ? {
-      width: '294px'
-    } : null
-  }, isShowComments && /*#__PURE__*/React.createElement(CommentList, {
-    comments: comments,
-    selectionElement: selectionElement
-  }))));
-};
-export default Comment;
+export { EditorComment, GlobalComment };