@seafile/sdoc-editor 3.0.86 → 3.0.87

package/dist/api/seafile-api.js

@@ -312,35 +312,34 @@ var SeafileAPI = /*#__PURE__*/function () {
       return this.req.get(url);
     }
   }, {
-    key: "insertWikiView",
-    value: function insertWikiView(wikiId, docUuid, data) {
-      var url = "/api/v2.1/wiki2/".concat(wikiId, "/views/");
+    key: "insertFileView",
+    value: function insertFileView(docUuid, wikiId, data) {
+      var url = "/api/v2.1/wiki2/".concat(wikiId, "/file-views/");
       var form = new FormData();
-      form.append('file_uuid', docUuid);
-      form.append('name', data.view_name);
-      form.append('type', data.view_type);
-      form.append('link_repo_id', data.link_repo_id);
-      return this.req.post(url, form);
-    }
-  }, {
-    key: "duplicateWikiView",
-    value: function duplicateWikiView(wikiId, docUuid, viewId) {
-      var url = "/api/v2.1/wiki2/".concat(wikiId, "/duplicate-view/");
-      var form = new FormData();
-      form.append('file_uuid', docUuid);
-      form.append('view_id', viewId);
+      form.append('file_uuid', docUuid); // used for valid permission
+      form.append('name', data.name);
+      form.append('linked_repo_id', data.linked_repo_id);
+      form.append('type', data.type || 'table');
       return this.req.post(url, form);
     }
   }, {
-    key: "modifyView",
-    value: function modifyView(wikiId, viewId, viewData) {
-      var url = '/api/v2.1/wiki2/' + wikiId + '/views/';
+    key: "modifyFileView",
+    value: function modifyFileView(wikiId, fileViewId, viewData) {
+      var url = '/api/v2.1/wiki2/' + wikiId + '/file-views/' + fileViewId + '/';
       var data = {
-        view_id: viewId,
-        view_data: viewData
+        viewData: viewData
       };
       return this.req.put(url, data);
     }
+  }, {
+    key: "duplicateFileView",
+    value: function duplicateFileView(docUuid, wikiId, fileViewId) {
+      var url = "/api/v2.1/wiki2/".concat(wikiId, "/file-views/").concat(fileViewId, "/duplicate/");
+      var form = new FormData();
+      form.append('file_uuid', docUuid); // used for valid permission
+
+      return this.req.post(url, form);
+    }
   }]);
 }();
 var _default = exports["default"] = SeafileAPI;

package/dist/constants/index.js

@@ -79,7 +79,8 @@ var INTERNAL_EVENT = exports.INTERNAL_EVENT = {
   CREATE_WHITEBOARD_FILE: 'create_whiteboard_file',
   GENERATE_EXDRAW_READ_ONLY_LINK: 'generate_exdraw_read_only_link',
   TRANSFER_PREVIEW_FILE_ID: 'transfer_preview_file_id',
-  FILE_METADATA_COMPONENT: 'file_metadata_component'
+  FILE_METADATA_COMPONENT: 'file_metadata_component',
+  ADD_WIKI_LIBRARY_TOGGLE: 'add_wiki_library_click'
 };
 var PAGE_EDIT_AREA_WIDTH = exports.PAGE_EDIT_AREA_WIDTH = 672; // 672 = 794 - 2[borderLeft + borderRight] - 120[paddingLeft + paddingRight]
 var COMMENT_EDITOR_EDIT_AREA_WIDTH = exports.COMMENT_EDITOR_EDIT_AREA_WIDTH = 364;

package/dist/context.js

@@ -35,6 +35,22 @@ var Context = /*#__PURE__*/function () {
         _this.settings['originFileURL'] = originFileURL;
       }
     });
+    (0, _defineProperty2["default"])(this, "getWikiSettings", function () {
+      // patch: Resolving the issue of repos wikiSettings consuming too much localstorage.
+      if (window.wiki && window.wiki.config) {
+        var wikiSettings = window.wiki.config.wikiSettings;
+        return wikiSettings;
+      }
+      return _this.settings['wikiSettings'];
+    });
+    (0, _defineProperty2["default"])(this, "getWikiRepos", function () {
+      // patch: Resolving the issue of repos wikiSettings consuming too much localstorage.
+      if (window.wiki && window.wiki.config) {
+        var repos = window.wiki.config.repos;
+        return repos;
+      }
+      return _this.settings['repos'];
+    });
     (0, _defineProperty2["default"])(this, "uploadLocalImage", function (imageFiles) {
       var docUuid = _this.getSetting('docUuid');
       return _this.api.uploadSdocImage(docUuid, imageFiles).then(function (res) {
@@ -419,24 +435,24 @@ var Context = /*#__PURE__*/function () {
       return this.api.getFileMetadataInfo(docUuid, fileType);
     }
   }, {
-    key: "insertWikiView",
-    value: function insertWikiView(data) {
+    key: "insertFileView",
+    value: function insertFileView(data) {
       var wikiId = this.getSetting('wikiId');
       var docUuid = this.getSetting('docUuid');
-      return this.api.insertWikiView(wikiId, docUuid, data);
+      return this.api.insertFileView(docUuid, wikiId, data);
     }
   }, {
-    key: "duplicateWikiView",
-    value: function duplicateWikiView(viewId) {
+    key: "duplicateFileView",
+    value: function duplicateFileView(fileViewId) {
       var wikiId = this.getSetting('wikiId');
       var docUuid = this.getSetting('docUuid');
-      return this.api.duplicateWikiView(wikiId, docUuid, viewId);
+      return this.api.duplicateFileView(docUuid, wikiId, fileViewId);
     }
   }, {
-    key: "modifyView",
-    value: function modifyView(viewId, viewData) {
+    key: "modifyFileView",
+    value: function modifyFileView(viewId, fileViewId, viewData) {
       var wikiId = this.getSetting('wikiId');
-      return this.api.modifyView(wikiId, viewId, viewData);
+      return this.api.modifyView(wikiId, fileViewId, viewData);
     }
   }]);
 }();

package/dist/editor/sdoc-editor.js

@@ -93,6 +93,9 @@ var SdocEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  (0, _react.useEffect)(function () {
+    _localStorageUtils["default"].removeItem(_constants2.RECENT_COPY_CONTENT);
+  }, []);
 
   // useMount: init socket connection
   (0, _react.useEffect)(function () {

package/dist/editor/wiki-editor.js

@@ -20,6 +20,7 @@ var _extension = require("../extension");
 var _insertElementDialog = _interopRequireDefault(require("../extension/commons/insert-element-dialog"));
 var _constants2 = require("../extension/constants");
 var _helpers = require("../extension/plugins/ai/ai-module/helpers");
+var _linkRepoList = _interopRequireDefault(require("../extension/toolbar/linked-repo-popover/link-repo-list"));
 var _useColorContext = require("../hooks/use-color-context");
 var _useMathjax = _interopRequireDefault(require("../hooks/use-mathjax"));
 var _useScrollContext = require("../hooks/use-scroll-context");
@@ -73,10 +74,12 @@ var WikiEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     validEditor.readonly = false;
     return function () {
       validEditor.selection = null;
-      _localStorageUtils["default"].removeItem(_constants2.RECENT_COPY_CONTENT);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  (0, _react.useEffect)(function () {
+    _localStorageUtils["default"].removeItem(_constants2.RECENT_COPY_CONTENT);
+  }, []);
 
   // useMount: init socket connection
   (0, _react.useEffect)(function () {
@@ -187,7 +190,9 @@ var WikiEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     showComment: showComment
   })), /*#__PURE__*/_react["default"].createElement(_wikiOutline["default"], {
     doc: slateValue
-  }))))), /*#__PURE__*/_react["default"].createElement(_insertElementDialog["default"], {
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-menu-popover sdoc-dropdown-menu sdoc-sub-dropdown-menu sdoc-insert-menu-file-view-popover"
+  }, /*#__PURE__*/_react["default"].createElement(_linkRepoList["default"], null)))))), /*#__PURE__*/_react["default"].createElement(_insertElementDialog["default"], {
     editor: validEditor
   }));
 });

package/dist/extension/commons/insert-element-dialog/index.js

@@ -15,17 +15,16 @@ var _context = _interopRequireDefault(require("../../../context"));
 var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
 var _constants2 = require("../../constants");
 var _index = _interopRequireDefault(require("../../plugins/ai/ai-module/index.js"));
-var _index2 = _interopRequireDefault(require("../../plugins/file-view/insert-view-dialog/index.js"));
 var _formulaModal = _interopRequireDefault(require("../../plugins/formula/menu/formula-modal.js"));
 var _helpers = require("../../plugins/image/helpers");
 var _addLinkDialog = _interopRequireDefault(require("../../plugins/link/dialog/add-link-dialog"));
 var _dialogs = require("../../plugins/table/dialogs");
-var _index3 = require("../../plugins/video/constants/index.js");
-var _index4 = _interopRequireDefault(require("../../plugins/video/dialog/add-video-link-dialog/index.js"));
+var _index2 = require("../../plugins/video/constants/index.js");
+var _index3 = _interopRequireDefault(require("../../plugins/video/dialog/add-video-link-dialog/index.js"));
 var _helpers2 = require("../../plugins/video/helpers");
-var _index5 = _interopRequireDefault(require("../file-insert-dialog/index.js"));
-var _index6 = _interopRequireDefault(require("../select-file-dialog/index.js"));
-var _index7 = _interopRequireDefault(require("../wiki-file-insert-dialog/index.js"));
+var _index4 = _interopRequireDefault(require("../file-insert-dialog/index.js"));
+var _index5 = _interopRequireDefault(require("../select-file-dialog/index.js"));
+var _index6 = _interopRequireDefault(require("../wiki-file-insert-dialog/index.js"));
 var InsertElementDialog = function InsertElementDialog(_ref) {
   var editor = _ref.editor;
   var _useState = (0, _react.useState)(''),
@@ -101,7 +100,7 @@ var InsertElementDialog = function InsertElementDialog(_ref) {
   var onVideoFileChanged = (0, _react.useCallback)(function (event) {
     var files = event.target.files;
     // Show warning for 3s and no further insertion if video file is more than 5MB
-    if (files[0].size > _index3.VIDEO_MAX_SIZE_5MB) {
+    if (files[0].size > _index2.VIDEO_MAX_SIZE_5MB) {
       handleDisplayAlert();
       event.target.value = null;
       return;
@@ -223,7 +222,7 @@ var InsertElementDialog = function InsertElementDialog(_ref) {
           insertLinkCallback: insertLinkCallback,
           closeDialog: closeDialog
         };
-        return /*#__PURE__*/_react["default"].createElement(_index6["default"], sdocLinkProps);
+        return /*#__PURE__*/_react["default"].createElement(_index5["default"], sdocLinkProps);
       }
     case _constants2.ELEMENT_TYPE.FILE_LINK:
       {
@@ -233,7 +232,7 @@ var InsertElementDialog = function InsertElementDialog(_ref) {
           insertLinkCallback: insertLinkCallback,
           closeDialog: closeDialog
         };
-        return /*#__PURE__*/_react["default"].createElement(_index6["default"], fileLinkProps);
+        return /*#__PURE__*/_react["default"].createElement(_index5["default"], fileLinkProps);
       }
     case _constants2.ELEMENT_TYPE.WHITEBOARD:
       {
@@ -243,7 +242,7 @@ var InsertElementDialog = function InsertElementDialog(_ref) {
           insertWhiteboardFile: insertWhiteboardFile,
           closeDialog: closeDialog
         };
-        return /*#__PURE__*/_react["default"].createElement(_index6["default"], whiteboardProps);
+        return /*#__PURE__*/_react["default"].createElement(_index5["default"], whiteboardProps);
       }
     case _constants2.ELEMENT_TYPE.VIDEO:
       {
@@ -253,23 +252,11 @@ var InsertElementDialog = function InsertElementDialog(_ref) {
           insertVideoCallback: insertVideoCallback,
           closeDialog: closeDialog
         };
-        return /*#__PURE__*/_react["default"].createElement(_index6["default"], videoProps);
+        return /*#__PURE__*/_react["default"].createElement(_index5["default"], videoProps);
       }
     case _constants2.ELEMENT_TYPE.VIDEO_LINK:
       {
-        return /*#__PURE__*/_react["default"].createElement(_index4["default"], props);
-      }
-    case _constants2.ELEMENT_TYPE.FILE_VIEW:
-      {
-        var _props = {
-          editor: validEditor,
-          element: element,
-          slateNode: slateNode,
-          insertPosition: insertPosition,
-          dialogType: dialogType,
-          closeDialog: closeDialog
-        };
-        return /*#__PURE__*/_react["default"].createElement(_index2["default"], _props);
+        return /*#__PURE__*/_react["default"].createElement(_index3["default"], props);
       }
     case _constants2.ELEMENT_TYPE.FORMULA:
       {
@@ -313,13 +300,13 @@ var InsertElementDialog = function InsertElementDialog(_ref) {
     case _constants2.ELEMENT_TYPE.FILE_LINK_INSET_INPUT_TEMP:
       {
         if (editor.editorType === _constants.WIKI_EDITOR) {
-          return /*#__PURE__*/_react["default"].createElement(_index7["default"], {
+          return /*#__PURE__*/_react["default"].createElement(_index6["default"], {
             element: slateNode,
             editor: editor,
             closeDialog: closeDialog
           });
         }
-        return /*#__PURE__*/_react["default"].createElement(_index5["default"], {
+        return /*#__PURE__*/_react["default"].createElement(_index4["default"], {
           element: slateNode,
           editor: editor,
           closeDialog: closeDialog

package/dist/extension/plugins/file-view/helpers.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateFileView = exports.insertFileView = exports.getWikiSettings = exports.getFileUrl = exports.getAccessibleRepos = exports.genFileViewNode = exports.calculateSize = void 0;
+exports.updateFileView = exports.insertFileView = exports.getFileUrl = exports.genFileViewNode = exports.calculateSize = void 0;
 var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
 var _slugid = _interopRequireDefault(require("slugid"));
@@ -18,18 +18,6 @@ var getFileUrl = exports.getFileUrl = function getFileUrl(element) {
     view_id = data.view_id;
   return "".concat(serviceUrl, "/wiki/").concat(wiki_id, "/repo-views/").concat(view_id, "/");
 };
-var getWikiSettings = exports.getWikiSettings = function getWikiSettings() {
-  var wikiId = _context["default"].getSetting('wikiId');
-  var WIKI_SETTING_INTO_KEY = "seafile_wiki_".concat(wikiId, "_settings_info");
-  var settings = window.localStorage.getItem(WIKI_SETTING_INTO_KEY);
-  return JSON.parse(settings);
-};
-var getAccessibleRepos = exports.getAccessibleRepos = function getAccessibleRepos() {
-  var wikiId = _context["default"].getSetting('wikiId');
-  var WIKI_REPO_INFO_KEY = "seafile_wiki_".concat(wikiId, "_repos_info");
-  var repos = window.localStorage.getItem(WIKI_REPO_INFO_KEY);
-  return JSON.parse(repos);
-};
 var genFileViewNode = exports.genFileViewNode = function genFileViewNode(data) {
   return {
     id: _slugid["default"].nice(),
@@ -43,7 +31,7 @@ var genFileViewNode = exports.genFileViewNode = function genFileViewNode(data) {
 };
 var insertFileView = exports.insertFileView = function insertFileView(data, editor, position, slateNode) {
   if (!data) return;
-  if (!data.view_name || !data.view_type || !data.link_repo_id) return;
+  if (!data.wiki_id || !data.file_view_id) return;
   var fileViewNode = genFileViewNode(data);
   if (position === _constants.INSERT_POSITION.AFTER) {
     var path = _slate.Editor.path(editor, editor.selection);

package/dist/extension/plugins/file-view/render-elem/index.js

@@ -15,17 +15,18 @@ var _slateReact = require("@seafile/slate-react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _toast = _interopRequireDefault(require("../../../../components/toast"));
 var _context = _interopRequireDefault(require("../../../../context"));
+var _useScrollContext = require("../../../../hooks/use-scroll-context");
 var _commonUtils = require("../../../../utils/common-utils");
 var _localStorageUtils = _interopRequireDefault(require("../../../../utils/local-storage-utils"));
 var _constants = require("../../../constants");
 var _helpers = require("../helpers");
-var _rename = _interopRequireDefault(require("../rename"));
 require("./index.css");
-var FileView = function FileView(_ref) {
+var FileViewPlugin = function FileViewPlugin(_ref) {
   var element = _ref.element,
     children = _ref.children,
     attributes = _ref.attributes;
   var data = element.data;
+  var scrollRef = (0, _useScrollContext.useScrollContext)();
   var editor = (0, _slateReact.useSlateStatic)();
   var isSelected = (0, _slateReact.useSelected)();
   var _useReadOnly = (0, _slateReact.useReadOnly)(),
@@ -46,28 +47,26 @@ var FileView = function FileView(_ref) {
   var viewSettings = (0, _react.useMemo)(function () {
     var settings = _context["default"].getFileViewSetting();
     var viewSettings = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, settings), {}, {
-      repoID: data.link_repo_id,
       view_data: {
-        view_id: data.view_id,
         wiki_id: data.wiki_id,
+        file_view_id: data.file_view_id,
         height: data.height,
         width: data.width
       }
     });
     return viewSettings;
-  }, [data.height, data.link_repo_id, data.view_id, data.width, data.wiki_id]);
+  }, [data.file_view_id, data.height, data.width, data.wiki_id]);
   (0, _react.useEffect)(function () {
     var copyContent = _localStorageUtils["default"].getItem(_constants.RECENT_COPY_CONTENT);
     var wikiId = _context["default"].getSetting('wikiId');
     if (wikiId !== data.wiki_id) return;
     if (!copyContent) return;
     var stringContent = JSON.stringify(copyContent);
-    if (stringContent.indexOf(data.wiki_id) > -1 && stringContent.indexOf(data.view_id) > -1) {
-      _context["default"].duplicateWikiView(data.view_id).then(function (res) {
-        var view = res.data.view;
+    if (stringContent.indexOf(data.wiki_id) > -1 && stringContent.indexOf(data.file_view_id) > -1) {
+      _context["default"].duplicateFileView(data.file_view_id).then(function (res) {
+        var fileView = res.data.file_view;
         var newData = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, data), {}, {
-          view_id: view._id,
-          view_name: view.name
+          file_view_id: fileView.id
         });
         (0, _helpers.updateFileView)(newData, editor, element);
       })["catch"](function (error) {
@@ -105,7 +104,8 @@ var FileView = function FileView(_ref) {
     var style = wrapperElement.style;
     style.width = size.width + 'px';
     style.height = size.height + 'px';
-    var databaseStyle = databaseRef.current.style;
+    var _databaseRef$current$ = databaseRef.current.getFileBaseElement(),
+      databaseStyle = _databaseRef$current$.style;
     databaseStyle.width = size.width - 4 + 'px';
     databaseStyle.height = size.height - 4 + 'px';
     setMovingSize(size);
@@ -155,16 +155,6 @@ var FileView = function FileView(_ref) {
     }
     return null;
   }, [data]);
-  var onNameCancel = (0, _react.useCallback)(function () {}, []);
-  var onRename = (0, _react.useCallback)(function (newName) {
-    var newData = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, element.data), {}, {
-      view_name: newName
-    });
-    (0, _helpers.updateFileView)(newData, editor, element);
-
-    // TODO:
-    // context.modifyView(data.view_id, { view_name: newName });
-  }, [editor, element]);
   return /*#__PURE__*/_react["default"].createElement("div", Object.assign({
     "data-id": element.id
   }, attributes, {
@@ -172,20 +162,15 @@ var FileView = function FileView(_ref) {
     contentEditable: "false",
     suppressContentEditableWarning: true
   }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "sdoc-file-view-title"
-  }, /*#__PURE__*/_react["default"].createElement(_rename["default"], {
-    name: data.view_name,
-    onRenameConfirm: onRename,
-    onRenameCancel: onNameCancel
-  })), /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])('sdoc-file-view-content', {
       'is-selected': isSelected
     }),
     ref: wrapperRef,
     style: style
-  }, /*#__PURE__*/_react["default"].createElement(_seafileDatabase.Database, {
+  }, /*#__PURE__*/_react["default"].createElement(_seafileDatabase.FileView, {
     settings: viewSettings,
-    ref: databaseRef
+    ref: databaseRef,
+    scrollRef: scrollRef
   }), !readOnly && isSelected && /*#__PURE__*/_react["default"].createElement("span", {
     className: "file-view-resizer",
     ref: resizerRef,
@@ -195,5 +180,5 @@ var FileView = function FileView(_ref) {
   }, /*#__PURE__*/_react["default"].createElement("span", null, t('Width'), ':', parseInt(movingSize.width)), /*#__PURE__*/_react["default"].createElement("span", null, "\xA0\xA0"), /*#__PURE__*/_react["default"].createElement("span", null, t('Height'), ':', parseInt(movingSize.height)))), children);
 };
 var renderFileView = exports.renderFileView = function renderFileView(props) {
-  return /*#__PURE__*/_react["default"].createElement(FileView, props);
+  return /*#__PURE__*/_react["default"].createElement(FileViewPlugin, props);
 };

package/dist/extension/toolbar/insert-element-toolbar/index.js

@@ -244,21 +244,22 @@ var QuickInsertBlockMenu = function QuickInsertBlockMenu(_ref) {
     var wikiId = _context["default"].getSetting('wikiId');
     var data = {
       wiki_id: wikiId,
-      view_name: t('View_name'),
-      view_type: 'table',
-      link_repo_id: item.repo_id
+      name: item.repo_name,
+      linked_repo_id: item.repo_id,
+      type: 'table'
     };
-    _context["default"].insertWikiView(data).then(function (res) {
-      var view = res.data.view;
-      var viewData = (0, _objectSpread6["default"])((0, _objectSpread6["default"])({}, data), {}, {
-        view_id: view._id
-      });
+    _context["default"].insertFileView(data).then(function (res) {
+      var fileView = res.data;
+      var viewData = {
+        wiki_id: wikiId,
+        file_view_id: fileView.id
+      };
       (0, _helpers3.insertFileView)(viewData, editor, insertPosition, slateNode);
     })["catch"](function (error) {
       var errorMessage = (0, _commonUtils.getErrorMsg)(error);
       _toast["default"].danger(errorMessage);
     });
-  }, [callback, editor, insertPosition, slateNode, t]);
+  }, [callback, editor, insertPosition, slateNode]);
   var dropDownItems = (0, _react.useMemo)(function () {
     var items = (0, _objectSpread6["default"])((0, _objectSpread6["default"])((0, _objectSpread6["default"])((0, _objectSpread6["default"])((0, _defineProperty2["default"])({}, _constants2.PARAGRAPH, /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
       isHidden: !quickInsertMenuSearchMap[_constants2.PARAGRAPH],

package/dist/extension/toolbar/linked-repo-popover/link-repo-list.css

@@ -1,22 +1,53 @@
+.sdoc-insert-menu-file-view-popover .popover {
+  max-width: 300px;
+}
+
 .sdoc-dropdown-menu .sdoc-linked-repo-list-wrapper {
   /* position: absolute; */
   background-color: #ffff;
   max-height: 370px;
-  max-width: 200px;
-  padding: 8px 0px;
+  padding: 0px !important;
+  width: 298px;
+  padding: 0px;
   left: -8px;
 }
 
-.sdoc-dropdown-menu .sdoc-linked-repo-list-wrapper .sdoc-linked-repo-list-search-wrapper {
-  padding: 12px;
-}
-
-.sdoc-dropdown-menu .sdoc-linked-repo-list-wrapper .sdoc-linked-repo-list-search-wrapper>input {
-  font-size: 12px;
-  max-height: 30px;
+.sdoc-dropdown-menu .sdoc-linked-repo-list-wrapper .sdoc-linked-repo-list-tip {
+  margin-top: 8px;
+  min-height: 32px;
+  padding: 3px 12px;
+  color: #666;
 }
 
 .sdoc-dropdown-menu .sdoc-linked-repo-list-wrapper .sdoc-linked-repo-list-content-wrapper {
   max-height: 300px;
   overflow-y: auto;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.sdoc-dropdown-menu .sdoc-linked-repo-list-wrapper .sdoc-dropdown-menu-item {
+  min-height: 32px;
+  padding: 3px 12px;
+  display: flex;
+  align-items: center;
+}
+
+.sdoc-dropdown-menu .sdoc-linked-repo-list-wrapper .sdoc-dropdown-menu-item .lib-icon {
+  margin-right: 10px;
+}
+
+.sdoc-dropdown-menu .sdoc-linked-repo-list-wrapper .sdoc-linked-repo-list-add-toolbar {
+  min-height: 32px;
+  padding: 3px 12px;
+}
+
+.sdoc-dropdown-menu .sdoc-linked-repo-list-wrapper .sdoc-linked-repo-list-add-toolbar .sdocfont {
+  color: #666;
+  margin-right: 10px;
+}
+
+.sdoc-dropdown-menu .sdoc-linked-repo-list-wrapper .sdoc-linked-repo-list-add-toolbar:hover {
+  background: #f5f5f5;
+  cursor: pointer;
 }

package/dist/extension/toolbar/linked-repo-popover/link-repo-list.js

@@ -1,97 +1,64 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
 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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactI18next = require("react-i18next");
-var _reactstrap = require("reactstrap");
-var _helpers = require("../../plugins/file-view/helpers");
+var _lib = _interopRequireDefault(require("../../../assets/images/lib.png"));
+var _constants = require("../../../constants");
+var _context = _interopRequireDefault(require("../../../context"));
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
 require("./link-repo-list.css");
-var useStopPropagation = function useStopPropagation() {
-  var stopPropagation = function stopPropagation(e) {
-    var _e$nativeEvent$stopIm, _e$nativeEvent;
-    e.stopPropagation();
-    (_e$nativeEvent$stopIm = (_e$nativeEvent = e.nativeEvent).stopImmediatePropagation) === null || _e$nativeEvent$stopIm === void 0 ? void 0 : _e$nativeEvent$stopIm.call(_e$nativeEvent);
-  };
-  return {
-    onClick: stopPropagation,
-    onFocus: stopPropagation,
-    onKeyDown: stopPropagation,
-    onKeyUp: stopPropagation,
-    onKeyPress: stopPropagation,
-    onMouseDown: stopPropagation,
-    onTouchStart: stopPropagation
-  };
-};
-var useRepos = function useRepos() {
-  var wikiSettings = (0, _helpers.getWikiSettings)();
-  var accessibleRepos = (0, _helpers.getAccessibleRepos)();
-  var linkedRepoIds = wikiSettings.linked_repos;
-  var optionsMap = accessibleRepos.reduce(function (result, item) {
-    result[item.repo_id] = item;
-    return result;
-  }, {});
-  return linkedRepoIds.map(function (id) {
-    return optionsMap[id];
-  });
-};
 var LinkedRepoList = function LinkedRepoList(_ref) {
   var onRepoClick = _ref.onRepoClick;
   var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
     t = _useTranslation.t;
-  var isComposingRef = (0, _react.useRef)(null);
   var repoRef = (0, _react.useRef)(null);
-  var repos = useRepos();
-  var _useState = (0, _react.useState)(repos || []),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    tables = _useState2[0],
-    setTables = _useState2[1];
-  var inputEvents = useStopPropagation();
-  var onChange = (0, _react.useCallback)(function (event) {
-    if (isComposingRef.current) return;
-    var value = event.target.value.trim().toUpperCase();
-    if (value) {
-      var list = repos.filter(function (item) {
-        return item.repo_name.toUpperCase().includes(value);
-      });
-      setTables(list);
-    } else {
-      setTables(repos);
-    }
-  }, [repos]);
-  var onCompositionStart = (0, _react.useCallback)(function () {
-    isComposingRef.current = true;
+  var enableRepos = (0, _react.useMemo)(function () {
+    var repos = _context["default"].getWikiRepos();
+    var wikiSettings = _context["default"].getWikiSettings();
+    var linked_repos = wikiSettings.linked_repos;
+    var linkedMap = linked_repos.reduce(function (ret, id) {
+      ret[id] = true;
+      return ret;
+    }, {});
+    return repos.filter(function (item) {
+      return linkedMap[item.repo_id];
+    });
+  }, []);
+  var onAddLibraryClick = (0, _react.useCallback)(function () {
+    var eventBus = _eventBus["default"].getInstance();
+    eventBus.dispatch(_constants.INTERNAL_EVENT.ADD_WIKI_LIBRARY_TOGGLE);
   }, []);
-  var onCompositionEnd = (0, _react.useCallback)(function (e) {
-    isComposingRef.current = false;
-    onChange(e);
-  }, [onChange]);
   return /*#__PURE__*/_react["default"].createElement("div", {
     ref: repoRef,
     className: "sdoc-dropdown-menu-container sdoc-linked-repo-list-wrapper"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "sdoc-linked-repo-list-search-wrapper"
-  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.Input, Object.assign({
-    placeholder: t('Search_1'),
-    onChange: onChange,
-    autoFocus: true,
-    onCompositionStart: onCompositionStart,
-    onCompositionEnd: onCompositionEnd
-  }, inputEvents))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-linked-repo-list-tip"
+  }, t('Show_files_from_a_linked_library')), /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-linked-repo-list-content-wrapper"
-  }, tables.map(function (item) {
+  }, enableRepos.map(function (item) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: item.repo_id,
       className: "sdoc-dropdown-menu-item text-truncate d-block",
       onClick: function onClick() {
         return onRepoClick(item);
       }
-    }, item.repo_name);
-  })));
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      className: "lib-icon",
+      src: _lib["default"],
+      width: "20",
+      alt: ""
+    }), item.repo_name);
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-linked-repo-list-add-toolbar",
+    onClick: onAddLibraryClick
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-append"
+  }), t('Add library')));
 };
 var _default = exports["default"] = LinkedRepoList;