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

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

@@ -25,6 +25,7 @@ var _highlight = require("../highlight");
 var _constants2 = require("../extension/constants");
 var _helpers = require("../extension/plugins/table/helpers");
 var _useForceUpdate = _interopRequireDefault(require("../../basic-sdk/hooks/use-force-update"));
+var _helpers2 = require("../extension/plugins/ai/ai-module/helpers");
 const EditableArticle = _ref => {
   let {
     showComment = true,
@@ -42,12 +43,9 @@ 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/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,
@@ -60,6 +61,7 @@ const SdocEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     setSlateValue(document.elements);
   }, [document.elements]);
   (0, _react.useEffect)(() => {
+    console.log(22);
     validEditor.readonly = false;
     return () => {
       validEditor.selection = null;
@@ -116,8 +118,18 @@ const SdocEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 
   // useMount: refresh document
   (0, _react.useEffect)(() => {
+    console.log(44343);
     const eventBus = _basicSdk.EventBus.getInstance();
     eventBus.subscribe(_constants2.EXTERNAL_EVENT.REFRESH_DOCUMENT, onRefreshDocument);
+    const hasAIMark = !_slate.Editor.nodes(validEditor, {
+      at: [],
+      match: n => _slate.Text.isText(n) && n.isSelectedInAI === true
+    }).next().done;
+    if (hasAIMark) {
+      console.log(999);
+      (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
@@ -190,6 +202,7 @@ const SdocEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     }))));
   }
   const isShowComment = typeof showComment === 'boolean' ? showComment : true;
+  console.log(2, validEditor, slateValue, onValueChange, isShowComment);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_layout.EditorContainer, {
     editor: validEditor
   }, /*#__PURE__*/_react.default.createElement(_useColorContext.ColorProvider, null, isShowHeaderToolbar && /*#__PURE__*/_react.default.createElement(_extension.HeaderToolbar, {

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

@@ -29,7 +29,6 @@ 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

@@ -1 +1,22 @@
-"use strict";
+"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, 'isSelectedInAI', {
+    at: [],
+    match: n => _slate.Text.isText(n) && n.isSelectedInAI === 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,9 +23,8 @@ 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");
-// import { highlightSelection } from './helpers';
-
 function AIModule(_ref) {
   let {
     editor,
@@ -47,28 +46,21 @@ 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 [highlightedSpan, setHighlightedSpan] = useState(null);
-  console.log(2, element);
   const toggleAskAI = (0, _react.useCallback)(() => {
-    // const selectionBeforeMark = editor.selection;
-    console.log(0);
+    // Add marks for selection
     _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);
       }
       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) {
@@ -85,23 +77,17 @@ function AIModule(_ref) {
       setTimeout(() => {
         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 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`;
-        el.style.top = `${((_rect = rect) === null || _rect === void 0 ? void 0 : _rect.bottom) + 8 - 3}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';
-        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);
@@ -109,7 +95,6 @@ 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);
@@ -138,23 +123,9 @@ function AIModule(_ref) {
     }, 500);
   }, [editor, element]);
   const onCloseClick = (0, _react.useCallback)(() => {
+    (0, _helpers.removeMarks)(editor);
     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('');
@@ -202,13 +173,11 @@ function AIModule(_ref) {
       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 = `${((_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.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 {
@@ -219,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/menu/index.js

@@ -61,7 +61,6 @@ const TextStyleMenuList = _ref => {
     });
   }, [editor]);
   const onMouseDown = (0, _react.useCallback)((event, type) => {
-    console.log(2, type);
     event.preventDefault();
     event.stopPropagation();
     if (isDisabled()) return;
@@ -77,14 +76,12 @@ 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);
 
@@ -135,7 +132,6 @@ 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,17 +1,15 @@
 "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 _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,
@@ -21,24 +19,6 @@ 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,
@@ -54,6 +34,8 @@ const renderText = (props, editor) => {
     style['display'] = 'inline-block';
     style['minWidth'] = '2px';
   }
+
+  // Add temporary marks for selection in AI
   if (leaf.isSelectedInAI && leaf.text.trim()) {
     style['padding'] = '3.23px 0';
     style['background'] = '#a9c9ed';

package/dist/basic-sdk/layout/article-container.js

@@ -13,6 +13,8 @@ var _localStorageUtils = _interopRequireDefault(require("../../utils/local-stora
 var _fullWidthMode = require("../utils/full-width-mode");
 var _defaultMode = require("../utils/default-mode");
 var _constants = require("../constants");
+var _slate = require("@seafile/slate");
+var _helpers = require("../extension/plugins/ai/ai-module/helpers");
 function ArticleContainer(_ref) {
   let {
     editor,
@@ -25,6 +27,19 @@ function ArticleContainer(_ref) {
     editor.width = articleRef.current.children[0].clientWidth;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+
+  // useEffect(() => {
+  //   const hasAIMark = !Editor.nodes(editor, {
+  //     at: [],
+  //     match: n => Text.isText(n) && n.isSelectedInAI === true,
+  //   }).next().done;
+
+  //   if (hasAIMark) {
+  //     removeMarks(editor);
+  //   }
+  // // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, []);
+
   const handleWindowResize = (0, _react.useCallback)(function () {
     let {
       scrollIntoArticle = false,

package/package.json

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