@seafile/sdoc-editor 2.0.46 → 2.0.48-alpha-2.0.0

package/dist/api/sdoc-server-api.js

@@ -95,6 +95,7 @@ class SDocServerApi {
       accessToken
     } = this;
     const url = `${server}/api/v1/docs/${docUuid}/comment/`;
+    console.log(3, comment);
     return _axios.default.post(url, comment, {
       headers: {
         Authorization: `Token ${accessToken}`

package/dist/basic-sdk/comment/components/comment-context-menu/index.css

@@ -0,0 +1,16 @@
+.menu-group-item.sdoc-comment-menu-container {
+  width: 63px;
+  color: #212529;
+  font-size: 14px;
+}
+
+.sdoc-comment-menu-item .sdoc-comments {
+  margin-right: 4px;
+}
+
+.sdoc-context-menu-divider {
+  margin-right: 8px;
+  border-left: 1px solid #e5e5e5;
+  width: 1px;
+  height: 24px;
+}

package/dist/basic-sdk/comment/components/comment-context-menu/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+require("./index.css");
+var _menuItem = _interopRequireDefault(require("./menu-item"));
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+var _constants = require("../../../constants");
+// import EventBus from '../../../../utils/event-bus';
+// import { INTERNAL_EVENT } from '../../../../constants';
+// import { ELEMENT_TYPE } from '../../../constants';
+
+const CommentContextMenu = _ref => {
+  let {
+    isRichEditor
+  } = _ref;
+  const onCommentClick = (0, _react.useCallback)(event => {
+    const eventBus = _eventBus.default.getInstance();
+    eventBus.dispatch(_constants.INTERNAL_EVENT.ADD_CONTEXT_COMMENT);
+  }, []);
+  const commentProps = {
+    id: 'context-toolbar-comment',
+    isRichEditor,
+    className: 'menu-group-item sdoc-comment-menu-container',
+    disabled: false,
+    isActive: false,
+    onMouseDown: onCommentClick,
+    iconClass: 'sdocfont sdoc-comments',
+    text: 'Comment',
+    ariaLabel: 'Add_Comment',
+    type: 'sdoc-add-comment'
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-context-menu-divider"
+  }), /*#__PURE__*/_react.default.createElement(_menuItem.default, commentProps));
+};
+var _default = exports.default = CommentContextMenu;

package/dist/basic-sdk/comment/components/comment-context-menu/menu-item.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _classnames = _interopRequireDefault(require("classnames"));
+// import Tooltip from '../../../../../components/tooltip';
+
+const MenuItem = _ref => {
+  let {
+    isRichEditor = true,
+    className = 'menu-group-item',
+    disabled,
+    isActive,
+    type,
+    onMouseDown,
+    id,
+    text,
+    ariaLabel,
+    iconClass
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const onClick = (0, _react.useCallback)(event => {
+    if (disabled) return;
+    onMouseDown(event, type);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [disabled, type]);
+  const validClassName = (0, _classnames.default)('', className, {
+    'btn btn-icon btn-secondary btn-active': !isRichEditor,
+    'rich-icon-btn': isRichEditor,
+    'rich-icon-btn-disabled': isRichEditor && disabled,
+    'rich-icon-btn-hover': isRichEditor && !disabled
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    id: id,
+    type: "button",
+    "aria-label": ariaLabel,
+    className: validClassName,
+    disabled: disabled,
+    "data-active": isActive,
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "sdoc-comment-menu-item"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: iconClass
+  }), /*#__PURE__*/_react.default.createElement("span", null, t(text)))));
+};
+var _default = exports.default = MenuItem;

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

@@ -75,12 +75,15 @@ const CommentEditor = _ref => {
   }, [document]);
   const updateValue = (0, _react.useCallback)(value => {
     if (!value || value.trim() === '') return;
+    console.log(0, content, editor);
     if (!content) return insertContent(value);
     updateContent && updateContent(value);
   }, [content, insertContent, updateContent]);
   const onSubmit = (0, _react.useCallback)(event => {
+    console.log(66);
     event && event.stopPropagation();
     const mdString = (0, _slateToMd.default)(editor.children);
+    console.log(2, mdString);
     updateValue(mdString);
     addParticipants(userInfo.username);
     editor.children = [(0, _core.generateEmptyElement)(_constants.PARAGRAPH, {

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

@@ -21,11 +21,14 @@ const CommentList = _ref => {
     activeElement,
     commentDetail = {},
     onSetCommentDetail,
+    isContextComment = false,
+    selectedContext,
     t
   } = _ref;
   const commentPopover = (0, _react.useRef)(null);
   const commentDetailRef = (0, _react.useRef)(null);
-  const position = (0, _useSelectionPosition.useCommentListPosition)(activeElement);
+  console.log(1, isContextComment);
+  const position = (0, _useSelectionPosition.useCommentListPosition)(activeElement, isContextComment, selectedContext);
   const {
     dispatch
   } = (0, _useCommentContext.useCommentContext)();
@@ -36,6 +39,7 @@ const CommentList = _ref => {
   const isCollapseCommentEditor = !isEmptyComment && !showEditor;
   const insertComment = (0, _react.useCallback)(async (elementId, comment) => {
     const res = await _context.default.insertComment(comment);
+    console.log(2, res);
     const {
       comment: returnComment
     } = res.data;
@@ -58,18 +62,34 @@ const CommentList = _ref => {
   }, [dispatch, onSetCommentDetail]);
   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');
-    const comment = {
-      comment: content,
-      detail: {
-        element_id: elementId,
-        comment: content
-      },
-      author: user.username,
-      updated_at: time
-    };
-    insertComment(elementId, comment);
+    let comment = {};
+    if (isContextComment) {
+      var _activeElement$;
+      comment = {
+        comment: content,
+        detail: {
+          elements: activeElement,
+          comment: content
+        },
+        author: user.username,
+        updated_at: time
+      };
+      console.log(3, activeElement);
+      insertComment((_activeElement$ = activeElement[0]) === null || _activeElement$ === void 0 ? void 0 : _activeElement$.element.id, comment);
+    } else {
+      const elementId = activeElement === null || activeElement === void 0 ? void 0 : activeElement.id;
+      comment = {
+        comment: content,
+        detail: {
+          element_id: elementId,
+          comment: content
+        },
+        author: user.username,
+        updated_at: time
+      };
+      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) {
@@ -101,6 +121,9 @@ const CommentList = _ref => {
     className: "sdoc-comment-list-container sdoc-comment-list-container-popover",
     style: {
       top: position.y,
+      ...(isContextComment ? {
+        right: position.right
+      } : {}),
       width: '300px',
       transform: `translateY(${translateY}px)`
     }

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

@@ -17,11 +17,15 @@ var _elementsCommentCount = _interopRequireDefault(require("./elements-comment-c
 var _index = require("../utils/index");
 var _constants = require("../../extension/constants");
 var _constants2 = require("../../constants");
+var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _useSelectionElementWithOffset = require("../../hooks/use-selection-element-with-offset");
 const EditorComment = _ref => {
   let {
     editor
   } = _ref;
   (0, _useSelectionUpdate.default)();
+  console.log(1, editor.selection);
   const {
     element_comments_map
   } = (0, _useCommentContext.useCommentContext)().commentsInfo;
@@ -31,8 +35,11 @@ const EditorComment = _ref => {
   const [activeElement, setActiveElement] = (0, _react.useState)(null); // The slate node currently activated by clicking
   const [isShowComments, setIsShowComments] = (0, _react.useState)(false);
   const [commentDetail, setCommentDetail] = (0, _react.useState)({});
+  const [isContextComment, setIsContextComment] = (0, _react.useState)(false);
+  const [selectedContext, setSelectedContext] = (0, _react.useState)({});
   const onAddCommentToggle = (0, _react.useCallback)(event => {
-    event.stopPropagation();
+    if (event) event.stopPropagation();
+    console.log(3, currentSelectionElement);
     let activeElement = currentSelectionElement;
     // Add comments to image elements in the image block
     if (currentSelectionElement.type === _constants.ELEMENT_TYPE.IMAGE_BLOCK) {
@@ -41,6 +48,7 @@ const EditorComment = _ref => {
     setActiveElement(activeElement);
     setIsShowComments(true);
     setCommentDetail({});
+    console.log(2, activeElement);
   }, [currentSelectionElement]);
   const onSelectElement = (0, _react.useCallback)(elementId => {
     const activeElement = (0, _index.getCommentElementById)(elementId, editor);
@@ -55,6 +63,7 @@ const EditorComment = _ref => {
   const hiddenComment = (0, _react.useCallback)(() => {
     setCommentDetail({});
     setIsShowComments(false);
+    setIsContextComment(false);
   }, []);
 
   // Comments are updated to modify the current comment
@@ -68,12 +77,40 @@ const EditorComment = _ref => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [element_comments_map]);
   (0, _react.useEffect)(() => {
+    console.log(1, selectedContext);
     // Close when the currently selected element changes
     if (isShowComments) {
       hiddenComment();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentSelectionElement]);
+  }, [currentSelectionElement, editor.selection]);
+  const handleAddContextComment = () => {
+    console.log(4, editor.selection);
+    // const selectedContext
+    const content = window.getSelection().toString();
+    console.log(3, content);
+    // selectedContext
+    const domSelection = window.getSelection();
+    setSelectedContext(domSelection);
+    let activeElement = (0, _useSelectionElementWithOffset.getSelectedElemsWithOffsets)(editor);
+    // // Add comments to image elements in the image block
+    // if (currentSelectionElement.type === ELEMENT_TYPE.IMAGE_BLOCK) {
+    //   activeElement = currentSelectionElement.children.find(item => item?.type === ELEMENT_TYPE.IMAGE);
+    // }
+    console.log(29, activeElement);
+    setActiveElement(activeElement);
+    setIsShowComments(true);
+    setCommentDetail({});
+    setIsContextComment(true);
+    console.log(2, activeElement);
+  };
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    const unsubscribeAddContextComment = eventBus.subscribe(_constants2.INTERNAL_EVENT.ADD_CONTEXT_COMMENT, handleAddContextComment);
+    return () => {
+      unsubscribeAddContextComment();
+    };
+  }, []);
   const cursor = (0, _helper.useCursorPosition)();
   const style = (0, _react.useMemo)(() => {
     var _Node$string;
@@ -101,7 +138,9 @@ const EditorComment = _ref => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "comment-container-main"
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-container-right"
+    className: (0, _classnames.default)('comment-container-right', {
+      'isContextComment': isContextComment
+    })
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "comment-add-wrapper",
     style: style
@@ -118,7 +157,9 @@ const EditorComment = _ref => {
   }), isShowComments && /*#__PURE__*/_react.default.createElement(_commentList.default, {
     activeElement: activeElement,
     commentDetail: commentDetail,
-    onSetCommentDetail: onSetCommentDetail
+    onSetCommentDetail: onSetCommentDetail,
+    isContextComment: isContextComment,
+    selectedContext: selectedContext
   })));
 };
 var _default = exports.default = EditorComment;

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

@@ -17,6 +17,10 @@
   left: 100%;
 }
 
+.sdoc-comment-container .comment-container-right.isContextComment {
+  /* left: auto !important; */
+}
+
 .sdoc-comment-container .comment-container-right .comment-add-wrapper {
   position: absolute;
   left: -22px;

package/dist/basic-sdk/comment/provider/comment-context-provider.js

@@ -20,6 +20,7 @@ const CommentContextProvider = _ref => {
   const [commentsInfo, dispatch] = (0, _react.useReducer)(_commentReducer.commentReducer, _commentReducer.initCommentsInfo);
   (0, _useCommentMount.useCommentsMount)(dispatch);
   (0, _react.useEffect)(() => {
+    console.log(1, commentsInfo);
     if (Object.keys(commentsInfo.element_comments_map).length) {
       editor.element_comments_map = commentsInfo.element_comments_map;
       const eventBus = _eventBus.default.getInstance();

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

@@ -49,7 +49,8 @@ const INTERNAL_EVENT = exports.INTERNAL_EVENT = {
   RESIZE_ARTICLE: 'resize_article',
   ON_VIDEO_FILES_UPLOADED: 'on_video_files_uploaded',
   RELOAD_COMMENT: 'reload_comment',
-  ASK_AI: 'ask_ai'
+  ASK_AI: 'ask_ai',
+  ADD_CONTEXT_COMMENT: 'add_context_comment'
 };
 const REVISION_DIFF_KEY = exports.REVISION_DIFF_KEY = 'diff';
 const REVISION_DIFF_VALUE = exports.REVISION_DIFF_VALUE = '1';

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

@@ -153,8 +153,11 @@ const SdocEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   }), [document, validEditor, slateValue]);
   const onValueChange = value => {
     const eventBus = _basicSdk.EventBus.getInstance();
-    eventBus.dispatch(_constants.INTERNAL_EVENT.UPDATE_SEARCH_REPLACE_HIGHLIGHT, value);
     setSlateValue(value);
+    // After the content is updated, update the search content
+    setTimeout(() => {
+      eventBus.dispatch(_constants.INTERNAL_EVENT.UPDATE_SEARCH_REPLACE_HIGHLIGHT, value);
+    }, 0);
     if (_utils.isMobile) {
       (0, _outlineModule.updateOutlineValue)(value);
     }

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

@@ -135,7 +135,10 @@ const WikiEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   }), [document, validEditor, slateValue]);
   const onValueChange = value => {
     const eventBus = _basicSdk.EventBus.getInstance();
-    eventBus.dispatch(_constants.INTERNAL_EVENT.UPDATE_SEARCH_REPLACE_HIGHLIGHT, value);
+    // After the content is updated, update the search content
+    setTimeout(() => {
+      eventBus.dispatch(_constants.INTERNAL_EVENT.UPDATE_SEARCH_REPLACE_HIGHLIGHT, value);
+    }, 0);
     setSlateValue(value);
   };
   if (isReloading) {

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

@@ -17,9 +17,9 @@ function AIIcon(_ref) {
   const {
     t
   } = (0, _reactI18next.useTranslation)('sdoc-editor');
-  const clazznames = (0, _classnames.default)('sdoc-ask-ai-icon', className);
+  const classnames = (0, _classnames.default)('sdoc-ask-ai-icon', className);
   return /*#__PURE__*/_react.default.createElement("img", {
-    className: clazznames,
+    className: classnames,
     src: _sdocAskAi.default,
     alt: t('Ask_AI')
   });

package/dist/basic-sdk/extension/plugins/link/hover/index.js

@@ -32,7 +32,7 @@ const LinkHover = _ref => {
       location.href = element.href;
     }
   }, [element.href]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement("div", {
     id: "link-op-menu",
     className: "link-op-menu",
     style: menuPosition

package/dist/basic-sdk/extension/plugins/search-replace/menu/index.js

@@ -54,7 +54,7 @@ const SearchReplaceMenu = _ref => {
     const canvasList = [];
     for (let index = 0; index < generateCount; index++) {
       const top = index * 5000;
-      canvasList.push( /*#__PURE__*/_react.default.createElement("canvas", {
+      canvasList.push(/*#__PURE__*/_react.default.createElement("canvas", {
         key: 'sdoc-find-search-' + index,
         id: `sdoc-find-search-${index}`,
         className: "sdoc-find-search-highlight-canvas",
@@ -79,7 +79,7 @@ const SearchReplaceMenu = _ref => {
     readonly: readonly,
     isOpen: isOpenPopover,
     closePopover: onMouseDown
-  }), isOpenPopover && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement("div", {
+  }), isOpenPopover && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement("div", {
     style: {
       height: articleContainerSize.clientHeight
     },

package/dist/basic-sdk/extension/plugins/search-replace/popover/index.js

@@ -168,7 +168,7 @@ const SearchReplacePopover = _ref => {
     if ((0, _isHotkey.default)('enter', e)) handleNext();
     if ((0, _isHotkey.default)('enter+shift', e)) handleLast();
   };
-  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-search-replace-popover-container",
     onMouseDown: handleStartMove,
     onMouseMove: handleMouseMove,

package/dist/basic-sdk/extension/plugins/seatable-row/dialog/add-seatable-row-dialog/row-card-header.js

@@ -78,7 +78,7 @@ class RowCardHeader extends _react.default.Component {
       // Start from the second column without name
       for (let i = 1; i < renderedColumns.length; i++) {
         const renderedColumn = renderedColumns[i];
-        cardHeaderCells.push( /*#__PURE__*/_react.default.createElement(_rowCardHeaderCell.default, {
+        cardHeaderCells.push(/*#__PURE__*/_react.default.createElement(_rowCardHeaderCell.default, {
           key: renderedColumn.key,
           column: renderedColumn,
           rowCardType: rowCardType,

package/dist/basic-sdk/extension/plugins/seatable-tables/seatable-settings/dtable-search-input/index.js

@@ -70,7 +70,7 @@ class DtableSearchInput extends _react.Component {
       const {
         ClearIndicator
       } = components;
-      if ( /*#__PURE__*/_react.default.isValidElement(ClearIndicator)) {
+      if (/*#__PURE__*/_react.default.isValidElement(ClearIndicator)) {
         return /*#__PURE__*/_react.default.cloneElement(ClearIndicator, {
           clearValue: this.clearSearch
         });

package/dist/basic-sdk/extension/plugins/seatable-tables/seatable-settings/filter-setter/filter-popover-widgets/filter-item.js

@@ -310,7 +310,7 @@ class FilterItem extends _react.default.Component {
               background: inOption.color,
               color: inOption.textColor || null
             };
-            labelArray.push( /*#__PURE__*/_react.default.createElement("span", {
+            labelArray.push(/*#__PURE__*/_react.default.createElement("span", {
               className: className,
               style: optionStyle,
               key: 'option_' + item,

package/dist/basic-sdk/extension/plugins/table/popover/table-size-popover/index.js

@@ -205,7 +205,7 @@ const TableSizePopover = _ref => {
         });
         children.push(child);
       }
-      tableSize.push( /*#__PURE__*/_react.default.createElement("div", {
+      tableSize.push(/*#__PURE__*/_react.default.createElement("div", {
         key: `sdoc-table-size-row-${i}`,
         className: "sdoc-table-size-row d-flex"
       }, children));

package/dist/basic-sdk/extension/plugins/text-style/menu/index.js

@@ -22,6 +22,7 @@ var _useColorContext = require("../../../../hooks/use-color-context");
 var _constants = require("../../../constants");
 var _constants2 = require("../../../../../basic-sdk/constants");
 var _context = _interopRequireDefault(require("../../../../../context"));
+var _commentContextMenu = _interopRequireDefault(require("../../../../comment/components/comment-context-menu"));
 const TextStyleMenuList = _ref => {
   let {
     editor,
@@ -154,7 +155,7 @@ const TextStyleMenuList = _ref => {
     tipMessage: t('Reduce_font_size')
   }, /*#__PURE__*/_react.default.createElement("i", {
     className: "sdocfont sdoc-reduce-font-size"
-  }))), idPrefix && enableSeafileAI && /*#__PURE__*/_react.default.createElement(_aiMenu.AIContextMenu, {
+  }))), idPrefix && /*#__PURE__*/_react.default.createElement(_commentContextMenu.default, null), idPrefix && enableSeafileAI && /*#__PURE__*/_react.default.createElement(_aiMenu.AIContextMenu, {
     isRichEditor: isRichEditor
   }));
 };

package/dist/basic-sdk/extension/toolbar/context-toolbar/index.js

@@ -62,7 +62,7 @@ const ContextToolbar = () => {
       el.removeAttribute('style');
     }
   }, []);
-  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     className: "sdoc-context-toolbar",
     onMouseDown: onMouseDown,

package/dist/basic-sdk/hooks/use-selection-element-with-offset.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSelectedElemsWithOffsets = void 0;
+var _slate = require("@seafile/slate");
+const getSelectedElemsWithOffsets = editor => {
+  const {
+    selection
+  } = editor;
+  const selectedElems = [];
+  const nodeEntries = Array.from(_slate.Editor.nodes(editor, {
+    match: n => _slate.Element.isElement(n) && _slate.Editor.isBlock(editor, n),
+    mode: 'lowest'
+  }));
+  const isSelectionForward = _slate.Point.compare(editor.selection.anchor, editor.selection.focus) === -1;
+  for (let index = 0; index < nodeEntries.length; index++) {
+    const [node] = nodeEntries[index];
+    console.log(99, node);
+    let startOffset = 0;
+    let endOffset = 0;
+    if (isSelectionForward) {
+      startOffset = selection.anchor.offset;
+      endOffset = selection.focus.offset;
+    } else {
+      startOffset = selection.focus.offset;
+      endOffset = selection.anchor.offset;
+    }
+
+    // Selection in only one element
+    if (nodeEntries.length === 1) {
+      selectedElems.push({
+        element: node,
+        startOffset,
+        endOffset
+      });
+      return selectedElems;
+    }
+    if (index === 0) {
+      endOffset = node.children[0].text.length - startOffset;
+      selectedElems.push({
+        element: node,
+        startOffset,
+        endOffset
+      });
+    } else if (index === nodeEntries.length - 1) {
+      startOffset = 0;
+      selectedElems.push({
+        element: node,
+        startOffset,
+        endOffset
+      });
+    } else {
+      startOffset = 0;
+      endOffset = node.children[0].text.length;
+      selectedElems.push({
+        element: node,
+        startOffset,
+        endOffset
+      });
+    }
+  }
+  return selectedElems;
+};
+exports.getSelectedElemsWithOffsets = getSelectedElemsWithOffsets;

package/dist/basic-sdk/hooks/use-selection-element.js

@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.useSelectionElement = void 0;
 var _slate = require("@seafile/slate");
 var _react = require("react");
+var _core = require("../extension/core");
 const useSelectionElement = _ref => {
   let {
     editor
   } = _ref;
+  // console.log(2, editor.selection, getSelectedElems(editor));
   const nodeEntry = (0, _react.useMemo)(() => {
     const nodeEntry = _slate.Editor.above(editor, {
       mode: 'lowest',
@@ -18,6 +20,7 @@ const useSelectionElement = _ref => {
     return nodeEntry;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor.selection]);
+  // console.log(1, nodeEntry);
   if (nodeEntry && nodeEntry[0]) {
     return nodeEntry[0];
   }

package/dist/basic-sdk/hooks/use-selection-position.js

@@ -29,13 +29,24 @@ const useSelectionPosition = node => {
   }
 };
 exports.useSelectionPosition = useSelectionPosition;
-const useCommentListPosition = selectionElement => {
+const useCommentListPosition = (selectionElement, isContextComment, selectedContext) => {
   const selectionPosition = useSelectionPosition(selectionElement);
   const headerHeight = 100;
   const scrollRef = (0, _useScrollContext.useScrollContext)();
   const {
     scrollTop = 0
   } = scrollRef.current || {};
+  if (isContextComment) {
+    const domRange = selectedContext.getRangeAt(0);
+    const rect = domRange.getBoundingClientRect();
+    const editorArticleRight = document.getElementById('sdoc-editor-print-wrapper').getBoundingClientRect().right;
+    rect.y = rect.bottom - headerHeight + 15;
+    const rightPara = editorArticleRight - rect.left - 300; // 300 is comment container's width
+    return {
+      right: rightPara,
+      y: rect.y
+    };
+  }
   if (selectionPosition.y !== 0) {
     selectionPosition.y = selectionPosition.y - headerHeight + scrollTop;
   }

package/dist/components/toast/toaster.js

@@ -67,7 +67,7 @@ class Toaster {
     container.setAttribute('data-evergreen-toaster-container', '');
     document.body.appendChild(container);
     const root = (0, _client.createRoot)(container);
-    root.render( /*#__PURE__*/_react.default.createElement(_toastManager.default, {
+    root.render(/*#__PURE__*/_react.default.createElement(_toastManager.default, {
       bindNotify: this._bindNotify,
       bindGetToasts: this._bindGetToasts,
       bindCloseAll: this._bindCloseAll

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "2.0.46",
+  "version": "2.0.48-alpha-2.0.0",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",
@@ -39,7 +39,7 @@
     "remark-parse": "11.0.0",
     "remark-rehype": "11.0.0",
     "remark-stringify": "11.0.0",
-    "sea-chart": "1.1.82",
+    "sea-chart": "2.0.9",
     "slugid": "3.2.0",
     "socket.io-client": "4.8.1",
     "type-of": "2.0.1",