@seafile/sdoc-editor 2.0.37 → 2.0.38-alph-1.0.0

package/dist/basic-sdk/editor/editable-article.js

@@ -42,9 +42,12 @@ const EditableArticle = _ref => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const eventProxy = (0, _react.useMemo)(() => new _eventHandler.default(editor), []);
   const onMouseDown = (0, _react.useCallback)(event => {
+    // console.log(44);
     if (event.button === 0) {
+      // console.log(444)
       const isPreventReset = (0, _helpers.isPreventResetTableSelectedRange)(event);
       if (!isPreventReset) {
+        // console.log(5)
         editor.reSetTableSelectedRange();
         const eventBus = _eventBus.default.getInstance();
         eventBus.dispatch(_constants.INTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE);

package/dist/basic-sdk/extension/commons/menu/menu-item.js

@@ -29,6 +29,7 @@ const MenuItem = _ref => {
   } = (0, _reactI18next.useTranslation)('sdoc-editor');
   const onClick = (0, _react.useCallback)(event => {
     if (disabled) return;
+    console.log(3, type);
     onMouseDown(event, type);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -24,6 +24,8 @@ var _core = require("../../../core");
 var _constants2 = require("../../../constants");
 var _aiIcon = _interopRequireDefault(require("../ai-icon"));
 require("./style.css");
+// import { highlightSelection } from './helpers';
+
 function AIModule(_ref) {
   let {
     editor,
@@ -46,13 +48,20 @@ function AIModule(_ref) {
   const [currentLang, setCurrentLang] = (0, _react.useState)('en');
   const [isShowTipDialog, setIsShowTipDialog] = (0, _react.useState)(false);
   const [selectDom, setSelectDom] = (0, _react.useState)(null);
+  // const [highlightedSpan, setHighlightedSpan] = useState(null);
+  console.log(2, element);
   const toggleAskAI = (0, _react.useCallback)(() => {
+    // const selectionBeforeMark = editor.selection;
+    console.log(0);
+    _slate.Editor.addMark(editor, 'isSelectedInAI', true);
+    console.log(1, editor.selection);
     scrollRef.current = document.querySelector('.sdoc-scroll-container');
     const {
       scrollTop,
       scrollHeight
     } = scrollRef.current;
     if (!element) {
+      console.log(44444);
       const content = window.getSelection().toString();
       if (content) {
         setSelectedValue(content);
@@ -74,15 +83,25 @@ function AIModule(_ref) {
         });
       }
       setTimeout(() => {
-        var _inputRef$current;
+        var _rect, _inputRef$current;
         const aboveNode = (0, _core.getAboveBlockNode)(editor);
+        // console.log(1, aboveNode)
         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"].isSelectedInAI');
+        console.log(3, markedSpan);
+        let rect;
+        if (markedSpan.length) {
+          rect = markedSpan[markedSpan.length - 1].getBoundingClientRect();
+          console.log(4, rect, markedSpan);
+        }
+        // const newRect = domRange.getBoundingClientRect();
         const el = aiRef.current;
-        el.style.top = `${newRect.bottom + 8}px`; // top = Current top + Element height
+        // el.style.top = `${newRect.bottom + 8}px`;
+        el.style.top = `${((_rect = rect) === null || _rect === void 0 ? void 0 : _rect.bottom) + 8 - 3}px`; // top = Current top + Element height
         el.style.left = `${slateRect.left}px`;
         el.style.display = 'block';
+        console.log(2, slateDom, slateRect, el, el.style.top);
         setIsShowAIPopover(true);
         (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
       }, 500);
@@ -90,6 +109,7 @@ function AIModule(_ref) {
     }
     const slateDom = _slateReact.ReactEditor.toDOMNode(editor, element);
     const slateRect = slateDom.getBoundingClientRect();
+    console.log(555);
     const content = _slate.Node.string(element);
     if (content) {
       setSelectedValue(content);
@@ -120,13 +140,28 @@ function AIModule(_ref) {
   const onCloseClick = (0, _react.useCallback)(() => {
     const element = aiRef.current;
     element.style.display = 'none';
+    console.log(2, element);
+    const markedSpan = document.querySelectorAll('span[data-slate-leaf="true"].isSelectedInAI');
+    if (markedSpan.length) {
+      console.log(1, markedSpan);
+      markedSpan.forEach(dom => {
+        dom.style.removeProperty('padding');
+        dom.style.removeProperty('background');
+        dom.classList.remove('isSelectedInAI');
+      });
+      console.log('Before remove:', _slate.Editor.marks(editor));
+      _slate.Editor.removeMark(editor, 'isSelectedInAI');
+      console.log('after remove:', _slate.Editor.marks(editor));
+      // ReactEditor.focus(editor);
+      console.log(99);
+    }
     const articleDom = document.querySelector('.sdoc-editor__article');
     articleDom.style.removeProperty('padding-bottom');
     setSearchValue('');
     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 +196,19 @@ function AIModule(_ref) {
   }, [onDocumentClick]);
   const onScroll = (0, _react.useCallback)(event => {
     if (!element) {
+      var _rect2;
+      const markedSpan = document.querySelectorAll('span[data-slate-leaf="true"].isSelectedInAI');
+      let rect;
+      if (markedSpan.length) {
+        rect = markedSpan[markedSpan.length - 1].getBoundingClientRect();
+      }
       const newRect = selectDom.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}px`;
+      // el.style.top = `${newRect.bottom + 8 - 3}px`; // top = Current top + Element height
       el.style.left = `${slateRect.left}px`;
       el.style.display = 'block';
     } else {

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

@@ -61,6 +61,7 @@ const TextStyleMenuList = _ref => {
     });
   }, [editor]);
   const onMouseDown = (0, _react.useCallback)((event, type) => {
+    console.log(2, type);
     event.preventDefault();
     event.stopPropagation();
     if (isDisabled()) return;
@@ -76,12 +77,14 @@ const TextStyleMenuList = _ref => {
     if (active) {
       (0, _helpers2.removeMark)(editor, type);
     } else {
+      console.log(3, type);
       (0, _helpers2.addMark)(editor, type);
     }
     (0, _core.focusEditor)(editor);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor]);
   const setColor = (0, _react.useCallback)((type, color) => {
+    // console.log(1, type, color);
     _slate.Editor.addMark(editor, type, color);
     (0, _core.focusEditor)(editor);
 
@@ -132,6 +135,7 @@ const TextStyleMenuList = _ref => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, lastUsedFontColor, lastUsedHighlightColor, readonly]);
   let list = getTextStyleList(_constants.TEXT_STYLE);
+  // console.log(3, list);
   const dropdownList = getTextStyleList(_constants.TEXT_STYLE_MORE);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, list.map((itemProps, index) => {
     const Component = itemProps.isColor ? _commons.ColorMenu : _commons.MenuItem;

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

@@ -1,11 +1,12 @@
 "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 = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _caret = _interopRequireDefault(require("./caret"));
 var _constants = require("../../constants");
 var _helpers = require("../font/helpers");
@@ -20,6 +21,24 @@ const renderText = (props, editor) => {
     text,
     ...rest
   } = leaf;
+  console.log(1, leaf);
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  // useEffect(() => {
+  //   if (leaf.isSelectedInAI) {
+  //     console.log('origin');
+  //     const markedSpan = document.querySelectorAll('span[data-slate-leaf="true"].isSelectedInAI');
+  //     if (markedSpan.length) {
+  //       console.log(1, markedSpan);
+  //       markedSpan.forEach((dom) => {
+  //         dom.style.removeProperty('padding');
+  //         dom.style.removeProperty('background');
+  //         dom.classList.remove('isSelectedInAI');
+  //       });
+  //     }
+  //   }
+  // }, []);
+
   let markedChildren = /*#__PURE__*/_react.default.cloneElement(children);
   let style = {};
   // The following is a workaround for a Chromium bug where,
@@ -35,6 +54,10 @@ const renderText = (props, editor) => {
     style['display'] = 'inline-block';
     style['minWidth'] = '2px';
   }
+  if (leaf.isSelectedInAI && leaf.text.trim()) {
+    style['padding'] = '3.23px 0';
+    style['background'] = '#a9c9ed';
+  }
   if (leaf.computed_background_color) {
     style['backgroundColor'] = leaf.computed_background_color;
   }

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/extension/toolbar/side-toolbar/helpers.js

@@ -63,20 +63,22 @@ const onSetNodeType = (editor, element, type) => {
       // Callout, List-item, Blockquote in multi_column
       if ([_constants.CALL_OUT].includes(currentNodeInColumn.type)) {
         (0, _helper.unwrapCallout)(editor);
+        return;
       }
       if ([_constants.ORDERED_LIST, _constants.UNORDERED_LIST].includes(currentNodeInColumn.type)) {
         (0, _transforms.toggleList)(editor, currentNodeInColumn.type);
         if ([..._constants.HEADERS].includes(type)) {
           (0, _helpers5.setHeaderType)(editor, type);
         }
+        return;
       }
       if ([_constants.BLOCKQUOTE].includes(currentNodeInColumn.type)) {
         if ([..._constants.HEADERS].includes(type)) {
           (0, _helpers5.setHeaderType)(editor, type);
         }
         (0, _helpers4.setBlockQuoteType)(editor, true);
+        return;
       }
-      return;
     } else {
       // List-item, blockquote, callout is top node
       if ([_constants.ORDERED_LIST, _constants.UNORDERED_LIST].includes(topNodeType)) {
@@ -84,17 +86,19 @@ const onSetNodeType = (editor, element, type) => {
         if ([..._constants.HEADERS].includes(type)) {
           (0, _helpers5.setHeaderType)(editor, type);
         }
+        return;
       }
       if ([_constants.BLOCKQUOTE].includes(topNodeType)) {
         if ([..._constants.HEADERS].includes(type)) {
           (0, _helpers5.setHeaderType)(editor, type);
         }
         (0, _helpers4.setBlockQuoteType)(editor, true);
+        return;
       }
       if ([_constants.CALL_OUT].includes(topNodeType)) {
         (0, _helper.unwrapCallout)(editor);
+        return;
       }
-      return;
     }
   }
   if (type === _constants.CHECK_LIST_ITEM) {

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.37",
+  "version": "2.0.38-alph-1.0.0",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",
@@ -38,7 +38,7 @@
     "remark-parse": "11.0.0",
     "remark-rehype": "11.0.0",
     "remark-stringify": "11.0.0",
-    "sea-chart": "^2.0.5",
+    "sea-chart": "2.0.7",
     "slugid": "3.2.0",
     "socket.io-client": "4.8.1",
     "type-of": "2.0.1",