@seafile/comment-editor 0.0.1-alpha.0

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

@@ -0,0 +1,207 @@
+"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 _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _toast = _interopRequireDefault(require("../../../components/toast"));
+var _context = _interopRequireDefault(require("../../../context"));
+var _commonUtils = require("../../../utils/common-utils");
+var _constants = require("../../constants");
+var _localFiles = _interopRequireDefault(require("./local-files"));
+require("./index.css");
+const SelectSdocFileDialog = _ref => {
+  let {
+    editor,
+    dialogType,
+    closeDialog,
+    insertLinkCallback,
+    insertVideoCallback
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  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);
+  let modalTitle;
+  switch (dialogType) {
+    case _constants.ELEMENT_TYPE.FILE_LINK:
+      modalTitle = 'Select_file';
+      break;
+    case _constants.ELEMENT_TYPE.SDOC_LINK:
+      modalTitle = 'Select_sdoc_document';
+      break;
+    case _constants.ELEMENT_TYPE.VIDEO:
+      modalTitle = 'Select_video_file';
+      break;
+    default:
+      break;
+  }
+  const onSelectedFile = (0, _react.useCallback)(fileInfo => {
+    setCurrentSelectedFile(fileInfo);
+  }, []);
+  const insertFile = (0, _react.useCallback)(fileInfo => {
+    const {
+      insertFileLinkCallback,
+      insertSdocFileLinkCallback
+    } = insertLinkCallback || {};
+    const {
+      insertVideo
+    } = insertVideoCallback || {};
+    switch (dialogType) {
+      case _constants.ELEMENT_TYPE.FILE_LINK:
+        insertFileLinkCallback && insertFileLinkCallback(editor, fileInfo.name, fileInfo.file_uuid);
+        break;
+      case _constants.ELEMENT_TYPE.SDOC_LINK:
+        insertSdocFileLinkCallback && insertSdocFileLinkCallback(editor, fileInfo.name, fileInfo.file_uuid);
+        break;
+      case _constants.ELEMENT_TYPE.VIDEO:
+        const repoID = _context.default.getSetting('repoID');
+        const fileServerRoot = _context.default.getSetting('fileServerRoot');
+        // Get seafile's video download url as src
+        const url = `${fileServerRoot}repos/${repoID}/files${fileInfo.path}/?op=download`;
+        const encodedUrl = encodeURI(url);
+        insertVideo && insertVideo(editor, [{
+          name: fileInfo.name
+        }], [encodedUrl]);
+        break;
+      default:
+        break;
+    }
+  }, [insertLinkCallback, insertVideoCallback, dialogType, editor]);
+  const onSubmit = (0, _react.useCallback)(() => {
+    if (!currentSelectedFile) return;
+    const {
+      file_uuid
+    } = currentSelectedFile;
+    let fileInfo = {
+      ...currentSelectedFile
+    };
+
+    // Insert video element in sdoc
+    if (dialogType === _constants.ELEMENT_TYPE.VIDEO) {
+      insertFile(fileInfo);
+      closeDialog();
+      return;
+    }
+
+    // File has no id
+    if (!file_uuid || file_uuid === '') {
+      _context.default.getSdocLocalFileId(currentSelectedFile.path).then(res => {
+        if (res.status === 200) {
+          fileInfo = {
+            ...currentSelectedFile,
+            file_uuid: res.data.file_uuid
+          };
+        }
+        insertFile(fileInfo);
+        closeDialog();
+      }).catch(error => {
+        const errorMessage = (0, _commonUtils.getErrorMsg)(error);
+        _toast.default.danger(errorMessage);
+      });
+      return;
+    }
+    insertFile(fileInfo);
+    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, {
+    isOpen: true,
+    autoFocus: false,
+    zIndex: 1071,
+    returnFocusAfterClose: false,
+    className: "sdoc-file-select-dialog",
+    contentClassName: "sdoc-file-select-modal"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "modal-header-container"
+  }, /*#__PURE__*/_react.default.createElement("h5", {
+    className: "modal-title-container"
+  }, t(modalTitle)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "search-container"
+  }, !isOpenSearch && /*#__PURE__*/_react.default.createElement("div", {
+    className: "search-icon-container"
+  }, /*#__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"
+  }), /*#__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-close1 sdoc-close",
+    onClick: toggleSearch
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdocfont sdoc-close1 sdoc-close-dialog",
+    onClick: closeDialog
+  })), /*#__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,
+    searchContent: searchContent,
+    isOpenSearch: isOpenSearch
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-file-select-footer"
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+    color: "secondary",
+    className: "mr-2",
+    onClick: closeDialog
+  }, t('Cancel')), /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+    color: "primary",
+    className: "highlight-bg-color",
+    disabled: !currentSelectedFile,
+    onClick: onSubmit
+  }, t('Confirm'))))));
+};
+var _default = exports.default = SelectSdocFileDialog;

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

@@ -0,0 +1,114 @@
+.sdoc-files-tree {
+  flex: 1;
+  padding: 8px 16px;
+  width: 100%;
+  height: 400px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.sdoc-files-tree .sdoc-file-info {
+  border-radius: 2px;
+  height: 32px;
+  line-height: 32px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: relative;
+  padding-left: 2.8rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.sdoc-files-tree .sdoc-file-info:hover {
+  cursor: pointer;
+  background-color: #f5f5f5;
+}
+
+.sdoc-files-tree .sdoc-file-info .sdoc-file-icon-container {
+  display: flex;
+  align-items: center;
+  width: 2.8rem;
+  height: 100%;
+  padding-left: 1.5rem;
+  position: absolute;
+  left: 0;
+}
+
+.sdoc-file-icon-container .video-file-img,
+.sdoc-file-icon-container .sdoc-file-img {
+  position: absolute;
+  width: 21.6px;
+  right: 1px;
+}
+
+.sdoc-files-tree .sdoc-file-info .sdoc-file-icon {
+  color: #9aa0ac;
+}
+
+.sdoc-files-tree .sdoc-file-info.active {
+  background-color: #f5f5f5;
+}
+
+.sdoc-files-tree .sdoc-file-icon-toggle {
+  height: 1.5rem;
+  width: 1.5rem;
+  line-height: 1.5rem !important;
+  font-size: 12px !important;
+  transform: scale(.8);
+  text-align: center;
+  position: absolute;
+  left: 0;
+}
+
+.sdoc-files-tree .sdoc-file-info.expanded .sdoc-file-icon-toggle {
+  transform: rotate(90deg) scale(.8);
+}
+
+.sdoc-files-tree .sdoc-file-info .sdoc-file-name {
+  font-size: 14px;
+}
+
+.sdoc-files-tree .sdoc-folder-children {
+  padding-left: 20px;
+}
+
+.sdoc-files-tree .sdoc-folder-children-empty {
+  color: #999;
+  padding: 4px 20px;
+}
+
+.sdoc-files-tree .sdoc-file-info .sdoc-search-folder-name {
+  font-size: 14px;
+  color: #7d7d7d;
+}
+
+.sdoc-folder-container.sdoc-folder-search-results .sdoc-file-info {
+  height: 59px;
+  width: 486px;
+  padding: 10px 50px;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sdoc-folder-container.sdoc-folder-search-results .sdoc-file-info .sdoc-file-icon-container .sdoc-file-img {
+  width: 36px;
+  height: 36px;
+}
+
+.sdoc-folder-container.sdoc-folder-search-results .sdoc-file-name,
+.sdoc-search-folder-name {
+  height: 19.5px;
+  display: flex;
+  align-items: center;
+}
+
+.sdoc-files-tree .sdoc-file-search-no-result {
+  display: flex;
+  justify-content: center;
+}

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

@@ -0,0 +1,191 @@
+"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 _reactI18next = require("react-i18next");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _slugid = _interopRequireDefault(require("slugid"));
+var _toast = _interopRequireDefault(require("../../../../components/toast"));
+var _context = _interopRequireDefault(require("../../../../context"));
+var _commonUtils = require("../../../../utils/common-utils");
+var _helpers = require("../helpers");
+require("./index.css");
+const LocalFiles = _ref => {
+  let {
+    onSelectedFile,
+    toggle,
+    fileType,
+    t,
+    searchContent,
+    isOpenSearch
+  } = _ref;
+  const folderRef = (0, _react.useRef)(null);
+  const [expandedFolder, setExpandedFolder] = (0, _react.useState)(new Set([]));
+  const [currentActiveItem, setCurrentActiveItem] = (0, _react.useState)(null);
+  const [treeData, setTreeData] = (0, _react.useState)([]);
+  const [hasSearchResult, setHasSearchResult] = (0, _react.useState)(false);
+  const [isCurrentLibrary, setIsCurrentLibrary] = (0, _react.useState)(false);
+  const collapsedFolder = (0, _react.useCallback)((data, indexId) => {
+    for (let i = 0; i < data.length; i++) {
+      var _data$i;
+      if (data[i].indexId === indexId) {
+        data[i].children = null;
+        break;
+      }
+      if ((_data$i = data[i]) !== null && _data$i !== void 0 && _data$i.children) {
+        collapsedFolder(data[i].children, indexId);
+      }
+    }
+    setTreeData([...data]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const getTreeData = (0, _react.useCallback)((p, indexId, treeData) => {
+    return _context.default.getSdocLocalFiles(p, fileType).then(res => {
+      res.data.forEach(item => {
+        item.indexId = _slugid.default.nice();
+      });
+      setHasSearchResult(false);
+      setIsCurrentLibrary(true);
+      // Open folder
+      if (indexId && treeData.length > 0) {
+        const newFileListData = (0, _helpers.addDataToTree)(treeData, indexId, res.data, p);
+        setTreeData([...newFileListData]);
+        return;
+      }
+      // First loads
+      res.data.forEach(item => {
+        item.path = `/${item.name}`;
+      });
+      setTreeData(res.data);
+    }).catch(error => {
+      toggle();
+      const errorMessage = (0, _commonUtils.getErrorMsg)(error);
+      _toast.default.danger(errorMessage);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(() => {
+    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)) {
+      collapsedFolder(treeData, item.indexId);
+      expandedFolder.delete(item.indexId);
+    } else {
+      await getTreeData(item.path, item.indexId, treeData);
+      expandedFolder.add(item.indexId);
+    }
+    onSelectedFile(null);
+    setCurrentActiveItem(item);
+    setExpandedFolder(new Set(Array.from(expandedFolder)));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [expandedFolder]);
+  const onSelectFile = (0, _react.useCallback)((e, file) => {
+    e.stopPropagation();
+    setCurrentActiveItem(file);
+    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;
+      });
+      if (res.data.results.length === 0) {
+        setHasSearchResult(false);
+      } else {
+        setHasSearchResult(true);
+      }
+      setIsCurrentLibrary(false);
+      setTreeData(res.data.results);
+    });
+  }, []);
+  const renderFileTree = (0, _react.useCallback)(data => {
+    if (!Array.isArray(data) || data.length === 0) return null;
+    return data.map(item => {
+      var _item$fullpath, _item$children, _item$children2;
+      if (!item) return null;
+      const {
+        type,
+        indexId,
+        name
+      } = item;
+      // Get file type icon
+      const fileTypeIcon = (0, _helpers.parcelFileTypeIcon)(name);
+      const result = (_item$fullpath = item.fullpath) === null || _item$fullpath === void 0 ? void 0 : _item$fullpath.split('/').filter(Boolean);
+      item.fullpath && result.pop();
+      const folderPath = item.fullpath && result.join('/');
+      const selected = (currentActiveItem === null || currentActiveItem === void 0 ? void 0 : currentActiveItem.indexId) === indexId;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: indexId,
+        className: (0, _classnames.default)('sdoc-folder-container', {
+          'sdoc-folder-search-results': hasSearchResult === true
+        })
+      }, type === 'dir' && /*#__PURE__*/_react.default.createElement("div", {
+        ref: folderRef,
+        className: "sdoc-folder"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)('sdoc-folder-info sdoc-file-info', {
+          'active': selected,
+          'expanded': expandedFolder.has(indexId)
+        }),
+        onClick: e => onToggle(e, item, treeData)
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "sdoc-file-icon-container"
+      }, /*#__PURE__*/_react.default.createElement("i", {
+        className: "sdoc-file-icon sdoc-file-icon-toggle sdocfont sdoc-right-slide"
+      }), /*#__PURE__*/_react.default.createElement("i", {
+        className: "sdoc-file-icon sdocfont sdoc-file sdoc-folder-icon"
+      })), /*#__PURE__*/_react.default.createElement("span", {
+        className: "sdoc-folder-name sdoc-file-name"
+      }, name)), /*#__PURE__*/_react.default.createElement("div", {
+        className: "sdoc-folder-children"
+      }, ((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) === 0 && /*#__PURE__*/_react.default.createElement("div", {
+        className: "sdoc-folder-children-empty"
+      }, `(${t('Empty')})`), ((_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length) > 0 && renderFileTree(item.children))), ['file', 'video'].includes(type) && /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)('sdoc-file-info', {
+          'active': selected
+        }),
+        onClick: e => {
+          onSelectFile(e, item);
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "sdoc-file-icon-container"
+      }, /*#__PURE__*/_react.default.createElement("i", {
+        className: (0, _classnames.default)('sdoc-file-icon', {
+          'sdocfont sdoc-link-file': !fileTypeIcon
+        })
+      }), fileTypeIcon && /*#__PURE__*/_react.default.createElement("img", {
+        className: "sdoc-file-img",
+        src: fileTypeIcon,
+        alt: ""
+      })), /*#__PURE__*/_react.default.createElement("span", {
+        className: "sdoc-file-name"
+      }, name), item.fullpath && folderPath.length !== 0 && /*#__PURE__*/_react.default.createElement("span", {
+        className: "sdoc-search-folder-name"
+      }, folderPath)));
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [treeData, currentActiveItem, expandedFolder]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-files-tree"
+  }, renderFileTree(treeData), isOpenSearch && !hasSearchResult && !isCurrentLibrary && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-file-search-no-result"
+  }, t('No_results')));
+};
+var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(LocalFiles);