@seafile/sdoc-editor 0.5.41 → 0.5.42

package/dist/basic-sdk/constants/index.js

@@ -24,7 +24,8 @@ export const INTERNAL_EVENT = {
   TABLE_SHOW_DRAG_HANDLER: 'table_show_drag_handler',
   TABLE_HIDE_DRAG_HANDLER: 'table_show_drag_handler',
   ON_PRINT: 'on_print',
-  COMMENT_EDITOR_POST_COMMENT: 'comment_editor_post_comment'
+  COMMENT_EDITOR_POST_COMMENT: 'comment_editor_post_comment',
+  CLOSE_FILE_INSET_DIALOG: 'close_file_insert_dialog'
 };
 export const REVISION_DIFF_KEY = 'diff';
 export const REVISION_DIFF_VALUE = '1';

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

@@ -85,7 +85,8 @@ const CommentArticle = _ref => {
     onCompositionStart: eventProxy.onCompositionStart,
     onCompositionUpdate: eventProxy.onCompositionUpdate,
     onCompositionEnd: eventProxy.onCompositionEnd,
-    onKeyDown: onKeyDown
+    onKeyDown: onKeyDown,
+    onBeforeInput: eventProxy.onBeforeInput
   }));
 };
 export default CommentArticle;

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

@@ -178,6 +178,7 @@ const EditableArticle = _ref => {
     decorate: decorate,
     onCut: eventProxy.onCut,
     onCopy: eventProxy.onCopy,
+    onCompositionStart: eventProxy.onCompositionStart,
     id: "sdoc-editor"
   })), /*#__PURE__*/React.createElement(SideToolbar, null), isShowComment && /*#__PURE__*/React.createElement(CommentWrapper, {
     editor: editor,

package/dist/basic-sdk/extension/commons/{history-files → file-insert-dialog}/index.js

@@ -1,33 +1,42 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React, { useCallback, useEffect, useState, useRef } from 'react';
-import { Editor } from '@seafile/slate';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { ReactEditor } from '@seafile/slate-react';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
+import { Editor } from '@seafile/slate';
 import classNames from 'classnames';
-import debounce from 'lodash.debounce';
-import toaster from '../../../../components/toast';
-import EventBus from '../../../utils/event-bus';
 import context from '../../../../context';
-import { focusEditor } from '../../core';
-import { insertSdocFileLink } from '../../plugins/sdoc-link/helpers';
 import { LocalStorage, isEnglish } from '../../../../utils';
-import { INTERNAL_EVENT } from '../../../constants';
 import { EXTERNAL_EVENT } from '../../../../constants';
+import EventBus from '../../../utils/event-bus';
+import { INTERNAL_EVENT } from '../../../constants';
 import { SDOC_LINK } from '../../constants';
-import './index.css';
-const HistoryFiles = _ref => {
+import toaster from '../../../../components/toast';
+import { insertSdocFileLink, insertTextWhenRemoveFileNameCollector, removeTempInput } from '../../plugins/sdoc-link/helpers';
+import './style.css';
+const FileLinkInsertDialog = _ref => {
   let {
     editor,
-    insertLinkCallback,
-    closeDialog,
-    t
+    element,
+    closeDialog
   } = _ref;
-  const historyFilesRef = useRef();
-  const historyFilesInputRef = useRef();
+  const eventBus = EventBus.getInstance();
+  const historyFileWrapperRef = useRef(document.querySelector('.sdoc-history-files-wrapper'));
   const [files, setFiles] = useState([]);
-  const [position, setPosition] = useState({});
-  const [header, setHeader] = useState(t('Recent_visited'));
+  const [position, setPosition] = useState({
+    top: 0,
+    left: 0
+  });
   const [newFileName, setNewFileName] = useState('');
+  const {
+    t
+  } = useTranslation();
+  const [header, setHeader] = useState(t('Recent_visited'));
+  const deleteInputAndInsertText = useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return insertTextWhenRemoveFileNameCollector(editor, element, ...args);
+  }, [editor, element]);
   const getPosition = useCallback(() => {
     const {
       selection
@@ -35,80 +44,95 @@ const HistoryFiles = _ref => {
     const nodeEntry = Editor.node(editor, selection);
     const domNode = ReactEditor.toDOMNode(editor, nodeEntry[0]);
     if (domNode) {
+      const topGap = 20;
+      const leftGap = 5;
       const {
         top,
-        right
+        left
       } = 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);
+      // Insert gap between the popover and the selected node
+      const popoverBottomY = top + popoverHeight + topGap;
+      const viewportHeight = window.innerHeight;
+      if (popoverBottomY > viewportHeight) {
+        // 8px for the gap between the popover and the bottom of the viewport
+        const counterTopGap = 8;
+        popoverTop = top - popoverHeight - counterTopGap;
+      }
       setPosition({
-        left: right + 5,
-        top: top + 20
+        top: popoverTop,
+        left: popoverLeft
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [files]);
   const onClick = useCallback(e => {
-    if (historyFilesRef.current.contains(e.target)) return;
+    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;
+    deleteInputAndInsertText();
     closeDialog();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [closeDialog, deleteInputAndInsertText]);
   const onScroll = useCallback(e => {
     getPosition();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [getPosition]);
   const getHistoryFiles = useCallback(e => {
     const files = LocalStorage.getItem('sdoc-recent-files') || [];
     setFiles(files);
   }, []);
-  const onInsertLink = useCallback(params => {
+  useEffect(() => {
+    getHistoryFiles();
+  }, [getHistoryFiles]);
+  const onKeydown = useCallback(e => {
     const {
-      insertSdocFileLinkCallback
-    } = insertLinkCallback;
-    insertSdocFileLinkCallback(editor, params.data.obj_name, params.data.doc_uuid);
-    closeDialog();
-  }, [closeDialog, editor, insertLinkCallback]);
+      key
+    } = e;
+    switch (key) {
+      case 'Escape':
+        deleteInputAndInsertText();
+        closeDialog();
+        break;
+      case 'ArrowRight':
+      case 'ArrowLeft':
+        deleteInputAndInsertText();
+        closeDialog();
+        break;
+      case 'ArrowUp':
+      case 'ArrowDown':
+        deleteInputAndInsertText();
+        closeDialog();
+        break;
+      default:
+        break;
+    }
+  }, [closeDialog, deleteInputAndInsertText]);
+  const onInsertLink = useCallback(params => {
+    insertSdocFileLink(editor, params.data.obj_name, params.data.doc_uuid);
+    removeTempInput();
+  }, [editor]);
   useEffect(() => {
     getPosition();
-    getHistoryFiles();
-    setTimeout(() => {
-      historyFilesInputRef.current.focus();
-    }, 0);
     const sdocScrollContainer = document.getElementById('sdoc-scroll-container');
+    document.addEventListener('click', onClick);
+    document.addEventListener('keydown', onKeydown);
     sdocScrollContainer.addEventListener('scroll', onScroll);
-    const eventBus = EventBus.getInstance();
     const unsubscribeInsertLink = eventBus.subscribe(EXTERNAL_EVENT.INSERT_LINK, onInsertLink);
-    document.addEventListener('click', onClick);
+    const unsubscribeCloseDialog = eventBus.subscribe(INTERNAL_EVENT.CLOSE_FILE_INSET_DIALOG, closeDialog);
     return () => {
       sdocScrollContainer.removeEventListener('scroll', onScroll);
-      unsubscribeInsertLink();
       document.removeEventListener('click', onClick);
+      document.removeEventListener('keydown', onKeydown);
+      unsubscribeInsertLink();
+      unsubscribeCloseDialog();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const onKeydown = useCallback(e => {
-    const {
-      key,
-      target
-    } = e;
-    if (key === 'Backspace' && !target.selectionStart && !target.selectionEnd && !target.value) {
-      focusEditor(editor);
-      closeDialog();
-    }
-  }, [closeDialog, editor]);
-  const onCompositionStart = e => {
-    e.stopPropagation();
-    historyFilesInputRef.current.typing = true;
-  };
-  const onCompositionEnd = e => {
-    e.stopPropagation();
-    historyFilesInputRef.current.typing = false;
-    onSearch(e);
-  };
-  const onSearch = useCallback(async e => {
-    // Ignore when entering Chinese
-    if (historyFilesInputRef.current.typing) return;
-
+  }, [closeDialog, editor, eventBus, files, getPosition, onClick, onInsertLink, onKeydown, onScroll]);
+  const onSearch = useCallback(async searchText => {
     // Show history files when search is empty
-    if (e.target.value.trim().length === 0) {
+    if (searchText.trim().length === 0) {
       setHeader(t('Recent_visited'));
       setNewFileName('');
       getHistoryFiles();
@@ -116,20 +140,20 @@ const HistoryFiles = _ref => {
     }
 
     // Cannot be found if the search is less than three characters.
-    if (isEnglish(e.target.value.trim()) && e.target.value.length < 3) {
+    if (isEnglish(searchText.trim()) && searchText.length < 3) {
       setFiles([]);
-      setHeader(t('The_document_does_not_exist'));
-      setNewFileName(e.target.value);
+      setHeader(t('Enter_more_character_start_search'));
+      setNewFileName(searchText);
       return;
     }
     try {
       var _res$data;
-      const res = await context.searchSdocFiles(e.target.value, 1, 10);
+      const res = await context.searchSdocFiles(searchText, 1, 10);
       if (res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.results) {
         let newFiles = res.data.results;
         if (newFiles.length === 0) {
           setHeader(t('The_document_does_not_exist'));
-          setNewFileName(e.target.value);
+          setNewFileName(searchText);
         } else {
           setHeader('');
           setNewFileName('');
@@ -142,25 +166,27 @@ const HistoryFiles = _ref => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  useEffect(() => {
+    if (!(element === null || element === void 0 ? void 0 : element.children)) return;
+    const searchText = element.children[0].text;
+    onSearch(searchText);
+  }, [element, onSearch]);
   const onSelect = useCallback(fileInfo => {
     const {
       doc_uuid,
       name
     } = fileInfo;
-    const {
-      insertSdocFileLinkCallback
-    } = insertLinkCallback;
-    insertSdocFileLinkCallback(editor, name, doc_uuid);
+    removeTempInput(editor, element);
     closeDialog();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    insertSdocFileLink(editor, name, doc_uuid);
+  }, [closeDialog, editor, element]);
   const onShowMore = useCallback(() => {
-    const eventBus = EventBus.getInstance();
     eventBus.dispatch(INTERNAL_EVENT.INSERT_ELEMENT, {
       type: SDOC_LINK,
       insertSdocFileLinkCallback: insertSdocFileLink
     });
-  }, []);
+    removeTempInput(editor, element);
+  }, [editor, element, eventBus]);
   const onCreateFile = useCallback(() => {
     const eventBus = EventBus.getInstance();
     eventBus.dispatch(EXTERNAL_EVENT.CREATE_SDOC_FILE, {
@@ -168,20 +194,10 @@ const HistoryFiles = _ref => {
     });
   }, [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: debounce(onSearch, 200),
-    onCompositionStart: onCompositionStart,
-    onCompositionEnd: onCompositionEnd,
-    onKeyDown: onKeydown
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-history-files-content"
+    className: "sdoc-history-files-content popover",
+    style: _objectSpread(_objectSpread({}, position), {}, {
+      position: 'absolute'
+    })
   }, header.length !== 0 && /*#__PURE__*/React.createElement("div", {
     className: "sdoc-history-files-header"
   }, header), /*#__PURE__*/React.createElement("div", {
@@ -206,6 +222,10 @@ const HistoryFiles = _ref => {
     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')))));
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "new-file-name"
+  }, newFileName ? t('Create_file_name_sdoc', {
+    file_name_sdoc: "".concat(newFileName, ".sdoc")
+  }) : t('Create_a_new_sdoc_file'))));
 };
-export default withTranslation('sdoc-editor')(HistoryFiles);
+export default FileLinkInsertDialog;

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

@@ -0,0 +1,76 @@
+.sdoc-history-files-content {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  width: 400px;
+  max-height: 300px;
+  /* 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);
+}
+
+.sdoc-history-files-content .sdoc-history-files-header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  margin-top: 8px;
+  padding: 0px 16px;
+  height: 32px;
+  width: 100%;
+  color: #999999;
+  font-size: 14px;
+  user-select: none;
+  cursor: default;
+}
+
+.sdoc-history-files-content .sdoc-history-files {
+  flex-grow: 1;
+  overflow-y: auto;
+  cursor: pointer;
+}
+
+.sdoc-history-files-content .no-header {
+  margin-top: 8px;
+  width: 100%;
+}
+
+.sdoc-history-files-content .sdoc-history-files .sdoc-history-files-item {
+  padding: 0px 16px;
+  height: 32px;
+  line-height: 32px;
+  text-overflow: ellipsis;
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.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:hover {
+  background-color: #f5f5f5;
+}
+
+.sdoc-history-files-content .sdoc-history-files-add {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  padding: 0px 16px;
+  height: 32px;
+  width: 100%;
+  border-top: 1px solid #e9ecef;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.sdoc-history-files-content .sdoc-history-files-add :first-child {
+  color: #444444;
+  margin-right: 10px;
+}
+
+.sdoc-history-files-content .sdoc-history-files-add .new-file-name {
+  text-wrap: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}

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

@@ -2,12 +2,12 @@ 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';
 import { insertImage } from '../../plugins/image/helpers';
 import context from '../../../../context.js';
+import FileLinkInsertDialog from '../file-insert-dialog/index.js';
 const InsertElementDialog = _ref => {
   let {
     editor
@@ -17,7 +17,6 @@ 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 [validEditor, setValidEditor] = useState(editor);
   const uploadLocalImageInputRef = useRef();
   const onFileChanged = useCallback(event => {
@@ -46,7 +45,6 @@ const InsertElementDialog = _ref => {
       slateNode,
       insertFileLinkCallback,
       insertSdocFileLinkCallback,
-      isShowHistoryFiles,
       editor: paramEditor
     } = _ref2;
     setInsertPosition(insertPosition);
@@ -57,7 +55,6 @@ const InsertElementDialog = _ref => {
       insertSdocFileLinkCallback,
       insertFileLinkCallback
     });
-    setIsShowHistoryFiles(isShowHistoryFiles);
     // Apply for comment editor, as it has a different editor instance
     setValidEditor(paramEditor || editor);
     if (type === LOCAL_IMAGE) {
@@ -72,7 +69,6 @@ const InsertElementDialog = _ref => {
     setElement('');
     setDialogType('');
     setInsertLinkCallback(null);
-    setIsShowHistoryFiles(false);
     setValidEditor(null);
   }, []);
   const props = {
@@ -103,9 +99,6 @@ const InsertElementDialog = _ref => {
           insertLinkCallback,
           closeDialog
         };
-        if (isShowHistoryFiles) {
-          return /*#__PURE__*/React.createElement(HistoryFiles, sdocLinkProps);
-        }
         return /*#__PURE__*/React.createElement(SelectFileDialog, sdocLinkProps);
       }
     case ELEMENT_TYPE.FILE_LINK:
@@ -132,6 +125,14 @@ const InsertElementDialog = _ref => {
           onChange: onFileChanged
         });
       }
+    case ELEMENT_TYPE.FILE_LINK_INSET_INPUT_TEMP:
+      {
+        return /*#__PURE__*/React.createElement(FileLinkInsertDialog, {
+          element: slateNode,
+          editor: editor,
+          closeDialog: closeDialog
+        });
+      }
     default:
       {
         return null;

package/dist/basic-sdk/extension/commons/menu-shortcut-indicator/style.css

@@ -5,16 +5,14 @@
   margin-right: 1px;
   padding: 1px 3px;
   min-width: 12px;
-  border-style: solid;
-  border-color: rgba(0, 0, 0, 0.1);
-  border-radius: 3px;
-  border-width: 1px 1px 2px;
+  border: none;
   font: inherit;
   text-align: center;
-  color: rgb(51, 51, 51);
-  background-color: rgba(255, 255, 255, 0.25);
+  color: #999;
+  background-color: transparent;
 }
 
-.sdoc-shortcut-prompt-container:last-child {
+.sdoc-shortcut-prompt-container kbd:last-child {
   margin-right: 0px;
+  padding-right: 0px;
 }

package/dist/basic-sdk/extension/constants/element-type.js

@@ -26,6 +26,7 @@ export const IMAGE_BLOCK = 'image_block';
 export const CALL_OUT = 'callout';
 export const MENTION = 'mention';
 export const MENTION_TEMP = 'mention_temp';
+export const FILE_LINK_INSET_INPUT_TEMP = 'file_link_insert_input_temp';
 
 // font
 export const FONT_SIZE = 'font-size';

package/dist/basic-sdk/extension/constants/index.js

@@ -1,7 +1,7 @@
 // extension plugin
 import * as ELEMENT_TYPE from './element-type';
 // eslint-disable-next-line no-duplicate-imports
-import { BLOCKQUOTE, TITLE, SUBTITLE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, CHECK_LIST_ITEM, CODE_BLOCK, CODE_LINE, TABLE, TABLE_CELL, TABLE_ROW, LINK, SDOC_LINK, FILE_LINK, IMAGE, IMAGE_BLOCK, TOP_LEVEL_TYPES, INLINE_LEVEL_TYPES, CALL_OUT, MENTION, MENTION_TEMP } from './element-type';
+import { BLOCKQUOTE, TITLE, SUBTITLE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, CHECK_LIST_ITEM, CODE_BLOCK, CODE_LINE, TABLE, TABLE_CELL, TABLE_ROW, LINK, SDOC_LINK, FILE_LINK, IMAGE, IMAGE_BLOCK, TOP_LEVEL_TYPES, INLINE_LEVEL_TYPES, CALL_OUT, MENTION, MENTION_TEMP, FILE_LINK_INSET_INPUT_TEMP } from './element-type';
 export { DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_LIST, DEFAULT_FONT_COLOR, RECENT_USED_HIGHLIGHT_COLORS_KEY, RECENT_USED_FONT_COLORS_KEY, RECENT_USED_TABLE_CELL_BACKGROUND_COLORS_KEY, DEFAULT_LAST_USED_FONT_COLOR, DEFAULT_LAST_USED_HIGHLIGHT_COLOR, DEFAULT_LAST_USED_TABLE_CELL_BACKGROUND_COLOR } from './color';
 export { FONT_SIZE, DEFAULT_FONT, FONT, GOOGLE_FONT_CLASS, RECENT_USED_FONTS_KEY, SDOC_FONT_SIZE } from './font';
 export { DIFF_TYPE, ADDED_STYLE, DELETED_STYLE } from './diff-view';
@@ -57,4 +57,4 @@ export const MOUSE_ENTER_EVENT_DISABLED_MAP = {
   [CALL_OUT]: [CALL_OUT]
 };
 export const ROOT_ELEMENT_TYPES = [PARAGRAPH, TITLE, SUBTITLE, CHECK_LIST_ITEM, ORDERED_LIST, UNORDERED_LIST, BLOCKQUOTE, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, CALL_OUT, TABLE];
-export { ELEMENT_TYPE, BLOCKQUOTE, TITLE, SUBTITLE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, CHECK_LIST_ITEM, CODE_BLOCK, CODE_LINE, TABLE, TABLE_CELL, TABLE_ROW, LINK, SDOC_LINK, FILE_LINK, IMAGE, IMAGE_BLOCK, TOP_LEVEL_TYPES, INLINE_LEVEL_TYPES, CALL_OUT, MENTION, MENTION_TEMP };
+export { ELEMENT_TYPE, BLOCKQUOTE, TITLE, SUBTITLE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, CHECK_LIST_ITEM, CODE_BLOCK, CODE_LINE, TABLE, TABLE_CELL, TABLE_ROW, LINK, SDOC_LINK, FILE_LINK, IMAGE, IMAGE_BLOCK, TOP_LEVEL_TYPES, INLINE_LEVEL_TYPES, CALL_OUT, MENTION, MENTION_TEMP, FILE_LINK_INSET_INPUT_TEMP };

package/dist/basic-sdk/extension/plugins/code-block/hover-menu/index.css

@@ -101,6 +101,15 @@
   font-size: 14px;
 }
 
+.langs-list-empty {
+  padding: 10px;
+  width: 100%;
+  font-size: 13px;
+  text-align: center;
+  line-height: 30px;
+  vertical-align: middle;
+}
+
 .sdoc-langs-list-container .langs-list-ul {
   list-style: none;
   overflow-y: auto;

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

@@ -1,12 +1,43 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Input } from 'reactstrap';
-import { withTranslation } from 'react-i18next';
+import { useTranslation, withTranslation } from 'react-i18next';
 import Tooltip from '../../../../../components/tooltip';
 import { ElementPopover } from '../../../commons/';
 import { genCodeLangs } from '../prismjs';
 import { getSelectedLangOption } from '../helpers';
 import './index.css';
-const CodeBlockHoverMenu = _ref => {
+const LangList = _ref => {
+  let {
+    langsData,
+    onSelectLang,
+    selectedLanguageText
+  } = _ref;
+  const {
+    t
+  } = useTranslation();
+  if (!langsData.length) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "langs-list-empty"
+    }, /*#__PURE__*/React.createElement("span", null, t('Search_not_found')));
+  }
+  return /*#__PURE__*/React.createElement("ul", {
+    className: "langs-list-ul"
+  }, langsData.map(item => {
+    return /*#__PURE__*/React.createElement("li", {
+      className: "langs-list-li ".concat(selectedLanguageText === item.text ? 'active' : ''),
+      id: item.value,
+      key: item.value,
+      onClick: () => {
+        onSelectLang(item);
+      }
+    }, item.text, /*#__PURE__*/React.createElement("span", {
+      className: "li-check-mark ".concat(selectedLanguageText === item.text ? 'li-checked' : '')
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "sdocfont sdoc-check-mark icon-font"
+    })));
+  }));
+};
+const CodeBlockHoverMenu = _ref2 => {
   let {
     style,
     language,
@@ -16,7 +47,7 @@ const CodeBlockHoverMenu = _ref => {
     onCopyCodeBlock,
     onDeleteCodeBlock,
     t
-  } = _ref;
+  } = _ref2;
   const {
     white_space = 'nowrap'
   } = style;
@@ -74,15 +105,12 @@ const CodeBlockHoverMenu = _ref => {
   }, [language]);
   const onChange = useCallback(e => {
     const filterData = [];
-    const restData = [];
     genCodeLangs().forEach(item => {
       if (item.value.startsWith(e.currentTarget.value.toLowerCase())) {
         filterData.push(item);
-      } else {
-        restData.push(item);
       }
     });
-    setLangsData([...filterData, ...restData]);
+    setLangsData(filterData);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React.createElement(ElementPopover, null, /*#__PURE__*/React.createElement("div", {
@@ -150,21 +178,10 @@ const CodeBlockHoverMenu = _ref => {
   }, /*#__PURE__*/React.createElement(Input, {
     placeholder: t('Search_language'),
     onChange: onChange
-  })), /*#__PURE__*/React.createElement("ul", {
-    className: "langs-list-ul"
-  }, langsData.map(item => {
-    return /*#__PURE__*/React.createElement("li", {
-      className: "langs-list-li ".concat(selectedLanguageText === item.text ? 'active' : ''),
-      id: item.value,
-      key: item.value,
-      onClick: () => {
-        onSelectLang(item);
-      }
-    }, item.text, /*#__PURE__*/React.createElement("span", {
-      className: "li-check-mark ".concat(selectedLanguageText === item.text ? 'li-checked' : '')
-    }, /*#__PURE__*/React.createElement("i", {
-      className: "sdocfont sdoc-check-mark icon-font"
-    })));
-  }))))));
+  })), /*#__PURE__*/React.createElement(LangList, {
+    langsData: langsData,
+    onSelectLang: onSelectLang,
+    selectedLanguageText: selectedLanguageText
+  })))));
 };
 export default withTranslation('sdoc-editor')(CodeBlockHoverMenu);

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

@@ -1,11 +1,11 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { ReactEditor } from '@seafile/slate-react';
-import { Editor, Transforms, Range, Text } from '@seafile/slate';
+import { Editor, Transforms, Range, Text, Path, Node } from '@seafile/slate';
 import slugid from 'slugid';
 import copy from 'copy-to-clipboard';
 import context from '../../../../context';
-import { focusEditor, getNodeType, getSelectedElems } from '../../core';
-import { SDOC_LINK, LINK, INSERT_FILE_DISPLAY_TYPE, CODE_BLOCK, CODE_LINE, PARAGRAPH } from '../../constants';
+import { focusEditor, generateEmptyElement, getNodeType, getSelectedElems } from '../../core';
+import { SDOC_LINK, LINK, INSERT_FILE_DISPLAY_TYPE, CODE_BLOCK, CODE_LINE, PARAGRAPH, FILE_LINK_INSET_INPUT_TEMP } from '../../constants';
 export const isMenuDisabled = (editor, readonly) => {
   if (readonly) return true;
   if (editor.selection == null) return true;
@@ -149,17 +149,13 @@ export const getBeforeText = editor => {
     range
   };
 };
-export const isTriggeredByShortCut = editor => {
-  const {
-    selection
-  } = editor;
-  const {
-    anchor
-  } = selection;
+export const isTriggeredByShortcut = editor => {
   const {
     beforeText
   } = getBeforeText(editor);
-  return beforeText.slice(-1) === '[' && Editor.isEnd(editor, anchor, anchor.path);
+  const fileSearchInput = getFileSearchInputEntry(editor);
+  if (fileSearchInput) return false;
+  return beforeText.endsWith('[');
 };
 
 // If insert operation is triggered by shortcut, remove the '[[' symbol
@@ -172,8 +168,8 @@ export const removeShortCutSymbol = editor => {
     beforeText,
     range: beforeRange
   } = getBeforeText(editor);
-  const isTrrigeredByShortCut = beforeText.slice(-2) === '[[';
-  isTrrigeredByShortCut && Transforms.delete(editor, {
+  const isTriggeredByShortCut = beforeText.slice(-2) === '[[';
+  isTriggeredByShortCut && Transforms.delete(editor, {
     at: {
       anchor: {
         path: beforeRange.focus.path,
@@ -184,4 +180,57 @@ export const removeShortCutSymbol = editor => {
     voids: true
   });
   focusEditor(editor);
+};
+
+// Generate temp input for collecting file name
+const generateFileLinkInput = () => {
+  const input = generateEmptyElement(FILE_LINK_INSET_INPUT_TEMP);
+  return input;
+};
+
+// Insert temp input collecting file name
+export const insertTempInput = editor => {
+  const {
+    selection
+  } = editor;
+  if (!Range.isCollapsed(selection)) return;
+  const tempInput = generateFileLinkInput();
+  const insertPoint = Editor.start(editor, selection);
+  Transforms.insertNodes(editor, tempInput, {
+    at: insertPoint
+  });
+  const path = Editor.path(editor, insertPoint);
+  const insertPath = Path.next(path);
+  const focusPoint = insertPath.concat(0);
+  focusEditor(editor, focusPoint);
+};
+
+// Remove temp input collecting file name
+export const removeTempInput = (editor, element) => {
+  const path = ReactEditor.findPath(editor, element);
+  Transforms.delete(editor, {
+    at: path
+  });
+};
+export const getFileSearchInputEntry = editor => {
+  const [searchInputNodeEntry] = Editor.nodes(editor, {
+    match: n => n.type === FILE_LINK_INSET_INPUT_TEMP
+  });
+  return searchInputNodeEntry;
+};
+
+// Insert text when remove file name collector, such as inserting 'filename' into prevNode when close collector entered '[[filename'
+export const insertTextWhenRemoveFileNameCollector = (editor, searchInputNode) => {
+  const inputNodePath = ReactEditor.findPath(editor, searchInputNode);
+  if (!inputNodePath) return;
+  const prevNodeEntry = Editor.previous(editor, {
+    at: inputNodePath
+  });
+  if (!prevNodeEntry) return;
+  const searchContent = Node.string(searchInputNode);
+  const insertPoint = Editor.end(editor, prevNodeEntry[1]);
+  Transforms.insertText(editor, searchContent, {
+    at: insertPoint
+  });
+  removeTempInput(editor, searchInputNode);
 };

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

@@ -1,11 +1,12 @@
 import { SDOC_LINK } from '../../constants';
 import SdocLinkMenu from './menu';
 import withSdocLink from './plugin';
-import renderSdocLink from './render-elem';
+import renderSdocLink from './render/render-elem';
+import renderFileLinkTempInput from './render/render-file-link-temp-input';
 const SdocLinkPlugin = {
   type: SDOC_LINK,
   editorMenus: [SdocLinkMenu],
   editorPlugin: withSdocLink,
-  renderElements: [renderSdocLink]
+  renderElements: [renderSdocLink, renderFileLinkTempInput]
 };
 export default SdocLinkPlugin;

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

@@ -1,13 +1,14 @@
 import { Transforms, Node, Editor } from '@seafile/slate';
-import { ELEMENT_TYPE, SDOC_LINK } from '../../constants';
-import EventBus from '../../../utils/event-bus';
-import { INTERNAL_EVENT } from '../../../constants';
-import { insertSdocFileLink, isTriggeredByShortCut } from './helpers';
+import { ReactEditor } from '@seafile/slate-react';
+import { FILE_LINK_INSET_INPUT_TEMP, SDOC_LINK } from '../../constants';
+import { getFileSearchInputEntry, insertTempInput, isTriggeredByShortcut } from './helpers';
+import { getSelectedElems } from '../../core';
 const withSdocLink = editor => {
   const {
     isInline,
     deleteBackward,
-    onHotKeyDown
+    insertText,
+    onCompositionStart
   } = editor;
   const newEditor = editor;
 
@@ -16,9 +17,8 @@ const withSdocLink = editor => {
     const {
       type
     } = elem;
-    if (type === SDOC_LINK) {
-      return true;
-    }
+    const isInlineElem = [SDOC_LINK, FILE_LINK_INSET_INPUT_TEMP].includes(type);
+    if (isInlineElem) return true;
     return isInline(elem);
   };
   newEditor.deleteBackward = unit => {
@@ -29,13 +29,21 @@ const withSdocLink = editor => {
       return deleteBackward(unit);
     }
 
-    // Delete file link node
+    // Delete file link node when the input is empty
+    const selectedElems = getSelectedElems(newEditor);
+    const fileLinkSearchInputNode = selectedElems.find(elem => elem.type === FILE_LINK_INSET_INPUT_TEMP);
+    if (fileLinkSearchInputNode) {
+      const path = ReactEditor.findPath(editor, fileLinkSearchInputNode);
+      if (Node.string(fileLinkSearchInputNode).length === 0) return Transforms.delete(newEditor, {
+        at: path
+      });
+    }
     const nodeEntry = Editor.node(newEditor, newEditor.selection);
     if (nodeEntry && Node.string(nodeEntry[0]).length === 0) {
       const beforePath = nodeEntry[1];
       beforePath.splice(-1, 1, Math.max(nodeEntry[1].at(-1) - 1, 0));
       const beforeNodeEntry = Editor.node(newEditor, beforePath);
-      if (beforeNodeEntry && beforeNodeEntry[0].type === SDOC_LINK) {
+      if (beforeNodeEntry && [SDOC_LINK, FILE_LINK_INSET_INPUT_TEMP].includes(beforeNodeEntry[0].type)) {
         Transforms.delete(newEditor, {
           at: beforeNodeEntry[1]
         });
@@ -45,21 +53,23 @@ const withSdocLink = editor => {
     }
     return deleteBackward(unit);
   };
-  newEditor.onHotKeyDown = event => {
-    const {
-      key
-    } = event;
-    if (key !== '[') return onHotKeyDown && onHotKeyDown(event);
+  newEditor.insertText = text => {
+    if (text !== '[') return insertText(text);
     // If user press '[[', open file modal
-    const eventBus = EventBus.getInstance();
-    if (isTriggeredByShortCut(newEditor)) {
-      eventBus.dispatch(INTERNAL_EVENT.INSERT_ELEMENT, {
-        type: ELEMENT_TYPE.SDOC_LINK,
-        insertSdocFileLinkCallback: insertSdocFileLink,
-        isShowHistoryFiles: true
-      });
+    if (isTriggeredByShortcut(newEditor)) {
+      insertText(text);
+      insertTempInput(newEditor);
+      return;
+    }
+    return insertText(text);
+  };
+  newEditor.onCompositionStart = event => {
+    const fileSearchInputNodeEntry = getFileSearchInputEntry(newEditor);
+    if (fileSearchInputNodeEntry) {
+      event.preventDefault();
+      return true;
     }
-    return onHotKeyDown && onHotKeyDown(event);
+    return onCompositionStart && onCompositionStart(event);
   };
   return newEditor;
 };

package/dist/basic-sdk/extension/plugins/sdoc-link/{render-elem.css → render/render-elem.css}

@@ -20,7 +20,7 @@
 }
 
 .sdoc-file-card-link .sdoc-file-link-icon :first-child {
- font-size: 24px;
+  font-size: 24px;
 }
 
 .sdoc-file-card-link .sdoc-file-link-icon {
@@ -39,3 +39,7 @@
   text-decoration: none;
   color: #333;
 }
+
+.sdoc-file-name-insert-collector {
+  padding: 0 .25em;
+}

package/dist/basic-sdk/extension/plugins/sdoc-link/{render-elem.js → render/render-elem.js}

@@ -2,12 +2,12 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useCallback, useEffect, useState, useRef } from 'react';
 import { Editor, Range } from '@seafile/slate';
 import { ReactEditor, useReadOnly } from '@seafile/slate-react';
-import { useScrollContext } from '../../../hooks/use-scroll-context';
-import { unwrapLinkNode, getUrl } from './helpers';
-import HoverMenu from './hover-menu';
-import { DELETED_STYLE, ADDED_STYLE } from '../../constants';
-import { SDOC_LINK_TYPE } from './constants';
-import { focusEditor } from '../../core';
+import { useScrollContext } from '../../../../hooks/use-scroll-context';
+import { unwrapLinkNode, getUrl } from '../helpers';
+import HoverMenu from '../hover-menu';
+import { DELETED_STYLE, ADDED_STYLE } from '../../../constants';
+import { SDOC_LINK_TYPE } from '../constants';
+import { focusEditor } from '../../../core';
 import './render-elem.css';
 const SdocFileLink = _ref => {
   let {

package/dist/basic-sdk/extension/plugins/sdoc-link/render/render-file-link-temp-input.js

@@ -0,0 +1,26 @@
+import React, { useEffect } from 'react';
+import EventBus from '../../../../utils/event-bus';
+import { INTERNAL_EVENT } from '../../../../constants';
+import { FILE_LINK_INSET_INPUT_TEMP } from '../../../constants';
+import './render-elem.css';
+const RenderFileLinkTempInput = _ref => {
+  let {
+    element,
+    attributes,
+    children
+  } = _ref;
+  const eventBus = EventBus.getInstance();
+  useEffect(() => {
+    eventBus.dispatch(INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: FILE_LINK_INSET_INPUT_TEMP,
+      slateNode: element
+    });
+    return () => {
+      eventBus.dispatch(INTERNAL_EVENT.CLOSE_FILE_INSET_DIALOG);
+    };
+  }, [element, eventBus]);
+  return /*#__PURE__*/React.createElement("span", Object.assign({}, attributes, {
+    className: "sdoc-file-name-insert-collector"
+  }), children);
+};
+export default RenderFileLinkTempInput;

package/dist/basic-sdk/extension/render/custom-element.js

@@ -1,6 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { useReadOnly, useSlateStatic } from '@seafile/slate-react';
-import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, CODE_LINE, IMAGE, IMAGE_BLOCK, ELEMENT_TYPE, SDOC_LINK, FILE_LINK, TITLE, SUBTITLE, CALL_OUT, SUPPORTED_SIDE_OPERATION_TYPE, MENTION, MENTION_TEMP } from '../constants';
+import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, CODE_LINE, IMAGE, IMAGE_BLOCK, ELEMENT_TYPE, SDOC_LINK, FILE_LINK, TITLE, SUBTITLE, CALL_OUT, SUPPORTED_SIDE_OPERATION_TYPE, MENTION, MENTION_TEMP, FILE_LINK_INSET_INPUT_TEMP } from '../constants';
 import { BlockquotePlugin, LinkPlugin, CheckListPlugin, HeaderPlugin, ListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin, CalloutPlugin, MentionPlugin } from '../plugins';
 import { onDragOver, onDragLeave, onDrop } from '../toolbar/side-toolbar/event';
 import { getParentNode } from '../core';
@@ -134,6 +134,11 @@ const CustomRenderElement = props => {
         const [renderFileLink] = FileLinkPlugin.renderElements;
         return renderFileLink(props, editor);
       }
+    case FILE_LINK_INSET_INPUT_TEMP:
+      {
+        const [, renderFileLinkFileSearchInput] = SdocLinkPlugin.renderElements;
+        return renderFileLinkFileSearchInput(props, editor);
+      }
     case CALL_OUT:
       {
         const [renderCallout] = CalloutPlugin.renderElements;

package/dist/components/doc-operations/more-operations.js

@@ -62,6 +62,7 @@ const MoreOperations = _ref => {
     return printTexts;
   }, []);
   return /*#__PURE__*/React.createElement(Dropdown, {
+    className: "sdoc-operator-folder",
     isOpen: isDropdownOpen,
     toggle: () => toggleDropdown(isDropdownOpen)
   }, /*#__PURE__*/React.createElement(DropdownToggle, {
@@ -72,26 +73,28 @@ const MoreOperations = _ref => {
   })), /*#__PURE__*/React.createElement(DropdownMenu, {
     className: "sdoc-dropdown-menu",
     right: true
-  }, parentFolderURL && /*#__PURE__*/React.createElement(DropdownItem, {
-    className: "sdoc-dropdown-menu-item",
-    tag: "a",
-    href: parentFolderURL
-  }, t('Open_parent_folder')), isPro && isFreezed && /*#__PURE__*/React.createElement(DropdownItem, {
-    className: "sdoc-dropdown-menu-item",
-    onClick: unFreeze
-  }, t('Unfreeze')), /*#__PURE__*/React.createElement(DropdownItem, {
+  }, /*#__PURE__*/React.createElement(DropdownItem, {
     className: "sdoc-dropdown-menu-item",
     onClick: handlePrint
   }, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-dropdown-print-container"
   }, /*#__PURE__*/React.createElement("div", null, t('Print')), /*#__PURE__*/React.createElement(MenuShortcutPrompt, {
     shortcuts: printShortCutTexts
-  }))), isPro && !isFreezed && /*#__PURE__*/React.createElement(DropdownItem, {
+  }))), isPro && isFreezed && /*#__PURE__*/React.createElement(DropdownItem, {
+    className: "sdoc-dropdown-menu-item",
+    onClick: unFreeze
+  }, t('Unfreeze')), isPro && !isFreezed && /*#__PURE__*/React.createElement(DropdownItem, {
     className: "sdoc-dropdown-menu-item",
     onClick: onFreezeDocument
   }, t('Freeze_document')), /*#__PURE__*/React.createElement(DropdownItem, {
     className: "sdoc-dropdown-menu-item",
     onClick: handleClickHistory
-  }, t('Document_history'))));
+  }, t('Document_history')), parentFolderURL && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-operator-folder-divider"
+  }), /*#__PURE__*/React.createElement(DropdownItem, {
+    className: "sdoc-dropdown-menu-item",
+    tag: "a",
+    href: parentFolderURL
+  }, t('Open_parent_folder')))));
 };
 export default withTranslation('sdoc-editor')(MoreOperations);

package/dist/components/doc-operations/style.css

@@ -32,3 +32,18 @@
   align-items: center;
   width: 100%;
 }
+
+.sdoc-operator-folder .sdoc-dropdown-menu {
+  padding: 8px 0;
+}
+
+.sdoc-operator-folder .sdoc-dropdown-menu .sdoc-dropdown-menu-item {
+  padding: 4px 16px;
+}
+
+.sdoc-operator-folder .sdoc-dropdown-menu .sdoc-operator-folder-divider {
+  margin: 8px 0;
+  border-top: 1px solid #e6e9ed;
+  height: 1px;
+  width: 100%;
+}

package/package.json

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

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

@@ -453,5 +453,7 @@
   "Move_row_count": "Moving {{count}} row(s)",
   "Mark_all_as_read": "Mark all as read",
   "Alignment_type": "Alignment",
-  "Print": "Print"
+  "Print": "Print",
+  "Enter_more_character_start_search": "Enter more characters to start search",
+  "Create_file_name_sdoc": "Create {{file_name_sdoc}}"
 }

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

@@ -453,5 +453,7 @@
   "Move_row_count": "移动{{count}}行",
   "Mark_all_as_read": "全部标记为已读",
   "Alignment_type": "对齐方式",
-  "Print": "打印"
+  "Print": "打印",
+  "Enter_more_character_start_search": "输入更多字符开始搜索",
+  "Create_file_name_sdoc": "新建 {{file_name_sdoc}}"
 }

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

@@ -1,70 +0,0 @@
-.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;
-  text-decoration: underline;
-}
-
-.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 .no-header {
-  margin-top: 8px;
-}
-
-.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;
-}