@seafile/sdoc-editor 2.0.43 → 2.0.45

package/dist/basic-sdk/comment/components/comment-delete-popover.js

@@ -1,47 +1,72 @@
 "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 _isHotkey = _interopRequireDefault(require("is-hotkey"));
 var _reactI18next = require("react-i18next");
 var _reactstrap = require("reactstrap");
+var _utils = require("../../extension/plugins/seatable-tables/seatable-settings/utils/utils");
 require("./comment-list.css");
 const CommentDeletePopover = _ref => {
   let {
     type,
-    setIsShowDeleteModal,
+    setIsShowDeletePopover,
     deleteConfirm,
     targetId,
     parentDom
   } = _ref;
+  const popoverRef = (0, _react.useRef)(null);
+  const hide = (0, _react.useCallback)(event => {
+    if (popoverRef.current && !(0, _utils.getEventClassName)(event).includes('popover') && !popoverRef.current.contains(event.target)) {
+      setIsShowDeletePopover(false);
+      event.preventDefault();
+      event.stopPropagation();
+      return false;
+    }
+  }, [setIsShowDeletePopover]);
+  const onHotKey = (0, _react.useCallback)(event => {
+    if ((0, _isHotkey.default)('esc', event)) {
+      event.preventDefault();
+      setIsShowDeletePopover(false);
+    }
+  }, [setIsShowDeletePopover]);
+  (0, _react.useEffect)(() => {
+    document.addEventListener('click', hide, true);
+    document.addEventListener('keydown', onHotKey);
+    return () => {
+      document.removeEventListener('click', hide, true);
+      document.removeEventListener('keydown', onHotKey);
+    };
+  }, []);
   const {
     t
   } = (0, _reactI18next.useTranslation)('sdoc-editor');
   const onDeleteCancel = (0, _react.useCallback)(event => {
     event.stopPropagation();
-    setIsShowDeleteModal(false);
-  }, [setIsShowDeleteModal]);
+    setIsShowDeletePopover(false);
+  }, [setIsShowDeletePopover]);
   const handleConfirm = (0, _react.useCallback)(event => {
     event.stopPropagation();
     deleteConfirm();
   }, [deleteConfirm]);
-  const message = type === 'comment' ? 'comment' : 'reply';
-  const content = t(`Are_you_sure_to_delete_this_${message}`);
   return /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
     container: parentDom,
     target: targetId,
     onClick: event => event.stopPropagation(),
-    placement: "bottom",
+    placement: "left",
     className: "comment-delete-popover",
     isOpen: true
-  }, /*#__PURE__*/_react.default.createElement(_reactstrap.PopoverBody, {
-    className: "comment-delete-popover-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-delete-popover-container",
+    ref: popoverRef
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "delete-tip"
-  }, content), /*#__PURE__*/_react.default.createElement("div", {
+  }, t(`Are_you_sure_to_delete_this_${type === 'comment' ? 'comment' : 'reply'}`)), /*#__PURE__*/_react.default.createElement("div", {
     className: "delete-control mt-5"
   }, /*#__PURE__*/_react.default.createElement("button", {
     className: "btn btn-secondary mr-2",

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

@@ -37,10 +37,10 @@ const CommentItemReply = _ref => {
     event.stopPropagation();
     setIsEditing(true);
   }, []);
-  const [isShowDeleteDialog, setIsShowDeleteDialog] = (0, _react.useState)(false);
+  const [isShowDeletePopover, setIsShowDeletePopover] = (0, _react.useState)(false);
   const onDeleteToggle = (0, _react.useCallback)(event => {
     event.stopPropagation();
-    setIsShowDeleteDialog(true);
+    setIsShowDeletePopover(true);
   }, []);
   const transferHtml = async mdString => {
     const htmlString = await _mdToHtml.default.process(mdString);
@@ -52,7 +52,7 @@ const CommentItemReply = _ref => {
   }, [reply.reply]);
   const _deleteReply = (0, _react.useCallback)(() => {
     deleteReply(reply.id);
-    setIsShowDeleteDialog(false);
+    setIsShowDeletePopover(false);
   }, [reply.id, deleteReply]);
   const updateContent = (0, _react.useCallback)(content => {
     if (reply.reply !== content) {
@@ -118,11 +118,11 @@ const CommentItemReply = _ref => {
     content: editorContent,
     updateContent: updateContent,
     setIsEditing: setIsEditing
-  }), isShowDeleteDialog && isActive && /*#__PURE__*/_react.default.createElement(_commentDeletePopover.default, {
+  }), isShowDeletePopover && isActive && /*#__PURE__*/_react.default.createElement(_commentDeletePopover.default, {
     parentDom: itemRef.current,
     type: "reply",
     deleteConfirm: _deleteReply,
-    setIsShowDeleteModal: setIsShowDeleteDialog,
+    setIsShowDeletePopover: setIsShowDeletePopover,
     targetId: replyOpToolsId
   }));
 };

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

@@ -37,7 +37,7 @@ const CommentItemWrapper = _ref => {
     dispatch
   } = (0, _useCommentContext.useCommentContext)();
   const scrollRef = (0, _react.useRef)(document.querySelector('.sdoc-scroll-container'));
-  const [isShowDeleteDialog, setIsShowDeleteDialog] = (0, _react.useState)(false);
+  const [isShowDeletePopover, setIsShowDeletePopover] = (0, _react.useState)(false);
   const commentOpToolsId = `commentOpTools_${comment === null || comment === void 0 ? void 0 : comment.id}`;
   const style = !isGlobalComment && isCollapseCommentEditor ? {
     maxHeight: '341px'
@@ -238,16 +238,16 @@ const CommentItemWrapper = _ref => {
     onCommentClick && onCommentClick(comment);
   }, [comment, onCommentClick]);
   const onDeleteComment = (0, _react.useCallback)(() => {
-    setIsShowDeleteDialog(true);
+    setIsShowDeletePopover(true);
   }, []);
   const _deleteComment = (0, _react.useCallback)(() => {
     deleteComment(comment.id);
-    setIsShowDeleteDialog(false);
+    setIsShowDeletePopover(false);
     setCurrentCommentGroup && setCurrentCommentGroup(null);
   }, [comment.id, deleteComment, setCurrentCommentGroup]);
   (0, _react.useEffect)(() => {
     if (!isActive) {
-      setIsShowDeleteDialog(false);
+      setIsShowDeletePopover(false);
     }
   }, [isActive]);
   const className = (0, _classnames.default)('comment-ui-container', {
@@ -300,12 +300,11 @@ const CommentItemWrapper = _ref => {
       updateReply
     };
     return /*#__PURE__*/_react.default.createElement(_commentItemReply.default, props);
-  })), isShowDeleteDialog && isActive && /*#__PURE__*/_react.default.createElement(_commentDeletePopover.default, {
+  })), isShowDeletePopover && isActive && /*#__PURE__*/_react.default.createElement(_commentDeletePopover.default, {
     type: "comment",
-    setIsShowDeleteDialog: setIsShowDeleteDialog,
     targetId: commentOpToolsId,
     deleteConfirm: _deleteComment,
-    setIsShowDeleteModal: setIsShowDeleteDialog,
+    setIsShowDeletePopover: setIsShowDeletePopover,
     parentDom: listRef.current
   }));
 };

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

@@ -51,7 +51,7 @@
   padding: 16px;
 }
 
-.comment-delete-popover-container .delete-control {
+.comment-delete-popover .comment-delete-popover-container .delete-control {
   display: flex;
   justify-content: flex-end;
   width: 100%;

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

@@ -19,7 +19,6 @@ var _constants = require("../../extension/constants");
 var _constants2 = require("../../constants");
 const EditorComment = _ref => {
   let {
-    deleteUnseenNotifications,
     editor
   } = _ref;
   (0, _useSelectionUpdate.default)();

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

@@ -24,11 +24,10 @@ const ElementsCommentCount = _ref => {
     const unresolvedComment = comments.filter(item => !item.resolved);
     const unresolvedCommentCount = unresolvedComment.length;
     if (unresolvedCommentCount === 0) return null;
-    const isSelected = selectionElement && selectionElement.id === elementId;
     return /*#__PURE__*/_react.default.createElement(_elementCommentCount.default, {
       key: elementId,
       elementId: elementId,
-      isElementSelected: isSelected,
+      isElementSelected: selectionElement && selectionElement.id === elementId,
       commentsCount: unresolvedCommentCount,
       editor: editor,
       onSelectElement: onSelectElement

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

@@ -56,7 +56,6 @@ const CommentWrapper = _ref => {
   } = _context.default.getSettings('isFreezed');
   if (commentsInfo.isFetching) return null;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, type === 'editor' && !isFreezed && /*#__PURE__*/_react.default.createElement(_components.EditorComment, {
-    deleteUnseenNotifications: deleteUnseenNotifications,
     editor: editor
   }), type === 'global' && /*#__PURE__*/_react.default.createElement(_components.GlobalComment, {
     deleteUnseenNotifications: deleteUnseenNotifications,

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

@@ -26,6 +26,7 @@ var _basicSdk = require("../../basic-sdk");
 var _constants2 = require("../../constants");
 var _outlineModule = require("../../android/outline-module");
 var _jsBridge = _interopRequireDefault(require("../../android/js-bridge"));
+var _helpers = require("../extension/plugins/ai/ai-module/helpers");
 const SdocEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     editor: propsEditor,
@@ -118,6 +119,16 @@ const SdocEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   (0, _react.useEffect)(() => {
     const eventBus = _basicSdk.EventBus.getInstance();
     eventBus.subscribe(_constants2.EXTERNAL_EVENT.REFRESH_DOCUMENT, onRefreshDocument);
+
+    // Remove aiMarks on special conditions like unexpected exit or refresh page using AI
+    const hasAIMark = !_slate.Editor.nodes(validEditor, {
+      at: [],
+      match: n => _slate.Text.isText(n) && n.sdoc_ai === true
+    }).next().done;
+    if (hasAIMark) {
+      (0, _helpers.removeMarks)(validEditor);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [onRefreshDocument]);
 
   // The parent component can call the method of this component through ref

package/dist/basic-sdk/extension/plugins/ai/ai-module/helpers.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeMarks = void 0;
+var _slate = require("@seafile/slate");
+const removeMarks = editor => {
+  const {
+    selection
+  } = editor;
+  _slate.Transforms.unsetNodes(editor, 'sdoc_ai', {
+    at: [],
+    match: n => _slate.Text.isText(n) && n.sdoc_ai === true
+  });
+  if (selection) {
+    _slate.Transforms.select(editor, selection);
+  } else {
+    _slate.Transforms.deselect(editor);
+  }
+};
+exports.removeMarks = removeMarks;

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

@@ -23,6 +23,7 @@ var _tipDialog = _interopRequireDefault(require("./tip-dialog"));
 var _core = require("../../../core");
 var _constants2 = require("../../../constants");
 var _aiIcon = _interopRequireDefault(require("../ai-icon"));
+var _helpers = require("./helpers");
 require("./style.css");
 function AIModule(_ref) {
   let {
@@ -45,8 +46,9 @@ function AIModule(_ref) {
   const [searchResult, setSearchResult] = (0, _react.useState)(null);
   const [currentLang, setCurrentLang] = (0, _react.useState)('en');
   const [isShowTipDialog, setIsShowTipDialog] = (0, _react.useState)(false);
-  const [selectDom, setSelectDom] = (0, _react.useState)(null);
   const toggleAskAI = (0, _react.useCallback)(() => {
+    // Add marks for selection
+    _slate.Editor.addMark(editor, 'sdoc_ai', true);
     scrollRef.current = document.querySelector('.sdoc-scroll-container');
     const {
       scrollTop,
@@ -59,7 +61,6 @@ function AIModule(_ref) {
       }
       const domSelection = window.getSelection();
       const domRange = domSelection.getRangeAt(0);
-      setSelectDom(domRange);
       const rect = domRange.getBoundingClientRect();
       const needPaddingBottomHeight = scrollTop + rect.bottom + _constants.AI_MIN_HEIGHT - scrollHeight;
       if (needPaddingBottomHeight > 0) {
@@ -74,13 +75,17 @@ function AIModule(_ref) {
         });
       }
       setTimeout(() => {
-        var _inputRef$current;
+        var _rect, _inputRef$current;
         const aboveNode = (0, _core.getAboveBlockNode)(editor);
         const slateDom = _slateReact.ReactEditor.toDOMNode(editor, aboveNode[0]);
         const slateRect = slateDom.getBoundingClientRect();
-        const newRect = domRange.getBoundingClientRect();
+        const markedSpan = document.querySelectorAll('span[data-slate-leaf="true"].sdoc_ai');
+        let rect;
+        if (markedSpan.length) {
+          rect = markedSpan[markedSpan.length - 1].getBoundingClientRect();
+        }
         const el = aiRef.current;
-        el.style.top = `${newRect.bottom + 8}px`; // top = Current top + Element height
+        el.style.top = `${((_rect = rect) === null || _rect === void 0 ? void 0 : _rect.bottom) + 8 - 3.23}px`; // top = Current top + Element height - Element padding bottom
         el.style.left = `${slateRect.left}px`;
         el.style.display = 'block';
         setIsShowAIPopover(true);
@@ -118,6 +123,7 @@ function AIModule(_ref) {
     }, 500);
   }, [editor, element]);
   const onCloseClick = (0, _react.useCallback)(() => {
+    (0, _helpers.removeMarks)(editor);
     const element = aiRef.current;
     element.style.display = 'none';
     const articleDom = document.querySelector('.sdoc-editor__article');
@@ -126,7 +132,7 @@ function AIModule(_ref) {
     setSearchResult('');
     setIsShowAIPopover(false);
     closeModule();
-  }, [closeModule]);
+  }, [closeModule, editor]);
   const onDocumentClick = (0, _react.useCallback)(event => {
     // not in ai container
     if (aiRef.current && aiRef.current.contains(event.target) && aiRef.current !== event.target) return;
@@ -161,12 +167,17 @@ function AIModule(_ref) {
   }, [onDocumentClick]);
   const onScroll = (0, _react.useCallback)(event => {
     if (!element) {
-      const newRect = selectDom.getBoundingClientRect();
+      var _rect2;
+      const markedSpan = document.querySelectorAll('span[data-slate-leaf="true"].sdoc_ai');
+      let rect;
+      if (markedSpan.length) {
+        rect = markedSpan[markedSpan.length - 1].getBoundingClientRect();
+      }
       const aboveNode = (0, _core.getAboveBlockNode)(editor);
       const slateDom = _slateReact.ReactEditor.toDOMNode(editor, aboveNode[0]);
       const slateRect = slateDom.getBoundingClientRect();
       const el = aiRef.current;
-      el.style.top = `${newRect.bottom + 8}px`; // top = Current top + Element height
+      el.style.top = `${((_rect2 = rect) === null || _rect2 === void 0 ? void 0 : _rect2.bottom) + 8 - 3.23}px`; // top = Current top + Element height - Element padding bottom
       el.style.left = `${slateRect.left}px`;
       el.style.display = 'block';
     } else {
@@ -177,7 +188,7 @@ function AIModule(_ref) {
       el.style.left = `${slateRect.left}px`;
       el.style.display = 'block';
     }
-  }, [editor, element, selectDom]);
+  }, [editor, element]);
   (0, _react.useEffect)(() => {
     let observerRefValue = null;
     if (isShowAIPopover) {

package/dist/basic-sdk/extension/plugins/text-style/render-elem.js

@@ -9,8 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _caret = _interopRequireDefault(require("./caret"));
 var _constants = require("../../constants");
 var _helpers = require("../font/helpers");
-var _InlineBugFixWrapper = _interopRequireDefault(require("../../commons/Inline-bug-fix-wrapper"));
-const renderText = (props, editor) => {
+const renderText = props => {
   const {
     attributes,
     children,
@@ -35,6 +34,12 @@ const renderText = (props, editor) => {
     style['display'] = 'inline-block';
     style['minWidth'] = '2px';
   }
+
+  // Add temporary marks for selection in AI
+  if (leaf.sdoc_ai && leaf.text.trim()) {
+    style['padding'] = '3.23px 0';
+    style['background'] = '#a9c9ed';
+  }
   if (leaf.computed_background_color) {
     style['backgroundColor'] = leaf.computed_background_color;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "2.0.43",
+  "version": "2.0.45",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",
@@ -25,6 +25,7 @@
     "randomcolor": "0.6.2",
     "react-color": "2.19.3",
     "react-cookies": "0.1.1",
+    "react-transition-group": "4.4.5",
     "reactstrap": "9.2.3",
     "rehype-format": "5.0.0",
     "rehype-mathjax": "5.0.0",
@@ -38,7 +39,7 @@
     "remark-parse": "11.0.0",
     "remark-rehype": "11.0.0",
     "remark-stringify": "11.0.0",
-    "sea-chart": "2.0.8",
+    "sea-chart": "1.1.82",
     "slugid": "3.2.0",
     "socket.io-client": "4.8.1",
     "type-of": "2.0.1",