@seafile/sdoc-editor 0.3.11 → 0.3.12

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

@@ -2,6 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import dayjs from 'dayjs';
 import classNames from 'classnames';
+import { Node } from '@seafile/slate';
 import context from '../../../context';
 import { useCommentContext } from '../hooks/comment-hooks/use-comment-context';
 import CommentItemContent from './comment-item-content';
@@ -10,9 +11,10 @@ import CommentEditor from './comment-editor';
 import CommentItemResolvedReply from './comment-item-resolved-reply';
 import CommentDeleteShadow from './comment-delete-shadow';
 import { COMMENT_URL_CLASSNAME } from '../constants';
-export default function CommentItemWrapper(_ref) {
+const CommentItemWrapper = _ref => {
   let {
     container,
+    element,
     isActive,
     comment,
     onCommentClick,
@@ -227,14 +229,19 @@ export default function CommentItemWrapper(_ref) {
   }, [isActive]);
   const className = classNames('comment-ui-container', {
     'active': isActive,
-    'sdoc-resolved': comment.resolved
+    'sdoc-resolved': comment.resolved,
+    'd-flex flex-column pt-0': element
   });
   const tip = comment.resolved ? 'Reopen_discussion' : 'Enter_a_reply';
   return /*#__PURE__*/React.createElement("div", {
     id: "comment-item-wrapper_".concat(comment.id),
     className: className,
     onClick: onItemClick
-  }, /*#__PURE__*/React.createElement("ul", {
+  }, element && /*#__PURE__*/React.createElement("div", {
+    className: "comment-item-selected-text"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-selected-text mr-2"
+  }), Node.string(element)), /*#__PURE__*/React.createElement("ul", {
     ref: listRef,
     className: "comment-item-list"
   }, /*#__PURE__*/React.createElement(CommentItemContent, {
@@ -277,7 +284,8 @@ export default function CommentItemWrapper(_ref) {
     deleteConfirm: _deleteComment,
     setIsShowDeleteModal: setIsShowDeleteDialog
   }));
-}
+};
 CommentItemWrapper.defaultProps = {
   container: 'sdoc-comment-list-container'
-};
+};
+export default CommentItemWrapper;

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

@@ -18,6 +18,21 @@
   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-selected-text {
+  padding: 6px 16px;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  line-height: 20px;
+  border-radius: 8px 8px 0 0;
+}
+
+.sdoc-comment-list-container .comment-item-selected-text .sdoc-selected-text {
+  font-size: 12px;
+}
+
 .sdoc-comment-list-container .comment-item-list {
   max-height: 350px;
   min-width: 280px;

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

@@ -1,11 +1,10 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useSlateStatic } from '@seafile/slate-react';
-import { Editor } from '@seafile/slate';
-import { getNodeById, focusEditor, findPath } from '../../../extension/core';
+import { getNodeById } from '../../../extension/core';
 import { useScrollContext } from '../../../hooks/use-scroll-context';
 import { getElementCommentCountTop } from '../../helper';
 import { eventStopPropagation } from '../../../utils/mouse-event';
-import { ELEMENT_TYPE } from '../../../extension/constants';
+import { focusToCommentElement } from '../../utils';
 const ElementCommentCount = _ref => {
   let {
     elementId,
@@ -17,14 +16,7 @@ const ElementCommentCount = _ref => {
   const [top, setTop] = useState(-9999);
   const onClick = useCallback(event => {
     eventStopPropagation(event);
-    const path = findPath(editor, element);
-    const endOfFirstNode = Editor.end(editor, path);
-    const startOfFirstNode = Editor.start(editor, path);
-    const range = {
-      anchor: [ELEMENT_TYPE.LIST_ITEM, ELEMENT_TYPE.ORDERED_LIST, ELEMENT_TYPE.UNORDERED_LIST].includes(element.type) ? startOfFirstNode : endOfFirstNode,
-      focus: endOfFirstNode
-    };
-    focusEditor(editor, range);
+    focusToCommentElement(editor, element);
   }, [editor, element]);
   useEffect(() => {
     var _scrollRef$current;

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

@@ -50,6 +50,7 @@
   flex-direction: column;
   min-height: 0;
   position: relative;
+  background-color: #F5F5F5;
 }
 
 .global-comments-popover .comments-panel-body__header {
@@ -128,3 +129,14 @@
   left: 0;
   margin-bottom: 0;
 }
+
+/* custom */
+.global-comments-popover .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 {
+  background-color: #F5F5F5;
+  border-bottom: 1px solid #c7c7c7;
+}

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

@@ -2,6 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import dayjs from 'dayjs';
 import { useSlateStatic } from '@seafile/slate-react';
+import { ReactEditor } from '@seafile/slate-react';
 import { ElementPopover } from '../../../extension/commons';
 import EventBus from '../../../utils/event-bus';
 import useCommentList from '../../hooks/comment-hooks/use-comment-list';
@@ -14,6 +15,8 @@ import { useCommentContext } from '../../hooks/comment-hooks/use-comment-context
 import GlobalCommentEditor from './global-comment-editor';
 import { INTERNAL_EVENT } from '../../../constants';
 import { getNodeById } from '../../../extension/core';
+import { useScrollContext } from '../../../hooks/use-scroll-context';
+import { focusToCommentElement } from '../../utils';
 import './index.css';
 const GlobalComment = _ref => {
   let {
@@ -30,6 +33,7 @@ const GlobalComment = _ref => {
   const [isShowCommentList, setShowCommentList] = useState(false);
   const [showEditor, setShowEditor] = useState(false);
   const editor = useSlateStatic();
+  const scrollRef = useScrollContext();
   const toggle = useCallback(() => {
     if (isShowCommentList) {
       setActiveComment(null);
@@ -69,11 +73,15 @@ const GlobalComment = _ref => {
   const hiddenComment = useCallback(() => {
     setActiveComment(null);
   }, []);
-  const onCommentClick = useCallback(comment => {
+  const onCommentClick = useCallback((comment, element) => {
     if (activeComment && activeComment.id === comment.id) return;
     setActiveComment(comment);
     deleteUnseenNotifications && deleteUnseenNotifications(comment);
-  }, [activeComment, deleteUnseenNotifications]);
+    if (comment.detail.element_id === DOC_COMMENT_ELEMENT_ID) return;
+    const elementDom = ReactEditor.toDOMNode(editor, element, scrollRef);
+    scrollRef.current.scrollTop = elementDom.offsetTop - scrollRef.current.clientHeight / 3;
+    focusToCommentElement(editor, element);
+  }, [activeComment, deleteUnseenNotifications, editor, scrollRef]);
   const {
     dispatch
   } = useCommentContext();
@@ -147,10 +155,11 @@ const GlobalComment = _ref => {
     const isActive = activeComment && activeComment.id === comment.id;
     return /*#__PURE__*/React.createElement(CommentItemWrapper, {
       key: comment.id,
+      element: element,
       container: "global-comment-list-container",
       comment: comment,
       isActive: isActive,
-      onCommentClick: onCommentClick,
+      onCommentClick: comment => onCommentClick(comment, element),
       hiddenComment: hiddenComment,
       updateScrollPosition: updateScrollPosition
     });

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

@@ -1,7 +1,10 @@
+import { Editor } from '@seafile/slate';
 import { getEventTransfer } from '../../../utils';
 import { COMMENT_URL_CLASSNAME } from '../constants';
 import { KeyCodes } from '../../../constants';
 import { createNotify, generatorNotificationKey } from './notification-utils';
+import { focusEditor, findPath } from '../../extension/core';
+import { ELEMENT_TYPE } from '../../extension/constants';
 export const searchCollaborators = (collaborators, searchValue) => {
   const validSearchValue = searchValue ? searchValue.trim().toLowerCase() : '';
   const validCollaborators = Array.isArray(collaborators) && collaborators.length > 0 ? collaborators : [];
@@ -211,4 +214,14 @@ class CommentUtilities {
     };
   }
 }
+export const focusToCommentElement = (editor, element) => {
+  const path = findPath(editor, element);
+  const endOfFirstNode = Editor.end(editor, path);
+  const startOfFirstNode = Editor.start(editor, path);
+  const range = {
+    anchor: [ELEMENT_TYPE.LIST_ITEM, ELEMENT_TYPE.ORDERED_LIST, ELEMENT_TYPE.UNORDERED_LIST].includes(element.type) ? startOfFirstNode : endOfFirstNode,
+    focus: endOfFirstNode
+  };
+  focusEditor(editor, range);
+};
 export { CommentUtilities, createNotify, generatorNotificationKey };

package/dist/basic-sdk/extension/plugins/callout/plugin.js

@@ -0,0 +1,57 @@
+import isHotkey from 'is-hotkey';
+import { PARAGRAPH, INSERT_POSITION } from '../../constants';
+import { isSelectionAtBlockStart } from '../../core';
+import { getCalloutEntry, isCalloutContentEmpty, unwrapCallout } from './helper';
+import { insertElement } from '../../toolbar/side-toolbar/helpers';
+import EventBus from '../../../utils/event-bus';
+import { INTERNAL_EVENT } from '../../../constants';
+import { CALLOUT_ALLOWED_INSIDE_TYPES } from './constant';
+
+/**
+ * @param {Editor} editor
+ * @returns
+ */
+const withCallout = editor => {
+  const {
+    insertFragment,
+    deleteBackward,
+    onHotKeyDown
+  } = editor;
+  const newEditor = editor;
+  newEditor.deleteBackward = unit => {
+    const calloutEntry = getCalloutEntry(editor);
+    if (calloutEntry) {
+      if (isSelectionAtBlockStart(editor) && isCalloutContentEmpty(editor, calloutEntry)) return;
+    }
+    return deleteBackward(unit);
+  };
+  newEditor.insertFragment = data => {
+    var _data$find;
+    const eventBus = EventBus.getInstance();
+    const unsupportType = (_data$find = data.find(node => !CALLOUT_ALLOWED_INSIDE_TYPES.includes(node.type))) === null || _data$find === void 0 ? void 0 : _data$find.type;
+    if (unsupportType) {
+      eventBus.dispatch(INTERNAL_EVENT.DISPALY_CALLOUT_UNSUPPORT_ALERT, unsupportType);
+      return;
+    }
+    return insertFragment(data);
+  };
+  newEditor.onHotKeyDown = event => {
+    if (isHotkey('mod+enter', event)) {
+      insertElement(newEditor, PARAGRAPH, INSERT_POSITION.AFTER);
+      return true;
+    }
+    if (isHotkey('enter', event)) {
+      const calloutEntry = getCalloutEntry(editor);
+      if (calloutEntry) {
+        if (isCalloutContentEmpty(editor, calloutEntry)) {
+          unwrapCallout(editor);
+          event.preventDefault();
+          return true;
+        }
+      }
+    }
+    return onHotKeyDown && onHotKeyDown(event);
+  };
+  return newEditor;
+};
+export default withCallout;

package/package.json

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

package/public/media/sdoc-editor-font/iconfont.svg

@@ -14,6 +14,8 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="sdoc-selected-text" unicode="&#58974;" d="M48 480h928c25.6 0 48-22.4 48-48s-22.4-48-48-48h-928C22.4 384 0 406.4 0 432S22.4 480 48 480z m0-352h352c25.6 0 48-22.4 48-48s-22.4-48-48-48h-352C22.4 32 0 54.4 0 80S22.4 128 48 128z m0 704h928c25.6 0 48-22.4 48-48S1001.6 736 976 736h-928C22.4 736 0 758.4 0 784S22.4 832 48 832z m675.2-950.4c-12.8 0-28.8 6.4-38.4 16l-124.8 118.4c-22.4 19.2-22.4 51.2 0 73.6s54.4 19.2 76.8 0l86.4-83.2 211.2 204.8c22.4 19.2 54.4 19.2 76.8 0s22.4-51.2 0-73.6l-249.6-240c-12.8-12.8-25.6-16-38.4-16z"  horiz-adv-x="1028" />
+      
       <glyph glyph-name="sdoc-freezed" unicode="&#58973;" d="M512 384m-512 0a512 512 0 1 1 1024 0 512 512 0 1 1-1024 0ZM316.8 716.8c118.4 70.4 265.6 70.4 384 3.2s192-195.2 192-332.8c0-137.6-73.6-265.6-195.2-332.8-182.4-105.6-416-41.6-521.6 140.8S134.4 608 316.8 716.8z m348.8-604.8c137.6 80 195.2 249.6 131.2 396.8L259.2 195.2c92.8-124.8 268.8-163.2 406.4-83.2zM352 652.8c-137.6-80-192-249.6-128-393.6l537.6 310.4c-96 128-272 163.2-409.6 83.2z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="sdoc-jump-to" unicode="&#58970;" d="M361.6 896c32 0 54.4-16 54.4-48S393.6 800 361.6 800H96v-832h832v262.4c0 32 16 57.6 48 57.6s48-25.6 48-57.6v-300.8c0-32-28.8-57.6-60.8-57.6H60.8c-32 0-60.8 25.6-60.8 57.6V835.2C0 870.4 25.6 896 60.8 896h300.8zM992 896c19.2 0 32-12.8 32-32v-332.8c0-28.8-19.2-51.2-48-51.2s-48 22.4-48 51.2V729.6L531.2 336c-6.4-9.6-19.2-16-35.2-16-12.8 0-25.6 6.4-35.2 16-19.2 19.2-19.2 51.2 0 70.4L857.6 800h-198.4c-28.8 0-51.2 19.2-51.2 48S630.4 896 656 896H992z"  horiz-adv-x="1024" />

package/public/media/sdoc-editor-font.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: "sdocfont"; /* Project id 4097705 */
-  src: url('./sdoc-editor-font/iconfont.eot?t=1700547401892'); /* IE9 */
-  src: url('./sdoc-editor-font/iconfont.eot?t=1700547401892#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('./sdoc-editor-font/iconfont.woff2?t=1700547401892') format('woff2'),
-       url('./sdoc-editor-font/iconfont.woff?t=1700547401892') format('woff'),
-       url('./sdoc-editor-font/iconfont.ttf?t=1700547401892') format('truetype'),
-       url('./sdoc-editor-font/iconfont.svg?t=1700547401892#sdocfont') format('svg');
+  src: url('./sdoc-editor-font/iconfont.eot?t=1700642464361'); /* IE9 */
+  src: url('./sdoc-editor-font/iconfont.eot?t=1700642464361#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('./sdoc-editor-font/iconfont.woff2?t=1700642464361') format('woff2'),
+       url('./sdoc-editor-font/iconfont.woff?t=1700642464361') format('woff'),
+       url('./sdoc-editor-font/iconfont.ttf?t=1700642464361') format('truetype'),
+       url('./sdoc-editor-font/iconfont.svg?t=1700642464361#sdocfont') format('svg');
 }
 
 .sdocfont {
@@ -16,6 +16,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.sdoc-selected-text:before {
+  content: "\e65e";
+}
+
 .sdoc-freezed:before {
   content: "\e65d";
 }