@seafile/sdoc-editor 0.5.61 → 0.5.62

package/dist/basic-sdk/assets/css/sdoc-wiki-viewer.css

@@ -11,7 +11,6 @@
 
 .sdoc-wiki-scroll-container .sdoc-article-container {
   width: 100%;
-  margin: 0 340px 0 40px !important;
 }
 
 .sdoc-wiki-scroll-container .sdoc-article-container .article .sdoc-header-2 {

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

@@ -32,6 +32,7 @@ export const REVISION_DIFF_VALUE = '1';
 export const PAGE_EDIT_AREA_WIDTH = 672; // 672 = 794 - 2[borderLeft + borderRight] - 120[paddingLeft + paddingRight]
 export const COMMENT_EDITOR_EDIT_AREA_WIDTH = 364;
 export const COMMENT_EDITOR = 'comment_editor';
+export const WIKI_EDITOR = 'wiki_editor';
 export const MODIFY_TYPE = {
   ADD: 'add',
   DELETE: 'delete',

package/dist/basic-sdk/editor/sdoc-editor.js

@@ -23,7 +23,10 @@ const SdocEditor = forwardRef((_ref, ref) => {
     editor: propsEditor,
     document,
     isReloading,
-    showComment
+    showComment,
+    isShowHeaderToolbar = true,
+    showOutline = true,
+    isWikiReadOnly
   } = _ref;
   const validEditor = propsEditor || useMemo(() => {
     const defaultEditor = createDefaultEditor();
@@ -147,7 +150,7 @@ const SdocEditor = forwardRef((_ref, ref) => {
     return /*#__PURE__*/React.createElement(EditorContainer, {
       editor: validEditor,
       readonly: isFreezed
-    }, /*#__PURE__*/React.createElement(CollaboratorsProvider, null, /*#__PURE__*/React.createElement(ColorProvider, null, /*#__PURE__*/React.createElement(HeaderToolbar, {
+    }, /*#__PURE__*/React.createElement(CollaboratorsProvider, null, /*#__PURE__*/React.createElement(ColorProvider, null, isShowHeaderToolbar && /*#__PURE__*/React.createElement(HeaderToolbar, {
       editor: validEditor,
       readonly: isFreezed
     }), /*#__PURE__*/React.createElement(EditorContent, {
@@ -164,13 +167,29 @@ const SdocEditor = forwardRef((_ref, ref) => {
   }
   const isShowComment = typeof showComment === 'boolean' ? showComment : true;
   const Provider = isShowComment ? CollaboratorsProvider : Fragment;
+  if (isWikiReadOnly) {
+    return /*#__PURE__*/React.createElement(EditorContainer, {
+      editor: validEditor,
+      readonly: isWikiReadOnly
+    }, /*#__PURE__*/React.createElement(ColorProvider, null, /*#__PURE__*/React.createElement(EditorContent, {
+      docValue: slateValue,
+      showOutline: showOutline !== null && showOutline !== void 0 ? showOutline : true,
+      readonly: isWikiReadOnly,
+      editor: validEditor,
+      showComment: isShowComment
+    }, /*#__PURE__*/React.createElement(ReadOnlyArticle, {
+      editor: validEditor,
+      slateValue: slateValue,
+      showComment: isShowComment
+    }))));
+  }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorContainer, {
     editor: validEditor
-  }, /*#__PURE__*/React.createElement(Provider, null, /*#__PURE__*/React.createElement(ColorProvider, null, /*#__PURE__*/React.createElement(HeaderToolbar, {
+  }, /*#__PURE__*/React.createElement(Provider, null, /*#__PURE__*/React.createElement(ColorProvider, null, isShowHeaderToolbar && /*#__PURE__*/React.createElement(HeaderToolbar, {
     editor: validEditor
   }), /*#__PURE__*/React.createElement(EditorContent, {
     docValue: slateValue,
-    showOutline: true,
+    showOutline: showOutline !== null && showOutline !== void 0 ? showOutline : true,
     editor: validEditor,
     showComment: isShowComment
   }, /*#__PURE__*/React.createElement(EditableArticle, {

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

@@ -27,6 +27,7 @@ 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';
+export const QUICK_INSERT = 'quick_insert';
 
 // 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, FILE_LINK_INSET_INPUT_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, QUICK_INSERT } 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, CODE_BLOCK, IMAGE_BLOCK];
-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 };
+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, QUICK_INSERT };

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

@@ -1,7 +1,7 @@
 import { createEditor } from '@seafile/slate';
 import { withReact } from '@seafile/slate-react';
 import { withHistory } from '@seafile/slate-history';
-import Plugins, { CommentPlugins } from './plugins';
+import Plugins, { CommentPlugins, WikiPlugins } from './plugins';
 import renderElement from './render/render-element';
 import renderLeaf from './render/render-leaf';
 import { HeaderToolbar, ContextToolbar, SideToolbar } from './toolbar';
@@ -23,6 +23,16 @@ export const createDefaultEditor = () => {
   }, withHistory(withReact(createEditor())));
   return defaultEditor;
 };
+export const createWikiEditor = () => {
+  const defaultEditor = WikiPlugins === null || WikiPlugins === void 0 ? void 0 : WikiPlugins.reduce((editor, pluginItem) => {
+    const withPlugin = pluginItem.editorPlugin;
+    if (withPlugin) {
+      return withPlugin(editor);
+    }
+    return editor;
+  }, withHistory(withReact(createEditor())));
+  return defaultEditor;
+};
 export const createCommentEditor = () => {
   const defaultEditor = CommentPlugins === null || CommentPlugins === void 0 ? void 0 : CommentPlugins.reduce((editor, pluginItem) => {
     const withPlugin = pluginItem.editorPlugin;

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

@@ -17,7 +17,9 @@ import ParagraphPlugin from './paragraph';
 import CalloutPlugin from './callout';
 import SearchReplacePlugin from './search-replace';
 import MentionPlugin from './mention';
+import QuickInsertPlugin from './quick-insert';
 const Plugins = [MarkDownPlugin, HtmlPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, TextPlugin, TextAlignPlugin, FontPlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin, CalloutPlugin, SearchReplacePlugin];
+const WikiPlugins = [MarkDownPlugin, HtmlPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, TextPlugin, TextAlignPlugin, FontPlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin, CalloutPlugin, SearchReplacePlugin, QuickInsertPlugin];
 const CommentPlugins = [MarkDownPlugin, HtmlPlugin, ParagraphPlugin, TextPlugin, ListPlugin, ImagePlugin, LinkPlugin, MentionPlugin, BlockquotePlugin];
 export default Plugins;
-export { MarkDownPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, TextPlugin, HtmlPlugin, TextAlignPlugin, FontPlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin, CalloutPlugin, SearchReplacePlugin, MentionPlugin, CommentPlugins };
+export { MarkDownPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, TextPlugin, HtmlPlugin, TextAlignPlugin, FontPlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin, CalloutPlugin, SearchReplacePlugin, MentionPlugin, QuickInsertPlugin, CommentPlugins, WikiPlugins };

package/dist/basic-sdk/extension/plugins/quick-insert/helper.js

@@ -0,0 +1,31 @@
+import { Editor, Node, Transforms } from '@seafile/slate';
+import { QUICK_INSERT } from '../../constants';
+import { generateEmptyElement } from '../../core';
+import { ReactEditor } from '@seafile/slate-react';
+export const getQuickInsertEntity = editor => {
+  const [quickInsertEntity] = Editor.nodes(editor, {
+    match: n => n.type === QUICK_INSERT
+  });
+  return quickInsertEntity;
+};
+export const genQuickInsert = () => {
+  const quickInsert = generateEmptyElement(QUICK_INSERT);
+  return quickInsert;
+};
+export const transformToText = (editor, quickInsertNode) => {
+  const path = ReactEditor.findPath(editor, quickInsertNode);
+  const text = Node.string(quickInsertNode);
+  const [, insertPath] = Editor.next(editor, {
+    at: path
+  });
+  const insertPoint = Editor.start(editor, insertPath);
+  const insertPathRef = Editor.pointRef(editor, insertPoint);
+  const insertText = '/' + text;
+  Transforms.insertText(editor, insertText, {
+    at: insertPoint
+  });
+  Transforms.removeNodes(editor, {
+    at: path
+  });
+  return insertPathRef.unref();
+};

package/dist/basic-sdk/extension/plugins/quick-insert/index.js

@@ -0,0 +1,9 @@
+import { QUICK_INSERT } from '../../constants';
+import renderQuickInsert from './render-elem';
+import withQuickInsert from './plugin';
+const QuickInsertPlugin = {
+  editorPlugin: withQuickInsert,
+  type: QUICK_INSERT,
+  renderElements: [renderQuickInsert]
+};
+export default QuickInsertPlugin;

package/dist/basic-sdk/extension/plugins/quick-insert/plugin/index.js

@@ -0,0 +1,141 @@
+import { Editor, Node, Range, Transforms } from '@seafile/slate';
+import { QUICK_INSERT } from '../../../constants';
+import { getBeforeText } from '../../list/helpers';
+import { genQuickInsert, getQuickInsertEntity, transformToText } from '../helper';
+import { focusEditor } from '../../../core';
+import { KeyCodes } from '../../../../../constants';
+const withQuickInsert = editor => {
+  const {
+    insertText,
+    onHotKeyDown,
+    isInline,
+    deleteBackward,
+    deleteForward
+  } = editor;
+  const newEditor = editor;
+  newEditor.insertText = text => {
+    if (text === '/') {
+      // Avoid triggering quick insert when the cursor is in the quick insert
+      const isInQuickInsert = getQuickInsertEntity(editor);
+      if (isInQuickInsert) return insertText(text);
+      const {
+        beforeText
+      } = getBeforeText(editor);
+      // If the previous text ends with a number, do not trigger the quick insert
+      const isEndWithNumber = beforeText.match(/\d+$/);
+      if (isEndWithNumber) return insertText(text);
+      const quickInsert = genQuickInsert();
+      return Transforms.insertNodes(editor, quickInsert);
+    }
+    return insertText(text);
+  };
+  newEditor.deleteBackward = unit => {
+    const quickInsertEntry = getQuickInsertEntity(editor);
+    if (quickInsertEntry) {
+      const {
+        selection
+      } = editor;
+      if (selection && Range.isCollapsed(selection)) {
+        const [node, path] = quickInsertEntry;
+        const contentString = Node.string(node);
+        if (!contentString) {
+          return Transforms.delete(editor, {
+            at: path
+          });
+        }
+
+        // Transform to text when delete shortcut prefix
+        const isAtStart = Editor.isStart(editor, selection.focus, quickInsertEntry[1]);
+        if (isAtStart) {
+          const [, insertPath] = Editor.next(editor, {
+            at: path
+          });
+          const insertPoint = Editor.start(editor, insertPath);
+          const insertText = Node.string(quickInsertEntry[0]);
+          Transforms.insertText(editor, insertText, {
+            at: insertPoint
+          });
+          Transforms.removeNodes(editor, {
+            at: path
+          });
+          return;
+        }
+      }
+    }
+    return deleteBackward(unit);
+  };
+  newEditor.deleteForward = unit => {
+    const quickInsertEntry = getQuickInsertEntity(editor);
+    if (quickInsertEntry) {
+      const {
+        selection
+      } = editor;
+      const isAtEnd = Editor.isEnd(editor, selection.focus, quickInsertEntry[1]);
+      if (isAtEnd) {
+        deleteForward(unit);
+        focusEditor(editor, Editor.end(newEditor, quickInsertEntry[1]));
+        return;
+      }
+    }
+    return deleteForward(unit);
+  };
+  newEditor.onHotKeyDown = event => {
+    const quickInsertEntry = getQuickInsertEntity(editor);
+    if (quickInsertEntry) {
+      const [quickInsertNode, quickInsertPath] = quickInsertEntry;
+      const {
+        Esc,
+        RightArrow,
+        LeftArrow
+      } = KeyCodes;
+      const {
+        keyCode
+      } = event;
+      if ([RightArrow, LeftArrow].includes(keyCode)) {
+        const {
+          selection
+        } = editor;
+        const focusPoint = selection.focus;
+        if (!selection) return;
+        if (!Range.isCollapsed(selection)) return;
+        if (keyCode === RightArrow) {
+          if (Editor.isEnd(editor, focusPoint, quickInsertPath)) {
+            const insertPoint = transformToText(newEditor, quickInsertNode);
+            focusEditor(newEditor, insertPoint);
+            return;
+          }
+        }
+        if (keyCode === LeftArrow) {
+          if (Editor.isStart(editor, focusPoint, quickInsertPath)) {
+            event.preventDefault();
+            transformToText(newEditor, quickInsertNode);
+            return;
+          }
+        }
+      }
+      if (keyCode === Esc) {
+        // Choose the next point to focus
+        // Here need offset + 1 as text not include the prefix '/'
+        event.preventDefault();
+        const insertPoint = transformToText(newEditor, quickInsertNode);
+        return focusEditor(newEditor, insertPoint);
+      }
+    }
+    return onHotKeyDown && onHotKeyDown(event);
+  };
+  newEditor.onCompositionStart = event => {
+    const quickInsertEntry = getQuickInsertEntity(editor);
+    if (quickInsertEntry) {
+      event.preventDefault();
+      return true;
+    }
+  };
+  newEditor.isInline = element => {
+    if ([QUICK_INSERT].includes(element.type)) {
+      return true;
+    }
+    return isInline(element);
+  };
+  return newEditor;
+};
+export default withQuickInsert;

package/dist/basic-sdk/extension/plugins/quick-insert/render-elem.js

@@ -0,0 +1,83 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import InlineBugFixer from '../../commons/Inline-bug-fix-wrapper';
+import { ElementPopover } from '../../commons';
+import { getAboveBlockNode } from '../../core';
+import { ReactEditor } from '@seafile/slate-react';
+import { Node, Transforms } from '@seafile/slate';
+import { transformToText } from './helper';
+import { useScrollContext } from '../../../hooks/use-scroll-context';
+import { INSERT_POSITION } from '../../constants';
+import QuickInsertBlockMenu from '../../toolbar/insert-element-toolbar';
+const RenderQuickInsert = (_ref, editor) => {
+  let {
+    attributes,
+    children,
+    element,
+    readonly
+  } = _ref;
+  const [menuStyle, setMenuStyle] = useState({
+    top: 0,
+    left: 0
+  });
+  const sideMenuRef = useRef(null);
+  const scrollRef = useScrollContext();
+  const insertElmRef = useRef(null);
+  const aboveBlockNode = getAboveBlockNode(editor);
+  const searchText = Node.string(element);
+  const handleClick = useCallback(e => {
+    if (!insertElmRef.current.contains(e.target)) {
+      transformToText(editor, element);
+    }
+  }, [editor, element]);
+  const genStyle = (top, left) => {
+    const overflowY = top + sideMenuRef.current.offsetHeight - document.body.clientHeight;
+    if (overflowY > 0) {
+      top = top - overflowY - 10;
+    }
+    return "top: ".concat(top, "px; left: ").concat(left, "px");
+  };
+  const handleInsertMenuStyle = useCallback(() => {
+    const currentDom = ReactEditor.toDOMNode(editor, element);
+    const {
+      left,
+      top
+    } = currentDom.getBoundingClientRect();
+    const style = genStyle(top, left - 10);
+    setMenuStyle(style);
+  }, [editor, element]);
+  const handleScroll = useCallback(e => {
+    handleInsertMenuStyle();
+  }, [handleInsertMenuStyle]);
+  useEffect(() => {
+    const scrollDom = scrollRef.current;
+    handleInsertMenuStyle();
+    document.addEventListener('click', handleClick);
+    scrollDom.addEventListener('scroll', handleScroll);
+    return () => {
+      document.removeEventListener('click', handleClick);
+      scrollDom.removeEventListener('scroll', handleScroll);
+    };
+  }, [editor, element, handleClick, handleInsertMenuStyle, handleScroll, scrollRef]);
+  const handleInsertBlock = node => {
+    Transforms.delete(editor, {
+      at: ReactEditor.findPath(editor, element)
+    });
+  };
+  return /*#__PURE__*/React.createElement("span", {
+    ref: insertElmRef
+  }, /*#__PURE__*/React.createElement("span", Object.assign({}, attributes, {
+    className: ""
+  }), /*#__PURE__*/React.createElement(InlineBugFixer, null), /*#__PURE__*/React.createElement("span", null, "/", children), /*#__PURE__*/React.createElement(InlineBugFixer, null), /*#__PURE__*/React.createElement(ElementPopover, {
+    className: "sdoc-side-menu-popover",
+    style: menuStyle
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: sideMenuRef,
+    className: "sdoc-side-menu sdoc-dropdown-menu"
+  }, /*#__PURE__*/React.createElement(QuickInsertBlockMenu, {
+    insertPosition: INSERT_POSITION.AFTER,
+    slateNode: aboveBlockNode === null || aboveBlockNode === void 0 ? void 0 : aboveBlockNode[0],
+    searchText: searchText,
+    callback: handleInsertBlock
+  })))));
+};
+export default RenderQuickInsert;

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

@@ -1,7 +1,7 @@
 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, FILE_LINK_INSET_INPUT_TEMP } from '../constants';
-import { BlockquotePlugin, LinkPlugin, CheckListPlugin, HeaderPlugin, ListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin, CalloutPlugin, MentionPlugin } from '../plugins';
+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, QUICK_INSERT } from '../constants';
+import { BlockquotePlugin, LinkPlugin, CheckListPlugin, HeaderPlugin, ListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin, CalloutPlugin, MentionPlugin, QuickInsertPlugin } from '../plugins';
 import { onDragOver, onDragLeave, onDrop } from '../toolbar/side-toolbar/event';
 import { getParentNode } from '../core';
 import { setDataRoot, setMouseEnter } from './helper';
@@ -154,6 +154,11 @@ const CustomRenderElement = props => {
         const [, renderMentionTemporaryInput] = MentionPlugin.renderElements;
         return renderMentionTemporaryInput(props, editor);
       }
+    case QUICK_INSERT:
+      {
+        const [renderQuickInsert] = QuickInsertPlugin.renderElements;
+        return renderQuickInsert(props, editor);
+      }
     default:
       {
         const [renderParagraph] = ParagraphPlugin.renderElements;

package/dist/basic-sdk/extension/toolbar/insert-element-toolbar/const.js

@@ -0,0 +1,19 @@
+import { CALL_OUT, CHECK_LIST_ITEM, CODE_BLOCK, IMAGE, LINK, ORDERED_LIST, PARAGRAPH, TABLE, UNORDERED_LIST, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6 } from '../../constants';
+export const SELECTED_ITEM_CLASS_NAME = 'sdoc-dropdown-item-selected';
+export const SHORT_INSERT_ELEMENT_USER_INPUT_MAP = {
+  [IMAGE]: 'image',
+  [TABLE]: 'table',
+  [LINK]: 'link',
+  [CODE_BLOCK]: 'code block',
+  [CALL_OUT]: 'callout',
+  [UNORDERED_LIST]: 'unorder list',
+  [ORDERED_LIST]: 'order list',
+  [CHECK_LIST_ITEM]: 'check list',
+  [PARAGRAPH]: 'paragraph',
+  [HEADER1]: 'header 1',
+  [HEADER2]: 'header 2',
+  [HEADER3]: 'header 3',
+  [HEADER4]: 'header 4',
+  [HEADER5]: 'header 5',
+  [HEADER6]: 'header 6'
+};

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

@@ -0,0 +1,251 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useSlateStatic } from '@seafile/slate-react';
+import { Transforms } from '@seafile/slate';
+import { insertElement } from '../side-toolbar/helpers';
+import { insertTable } from '../../plugins/table/helpers';
+import TableSizePopover from '../../plugins/table/popover/table-size-popover';
+import { changeToCodeBlock } from '../../plugins/code-block/helpers';
+import { toggleList } from '../../plugins/list/transforms';
+import { setCheckListItemType } from '../../plugins/check-list/helpers';
+import { ELEMENT_TYPE, IMAGE, INSERT_POSITION, LINK, LOCAL_IMAGE, PARAGRAPH, SIDE_INSERT_MENUS_CONFIG, TABLE, CODE_BLOCK, CALL_OUT, UNORDERED_LIST, ORDERED_LIST, CHECK_LIST_ITEM } from '../../constants';
+import EventBus from '../../../utils/event-bus';
+import { INTERNAL_EVENT } from '../../../constants';
+import DropdownMenuItem from '../../commons/dropdown-menu-item';
+import { wrapCallout } from '../../plugins/callout/helper';
+import keyCodes from '../../../../constants/key-codes';
+import { SELECTED_ITEM_CLASS_NAME, SHORT_INSERT_ELEMENT_USER_INPUT_MAP } from './const';
+import './style.css';
+const QuickInsertBlockMenu = _ref => {
+  let {
+    insertPosition,
+    slateNode,
+    searchText,
+    callback
+  } = _ref;
+  const editor = useSlateStatic();
+  const [currentSelectIndex, setCurrentSelectIndex] = useState(0);
+  const renderItemListRef = useRef([]);
+  const downDownWrapperRef = useRef(null);
+  const onInsertImageToggle = useCallback(() => {
+    const eventBus = EventBus.getInstance();
+    if (insertPosition === INSERT_POSITION.CURRENT) {
+      Transforms.select(editor, editor.selection.focus);
+    }
+    eventBus.dispatch(INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: LOCAL_IMAGE,
+      insertPosition,
+      slateNode
+    });
+    callback && callback();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, insertPosition]);
+  const createTable = useCallback(size => {
+    const newInsertPosition = slateNode.type === ELEMENT_TYPE.LIST_ITEM ? INSERT_POSITION.AFTER : insertPosition;
+    insertTable(editor, size, editor.selection, newInsertPosition);
+    callback && callback();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, insertPosition, slateNode]);
+  const openLinkDialog = useCallback(() => {
+    const eventBus = EventBus.getInstance();
+    eventBus.dispatch(INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: ELEMENT_TYPE.LINK,
+      insertPosition,
+      slateNode
+    });
+    callback && callback();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [insertPosition]);
+  const onInsertCodeBlock = useCallback(() => {
+    const newInsertPosition = slateNode.type === ELEMENT_TYPE.LIST_ITEM ? INSERT_POSITION.AFTER : insertPosition;
+    changeToCodeBlock(editor, 'plaintext', newInsertPosition);
+    callback && callback();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, insertPosition, slateNode]);
+  const onInsertList = useCallback(type => {
+    toggleList(editor, type, insertPosition);
+    callback && callback();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, insertPosition, slateNode]);
+  const onInsertCheckList = useCallback(() => {
+    setCheckListItemType(editor, ELEMENT_TYPE.CHECK_LIST_ITEM, insertPosition);
+    callback && callback();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, insertPosition, slateNode]);
+  const onInsert = useCallback(type => {
+    insertElement(editor, type, insertPosition);
+    callback && callback();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, insertPosition, slateNode]);
+  const onInsertCallout = useCallback(type => {
+    if (insertPosition === INSERT_POSITION.CURRENT) {
+      wrapCallout(editor);
+    } else if (insertPosition === INSERT_POSITION.AFTER) {
+      insertElement(editor, type, insertPosition);
+      wrapCallout(editor);
+    }
+    callback && callback();
+  }, [callback, editor, insertPosition]);
+  const dropDownItems = useMemo(() => {
+    let items = {
+      [IMAGE]: /*#__PURE__*/React.createElement(DropdownMenuItem, {
+        key: "sdoc-insert-menu-image",
+        menuConfig: _objectSpread({}, SIDE_INSERT_MENUS_CONFIG[ELEMENT_TYPE.IMAGE]),
+        onClick: onInsertImageToggle
+      }),
+      [TABLE]:
+      /*#__PURE__*/
+      // eslint-disable-next-line react/jsx-indent
+      React.createElement(DropdownMenuItem, {
+        key: "sdoc-insert-menu-tabe",
+        menuConfig: _objectSpread({}, SIDE_INSERT_MENUS_CONFIG[ELEMENT_TYPE.TABLE]),
+        className: "pr-2"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
+      }), /*#__PURE__*/React.createElement(TableSizePopover, {
+        editor: editor,
+        target: "sdoc-side-menu-item-table",
+        trigger: "hover",
+        placement: "right-start",
+        popperClassName: "sdoc-side-menu-table-size",
+        createTable: createTable
+      })),
+      [LINK]: /*#__PURE__*/React.createElement(DropdownMenuItem, {
+        key: "sdoc-insert-menu-link",
+        menuConfig: _objectSpread({}, SIDE_INSERT_MENUS_CONFIG[ELEMENT_TYPE.LINK]),
+        onClick: openLinkDialog
+      }),
+      [CODE_BLOCK]: /*#__PURE__*/React.createElement(DropdownMenuItem, {
+        key: "sdoc-insert-menu-code-block",
+        menuConfig: _objectSpread({}, SIDE_INSERT_MENUS_CONFIG[ELEMENT_TYPE.CODE_BLOCK]),
+        onClick: onInsertCodeBlock
+      }),
+      [CALL_OUT]: /*#__PURE__*/React.createElement(DropdownMenuItem, {
+        key: "sdoc-insert-menu-callout",
+        menuConfig: _objectSpread({}, SIDE_INSERT_MENUS_CONFIG[ELEMENT_TYPE.CALL_OUT]),
+        onClick: () => onInsertCallout(PARAGRAPH)
+      }),
+      [UNORDERED_LIST]: /*#__PURE__*/React.createElement(DropdownMenuItem, {
+        key: "sdoc-insert-menu-unorder-list",
+        menuConfig: _objectSpread({}, SIDE_INSERT_MENUS_CONFIG[ELEMENT_TYPE.UNORDERED_LIST]),
+        onClick: () => {
+          onInsertList(ELEMENT_TYPE.UNORDERED_LIST);
+        }
+      }),
+      [ORDERED_LIST]: /*#__PURE__*/React.createElement(DropdownMenuItem, {
+        key: "sdoc-insert-menu-order-list",
+        menuConfig: _objectSpread({}, SIDE_INSERT_MENUS_CONFIG[ELEMENT_TYPE.ORDERED_LIST]),
+        onClick: () => {
+          onInsertList(ELEMENT_TYPE.ORDERED_LIST);
+        }
+      }),
+      [CHECK_LIST_ITEM]: /*#__PURE__*/React.createElement(DropdownMenuItem, {
+        key: "sdoc-insert-menu-check-list",
+        menuConfig: _objectSpread({}, SIDE_INSERT_MENUS_CONFIG[ELEMENT_TYPE.CHECK_LIST_ITEM]),
+        onClick: onInsertCheckList
+      }),
+      [PARAGRAPH]: /*#__PURE__*/React.createElement(DropdownMenuItem, {
+        key: "sdoc-insert-menu-paragraph",
+        menuConfig: _objectSpread({}, SIDE_INSERT_MENUS_CONFIG[ELEMENT_TYPE.PARAGRAPH]),
+        onClick: () => onInsert(ELEMENT_TYPE.PARAGRAPH)
+      })
+    };
+    SIDE_INSERT_MENUS_CONFIG[ELEMENT_TYPE.HEADER].forEach(item => {
+      items[item.id.toLowerCase()] = /*#__PURE__*/React.createElement(DropdownMenuItem, {
+        key: item.id,
+        menuConfig: item,
+        onClick: () => onInsert(item.type)
+      });
+    });
+    return items;
+  }, [createTable, editor, onInsert, onInsertCallout, onInsertCheckList, onInsertCodeBlock, onInsertImageToggle, onInsertList, openLinkDialog]);
+  const getSelectItemDom = selectIndex => {
+    const dropDownItemWrapper = downDownWrapperRef.current;
+    const currentSelectItem = dropDownItemWrapper.children[selectIndex];
+    return currentSelectItem;
+  };
+  const handleKeyDown = useCallback(e => {
+    const {
+      UpArrow,
+      DownArrow,
+      Enter
+    } = keyCodes;
+    const renderItems = Reflect.ownKeys(dropDownItems);
+    const {
+      keyCode
+    } = e;
+    if (keyCode === UpArrow) {
+      e.preventDefault();
+      const currentSelectItem = getSelectItemDom(currentSelectIndex);
+      if (currentSelectItem) currentSelectItem.classList.remove(SELECTED_ITEM_CLASS_NAME);
+      if (currentSelectIndex > 0) {
+        setCurrentSelectIndex(currentSelectIndex - 1);
+      } else {
+        setCurrentSelectIndex(renderItems.length - 1);
+      }
+    }
+    if (keyCode === DownArrow) {
+      e.preventDefault();
+      const currentSelectItem = getSelectItemDom(currentSelectIndex);
+      if (currentSelectItem) currentSelectItem.classList.remove(SELECTED_ITEM_CLASS_NAME);
+      if (currentSelectIndex < renderItems.length - 1) {
+        setCurrentSelectIndex(currentSelectIndex + 1);
+      } else {
+        setCurrentSelectIndex(0);
+      }
+    }
+    if (keyCode === Enter) {
+      e.preventDefault();
+      const item = renderItems[currentSelectIndex];
+      dropDownItems[item].props.onClick();
+    }
+  }, [currentSelectIndex, dropDownItems]);
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleKeyDown]);
+  const clearSelectStyle = useCallback(() => {
+    const domList = Array.from(downDownWrapperRef.current.children);
+    domList.forEach(dom => dom.classList.remove(SELECTED_ITEM_CLASS_NAME));
+  }, []);
+  useEffect(() => {
+    clearSelectStyle();
+    const currentSelectItem = getSelectItemDom(currentSelectIndex);
+    if (currentSelectItem) {
+      currentSelectItem.classList.add(SELECTED_ITEM_CLASS_NAME);
+    }
+  }, [clearSelectStyle, currentSelectIndex, dropDownItems]);
+  if (searchText) {
+    const renderList = [];
+    for (const key in dropDownItems) {
+      if (Object.hasOwnProperty.call(dropDownItems, key)) {
+        const inputText = SHORT_INSERT_ELEMENT_USER_INPUT_MAP[key];
+        if (inputText.toLowerCase().indexOf(searchText.toLowerCase()) !== -1) {
+          renderList.push(dropDownItems[key]);
+        }
+      }
+    }
+    if (!renderList.length) {
+      renderList.push( /*#__PURE__*/React.createElement(DropdownMenuItem, {
+        key: "sdoc-insert-menu-no-result",
+        menuConfig: {
+          text: 'Search_not_found'
+        }
+      }));
+    }
+    renderItemListRef.current = renderList;
+  } else {
+    // setRenderItemList(dropDownItems);
+    renderItemListRef.current = Object.values(dropDownItems);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-insert-element-toolbar",
+    ref: downDownWrapperRef
+  }, renderItemListRef.current);
+};
+QuickInsertBlockMenu.defaultProps = {
+  insertPosition: INSERT_POSITION.CURRENT
+};
+export default QuickInsertBlockMenu;

package/dist/basic-sdk/extension/toolbar/insert-element-toolbar/style.css

@@ -0,0 +1,3 @@
+.sdoc-insert-element-toolbar .sdoc-dropdown-menu-item.sdoc-dropdown-item-selected {
+  background-color: #e3e3e3;
+}

package/dist/basic-sdk/extension/toolbar/side-toolbar/helpers.js

@@ -9,6 +9,7 @@ import { setClipboardCodeBlockData } from '../../plugins/code-block/helpers';
 import { ORDERED_LIST, UNORDERED_LIST, PARAGRAPH, CHECK_LIST_ITEM, IMAGE, TABLE, CODE_BLOCK, BLOCKQUOTE, LIST_ITEM_CORRELATION_TYPE, ADD_POSITION_OFFSET_TYPE, INSERT_POSITION, ELEMENT_TYPE, CALL_OUT } from '../../constants';
 import { EMPTY_SELECTED_RANGE } from '../../plugins/table/constants';
 import { unwrapCallout, wrapCallout } from '../../plugins/callout/helper';
+import { getHeaderHeight } from '../../../utils/dom-utils';
 export const onSetNodeType = (editor, element, type) => {
   if (!type) return;
   if (type === CALL_OUT) {
@@ -84,17 +85,18 @@ export const onDeleteNode = (editor, element) => {
     at: path
   });
 };
-export const getDomTopHeight = (dom, slateNode) => {
+export const getDomTopHeight = (editor, dom, slateNode) => {
   const rect = dom.getBoundingClientRect();
   let offsetY = 0;
+  const iconOffset = 4; // ensure icon is in the middle of the line
+  const headerHeight = getHeaderHeight(editor);
   const paddingTop = parseFloat(window.getComputedStyle(dom).getPropertyValue('padding-top'));
   const lineHeight = parseFloat(window.getComputedStyle(dom).getPropertyValue('line-height'));
   const disToolBarHeight = 12; // side toolbar icon is 12 px
   if (ADD_POSITION_OFFSET_TYPE.includes(slateNode.type)) {
     offsetY = lineHeight / 2 + paddingTop - disToolBarHeight / 2;
   }
-  const HEADER_HEIGHT = 56 + 44;
-  return rect.y - HEADER_HEIGHT + offsetY;
+  return rect.y - headerHeight + offsetY - iconOffset;
 };
 export const isVoidNode = node => {
   if (!node) return true;

package/dist/basic-sdk/extension/toolbar/side-toolbar/index.js

@@ -56,7 +56,7 @@ const SideToolbar = () => {
         dom = dom.parentNode;
       }
       const node = ReactEditor.toSlateNode(editor, dom);
-      const top = getDomTopHeight(dom, node);
+      const top = getDomTopHeight(editor, dom, node);
       const isEmpty = isVoidNode(node);
       setSidePosition({
         top: top + scrollRef.current.scrollTop,

package/dist/basic-sdk/utils/dom-utils.js

@@ -1,3 +1,4 @@
+import { WIKI_EDITOR } from '../constants';
 export const getDomHeight = dom => {
   const styles = window.getComputedStyle(dom);
   const rect = dom.getBoundingClientRect();
@@ -44,4 +45,24 @@ export const getCursorPosition = function () {
     x: x,
     y: y
   };
+};
+
+/**
+ * Get the height of the header of the editor
+ * @param {Editor} editor 
+ * @returns {Number} height of the header
+ */
+export const getHeaderHeight = editor => {
+  const {
+    editorType
+  } = editor;
+  switch (editorType) {
+    case WIKI_EDITOR:
+      // sdoc-editor-page-header height = 49
+      return 49;
+    default:
+      // sdoc-editor-page-header height = 56
+      // sdoc-editor-toolbar height = 37
+      return 56 + 37;
+  }
 };

package/dist/context.js

@@ -282,6 +282,10 @@ class Context {
     const docUuid = this.getDocUuid();
     return this.api.readAllNotifications(docUuid);
   }
+  updateConfigUuid(docUuid) {
+    if (!this.config) return;
+    this.config['docUuid'] = docUuid;
+  }
 }
 const context = new Context();
 export default context;

package/dist/index.js

@@ -5,4 +5,5 @@ import SimpleViewer from './pages/simple-viewer';
 import DiffViewer from './pages/diff-viewer';
 import PublishedRevisionViewer from './pages/published-revision-viewer';
 import WikiViewer from './pages/wiki-viewer';
-export { SDocViewer, SimpleEditor, SimpleViewer, EventBus, EXTERNAL_EVENT, DiffViewer, PublishedRevisionViewer, WikiViewer };
+import SdocWikiViewer from './pages/sdoc-wiki-viewer';
+export { SDocViewer, SimpleEditor, SimpleViewer, EventBus, EXTERNAL_EVENT, DiffViewer, PublishedRevisionViewer, WikiViewer, SdocWikiViewer };

package/dist/layout/layout.css

@@ -1,6 +1,6 @@
 body {
   -webkit-print-color-adjust: exact;
-  color-adjust: exact;
+  print-color-adjust: exact;
 }
 
 #root, #wrapper {

package/dist/pages/sdoc-wiki-viewer.js

@@ -0,0 +1,50 @@
+import React, { useMemo } from 'react';
+import { withTranslation } from 'react-i18next';
+import context from '../context';
+import ErrorBoundary from './error-boundary';
+import { SDocEditor } from '../basic-sdk';
+import { PAGE_EDIT_AREA_WIDTH, WIKI_EDITOR } from '../basic-sdk/constants';
+import { createWikiEditor } from '../basic-sdk/extension';
+import withNodeId from '../basic-sdk/node-id';
+import { withSocketIO } from '../basic-sdk/socket';
+import '../assets/css/simple-viewer.css';
+const SdocWikiViewer = _ref => {
+  let {
+    document,
+    showOutline,
+    scrollRef,
+    docUuid,
+    isWikiReadOnly
+  } = _ref;
+  context.initApi();
+  const validEditor = useMemo(() => {
+    const defaultEditor = createWikiEditor();
+    // getEditorConfig cashe the config, so we need to update the uuid,for wiki editor
+    docUuid && context.updateConfigUuid(docUuid);
+    const editorConfig = context.getEditorConfig();
+    const newEditor = withNodeId(withSocketIO(defaultEditor, {
+      document,
+      config: editorConfig
+    }));
+    const {
+      cursors
+    } = document;
+    newEditor.cursors = cursors || {};
+    newEditor.width = PAGE_EDIT_AREA_WIDTH; // default width
+    newEditor.editorType = WIKI_EDITOR;
+    return newEditor;
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(SDocEditor, {
+    showComment: false,
+    document: document,
+    showOutline: showOutline,
+    scrollRef: scrollRef,
+    docUuid: docUuid,
+    isShowHeaderToolbar: false,
+    editor: validEditor,
+    isWikiReadOnly: isWikiReadOnly
+  }));
+};
+export default withTranslation('sdoc-editor')(SdocWikiViewer);

package/package.json

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