@seafile/sdoc-editor 2.0.81 → 2.0.83

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

@@ -0,0 +1,213 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+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");
+var SelectSdocFileDialog = function SelectSdocFileDialog(_ref) {
+  var editor = _ref.editor,
+    dialogType = _ref.dialogType,
+    closeDialog = _ref.closeDialog,
+    insertLinkCallback = _ref.insertLinkCallback,
+    insertVideoCallback = _ref.insertVideoCallback;
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    currentSelectedFile = _useState2[0],
+    setCurrentSelectedFile = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    temSearchContent = _useState4[0],
+    setTemSearchContent = _useState4[1];
+  var _useState5 = (0, _react.useState)(''),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    searchContent = _useState6[0],
+    setSearchContent = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    isOpenSearch = _useState8[0],
+    setIsOpenSearch = _useState8[1];
+  var 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;
+  }
+  var onSelectedFile = (0, _react.useCallback)(function (fileInfo) {
+    setCurrentSelectedFile(fileInfo);
+  }, []);
+  var insertFile = (0, _react.useCallback)(function (fileInfo) {
+    var _ref2 = insertLinkCallback || {},
+      insertFileLinkCallback = _ref2.insertFileLinkCallback,
+      insertSdocFileLinkCallback = _ref2.insertSdocFileLinkCallback;
+    var _ref3 = insertVideoCallback || {},
+      insertVideo = _ref3.insertVideo;
+    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:
+        var repoID = _context["default"].getSetting('repoID');
+        var fileServerRoot = _context["default"].getSetting('fileServerRoot');
+        // Get seafile's video download url as src
+        var url = "".concat(fileServerRoot, "repos/").concat(repoID, "/files").concat(fileInfo.path, "/?op=download");
+        var encodedUrl = encodeURI(url);
+        insertVideo && insertVideo(editor, [{
+          name: fileInfo.name
+        }], [encodedUrl]);
+        break;
+      default:
+        break;
+    }
+  }, [insertLinkCallback, insertVideoCallback, dialogType, editor]);
+  var onSubmit = (0, _react.useCallback)(function () {
+    if (!currentSelectedFile) return;
+    var file_uuid = currentSelectedFile.file_uuid;
+    var fileInfo = (0, _objectSpread2["default"])({}, 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(function (res) {
+        if (res.status === 200) {
+          fileInfo = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, currentSelectedFile), {}, {
+            file_uuid: res.data.file_uuid
+          });
+        }
+        insertFile(fileInfo);
+        closeDialog();
+      })["catch"](function (error) {
+        var errorMessage = (0, _commonUtils.getErrorMsg)(error);
+        _toast["default"].danger(errorMessage);
+      });
+      return;
+    }
+    insertFile(fileInfo);
+    closeDialog();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentSelectedFile]);
+  var toggleSearch = (0, _react.useCallback)(function () {
+    setIsOpenSearch(function (prev) {
+      return !prev;
+    });
+  }, []);
+  var handleSearchInputChange = (0, _react.useCallback)(function (e) {
+    var keyword = e.target.value.toLowerCase();
+    setTemSearchContent(keyword);
+  }, []);
+  var executeSearch = (0, _react.useCallback)(function () {
+    if (!temSearchContent.trim()) {
+      setSearchContent('');
+      return;
+    }
+    setSearchContent(temSearchContent);
+  }, [temSearchContent]);
+  var handleInputKeyDown = (0, _react.useCallback)(function (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)(function () {
+    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/extension/commons/select-file-dialog/local-files/index.js

@@ -0,0 +1,228 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+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 _context2 = _interopRequireDefault(require("../../../../context"));
+var _commonUtils = require("../../../../utils/common-utils");
+var _helpers = require("../helpers");
+require("./index.css");
+var LocalFiles = function LocalFiles(_ref) {
+  var onSelectedFile = _ref.onSelectedFile,
+    toggle = _ref.toggle,
+    fileType = _ref.fileType,
+    t = _ref.t,
+    searchContent = _ref.searchContent,
+    isOpenSearch = _ref.isOpenSearch;
+  var folderRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(new Set([])),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    expandedFolder = _useState2[0],
+    setExpandedFolder = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    currentActiveItem = _useState4[0],
+    setCurrentActiveItem = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    treeData = _useState6[0],
+    setTreeData = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    hasSearchResult = _useState8[0],
+    setHasSearchResult = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
+    isCurrentLibrary = _useState0[0],
+    setIsCurrentLibrary = _useState0[1];
+  var collapsedFolder = (0, _react.useCallback)(function (data, indexId) {
+    for (var 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((0, _toConsumableArray2["default"])(data));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var getTreeData = (0, _react.useCallback)(function (p, indexId, treeData) {
+    return _context2["default"].getSdocLocalFiles(p, fileType).then(function (res) {
+      res.data.forEach(function (item) {
+        item.indexId = _slugid["default"].nice();
+      });
+      setHasSearchResult(false);
+      setIsCurrentLibrary(true);
+      // Open folder
+      if (indexId && treeData.length > 0) {
+        var newFileListData = (0, _helpers.addDataToTree)(treeData, indexId, res.data, p);
+        setTreeData((0, _toConsumableArray2["default"])(newFileListData));
+        return;
+      }
+      // First loads
+      res.data.forEach(function (item) {
+        item.path = "/".concat(item.name);
+      });
+      setTreeData(res.data);
+    })["catch"](function (error) {
+      toggle();
+      var errorMessage = (0, _commonUtils.getErrorMsg)(error);
+      _toast["default"].danger(errorMessage);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (searchContent.trim() && isOpenSearch) {
+      getSearchFiles(searchContent, fileType);
+    }
+    if (!isOpenSearch || !searchContent.trim()) {
+      var rootPath = '/';
+      getTreeData(rootPath);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpenSearch, searchContent, isOpenSearch]);
+  var onToggle = (0, _react.useCallback)(/*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee(e, item, treeData) {
+      return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            e.stopPropagation();
+            if (!expandedFolder.has(item.indexId)) {
+              _context.next = 6;
+              break;
+            }
+            collapsedFolder(treeData, item.indexId);
+            expandedFolder["delete"](item.indexId);
+            _context.next = 9;
+            break;
+          case 6:
+            _context.next = 8;
+            return getTreeData(item.path, item.indexId, treeData);
+          case 8:
+            expandedFolder.add(item.indexId);
+          case 9:
+            onSelectedFile(null);
+            setCurrentActiveItem(item);
+            setExpandedFolder(new Set(Array.from(expandedFolder)));
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+          case 12:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x, _x2, _x3) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [expandedFolder]);
+  var onSelectFile = (0, _react.useCallback)(function (e, file) {
+    e.stopPropagation();
+    setCurrentActiveItem(file);
+    onSelectedFile(file);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var getSearchFiles = (0, _react.useCallback)(function (searchContent, fileType) {
+    return _context2["default"].getSearchFilesByFilename(searchContent, 1, 100, fileType).then(function (res) {
+      res.data.results.forEach(function (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);
+    });
+  }, []);
+  var renderFileTree = (0, _react.useCallback)(function (data) {
+    if (!Array.isArray(data) || data.length === 0) return null;
+    return data.map(function (item) {
+      var _item$fullpath, _item$children, _item$children2;
+      if (!item) return null;
+      var type = item.type,
+        indexId = item.indexId,
+        name = item.name;
+      // Get file type icon
+      var fileTypeIcon = (0, _helpers.parcelFileTypeIcon)(name);
+      var result = (_item$fullpath = item.fullpath) === null || _item$fullpath === void 0 ? void 0 : _item$fullpath.split('/').filter(Boolean);
+      item.fullpath && result.pop();
+      var folderPath = item.fullpath && result.join('/');
+      var 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: function onClick(e) {
+          return 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"
+      }, "(".concat(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: function 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);