@seafile/sdoc-editor 1.0.97 → 1.0.98

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

@@ -45,7 +45,8 @@ const INTERNAL_EVENT = exports.INTERNAL_EVENT = {
   TABLE_HIDE_DRAG_HANDLER: 'table_show_drag_handler',
   ON_PRINT: 'on_print',
   COMMENT_EDITOR_POST_COMMENT: 'comment_editor_post_comment',
-  CLOSE_FILE_INSET_DIALOG: 'close_file_insert_dialog'
+  CLOSE_FILE_INSET_DIALOG: 'close_file_insert_dialog',
+  RESIZE_ARTICLE: 'resize_article'
 };
 const REVISION_DIFF_KEY = exports.REVISION_DIFF_KEY = 'diff';
 const REVISION_DIFF_VALUE = exports.REVISION_DIFF_VALUE = '1';

package/dist/basic-sdk/extension/plugins/code-block/hover-menu/index.css

@@ -130,12 +130,12 @@
   justify-content: space-between;
 }
 
-.sdoc-langs-list-container .langs-list-ul .langs-list-li:hover {
-  background-color: #f5f5f5;;
+.sdoc-langs-list-container .langs-list-ul .langs-list-li.active {
+  background-color: #f5f5f5;
 }
 
-.sdoc-langs-list-container .langs-list-ul .langs-list-li .active {
-  background-color: #f5f5f5;;
+.sdoc-langs-list-container .langs-list-ul .langs-list-li.hover {
+  background-color: #f5f5f5;
 }
 
 .sdoc-langs-list-container .langs-list-ul .langs-list-li .li-check-mark {

package/dist/basic-sdk/extension/plugins/code-block/hover-menu/index.js

@@ -14,11 +14,12 @@ var _commons = require("../../../commons/");
 var _prismjs = require("../prismjs");
 var _helpers = require("../helpers");
 require("./index.css");
-const LangList = _ref => {
+const LangList = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     langsData,
     onSelectLang,
-    selectedLanguageText
+    selectedLanguageText,
+    selectedIndex
   } = _ref;
   const {
     t
@@ -30,13 +31,14 @@ const LangList = _ref => {
   }
   return /*#__PURE__*/_react.default.createElement("ul", {
     className: "langs-list-ul"
-  }, langsData.map(item => {
+  }, langsData.map((item, index) => {
     return /*#__PURE__*/_react.default.createElement("li", {
-      className: `langs-list-li ${selectedLanguageText === item.text ? 'active' : ''}`,
+      ref: el => ref.current[index] = el,
+      className: `langs-list-li ${selectedLanguageText === item.text ? 'active' : ''} ${selectedIndex === index ? 'hover' : ''}`,
       id: item.value,
       key: item.value,
       onClick: () => {
-        onSelectLang(item);
+        onSelectLang(item, index);
       }
     }, item.text, /*#__PURE__*/_react.default.createElement("span", {
       className: `li-check-mark ${selectedLanguageText === item.text ? 'li-checked' : ''}`
@@ -44,7 +46,7 @@ const LangList = _ref => {
       className: "sdocfont sdoc-check-mark icon-font"
     })));
   }));
-};
+});
 const CodeBlockHoverMenu = _ref2 => {
   let {
     style,
@@ -63,6 +65,11 @@ const CodeBlockHoverMenu = _ref2 => {
   const [selectedLanguageText, setSelectedLanguageText] = (0, _react.useState)('');
   const [langsData, setLangsData] = (0, _react.useState)((0, _prismjs.genCodeLangs)());
   const [isShowTooltip, setIsShowTooltip] = (0, _react.useState)(false);
+  const [selectedIndex, setSelectedIndex] = (0, _react.useState)(0);
+  const langRefs = (0, _react.useRef)([]);
+  (0, _react.useEffect)(() => {
+    langRefs.current = Array(langsData.length).fill().map((_, i) => langRefs.current[i] || /*#__PURE__*/_react.default.createRef());
+  }, [langsData]);
   const onHiddenLangsList = (0, _react.useCallback)(e => {
     if (!e.target.parentNode.className.includes('sdoc-search-langs')) {
       setIsShowlangsList(false);
@@ -79,9 +86,10 @@ const CodeBlockHoverMenu = _ref2 => {
   }, []);
   const onShowLangs = (0, _react.useCallback)(e => {
     e.stopPropagation();
+    setSelectedIndex(langsData.findIndex(lang => lang.text === selectedLanguageText));
     setIsShowlangsList(!isShowlangsList);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isShowlangsList]);
+  }, [isShowlangsList, selectedLanguageText]);
   const onAutoLineWrap = (0, _react.useCallback)(() => {
     if (white_space === 'normal') {
       onChangeAutoLineWrap('nowrap');
@@ -94,14 +102,22 @@ const CodeBlockHoverMenu = _ref2 => {
     onDeleteCodeBlock();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const onSelectLang = (0, _react.useCallback)(lang => {
+  const onSelectLang = (0, _react.useCallback)((lang, index) => {
     const {
       text
     } = lang;
     setSelectedLanguageText(text);
+    setSelectedIndex(index);
     onChangeLanguage(lang);
+    const selectedLangRef = langRefs.current[index];
+    if (selectedLangRef) {
+      selectedLangRef.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest'
+      });
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [onChangeLanguage]);
   (0, _react.useEffect)(() => {
     // Compatible with legacy code
     let selectedLanguage = language;
@@ -126,6 +142,41 @@ const CodeBlockHoverMenu = _ref2 => {
     setLangsData(filterData);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  const onKeyDown = (0, _react.useCallback)(e => {
+    const {
+      key
+    } = e;
+    switch (key) {
+      case 'ArrowUp':
+        e.preventDefault();
+        setSelectedIndex(prevIndex => {
+          const newIndex = Math.max(prevIndex - 1, 0);
+          scrollToLang(newIndex);
+          return newIndex;
+        });
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        setSelectedIndex(prevIndex => {
+          const newIndex = Math.min(prevIndex + 1, langsData.length - 1);
+          scrollToLang(newIndex);
+          return newIndex;
+        });
+        break;
+      case 'Enter':
+        onSelectLang(langsData[selectedIndex], selectedIndex);
+        break;
+    }
+  }, [langsData, selectedIndex, onSelectLang]);
+  const scrollToLang = index => {
+    const selectedLangRef = langRefs.current[index];
+    if (selectedLangRef) {
+      selectedLangRef.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest'
+      });
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_commons.ElementPopover, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-code-block-hover-menu-container",
     style: menuPosition
@@ -191,11 +242,14 @@ const CodeBlockHoverMenu = _ref2 => {
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
     autoFocus: true,
     placeholder: t('Search_language'),
-    onChange: onChange
+    onChange: onChange,
+    onKeyDown: onKeyDown
   })), /*#__PURE__*/_react.default.createElement(LangList, {
     langsData: langsData,
     onSelectLang: onSelectLang,
-    selectedLanguageText: selectedLanguageText
+    selectedLanguageText: selectedLanguageText,
+    selectedIndex: selectedIndex,
+    ref: langRefs
   })))));
 };
 var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(CodeBlockHoverMenu);

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

@@ -53,7 +53,11 @@ function ArticleContainer(_ref) {
   (0, _react.useEffect)(() => {
     const eventBus = _eventBus.default.getInstance();
     const unsubscribeOutline = eventBus.subscribe(_constants.INTERNAL_EVENT.OUTLINE_STATE_CHANGED, handleWindowResize);
-    return unsubscribeOutline;
+    const unsubscribeResizeArticle = eventBus.subscribe(_constants.INTERNAL_EVENT.RESIZE_ARTICLE, handleWindowResize);
+    return () => {
+      unsubscribeOutline();
+      unsubscribeResizeArticle();
+    };
   }, [handleWindowResize]);
   (0, _react.useEffect)(() => {
     if (editor.editorType === _constants.WIKI_EDITOR) return;

package/dist/basic-sdk/right-panel/index.js

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("../../hooks");
 var _resizeWidth = _interopRequireDefault(require("./resize-width"));
 var _constants = require("../constants");
+var _eventBus = _interopRequireDefault(require("../utils/event-bus"));
 require("./index.css");
 const MIN_PANEL_WIDTH = 360;
 const MAX_PANEL_WIDTH = 620;
@@ -40,17 +41,26 @@ const RightPanel = _ref => {
     setWidth(width);
   }, []);
   const resizeWidthEnd = (0, _react.useCallback)(width => {
-    window.localStorage.setItem('sdoc-panel-width', width);
+    const settings = JSON.parse(window.localStorage.getItem('sdoc') || '{}');
+    window.localStorage.setItem('sdoc', JSON.stringify({
+      ...settings,
+      panelWidth: width
+    }));
+    const eventBus = _eventBus.default.getInstance();
+    eventBus.dispatch(_constants.INTERNAL_EVENT.RESIZE_ARTICLE);
   }, []);
   (0, _react.useEffect)(() => {
-    let width = parseInt(window.localStorage.getItem('sdoc-panel-width', '0')) || MIN_PANEL_WIDTH;
-    if (width < MIN_PANEL_WIDTH) {
-      width = MIN_PANEL_WIDTH;
-    } else if (width > MAX_PANEL_WIDTH) {
-      width = MAX_PANEL_WIDTH;
-    }
+    const settings = JSON.parse(window.localStorage.getItem('sdoc', '{}')) || {};
+    const {
+      panelWidth
+    } = settings;
+    const width = Math.max(MIN_PANEL_WIDTH, Math.min(parseInt(panelWidth, 10) || MIN_PANEL_WIDTH, MAX_PANEL_WIDTH));
     setWidth(width);
   }, []);
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    eventBus.dispatch(_constants.INTERNAL_EVENT.RESIZE_ARTICLE);
+  }, [displayPluginName]);
   if (!displayPluginName) return null;
   const plugin = plugins.find(p => p.name === displayPluginName);
   if (!plugin) return null;

package/package.json

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