@seafile/sdoc-editor 1.0.170 → 1.0.172-alpha-3

package/dist/api/seafile-api.js

@@ -142,8 +142,8 @@ class SeafileAPI {
     const url = 'api/v2.1/seadoc/query-copy-move-progress/' + docUuid + '/?&doc_uuid=' + docUuid + '&task_id=' + taskId;
     return this.req.get(url);
   }
-  searchSdocFiles(docUuid, query, page, per_page) {
-    const url = 'api/v2.1/seadoc/search-filename/' + docUuid + '/?query=' + query + '&page=' + page + '&per_page=' + per_page;
+  searchFilesByFilename(docUuid, query, page, per_page, search_type) {
+    const url = 'api/v2.1/seadoc/search-filename/' + docUuid + '/?query=' + query + '&page=' + page + '&per_page=' + per_page + '&search_type=' + search_type;
     return this.req.get(url);
   }
 

package/dist/basic-sdk/extension/commons/file-insert-dialog/index.js

@@ -19,7 +19,6 @@ var _constants2 = require("../../../constants");
 var _constants3 = require("../../constants");
 var _toast = _interopRequireDefault(require("../../../../components/toast"));
 var _helpers = require("../../plugins/sdoc-link/helpers");
-var _helpers2 = require("../../plugins/wiki-link/helpers");
 require("./style.css");
 const FileLinkInsertDialog = _ref => {
   let {
@@ -27,6 +26,11 @@ const FileLinkInsertDialog = _ref => {
     element,
     closeDialog
   } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  const eventBus = _eventBus.default.getInstance();
+  const fileLinkInsertRef = (0, _react.useRef)(null);
   const historyFileWrapperRef = (0, _react.useRef)(document.querySelector('.sdoc-history-files-wrapper'));
   const [files, setFiles] = (0, _react.useState)([]);
   const [position, setPosition] = (0, _react.useState)({
@@ -34,18 +38,14 @@ const FileLinkInsertDialog = _ref => {
     left: 0
   });
   const [newFileName, setNewFileName] = (0, _react.useState)('');
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
   const [header, setHeader] = (0, _react.useState)(t('Recent_visited'));
-  const eventBus = _eventBus.default.getInstance();
   const deleteInputAndInsertText = (0, _react.useCallback)(function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
     return (0, _helpers.insertTextWhenRemoveFileNameCollector)(editor, element, ...args);
   }, [editor, element]);
-  const getPosition = (0, _react.useCallback)(() => {
+  const getPosition = (0, _react.useCallback)(e => {
     const {
       selection
     } = editor;
@@ -60,6 +60,7 @@ const FileLinkInsertDialog = _ref => {
       } = domNode.getBoundingClientRect();
       let popoverTop = top + topGap;
       let popoverLeft = left + leftGap;
+
       // Insert gap between the popover and the selected node
       // file item height 32px, header height 32px, add button height 32px, margin-top 8px, max-height 306px
       const popoverHeight = Math.min(files.length * 32 + 32 * 3 + 8, 300);
@@ -71,17 +72,6 @@ const FileLinkInsertDialog = _ref => {
         const counterTopGap = 8;
         popoverTop = top - popoverHeight - counterTopGap;
       }
-      if (editor.editorType === _constants2.WIKI_EDITOR) {
-        const wikiEditorContainer = document.querySelector('.sdoc-editor-container');
-        if (wikiEditorContainer) {
-          const {
-            left,
-            top
-          } = wikiEditorContainer.getBoundingClientRect();
-          popoverLeft -= left;
-          popoverTop -= top;
-        }
-      }
       setPosition({
         top: popoverTop,
         left: popoverLeft
@@ -93,20 +83,30 @@ const FileLinkInsertDialog = _ref => {
     var _historyFileWrapperRe, _historyFileWrapperRe2;
     const isClickInside = (_historyFileWrapperRe = historyFileWrapperRef.current) === null || _historyFileWrapperRe === void 0 ? void 0 : (_historyFileWrapperRe2 = _historyFileWrapperRe.contains) === null || _historyFileWrapperRe2 === void 0 ? void 0 : _historyFileWrapperRe2.call(_historyFileWrapperRe, e.target);
     if (isClickInside) return;
+
+    // Click on the insertion position without closing
+    const insertCollectorEl = document.querySelector('.sdoc-file-name-insert-collector');
+    if (insertCollectorEl && insertCollectorEl.className === e.target.className) return;
     deleteInputAndInsertText();
     closeDialog();
   }, [closeDialog, deleteInputAndInsertText]);
   const onScroll = (0, _react.useCallback)(e => {
-    getPosition();
+    getPosition(e);
   }, [getPosition]);
-  const getHistoryFiles = (0, _react.useCallback)(e => {
-    const getItemKey = editor.editorType === _constants2.WIKI_EDITOR ? 'wiki-recent-files' : 'sdoc-recent-files';
-    const files = _utils.LocalStorage.getItem(getItemKey) || [];
+  const getHistoryFiles = (0, _react.useCallback)(isCalculatedByFiles => {
+    const getItemKey = 'sdoc-recent-files';
+    let files = _utils.LocalStorage.getItem(getItemKey) || [];
+    if (isCalculatedByFiles) {
+      const newFiles = (0, _utils.getMaximumCapacity)(files);
+      files = newFiles;
+    }
     setFiles(files);
-  }, [editor.editorType]);
+  }, []);
   (0, _react.useEffect)(() => {
+    fileLinkInsertRef.current['isFirstMount'] = true;
     getHistoryFiles();
-  }, [getHistoryFiles]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   const onKeydown = (0, _react.useCallback)(e => {
     const {
       key
@@ -182,23 +182,22 @@ const FileLinkInsertDialog = _ref => {
   }, []);
   (0, _react.useEffect)(() => {
     if (!(element !== null && element !== void 0 && element.children)) return;
+    // No search on first load
+    if (fileLinkInsertRef.current['isFirstMount']) {
+      fileLinkInsertRef.current['isFirstMount'] = false;
+      return;
+    }
     const searchText = _slate.Node.string(element);
     onSearch(searchText);
   }, [element, onSearch]);
   const onSelect = (0, _react.useCallback)(fileInfo => {
     const {
       doc_uuid,
-      name,
-      wikiRepoId,
-      pageId
+      name
     } = fileInfo;
     (0, _helpers.removeTempInput)(editor, element);
     closeDialog();
-    if (editor.editorType === _constants2.WIKI_EDITOR) {
-      (0, _helpers2.insertWikiPageLink)(editor, name, wikiRepoId, pageId);
-    } else {
-      (0, _helpers.insertSdocFileLink)(editor, name, doc_uuid);
-    }
+    (0, _helpers.insertSdocFileLink)(editor, name, doc_uuid);
   }, [closeDialog, editor, element]);
   const onShowMore = (0, _react.useCallback)(() => {
     eventBus.dispatch(_constants2.INTERNAL_EVENT.INSERT_ELEMENT, {
@@ -211,26 +210,27 @@ const FileLinkInsertDialog = _ref => {
     e.stopPropagation();
     (0, _helpers.removeTempInput)(editor, element);
     const eventBus = _eventBus.default.getInstance();
-    const dispatchEventKey = editor.editorType === _constants2.WIKI_EDITOR ? _constants.EXTERNAL_EVENT.CREATE_WIKI_PAGE : _constants.EXTERNAL_EVENT.CREATE_SDOC_FILE;
-    let external_props = {};
-    if (dispatchEventKey === _constants.EXTERNAL_EVENT.CREATE_SDOC_FILE) {
-      external_props = {
-        insertSdocFileLink: _helpers.insertSdocFileLink,
-        editor
-      };
-    }
-    eventBus.dispatch(dispatchEventKey, {
-      newFileName: newFileName.trim(),
+    const createName = newFileName.trim() || t('Create_a_new_sdoc_file');
+    const external_props = {
+      insertSdocFileLink: _helpers.insertSdocFileLink,
+      editor
+    };
+    console.log(1, createName, external_props);
+    // debugger;
+    eventBus.dispatch(_constants.EXTERNAL_EVENT.CREATE_SDOC_FILE, {
+      newFileName: createName,
       ...external_props
     });
   }, [editor, element, newFileName]);
   const createFileTipDefault = (0, _react.useMemo)(() => {
-    return editor.editorType === _constants2.WIKI_EDITOR ? 'New_page' : 'Create_a_new_sdoc_file';
-  }, [editor.editorType]);
+    console.log(444);
+    return 'Create_a_new_sdoc_file';
+  }, []);
   const createFileName = (0, _react.useMemo)(() => {
-    return editor.editorType === _constants2.WIKI_EDITOR ? newFileName : `${newFileName}.sdoc`;
-  }, [editor.editorType, newFileName]);
+    return `${newFileName}.sdoc`;
+  }, [newFileName]);
   return /*#__PURE__*/_react.default.createElement("div", {
+    ref: fileLinkInsertRef,
     className: "sdoc-history-files-content popover",
     style: {
       ...position,
@@ -249,9 +249,11 @@ const FileLinkInsertDialog = _ref => {
       onClick: () => {
         onSelect(item);
       }
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      className: "sdocfont sdoc-document"
-    }), /*#__PURE__*/_react.default.createElement("span", null, item.name));
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "file-item-icon sdocfont sdoc-document"
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "file-item-name"
+    }, item.name));
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-history-files-item",
     onClick: onShowMore

package/dist/basic-sdk/extension/commons/file-insert-dialog/style.css

@@ -3,7 +3,8 @@
   flex-direction: column;
   position: absolute;
   width: 400px;
-  max-height: 300px;
+  max-width: 400px;
+  max-height: 350px;
   /* The same as hierarchy of comment drawer  */
   z-index: 103;
   box-shadow: 0 1px 3px rgba(0, 0, 0, .15), 0 4px 8px 3px rgba(0, 0, 0, .15);
@@ -35,17 +36,28 @@
 }
 
 .sdoc-history-files-content .sdoc-history-files .sdoc-history-files-item {
-  padding: 0px 16px;
+  padding: 6px 16px;
   height: 32px;
-  line-height: 32px;
-  text-overflow: ellipsis;
   font-size: 14px;
-  white-space: nowrap;
+  display: flex;
+  align-items: flex-start;
 }
 
-.sdoc-history-files-content .sdoc-history-files .sdoc-history-files-item :first-child {
-  font-size: 12px;
-  margin-right: 5px;
+.sdoc-history-files-content .sdoc-history-files .sdoc-history-files-item .file-item-icon {
+  font-size: 16px;
+  margin-right: 8px;
+  color: #ff9800;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.sdoc-history-files-content .sdoc-history-files .sdoc-history-files-item .file-item-name {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 .sdoc-history-files-content .sdoc-history-files .sdoc-history-files-item:hover {

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

@@ -17,9 +17,11 @@ var _constants2 = require("../../constants");
 var _helpers = require("../../plugins/image/helpers");
 var _helpers2 = require("../../plugins/video/helpers");
 var _context = _interopRequireDefault(require("../../../../context.js"));
-var _index2 = _interopRequireDefault(require("../file-insert-dialog/index.js"));
-var _index3 = _interopRequireDefault(require("../../../../components/toast/index.js"));
-var _index4 = require("../../plugins/video/constants/index.js");
+var _index2 = _interopRequireDefault(require("../wiki-file-insert-dialog/index.js"));
+var _index3 = _interopRequireDefault(require("../file-insert-dialog/index.js"));
+var _index4 = _interopRequireDefault(require("../../../../components/toast/index.js"));
+var _index5 = require("../../plugins/video/constants/index.js");
+var _constants3 = require("../../../../basic-sdk/constants");
 const InsertElementDialog = _ref => {
   let {
     editor
@@ -49,7 +51,7 @@ const InsertElementDialog = _ref => {
   }, [validEditor, uploadLocalImageInputRef, insertPosition, slateNode]);
   const handleDisplayAlert = (0, _react.useCallback)(() => {
     setTimeout(() => {
-      _index3.default.warning(`${t('The_current_version_does_not_support_>5MB_video_file')}`, {
+      _index4.default.warning(`${t('The_current_version_does_not_support_>5MB_video_file')}`, {
         duration: 3
       });
     }, 0);
@@ -57,7 +59,7 @@ const InsertElementDialog = _ref => {
   const onVideoFileChanged = (0, _react.useCallback)(event => {
     const files = event.target.files;
     // Show warning for 3s and no further insertion if video file is more than 5MB
-    if (files[0].size > _index4.VIDEO_MAX_SIZE_5MB) {
+    if (files[0].size > _index5.VIDEO_MAX_SIZE_5MB) {
       handleDisplayAlert();
       event.target.value = null;
       return;
@@ -194,7 +196,14 @@ const InsertElementDialog = _ref => {
       }
     case _constants2.ELEMENT_TYPE.FILE_LINK_INSET_INPUT_TEMP:
       {
-        return /*#__PURE__*/_react.default.createElement(_index2.default, {
+        if (editor.editorType === _constants3.WIKI_EDITOR) {
+          return /*#__PURE__*/_react.default.createElement(_index2.default, {
+            element: slateNode,
+            editor: editor,
+            closeDialog: closeDialog
+          });
+        }
+        return /*#__PURE__*/_react.default.createElement(_index3.default, {
           element: slateNode,
           editor: editor,
           closeDialog: closeDialog

package/dist/basic-sdk/extension/commons/select-file-dialog/index.css

@@ -18,3 +18,71 @@
   background-color: #FF8000;
   border-color: #FF8000;
 }
+
+.modal-header-container {
+  display: flex;
+  position: relative;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 60px;
+  padding: 10px;
+}
+
+.modal-title-container {
+  flex: 1;
+  text-align: center;
+}
+
+.search-container {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  right: 40px;
+  top: 55%;
+  transform: translateY(-50%);
+  gap: 8px;
+}
+
+.sdoc-files-search-popover{
+  font-size: 14px;
+  padding: 1.5px 5px;
+}
+
+.sdoc-files-search-popover:hover{
+  background-color: #F2F2F2;
+  border-radius: 2px;
+}
+
+.sdoc-files-search-popover-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 200px;
+  margin-right: 10px;
+}
+
+.sdoc-search-wrapper{
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 40px;
+}
+
+.sdoc-search-input{
+  flex: 1;
+  padding: 0 25px;
+}
+
+.sdoc-files-search-popover-container .sdoc-search{
+  position: absolute;
+  left: 6px;
+  font-size: 14px;
+}
+
+.sdoc-files-search-popover-container .sdoc-close{
+  position: absolute;
+  right: 10px;
+  font-size: 10px;
+}

package/dist/basic-sdk/extension/commons/select-file-dialog/index.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
 var _reactI18next = require("react-i18next");
 var _context = _interopRequireDefault(require("../../../../context"));
 var _localFiles = _interopRequireDefault(require("./local-files"));
@@ -27,6 +28,9 @@ const SelectSdocFileDialog = _ref => {
     t
   } = (0, _reactI18next.useTranslation)();
   const [currentSelectedFile, setCurrentSelectedFile] = (0, _react.useState)(null);
+  const [temSearchContent, setTemSearchContent] = (0, _react.useState)('');
+  const [searchContent, setSearchContent] = (0, _react.useState)('');
+  const [isOpenSearch, setIsOpenSearch] = (0, _react.useState)(false);
   const onSelectedFile = (0, _react.useCallback)(fileInfo => {
     setCurrentSelectedFile(fileInfo);
   }, []);
@@ -70,6 +74,36 @@ const SelectSdocFileDialog = _ref => {
     closeDialog();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentSelectedFile]);
+  const toggleSearch = (0, _react.useCallback)(() => {
+    setIsOpenSearch(prev => !prev);
+  }, []);
+  const handleSearchInputChange = (0, _react.useCallback)(e => {
+    const keyword = e.target.value.toLowerCase();
+    setTemSearchContent(keyword);
+  }, []);
+  const executeSearch = (0, _react.useCallback)(() => {
+    if (!temSearchContent.trim()) {
+      setSearchContent('');
+      return;
+    }
+    setSearchContent(temSearchContent);
+  }, [temSearchContent]);
+  const handleInputKeyDown = (0, _react.useCallback)(e => {
+    if ((0, _isHotkey.default)('enter', e)) {
+      e.preventDefault();
+      executeSearch();
+    }
+    if ((0, _isHotkey.default)('escape', e)) {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsOpenSearch(!isOpenSearch);
+    }
+  }, [executeSearch, isOpenSearch]);
+  (0, _react.useEffect)(() => {
+    if (!isOpenSearch) {
+      setSearchContent('');
+    }
+  }, [isOpenSearch]);
   return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
     toggle: closeDialog,
     isOpen: true,
@@ -79,15 +113,42 @@ const SelectSdocFileDialog = _ref => {
     className: "sdoc-file-select-dialog",
     contentClassName: "sdoc-file-select-modal"
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.ModalHeader, {
+    className: "modal-header-container",
     toggle: closeDialog
-  }, t(modalTitle)), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, {
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "modal-title-container"
+  }, t(modalTitle)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "search-container"
+  }, !isOpenSearch && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdocfont sdoc-find-replace sdoc-files-search-popover",
+    onClick: toggleSearch
+  }), isOpenSearch && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-files-search-popover-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-search-wrapper"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdocfont sdoc-find-replace sdoc-search",
+    onClick: executeSearch
+  }), /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+    autoFocus: true,
+    className: "sdoc-search-input",
+    onKeyUp: handleInputKeyDown,
+    onChange: handleSearchInputChange,
+    id: "sdoc-search",
+    placeholder: t('Search')
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdocfont sdoc-sm-close sdoc-close",
+    onClick: toggleSearch
+  }))))), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, {
     className: "p-0"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-file-select-container"
   }, /*#__PURE__*/_react.default.createElement(_localFiles.default, {
     fileType: _constants.FILE_TYPE[dialogType],
     onSelectedFile: onSelectedFile,
-    toggle: closeDialog
+    toggle: closeDialog,
+    searchContent: searchContent,
+    isOpenSearch: isOpenSearch
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-file-select-footer"
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {

package/dist/basic-sdk/extension/commons/select-file-dialog/local-files/index.js

@@ -20,7 +20,9 @@ const LocalFiles = _ref => {
     onSelectedFile,
     toggle,
     fileType,
-    t
+    t,
+    searchContent,
+    isOpenSearch
   } = _ref;
   const folderRef = (0, _react.useRef)(null);
   const [expandedFolder, setExpandedFolder] = (0, _react.useState)(new Set([]));
@@ -64,10 +66,15 @@ const LocalFiles = _ref => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   (0, _react.useEffect)(() => {
-    const rootPath = '/';
-    getTreeData(rootPath);
+    if (searchContent.trim() && isOpenSearch) {
+      getSearchFiles(searchContent, fileType);
+    }
+    if (!isOpenSearch || !searchContent.trim()) {
+      const rootPath = '/';
+      getTreeData(rootPath);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [isOpenSearch, searchContent, isOpenSearch]);
   const onToggle = (0, _react.useCallback)(async (e, item, treeData) => {
     e.stopPropagation();
     if (expandedFolder.has(item.indexId)) {
@@ -88,6 +95,16 @@ const LocalFiles = _ref => {
     onSelectedFile(file);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  const getSearchFiles = (0, _react.useCallback)((searchContent, fileType) => {
+    return _context.default.getSearchFilesByFilename(searchContent, '1', '100', fileType).then(res => {
+      res.data.results.forEach(item => {
+        item.indexId = _slugid.default.nice();
+        item.type = 'file';
+        item.file_uuid = item.doc_uuid;
+      });
+      setTreeData(res.data.results);
+    });
+  }, []);
   const renderFileTree = (0, _react.useCallback)(data => {
     if (!Array.isArray(data) || data.length === 0) return null;
     return data.map(item => {