@seafile/sdoc-editor 0.4.15 → 0.4.17

package/dist/basic-sdk/editor/editable-article.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, Fragment } from 'react';
 import { Editable, ReactEditor, Slate } from '@seafile/slate-react';
-import { Editor } from '@seafile/slate';
+import { Editor, Node, Range } from '@seafile/slate';
 import { renderLeaf, renderElement, ContextToolbar, SideToolbar } from '../extension';
 import { getAboveBlockNode, getNextNode, getPrevNode, isSelectionAtBlockEnd, isSelectionAtBlockStart } from '../extension/core';
 import EventProxy from '../utils/event-handler';
@@ -139,11 +139,16 @@ const EditableArticle = _ref => {
       const {
         selection
       } = editor;
-      const [imageNodeEntry] = Editor.nodes(editor, {
-        match: n => n.type === IMAGE
-      });
-      if (imageNodeEntry) return;
-      const domNode = ReactEditor.toDOMNode(editor, selection.focus.path);
+      if (Range.isCollapsed(selection)) {
+        // Do not scroll into view, when focus on image
+        const [imageNodeEntry] = Editor.nodes(editor, {
+          match: n => n.type === IMAGE,
+          at: selection
+        });
+        if (imageNodeEntry) return;
+      }
+      const focusedNode = Node.get(editor, selection.focus.path);
+      const domNode = ReactEditor.toDOMNode(editor, focusedNode);
       if (!domNode) return;
       domNode.scrollIntoView({
         block: 'nearest'

package/dist/basic-sdk/extension/commons/history-files/index.css

@@ -0,0 +1,65 @@
+.sdoc-history-files-wrapper {
+  position: absolute;
+  z-index: 101;
+  width: 400px;
+  cursor: pointer;
+}
+
+.sdoc-history-files-wrapper .sdoc-history-files-search-input { 
+  border: 0;
+  outline: none;
+  margin-top: -21px;
+  position: absolute;
+  background-color: transparent;
+  padding: 0px;
+  color: #212529;
+  font-size: 14px;
+}
+
+.sdoc-history-files-wrapper .sdoc-history-files-content .sdoc-history-files-header {
+  color: #999999;
+  font-size: 14px;
+  margin-top: 8px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  padding: 0px 16px;
+}
+
+.sdoc-history-files-wrapper .sdoc-history-files-content .sdoc-history-files {
+  max-height: 306px;
+  overflow-y: scroll;
+}
+
+.sdoc-history-files-wrapper .sdoc-history-files-content .sdoc-history-files .sdoc-history-files-item {
+  font-size: 14px;
+  line-height: 32px;
+  height: 32px;
+  padding: 0px 16px;
+  overflow:hidden;
+  text-overflow:ellipsis; 
+  white-space:nowrap; 
+}
+
+.sdoc-history-files-wrapper .sdoc-history-files-content .sdoc-history-files .sdoc-history-files-item :first-child {
+  font-size: 12px;
+  margin-right: 5px;
+}
+
+.sdoc-history-files-wrapper .sdoc-history-files-content .sdoc-history-files .sdoc-history-files-item:hover {
+  background-color: #f5f5f5;
+}
+
+.sdoc-history-files-wrapper .sdoc-history-files-content .sdoc-history-files-add {
+  height: 32px;
+  padding: 0px 16px;
+  border-top: 1px solid #e9ecef;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+}
+
+.sdoc-history-files-wrapper .sdoc-history-files-content .sdoc-history-files-add :first-child {
+  color: #444444;
+  margin-right: 10px;
+}

package/dist/basic-sdk/extension/commons/history-files/index.js

@@ -0,0 +1,156 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React, { useCallback, useEffect, useState, useRef } from 'react';
+import { Editor } from '@seafile/slate';
+import { ReactEditor } from '@seafile/slate-react';
+import { withTranslation } from 'react-i18next';
+import EventBus from '../../../utils/event-bus';
+import { insertSdocFileLink } from '../../plugins/sdoc-link/helpers';
+import { LocalStorage } from '../../../../utils';
+import { INTERNAL_EVENT } from '../../../constants';
+import { EXTERNAL_EVENT } from '../../../../constants';
+import { SDOC_LINK } from '../../constants';
+import './index.css';
+const HistoryFiles = _ref => {
+  let {
+    editor,
+    insertLinkCallback,
+    closeDialog,
+    t
+  } = _ref;
+  const historyFilesRef = useRef();
+  const historyFilesInputRef = useRef();
+  const [files, setFiles] = useState([]);
+  const [position, setPosition] = useState({});
+  const [header, setHeader] = useState(t('Recent_previews'));
+  const [newFileName, setNewFileName] = useState('');
+  const getPosition = useCallback(() => {
+    const {
+      selection
+    } = editor;
+    const nodeEntry = Editor.node(editor, selection);
+    const domNode = ReactEditor.toDOMNode(editor, nodeEntry[0]);
+    if (domNode) {
+      const {
+        top,
+        right
+      } = domNode.getBoundingClientRect();
+      setPosition({
+        left: right + 5,
+        top: top + 20
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onClick = useCallback(e => {
+    if (historyFilesRef.current.contains(e.target)) return;
+    closeDialog();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onScroll = useCallback(e => {
+    getPosition();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const getHistoryFiles = useCallback(e => {
+    const files = LocalStorage.getItem('sdoc-recent-files') || [];
+    setFiles(files);
+  }, []);
+  useEffect(() => {
+    getPosition();
+    getHistoryFiles();
+    setTimeout(() => {
+      historyFilesInputRef.current.focus();
+    }, 0);
+    const sdocScrollContainer = document.getElementById('sdoc-scroll-container');
+    sdocScrollContainer.addEventListener('scroll', onScroll);
+    document.addEventListener('click', onClick);
+    return () => {
+      sdocScrollContainer.removeEventListener('scroll', onScroll);
+      document.removeEventListener('click', onClick);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onSearch = useCallback(e => {
+    let newFiles = LocalStorage.getItem('sdoc-recent-files') || [];
+    if (e.target.value) {
+      newFiles = newFiles.filter(item => item.file_name.includes(e.target.value));
+      if (newFiles.length === 0) {
+        setHeader(t('The_document_does_not_exist'));
+        setNewFileName(e.target.value);
+      } else {
+        setHeader(t('Recent_previews'));
+        setNewFileName('');
+      }
+      setFiles(newFiles);
+      return;
+    }
+    setHeader(t('Recent_previews'));
+    setNewFileName('');
+    setFiles(newFiles);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onSelect = useCallback(fileInfo => {
+    const {
+      file_uuid,
+      file_name
+    } = fileInfo;
+    const {
+      insertSdocFileLinkCallback
+    } = insertLinkCallback;
+    insertSdocFileLinkCallback(editor, file_name, file_uuid);
+    closeDialog();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onShowMore = useCallback(() => {
+    const eventBus = EventBus.getInstance();
+    eventBus.dispatch(INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: SDOC_LINK,
+      insertSdocFileLinkCallback: insertSdocFileLink
+    });
+  }, []);
+  const onCreateFile = useCallback(() => {
+    const eventBus = EventBus.getInstance();
+    eventBus.dispatch(EXTERNAL_EVENT.CREATE_SDOC_FILE, {
+      newFileName: newFileName.trim()
+    });
+    closeDialog();
+  }, [closeDialog, newFileName]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: historyFilesRef,
+    className: "sdoc-history-files-wrapper popover",
+    style: _objectSpread({}, position)
+  }, /*#__PURE__*/React.createElement("input", {
+    id: "sdoc-history-files-search-input",
+    className: "sdoc-history-files-search-input",
+    ref: historyFilesInputRef,
+    autoComplete: "off",
+    onChange: onSearch,
+    onCompositionStart: e => {
+      e.stopPropagation();
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-history-files-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-history-files-header"
+  }, header), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-history-files"
+  }, files.map(item => {
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.file_uuid,
+      className: "sdoc-history-files-item",
+      onClick: () => {
+        onSelect(item);
+      }
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "sdocfont sdoc-document"
+    }), /*#__PURE__*/React.createElement("span", null, item.file_name));
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-history-files-item",
+    onClick: onShowMore
+  }, "...", t('More'))), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-history-files-add",
+    onClick: onCreateFile
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-append"
+  }), /*#__PURE__*/React.createElement("span", null, newFileName ? t("Create ".concat(newFileName, ".sdoc")) : t('Create_a_new_sdoc_file')))));
+};
+export default withTranslation('sdoc-editor')(HistoryFiles);

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

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useState, useRef } from 'react';
 import { CustomTableSizeDialog, SplitCellSettingDialog } from '../../plugins/table/dialogs';
 import AddLinkDialog from '../../plugins/link/dialog/add-link-dialog';
 import SelectFileDialog from '../select-file-dialog/index.js';
+import HistoryFiles from '../history-files';
 import EventBus from '../../../utils/event-bus';
 import { INTERNAL_EVENT } from '../../../constants';
 import { ELEMENT_TYPE, INSERT_POSITION, LOCAL_IMAGE } from '../../constants';
@@ -16,6 +17,7 @@ const InsertElementDialog = _ref => {
   const [insertPosition, setInsertPosition] = useState(INSERT_POSITION.CURRENT);
   const [slateNode, setSlateNode] = useState(null);
   const [insertLinkCallback, setInsertLinkCallback] = useState(null);
+  const [isShowHistoryFiles, setIsShowHistoryFiles] = useState(false);
   const uploadLocalImageInputRef = useRef();
   const onFileChanged = useCallback(event => {
     const files = event.target.files;
@@ -42,7 +44,8 @@ const InsertElementDialog = _ref => {
       insertPosition = INSERT_POSITION.CURRENT,
       slateNode,
       insertFileLinkCallback,
-      insertSdocFileLinkCallback
+      insertSdocFileLinkCallback,
+      isShowHistoryFiles
     } = _ref2;
     setInsertPosition(insertPosition);
     setSlateNode(slateNode);
@@ -52,6 +55,7 @@ const InsertElementDialog = _ref => {
       insertSdocFileLinkCallback,
       insertFileLinkCallback
     });
+    setIsShowHistoryFiles(isShowHistoryFiles);
     if (type === LOCAL_IMAGE) {
       setTimeout(() => {
         uploadLocalImageInputRef.current && uploadLocalImageInputRef.current.click();
@@ -64,6 +68,7 @@ const InsertElementDialog = _ref => {
     setElement('');
     setDialogType('');
     setInsertLinkCallback(null);
+    setIsShowHistoryFiles(false);
   }, []);
   const props = {
     insertPosition,
@@ -93,6 +98,9 @@ const InsertElementDialog = _ref => {
           insertLinkCallback,
           closeDialog
         };
+        if (isShowHistoryFiles) {
+          return /*#__PURE__*/React.createElement(HistoryFiles, sdocLinkProps);
+        }
         return /*#__PURE__*/React.createElement(SelectFileDialog, sdocLinkProps);
       }
     case ELEMENT_TYPE.FILE_LINK:

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

@@ -1,44 +1,9 @@
 .sdoc-file-select-dialog {
-  max-width: 620px;
+  max-width: 520px;
 }
 
 .sdoc-file-select-dialog .sdoc-file-select-modal {
-  width: 620px;
-}
-
-.sdoc-file-select-dialog .sdoc-file-select-container {
-  display: flex;
-}
-
-.sdoc-file-select-dialog .sdoc-file-select-left {
-  border-right: 1px solid #e9ecef;
-  width: 150px;
-  padding: 12px 8px;
-}
-
-.sdoc-file-select-dialog .sdoc-file-select-left .sdoc-file-select-nav-item {
-  padding: 5px 0 5px 8px;
-  border-radius: 3px;
-  display: inline-block;
-  cursor: pointer;
-  width: 100%;
-}
-
-.sdoc-file-select-dialog .sdoc-file-select-left .sdoc-file-select-nav-item:hover {
-  background-color: #f5f5f5;
-}
-
-.sdoc-file-select-dialog .sdoc-file-select-container .sdoc-file-select-left .selected-sdoc-file-select-nav-item {
-  background-color: #ff8000;
-  color: #fff;
-}
-
-.sdoc-file-select-dialog .sdoc-file-select-right {
-  height: 440px;
-  width: 468px;
-  display: flex;
-  padding: 0;
-  flex-direction: column;
+  width: 520px;
 }
 
 .sdoc-file-select-dialog .sdoc-file-select-footer {

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

@@ -73,14 +73,6 @@ const SelectSdocFileDialog = _ref => {
     className: "p-0"
   }, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-file-select-container"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-file-select-left"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-file-select-nav"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-file-select-nav-item selected-sdoc-file-select-nav-item"
-  }, t('Local_file')))), /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-file-select-right"
   }, /*#__PURE__*/React.createElement(LocalFiles, {
     fileType: FILE_TYPE[dialogType],
     onSelectedFile: onSelectedFile,
@@ -96,6 +88,6 @@ const SelectSdocFileDialog = _ref => {
     className: "highlight-bg-color",
     disabled: !currentSelectedFile,
     onClick: onSubmit
-  }, t('Confirm')))))));
+  }, t('Confirm'))))));
 };
 export default SelectSdocFileDialog;

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

@@ -1,16 +1,17 @@
 .sdoc-files-tree {
   flex: 1;
-  padding: 16px;
-  overflow: auto;
+  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: 1.5rem;
-  line-height: 1.625;
+  height: 32px;
+  line-height: 32px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -20,8 +21,7 @@
 
 .sdoc-files-tree .sdoc-file-info:hover {
   cursor: pointer;
-  background: #fdefb9;
-  box-shadow: inset 0 0 1px #999;
+  background-color: #f5f5f5;
 }
 
 .sdoc-files-tree .sdoc-file-info .sdoc-file-icon-container {
@@ -37,13 +37,7 @@
 }
 
 .sdoc-files-tree .sdoc-file-info.active {
-  background: #ff8000;
-  box-shadow: inset 0 0 1px #999;
-  color: #fff;
-}
-
-.sdoc-files-tree .sdoc-file-info.active .sdoc-file-icon {
-  color: #fff;
+  background-color: #f5f5f5;
 }
 
 .sdoc-files-tree .sdoc-file-icon-toggle {

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

@@ -75,7 +75,10 @@ const ImageHoverMenu = _ref => {
           centerNode = null,
           afterNode = null;
         let p = path[0];
-        if (!beforeLeaf.every(item => item.text.length === 0)) {
+        if (!beforeLeaf.every(item => {
+          var _item$text;
+          return (item === null || item === void 0 ? void 0 : (_item$text = item.text) === null || _item$text === void 0 ? void 0 : _item$text.length) === 0;
+        })) {
           beforeNode = generateEmptyElement(PARAGRAPH);
           beforeNode.children = beforeLeaf;
           Transforms.insertNodes(editor, beforeNode, {
@@ -90,8 +93,8 @@ const ImageHoverMenu = _ref => {
         });
         p = p + 1;
         if (!afterLeaf.every(item => {
-          var _item$text;
-          return (item === null || item === void 0 ? void 0 : (_item$text = item.text) === null || _item$text === void 0 ? void 0 : _item$text.length) === 0;
+          var _item$text2;
+          return (item === null || item === void 0 ? void 0 : (_item$text2 = item.text) === null || _item$text2 === void 0 ? void 0 : _item$text2.length) === 0;
         })) {
           afterNode = generateEmptyElement(PARAGRAPH);
           afterNode.children = afterLeaf;

package/dist/basic-sdk/extension/plugins/sdoc-link/helpers.js

@@ -4,8 +4,9 @@ import { Editor, Transforms, Range, Text } from '@seafile/slate';
 import slugid from 'slugid';
 import copy from 'copy-to-clipboard';
 import context from '../../../../context';
-import { SDOC_LINK, LINK, INSERT_FILE_DISPLAY_TYPE, CODE_BLOCK, CODE_LINE, PARAGRAPH } from '../../constants';
 import { focusEditor, getNodeType, getSelectedElems } from '../../core';
+import { LocalStorage } from '../../../../utils';
+import { SDOC_LINK, LINK, INSERT_FILE_DISPLAY_TYPE, CODE_BLOCK, CODE_LINE, PARAGRAPH } from '../../constants';
 export const isMenuDisabled = (editor, readonly) => {
   if (readonly) return true;
   if (editor.selection == null) return true;
@@ -55,12 +56,11 @@ export const insertSdocFileLink = (editor, text, uuid) => {
 
   // Remove shortcut symbol,if trigger by shortcut
   removeShortCutSymbol(editor);
+  const sdocFileNode = generateSdocFileNode(uuid, text);
   if (isCollapsed) {
     // Insert Spaces before and after sdoclinks for easy operation
     editor.insertText(' ');
-    const sdocFileNode = generateSdocFileNode(uuid, text);
     Transforms.insertNodes(editor, sdocFileNode);
-
     // Not being able to use insertText directly causes the added Spaces to be added to the linked text, as in the issue above, replaced by insertFragment
     editor.insertFragment([{
       id: slugid.nice(),
@@ -71,11 +71,9 @@ export const insertSdocFileLink = (editor, text, uuid) => {
     if (selectedText !== text) {
       // If the selected text is different from the typed text, delete the text and insert the link
       editor.deleteFragment();
-      const sdocFileNode = generateSdocFileNode(uuid, text);
       Transforms.insertNodes(editor, sdocFileNode);
     } else {
       // If the selected text is the same as the entered text, only the link can be wrapped
-      const sdocFileNode = generateSdocFileNode(uuid, text);
       Transforms.wrapNodes(editor, sdocFileNode, {
         split: true
       });

package/dist/basic-sdk/extension/plugins/sdoc-link/plugin.js

@@ -55,7 +55,8 @@ const withSdocLink = editor => {
     if (isTriggeredByShortCut(newEditor)) {
       eventBus.dispatch(INTERNAL_EVENT.INSERT_ELEMENT, {
         type: ELEMENT_TYPE.SDOC_LINK,
-        insertSdocFileLinkCallback: insertSdocFileLink
+        insertSdocFileLinkCallback: insertSdocFileLink,
+        isShowHistoryFiles: true
       });
     }
     return onHotKeyDown && onHotKeyDown(event);

package/dist/constants/index.js

@@ -16,7 +16,8 @@ export const EXTERNAL_EVENT = {
   REMOVE_DOCUMENT_ERROR: 'remove_document_error',
   NEW_NOTIFICATION: 'new_notification',
   PARTICIPANT_ADDED: 'participant-added',
-  PARTICIPANT_REMOVED: 'participant-removed'
+  PARTICIPANT_REMOVED: 'participant-removed',
+  CREATE_SDOC_FILE: 'create_sdoc_file'
 };
 export const TIP_TYPE = {
   DELETE_NO_CHANGES_REVISION: 'delete_no_changes_revision',

package/package.json

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

package/public/locales/en/sdoc-editor.json

@@ -440,5 +440,9 @@
   "Replace_all": "Replace all",
   "Are_you_sure_to_replace_all_number_xxx_in_this_document_with_yyy": "Are you sure to replace all {{number}} '{{originalWord}}' in this document with '{{replacedWord}}'?",
   "Are_you_sure_to_clear_all_number_xxx_in_this_document": "Are you sure to clear all {{number}} '{{originalWord}}' in this document?",
-  "Search_not_found": "Not found"
+  "Search_not_found": "Not found",
+  "Recent_previews": "Recent previews",
+  "The_document_does_not_exist": "The document does not exist",
+  "Create_a_new_sdoc_file": "Create a new sdoc file",
+  "Create": "Create"
 }

package/public/locales/zh_CN/sdoc-editor.json

@@ -440,5 +440,9 @@
   "Replace_all": "替换全部",
   "Are_you_sure_to_replace_all_number_xxx_in_this_document_with_yyy": "确定要将此文档内的 {{number}} 处 \"{{originalWord}} \" 替换为 \"{{replacedWord}} \" 吗？",
   "Are_you_sure_to_clear_all_number_xxx_in_this_document": "确定将此文档内的 {{number}} 处 \"{{originalWord}}\" 全部清除吗?",
-  "Search_not_found": "未找到"
+  "Search_not_found": "未找到",
+  "Recent_previews": "最近浏览",
+  "The_document_does_not_exist": "不存在该文档",
+  "Create_a_new_sdoc_file": "新建sdoc文件",
+  "Create": "新建"
 }