@seafile/sdoc-editor 0.5.64 → 0.5.66

package/dist/basic-sdk/extension/plugins/column/helpers.js

@@ -0,0 +1,62 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { Editor, Transforms } from '@seafile/slate';
+import slugid from 'slugid';
+import { BLOCKQUOTE, CHECK_LIST_ITEM, COLUMN, IMAGE, ORDERED_LIST, PARAGRAPH, TABLE_CELL, UNORDERED_LIST } from '../../constants/element-type';
+import { focusEditor, getNodeType } from '../../core';
+import Column from './model';
+export const isMenuDisabled = (editor, readonly) => {
+  if (readonly) return true;
+  if (editor.selection == null) return true;
+  const [nodeEntry] = Editor.nodes(editor, {
+    match: n => {
+      const type = getNodeType(n);
+
+      // Only available for p and blockquote
+      if (type === PARAGRAPH) return true;
+      if (type === BLOCKQUOTE) return true;
+      if (type === UNORDERED_LIST) return true;
+      if (type === ORDERED_LIST) return true;
+      if (type === CHECK_LIST_ITEM) return true;
+      if (type === IMAGE) return true;
+      if (type === TABLE_CELL) return true;
+      return false;
+    },
+    universal: true,
+    mode: 'highest' // Match top level
+  });
+
+  // Match to p blockquote, do not disable
+  if (nodeEntry) {
+    return false;
+  }
+  return true;
+};
+export const getColumnType = editor => {
+  const [match] = Editor.nodes(editor, {
+    match: n => getNodeType(n) === COLUMN,
+    universal: true
+  });
+  if (!match) return PARAGRAPH;
+  const [n] = match;
+  return getNodeType(n);
+};
+export const insertSeaTableColumn = (editor, active) => {
+  if (!active) {
+    const column = new Column({});
+    column.id = slugid.nice();
+    Transforms.insertNodes(editor, _objectSpread({}, column));
+  }
+  focusEditor(editor);
+};
+export const setSeaTableColumn = (editor, data) => {
+  Transforms.setNodes(editor, {
+    data: data
+  }, {
+    match: node => node.type === COLUMN,
+    at: editor.selection
+  });
+};
+export const getColumnByKey = (columns, key) => {
+  const column = columns.find(item => item.key === key);
+  return column || null;
+};

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

@@ -0,0 +1,12 @@
+import { COLUMN } from '../../constants/element-type';
+import ColumnMenu from './menu';
+import withColumn from './plugin';
+import renderColumn from './render-elem';
+const ColumnPlugin = {
+  type: COLUMN,
+  nodeType: 'element',
+  editorMenus: [ColumnMenu],
+  editorPlugin: withColumn,
+  renderElements: [renderColumn]
+};
+export default ColumnPlugin;

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

@@ -0,0 +1,28 @@
+import React, { useCallback } from 'react';
+import { MenuItem } from '../../../commons';
+import { MENUS_CONFIG_MAP } from '../../../constants/menus-config';
+import { COLUMN } from '../../../constants/element-type';
+import { getColumnType, isMenuDisabled, insertSeaTableColumn } from '../helpers';
+const menuConfig = MENUS_CONFIG_MAP[COLUMN];
+const isActive = editor => {
+  return getColumnType(editor) === COLUMN;
+};
+export default function ColumnMenu(_ref) {
+  let {
+    isRichEditor,
+    className,
+    readonly,
+    editor
+  } = _ref;
+  const onMousedown = useCallback(event => {
+    const active = isActive(editor);
+    insertSeaTableColumn(editor, active);
+  }, [editor]);
+  return /*#__PURE__*/React.createElement(MenuItem, Object.assign({
+    isRichEditor: isRichEditor,
+    className: className,
+    disabled: isMenuDisabled(editor, readonly),
+    isActive: isActive(editor),
+    onMouseDown: onMousedown
+  }, menuConfig));
+}

package/dist/basic-sdk/extension/plugins/column/model.js

@@ -0,0 +1,14 @@
+import { generateDefaultText } from '../../core';
+class Column {
+  constructor(options) {
+    this.type = options.type || 'column';
+    this.data = options.data || {
+      key: '',
+      name: '',
+      bold: false,
+      italic: false
+    };
+    this.children = options.children || [generateDefaultText()];
+  }
+}
+export default Column;

package/dist/basic-sdk/extension/plugins/column/plugin.js

@@ -0,0 +1,24 @@
+import { ELEMENT_TYPE } from '../../constants';
+const withColumn = editor => {
+  const {
+    isInline,
+    isVoid
+  } = editor;
+  const newEditor = editor;
+  newEditor.isInline = element => {
+    const {
+      type
+    } = element;
+    if (type === ELEMENT_TYPE.COLUMN) return true;
+    return isInline(element);
+  };
+  newEditor.isVoid = element => {
+    const {
+      type
+    } = element;
+    if (type === ELEMENT_TYPE.COLUMN) return true;
+    return isVoid(element);
+  };
+  return newEditor;
+};
+export default withColumn;

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

@@ -0,0 +1,111 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React, { useCallback, useMemo } from 'react';
+import { useReadOnly, useSelected, useSlateStatic } from '@seafile/slate-react';
+import { useTranslation } from 'react-i18next';
+import { Select } from '../../commons';
+import { COLUMNS_ICON_CONFIG } from './constants/column';
+import { getColumnByKey, setSeaTableColumn } from './helpers';
+const NOT_SUPPORT_COLUMN_TYPES = ['button', 'file'];
+const Column = _ref => {
+  let {
+    attributes,
+    children,
+    element
+  } = _ref;
+  const editor = useSlateStatic();
+  const isSelected = useSelected();
+  const {
+    t
+  } = useTranslation();
+  const columns = useMemo(() => {
+    if (!editor.columns) return [];
+    return editor.columns.filter(column => !NOT_SUPPORT_COLUMN_TYPES.includes(column.type));
+  }, [editor.columns]);
+  const options = useMemo(() => {
+    return columns.map(item => {
+      const iconClass = COLUMNS_ICON_CONFIG[item.type];
+      return {
+        value: item.key,
+        label: item.name,
+        bold: false,
+        italic: false,
+        iconClass
+      };
+    });
+  }, [columns]);
+  const onColumnChanged = useCallback(option => {
+    const {
+      data
+    } = element;
+    const {
+      value: key,
+      label: name,
+      bold,
+      italic
+    } = option;
+    const newData = _objectSpread(_objectSpread({}, data), {
+      key,
+      name,
+      bold,
+      italic
+    });
+    setSeaTableColumn(editor, newData);
+  }, [editor, element]);
+  const defaultValue = useMemo(() => {
+    const {
+      data
+    } = element || {}; // column model
+    const column = getColumnByKey(columns, data.key);
+    const value = column && column.key || '';
+    const optionIndex = options.findIndex(item => item.value === value);
+    if (optionIndex === -1) return null;
+
+    // used the old properties
+    const option = options[optionIndex];
+    const currentOption = _objectSpread(_objectSpread({}, option), {
+      bold: data.bold,
+      italic: data.italic
+    });
+    options.splice(optionIndex, 1, currentOption);
+    return currentOption;
+  }, [columns, element, options]);
+  const props = {
+    isSelected: isSelected,
+    placeholder: t('Select_field'),
+    value: defaultValue,
+    options,
+    onChange: onColumnChanged
+  };
+  return /*#__PURE__*/React.createElement("span", attributes, /*#__PURE__*/React.createElement(Select, props), children);
+};
+const renderColumn = (props, editor) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const isReadOnly = useReadOnly();
+  if (isReadOnly) {
+    const {
+      attributes,
+      element
+    } = props;
+    const data = element.data || {};
+    const {
+      key: columnKey,
+      name: columnName,
+      bold,
+      italic
+    } = data;
+    let displayValue = columnName ? "{".concat(columnName, "}") : '';
+    if (editor.getColumnCellValue) {
+      displayValue = editor.getColumnCellValue(columnKey);
+    }
+    const style = _objectSpread(_objectSpread({}, bold && {
+      'fontWeight': 600
+    }), italic && {
+      'fontStyle': 'italic'
+    });
+    return /*#__PURE__*/React.createElement("span", Object.assign({}, attributes, {
+      style: _objectSpread({}, style)
+    }), displayValue);
+  }
+  return /*#__PURE__*/React.createElement(Column, props);
+};
+export default renderColumn;

package/dist/basic-sdk/extension/plugins/font/helpers.js

@@ -13,6 +13,7 @@ export const isMenuDisabled = (editor, readonly) => {
     universal: true,
     mode: 'highest'
   });
+  if (!match) return false;
   const elementType = match[0].type;
   if (elementType === CODE_BLOCK || elementType === IMAGE) {
     return true;

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

@@ -200,7 +200,8 @@ const Image = _ref => {
     className: classNames('sdoc-image-wrapper', className)
   }, attributes, {
     style: _objectSpread({}, style),
-    onMouseOver: e => selectImageWhenSelectPartial(e, editor, element, isSelected)
+    onMouseOver: e => selectImageWhenSelectPartial(e, editor, element, isSelected),
+    contentEditable: "true"
   }), /*#__PURE__*/React.createElement("img", {
     ref: imageRef,
     src: imagePlaceholder,
@@ -212,9 +213,11 @@ const Image = _ref => {
     className: classNames('sdoc-image-wrapper', className)
   }, attributes, {
     style: _objectSpread({}, style),
-    onMouseOver: e => selectImageWhenSelectPartial(e, editor, element, isSelected)
+    onMouseOver: e => selectImageWhenSelectPartial(e, editor, element, isSelected),
+    contentEditable: "true"
   }), /*#__PURE__*/React.createElement("span", {
-    className: "sdoc-image-inner"
+    className: "sdoc-image-inner",
+    contentEditable: "false"
   }, /*#__PURE__*/React.createElement("span", {
     className: "sdoc-image-content"
   }, /*#__PURE__*/React.createElement("span", {
@@ -311,10 +314,10 @@ export function renderImageBlock(props, editor) {
     className: "sdoc-image-block-wrapper",
     style: {
       display: 'flex',
-      padding: '5px 0px',
       justifyContent: "".concat(justifyContent)
     }
   }, attributes, {
-    onMouseOver: e => selectImageWhenSelectPartial(e, editor, element, isSelected)
+    onMouseOver: e => selectImageWhenSelectPartial(e, editor, element, isSelected),
+    contentEditable: "false"
   }), children);
 }

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

@@ -18,8 +18,9 @@ import CalloutPlugin from './callout';
 import SearchReplacePlugin from './search-replace';
 import MentionPlugin from './mention';
 import QuickInsertPlugin from './quick-insert';
+import ColumnPlugin from './column';
 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, QuickInsertPlugin, CommentPlugins, WikiPlugins };
+export { MarkDownPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, TextPlugin, HtmlPlugin, TextAlignPlugin, FontPlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin, CalloutPlugin, SearchReplacePlugin, MentionPlugin, QuickInsertPlugin, CommentPlugins, WikiPlugins, ColumnPlugin };

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

@@ -8,6 +8,7 @@ import { transformToText } from './helper';
 import { useScrollContext } from '../../../hooks/use-scroll-context';
 import { INSERT_POSITION } from '../../constants';
 import QuickInsertBlockMenu from '../../toolbar/insert-element-toolbar';
+import { isVoidNode } from '../../toolbar/side-toolbar/helpers';
 const RenderQuickInsert = (_ref, editor) => {
   let {
     attributes,
@@ -24,6 +25,7 @@ const RenderQuickInsert = (_ref, editor) => {
   const insertElmRef = useRef(null);
   const aboveBlockNode = getAboveBlockNode(editor);
   const searchText = Node.string(element);
+  const isEmptyNode = isVoidNode(aboveBlockNode === null || aboveBlockNode === void 0 ? void 0 : aboveBlockNode[0]);
   const handleClick = useCallback(e => {
     if (!insertElmRef.current.contains(e.target)) {
       transformToText(editor, element);
@@ -74,7 +76,8 @@ const RenderQuickInsert = (_ref, editor) => {
     ref: sideMenuRef,
     className: "sdoc-side-menu sdoc-dropdown-menu"
   }, /*#__PURE__*/React.createElement(QuickInsertBlockMenu, {
-    insertPosition: INSERT_POSITION.AFTER,
+    isEmptyNode: isEmptyNode,
+    insertPosition: isEmptyNode ? INSERT_POSITION.CURRENT : INSERT_POSITION.AFTER,
     slateNode: aboveBlockNode === null || aboveBlockNode === void 0 ? void 0 : aboveBlockNode[0],
     searchText: searchText,
     callback: handleInsertBlock

package/dist/basic-sdk/extension/plugins/text-align/helpers.js

@@ -10,6 +10,7 @@ export const isMenuDisabled = (editor, readonly) => {
     universal: true,
     mode: 'highest'
   });
+  if (!match) return false;
   const elementType = match[0].type;
   // at present, TABLE got its own 'text align'
   if (elementType === CODE_BLOCK || elementType === TABLE) {

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

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

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import useSelectionUpdate from '../../../hooks/use-selection-update';
 import { ORDERED_LIST, TABLE_CELL, UNORDERED_LIST } from '../../constants';
 import { MenuGroup } from '../../commons';
@@ -16,10 +16,12 @@ import ActiveTableMenu from '../../plugins/table/menu/active-table-menu';
 import CalloutMenu from '../../plugins/callout/menu';
 import SearchReplaceMenu from '../../plugins/search-replace/menu';
 import { getSelectedNodeByType } from '../../core';
+import ColumnMenu from '../../plugins/column/menu';
 const HeaderToolbar = _ref => {
   let {
     editor,
-    readonly
+    readonly,
+    columns
   } = _ref;
   useSelectionUpdate();
   const isSelectTableCell = getSelectedNodeByType(editor, TABLE_CELL);
@@ -63,6 +65,9 @@ const HeaderToolbar = _ref => {
   }), /*#__PURE__*/React.createElement(CalloutMenu, {
     editor: editor,
     readonly: readonly
+  }), editor.columns && /*#__PURE__*/React.createElement(ColumnMenu, {
+    editor: editor,
+    readonly: readonly
   })), /*#__PURE__*/React.createElement(ActiveTableMenu, {
     editor: editor,
     readonly: readonly

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

@@ -8,20 +8,22 @@ 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 { 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, QUICK_INSERT } 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 { getAboveBlockNode } from '../../core';
 import './style.css';
 const QuickInsertBlockMenu = _ref => {
   let {
     insertPosition,
     slateNode,
     searchText,
-    callback
+    callback,
+    isEmptyNode
   } = _ref;
   const editor = useSlateStatic();
   const [currentSelectIndex, setCurrentSelectIndex] = useState(0);
@@ -80,12 +82,21 @@ const QuickInsertBlockMenu = _ref => {
   const onInsertCallout = useCallback(type => {
     if (insertPosition === INSERT_POSITION.CURRENT) {
       wrapCallout(editor);
+      Transforms.removeNodes(editor, {
+        match: n => n.type === QUICK_INSERT
+      });
     } else if (insertPosition === INSERT_POSITION.AFTER) {
       insertElement(editor, type, insertPosition);
       wrapCallout(editor);
     }
     callback && callback();
   }, [callback, editor, insertPosition]);
+  const isDisableCallout = useMemo(() => {
+    const callout = getAboveBlockNode(editor, {
+      match: n => n.type === ELEMENT_TYPE.CALL_OUT
+    });
+    return !!callout;
+  }, [editor]);
   const dropDownItems = useMemo(() => {
     let items = {
       [IMAGE]: /*#__PURE__*/React.createElement(DropdownMenuItem, {
@@ -121,6 +132,7 @@ const QuickInsertBlockMenu = _ref => {
         onClick: onInsertCodeBlock
       }),
       [CALL_OUT]: /*#__PURE__*/React.createElement(DropdownMenuItem, {
+        disabled: isDisableCallout,
         key: "sdoc-insert-menu-callout",
         menuConfig: _objectSpread({}, SIDE_INSERT_MENUS_CONFIG[ELEMENT_TYPE.CALL_OUT]),
         onClick: () => onInsertCallout(PARAGRAPH)
@@ -145,6 +157,7 @@ const QuickInsertBlockMenu = _ref => {
         onClick: onInsertCheckList
       }),
       [PARAGRAPH]: /*#__PURE__*/React.createElement(DropdownMenuItem, {
+        disabled: isEmptyNode,
         key: "sdoc-insert-menu-paragraph",
         menuConfig: _objectSpread({}, SIDE_INSERT_MENUS_CONFIG[ELEMENT_TYPE.PARAGRAPH]),
         onClick: () => onInsert(ELEMENT_TYPE.PARAGRAPH)
@@ -158,7 +171,7 @@ const QuickInsertBlockMenu = _ref => {
       });
     });
     return items;
-  }, [createTable, editor, onInsert, onInsertCallout, onInsertCheckList, onInsertCodeBlock, onInsertImageToggle, onInsertList, openLinkDialog]);
+  }, [createTable, editor, isDisableCallout, isEmptyNode, onInsert, onInsertCallout, onInsertCheckList, onInsertCodeBlock, onInsertImageToggle, onInsertList, openLinkDialog]);
   const getSelectItemDom = selectIndex => {
     const dropDownItemWrapper = downDownWrapperRef.current;
     const currentSelectItem = dropDownItemWrapper.children[selectIndex];
@@ -197,7 +210,11 @@ const QuickInsertBlockMenu = _ref => {
     if (keyCode === Enter) {
       e.preventDefault();
       const item = renderItems[currentSelectIndex];
-      dropDownItems[item].props.onClick();
+      const {
+        disabled,
+        onClick
+      } = dropDownItems[item].props;
+      !disabled && onClick();
     }
   }, [currentSelectIndex, dropDownItems]);
   useEffect(() => {

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

@@ -23,19 +23,33 @@ const SideToolbar = () => {
   const [isNodeEmpty, setNodeEmpty] = useState(false);
   const [isShowSideMenu, setShowSideMenu] = useState(false);
   const [menuPosition, setMenuPosition] = useState({});
+  const sideMenuRef = useRef();
   const onReset = useCallback(() => {
     setShowSideMenu(false);
     setMenuPosition({});
     setSlateNode(null);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  const handleClick = useCallback(e => {
+    if (!isShowSideMenu) return;
+    const isClickSideTool = menuRef.current.contains(e.target);
+    if (isClickSideTool) return;
+    const {
+      sideMenuDom
+    } = sideMenuRef.current;
+    if (!sideMenuDom) return;
+    const isClickContainer = sideMenuDom.contains(e.target);
+    if (!isClickContainer) onReset();
+  }, [isShowSideMenu, onReset]);
   useEffect(() => {
     let observerRefValue;
     if (isShowSideMenu) {
       scrollRef.current.addEventListener('scroll', onReset);
+      document.addEventListener('click', handleClick);
       observerRefValue = scrollRef.current;
     } else {
       scrollRef.current.removeEventListener('scroll', onReset);
+      document.removeEventListener('click', handleClick);
       observerRefValue = null;
     }
     return () => {
@@ -244,7 +258,8 @@ const SideToolbar = () => {
     slateNode: slateNode,
     isNodeEmpty: isNodeEmpty,
     menuPosition: menuPosition,
-    onReset: onReset
+    onReset: onReset,
+    ref: sideMenuRef
   }));
 };
 export default SideToolbar;

package/dist/basic-sdk/extension/toolbar/side-toolbar/insert-block-menu.js

@@ -16,7 +16,8 @@ import { wrapCallout } from '../../plugins/callout/helper';
 const InsertBlockMenu = _ref => {
   let {
     insertPosition,
-    slateNode
+    slateNode,
+    isNodeEmpty
   } = _ref;
   const editor = useSlateStatic();
   const onInsertImageToggle = useCallback(() => {
@@ -113,6 +114,7 @@ const InsertBlockMenu = _ref => {
     onClick: onInsertCheckList
   }), [SIDE_INSERT_MENUS_CONFIG[ELEMENT_TYPE.PARAGRAPH], ...SIDE_INSERT_MENUS_CONFIG[ELEMENT_TYPE.HEADER]].map(item => {
     return /*#__PURE__*/React.createElement(DropdownMenuItem, {
+      disabled: isNodeEmpty && item.type === PARAGRAPH,
       key: item.id,
       menuConfig: item,
       onClick: () => onInsert(item.type)

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { withTranslation } from 'react-i18next';
 import { useSlateStatic } from '@seafile/slate-react';
 import copy from 'copy-to-clipboard';
@@ -13,7 +13,7 @@ import DropdownMenuItem from '../../commons/dropdown-menu-item';
 import toaster from '../../../../components/toast';
 import { HEADER1, HEADER2, HEADER3 } from '../../constants';
 import './side-menu.css';
-const SideMenu = _ref => {
+const SideMenu = (_ref, ref) => {
   let {
     slateNode,
     isNodeEmpty,
@@ -65,6 +65,11 @@ const SideMenu = _ref => {
     setMenuStyle("top: ".concat(top, "px; left: ").concat(menuPosition.left, "px"));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [menuPosition, sideMenuRef.current]);
+  useImperativeHandle(ref, () => {
+    return {
+      sideMenuDom: sideMenuRef.current
+    };
+  }, []);
   return /*#__PURE__*/React.createElement(ElementPopover, {
     className: "sdoc-side-menu-popover",
     style: menuStyle
@@ -85,6 +90,7 @@ const SideMenu = _ref => {
     slateNode: slateNode,
     onReset: onReset
   }))), isNodeEmpty && /*#__PURE__*/React.createElement(InsertBlockMenu, {
+    isNodeEmpty: isNodeEmpty,
     slateNode: slateNode
   }), !isNodeEmpty && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropdownMenuItem, {
     menuConfig: {
@@ -128,4 +134,6 @@ const SideMenu = _ref => {
     onClick: onDelete
   }))));
 };
-export default withTranslation('sdoc-editor')(SideMenu);
+export default withTranslation('sdoc-editor', {
+  withRef: true
+})(forwardRef(SideMenu));

package/dist/basic-sdk/hooks/use-force-update.js

@@ -0,0 +1,9 @@
+import { useCallback, useState } from 'react';
+const useForceUpdate = () => {
+  const [, setState] = useState(0);
+  const forceUpdate = useCallback(() => {
+    setState(n => n + 1);
+  }, []);
+  return forceUpdate;
+};
+export default useForceUpdate;

package/dist/index.js

@@ -6,4 +6,6 @@ import DiffViewer from './pages/diff-viewer';
 import PublishedRevisionViewer from './pages/published-revision-viewer';
 import WikiViewer from './pages/wiki-viewer';
 import SdocWikiViewer from './pages/sdoc-wiki-viewer';
-export { SDocViewer, SimpleEditor, SimpleViewer, EventBus, EXTERNAL_EVENT, DiffViewer, PublishedRevisionViewer, WikiViewer, SdocWikiViewer };
+import DocumentPluginEditor from './pages/document-plugin-editor';
+import DocumentPluginViewer from './pages/document-plugin-viewer';
+export { SDocViewer, SimpleEditor, SimpleViewer, EventBus, EXTERNAL_EVENT, DiffViewer, PublishedRevisionViewer, WikiViewer, SdocWikiViewer, DocumentPluginEditor, DocumentPluginViewer };

package/dist/pages/document-plugin-editor.js

@@ -0,0 +1,46 @@
+import React, { useMemo } from 'react';
+import { withTranslation } from 'react-i18next';
+import context from '../context';
+import { SDocEditor } from '../basic-sdk';
+import { PAGE_EDIT_AREA_WIDTH } from '../basic-sdk/constants';
+import { createDefaultEditor } from '../basic-sdk/extension';
+import withNodeId from '../basic-sdk/node-id';
+import { withSocketIO } from '../basic-sdk/socket';
+import { ColumnPlugin } from '../basic-sdk/extension/plugins';
+import ErrorBoundary from './error-boundary';
+import '../assets/css/simple-editor.css';
+import '../assets/css/plugin-editor.css';
+const DocumentPluginEditor = _ref => {
+  let {
+    document,
+    showOutline,
+    scrollRef,
+    columns
+  } = _ref;
+  context.initApi();
+  const validEditor = useMemo(() => {
+    const withColumnPlugin = ColumnPlugin.editorPlugin;
+    const defaultEditor = withColumnPlugin(createDefaultEditor());
+    const editorConfig = context.getEditorConfig();
+    const newEditor = withNodeId(withSocketIO(defaultEditor, {
+      document,
+      config: editorConfig
+    }));
+    const {
+      cursors
+    } = document;
+    newEditor.columns = columns || [];
+    newEditor.cursors = cursors || {};
+    newEditor.width = PAGE_EDIT_AREA_WIDTH; // default width
+    return newEditor;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(SDocEditor, {
+    editor: validEditor,
+    scrollRef: scrollRef,
+    document: document,
+    showComment: false,
+    showOutline: showOutline
+  }));
+};
+export default withTranslation('sdoc-editor')(DocumentPluginEditor);