@seafile/sdoc-editor 1.0.182 → 1.0.184

package/dist/basic-sdk/extension/plugins/ai/ai-menu/style.css

@@ -5,6 +5,7 @@
 }
 
 .sdoc-context-menu-divider {
+  margin-right: 8px;
   border-left: 1px solid #e5e5e5;
   width: 1px;
   height: 24px;

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

@@ -44,6 +44,7 @@ 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)(() => {
     scrollRef.current = document.querySelector('.sdoc-scroll-container');
     const {
@@ -57,6 +58,7 @@ 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) {
@@ -66,7 +68,7 @@ function AIModule(_ref) {
       const heightDiff = rect.bottom + _constants.AI_MIN_HEIGHT - window.innerHeight;
       if (heightDiff > 0) {
         scrollRef.current.scrollTo({
-          top: scrollRef.current.scrollTop + heightDiff + 100,
+          top: scrollRef.current.scrollTop + heightDiff + 32,
           behavior: 'smooth'
         });
       }
@@ -99,7 +101,7 @@ function AIModule(_ref) {
     const heightDiff = slateRect.bottom + _constants.AI_MIN_HEIGHT - window.innerHeight;
     if (heightDiff > 0) {
       scrollRef.current.scrollTo({
-        top: scrollRef.current.scrollTop + heightDiff + 100,
+        top: scrollRef.current.scrollTop + heightDiff + 32,
         behavior: 'smooth'
       });
     }
@@ -156,33 +158,55 @@ function AIModule(_ref) {
       window.removeEventListener('click', onDocumentClick);
     };
   }, [onDocumentClick]);
+  const onScroll = (0, _react.useCallback)(event => {
+    if (!element) {
+      console.log(selectDom);
+      const newRect = selectDom.getBoundingClientRect();
+      const aboveNode = (0, _core.getAboveBlockNode)(editor);
+      const slateDom = _slateReact.ReactEditor.toDOMNode(editor, aboveNode[0]);
+      const slateRect = slateDom.getBoundingClientRect();
+      console.log(newRect);
+      console.log(slateRect);
+      const el = aiRef.current;
+      el.style.top = `${newRect.bottom + 8}px`; // top = Current top + Element height
+      el.style.left = `${slateRect.left}px`;
+      el.style.display = 'block';
+    } else {
+      const slateDom = _slateReact.ReactEditor.toDOMNode(editor, element);
+      const slateRect = slateDom.getBoundingClientRect();
+      const el = aiRef.current;
+      el.style.top = `${slateRect.bottom + 8}px`; // top = Current top + Element height
+      el.style.left = `${slateRect.left}px`;
+      el.style.display = 'block';
+    }
+  }, [editor, element, selectDom]);
   (0, _react.useEffect)(() => {
     let observerRefValue = null;
     if (isShowAIPopover) {
-      scrollRef.current && scrollRef.current.addEventListener('scroll', onCloseClick);
+      scrollRef.current && scrollRef.current.addEventListener('scroll', onScroll);
       observerRefValue = scrollRef.current;
     } else {
-      scrollRef.current && scrollRef.current.removeEventListener('scroll', onCloseClick);
+      scrollRef.current && scrollRef.current.removeEventListener('scroll', onScroll);
     }
     return () => {
       if (observerRefValue) {
-        observerRefValue.removeEventListener('scroll', onCloseClick);
+        observerRefValue.removeEventListener('scroll', onScroll);
       }
     };
-  }, [isShowAIPopover, onCloseClick]);
+  }, [isShowAIPopover, onScroll]);
   const onSearchValueChanged = (0, _react.useCallback)(event => {
     const value = event.target.value;
     if (value === searchValue) return;
     setSearchValue(value);
   }, [searchValue]);
-  const onEnter = (0, _react.useCallback)(() => {
+  const onEnter = (0, _react.useCallback)(event => {
     if (!searchValue) return;
     setOpType(_constants.OPERATION_TYPES.DEFAULT);
     setIsGenerating(true);
     setTimeout(() => {
       setIsGenerating(false);
       setSearchResult('[Feature is under development...]Thank you, the world becomes more beautiful because of you!');
-    });
+    }, 2000);
   }, [searchValue]);
   const onKeyDown = (0, _react.useCallback)(event => {
     if ((0, _isHotkey.default)('enter', event)) {
@@ -335,20 +359,14 @@ function AIModule(_ref) {
   const isShowReplace = (0, _react.useMemo)(() => {
     return opType !== _constants.OPERATION_TYPES.DEFAULT;
   }, [opType]);
-  const resultMenu = (0, _react.useMemo)(() => {
-    const type = opType && opType.toUpperCase();
-    if (opType === _constants.OPERATION_TYPES.TRANSLATE) {
-      return _constants.LANG_MENU_CONFIG[currentLang.toUpperCase()];
-    }
-    return _constants.OPERATION_MENUS_CONFIG[type];
-  }, [currentLang, opType]);
   const closeTipDialog = (0, _react.useCallback)(() => {
     setIsShowTipDialog(false);
   }, []);
   const discardCurrentContent = (0, _react.useCallback)(() => {
     onCloseClick();
     setIsShowTipDialog(false);
-  }, [onCloseClick]);
+    (0, _core.focusEditor)(editor);
+  }, [editor, onCloseClick]);
   return /*#__PURE__*/_react.default.createElement(_commons.ElementPopover, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-ai-module-container",
     ref: aiRef
@@ -402,18 +420,9 @@ function AIModule(_ref) {
     className: "sdoc-ai-content has-result"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-ai-result"
-  }, resultMenu && /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-ai-result-header"
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_aiIcon.default, null), /*#__PURE__*/_react.default.createElement("span", null, t(resultMenu.text))), /*#__PURE__*/_react.default.createElement("span", {
-    className: "sdocfont sdoc-close",
-    onClick: onDeprecationClick
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-ai-result-content"
-  }, isGenerating ? t('Processing_message') : searchResult), /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-ai-statistic"
-  }, t('Generated_content_x_words', {
-    count: searchResult.length
-  }))), /*#__PURE__*/_react.default.createElement("div", {
+  }, isGenerating ? t('Processing_message') : searchResult)), /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-ai-search"
   }, /*#__PURE__*/_react.default.createElement(_aiIcon.default, null), /*#__PURE__*/_react.default.createElement("input", {
     placeholder: t('Ask_AI_anything'),
@@ -421,7 +430,7 @@ function AIModule(_ref) {
     onKeyDown: onKeyDown,
     onChange: onSearchValueChanged
   }), /*#__PURE__*/_react.default.createElement("span", {
-    className: "sdocfont sdoc-send-arrow",
+    className: `sdocfont sdoc-send-arrow ${!searchValue ? 'disable' : ''}`,
     onClick: onEnter
   }))), /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-ai-operations sdoc-dropdown-menu"

package/dist/basic-sdk/extension/plugins/ai/ai-module/style.css

@@ -1,6 +1,6 @@
 .sdoc-ai-module-container {
   position: absolute;
-  z-index: 1000;
+  z-index: 101;
   width: 100%;
   max-width: 672px;
   display: none;
@@ -40,13 +40,17 @@
   position: absolute;
   right: 16px;
   color: #ff9800;
-  cursor: pointer;
+
 }
 
 .sdoc-ai-content .sdoc-ai-search .sdoc-send-arrow.disable {
   color: #BDBDBD;
 }
 
+.sdoc-ai-content .sdoc-ai-search .sdoc-send-arrow:not(.disable) {
+  cursor: pointer;
+}
+
 .sdoc-ai-content .sdoc-ai-result {
   position: relative;
   height: 50px;
@@ -56,9 +60,9 @@
   width: 200px;
   margin-top: 8px;
   padding: 8px 0;
-  border: 1px solid #eee;
-  border-radius: 10px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e5e6e8;
+  border-radius: 2px;
+  box-shadow: 0 0 10px #ccc;
   background-color: #fff;
 }
 
@@ -83,6 +87,10 @@
   align-items: center;
 }
 
+.sdoc-ai-module-container .sdoc-ai-result .sdoc-ai-result-header span {
+  color: #666;
+}
+
 .sdoc-ai-module-container .sdoc-ai-result .sdoc-ai-result-header .sdocfont {
   font-size: 14px;
 }
@@ -99,6 +107,15 @@
   color: #555;
 }
 
-.sdoc-ai-module-container .sdoc-ai-result .sdoc-ai-result-content {
-  padding: 16px 0;
+.sdoc-ai-module-container .sdoc-ai-result .sdoc-ai-statistic {
+  color: #666;
+}
+
+.ai-lang-sub-menu .popover,
+.ai-adjust-sub-menu .popover {
+  padding: 8px 0;
+  border: 1px solid #e5e6e8;
+  border-radius: 2px;
+  box-shadow: 0 0 10px #ccc;
+  background-color: #fff;
 }

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

@@ -125,4 +125,4 @@ const LANG_MENU_CONFIG = exports.LANG_MENU_CONFIG = {
     iconClass: 'sdocfont sdoc-ai-translate'
   }
 };
-const AI_MIN_HEIGHT = exports.AI_MIN_HEIGHT = 474;
+const AI_MIN_HEIGHT = exports.AI_MIN_HEIGHT = 358;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "1.0.182",
+  "version": "1.0.184",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",
   "dependencies": {
     "@seafile/print-js": "1.6.6",
-    "@seafile/react-image-lightbox": "3.0.4",
+    "@seafile/react-image-lightbox": "2.0.5",
     "@seafile/slate": "0.91.8",
     "@seafile/slate-history": "0.86.2",
     "@seafile/slate-hyperscript": "0.81.7",
@@ -16,7 +16,7 @@
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "1.10.7",
     "deep-copy": "1.4.2",
-    "dtable-ui-component": "^5.2.10",
+    "dtable-ui-component": "^5.1.9",
     "is-hotkey": "0.2.0",
     "is-url": "^1.2.4",
     "lodash.isequal": "4.5.0",