@seafile/sdoc-editor 0.1.125-beta → 0.1.126

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

@@ -1,6 +1,7 @@
 export var INTERNAL_EVENT = {
   CANCEL_TABLE_SELECT_RANGE: 'cancel_table_select_range',
   SET_TABLE_SELECT_RANGE: 'set_table_select_range',
-  HIDDEN_CODE_BLOCK_HOVER_MENU: 'hidden_code_block_hover_menu'
+  HIDDEN_CODE_BLOCK_HOVER_MENU: 'hidden_code_block_hover_menu',
+  ON_MOUSE_ENTER_BLOCK: 'on_mouse_enter_block'
 };
 export var PAGE_EDIT_AREA_WIDTH = 672; // 672 = 794 - 2[borderLeft + borderRight] - 120[paddingLeft + paddingRight]

package/dist/basic-sdk/editor.js

@@ -1,21 +1,31 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useEffect, useMemo, useState, forwardRef, useImperativeHandle } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle, Fragment } from 'react';
 import { Editor } from '@seafile/slate';
-import { useTranslation } from 'react-i18next';
-import defaultEditor from './extension';
-import { focusEditor } from './extension/core';
+import { Editable, ReactEditor, Slate } from '@seafile/slate-react';
+import defaultEditor, { renderLeaf, renderElement, Toolbar, ContextToolbar } from './extension';
+import { focusEditor, getAboveBlockNode, getNextNode, getPrevNode, isSelectionAtBlockEnd, isSelectionAtBlockStart } from './extension/core';
 import { withSocketIO } from './socket';
 import withNodeId from './node-id';
-import { PAGE_EDIT_AREA_WIDTH } from './constants';
-import context from '../context';
-import { EditorContainer, EditorContent } from './layout';
-import SlateEditor from './slate-editor';
+import SDocOutline from './outline';
+import EventProxy from './utils/event-handler';
+import { useCursors } from './cursor/use-cursors';
+import { INTERNAL_EVENT, PAGE_EDIT_AREA_WIDTH } from './constants';
+import { SetNodeToDecorations } from './highlight-decorate/setNodeToDecorations';
+import { ScrollContext } from './hooks/use-scroll-context';
+import CommentContextProvider from './comment/comment-context-provider';
+import CommentWrapper from './comment';
+import { usePipDecorate } from './decorates';
+import { getCursorPosition, getDomHeight, getDomMarginTop } from './utils/dom-utils';
+import EventBus from './utils/event-bus';
+import { ColorProvider } from './hooks/use-color-context';
+import ArticleContainer from './layout/article-container';
+import './assets/css/layout.css';
+import './assets/css/sdoc-editor-plugins.css';
+import './assets/css/dropdown-menu.css';
+import SideToolbar from './extension/toolbar/side-toolbar';
 var SDocEditor = forwardRef(function (_ref, ref) {
   var document = _ref.document,
     config = _ref.config;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-
   // init editor
   var editor = useMemo(function () {
     var newEditor = withNodeId(withSocketIO(defaultEditor, {
@@ -32,6 +42,16 @@ var SDocEditor = forwardRef(function (_ref, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     slateValue = _useState2[0],
     setSlateValue = _useState2[1];
+  var _useCursors = useCursors(editor),
+    cursors = _useCursors.cursors;
+  var scrollRef = useRef(null);
+  var decorate = usePipDecorate(editor);
+
+  // init eventHandler
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  var eventProxy = useMemo(function () {
+    return new EventProxy(editor);
+  }, []);
 
   // The parent component can call the method of this component through ref
   useImperativeHandle(ref, function () {
@@ -75,26 +95,154 @@ var SDocEditor = forwardRef(function (_ref, ref) {
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  var onChange = useCallback(function (slateValue) {
+    setSlateValue(slateValue);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onMouseDown = useCallback(function (event) {
+    if (event.button === 0) {
+      editor.reSetTableSelectedRange();
+      var eventBus = EventBus.getInstance();
+      eventBus.dispatch(INTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onKeyDown = useCallback(function (event) {
+    var _scrollRef$current = scrollRef.current,
+      scrollTop = _scrollRef$current.scrollTop,
+      clientHeight = _scrollRef$current.clientHeight;
+    eventProxy.onKeyDown(event);
+    if (event.key === 'ArrowLeft') {
+      if (!isSelectionAtBlockStart(editor)) return;
+    }
+    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+      if (scrollTop === 0) return;
+      var prevNode = getPrevNode(editor);
+      if (!prevNode) return;
+      var domNode = ReactEditor.toDOMNode(editor, prevNode[0]);
+      var domHeight = getDomHeight(domNode);
+      var isScrollUp = true;
+      var _getCursorPosition = getCursorPosition(isScrollUp),
+        y = _getCursorPosition.y;
+      if (y >= domHeight) return;
+      scrollRef.current.scroll(0, Math.max(0, scrollTop - domHeight));
+      return;
+    }
+    if (event.key === 'ArrowRight') {
+      if (!isSelectionAtBlockEnd(editor)) return;
+    }
+    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+      var nextNode = getNextNode(editor);
+      if (!nextNode) return;
+      var _domNode = ReactEditor.toDOMNode(editor, nextNode[0]);
+      var _domHeight = getDomHeight(_domNode);
+      var _isScrollUp = false;
+      var _getCursorPosition2 = getCursorPosition(_isScrollUp),
+        _y = _getCursorPosition2.y;
+      if (clientHeight - _y >= _domHeight) return;
+      scrollRef.current.scroll(0, Math.max(0, scrollTop + _domHeight));
+      return;
+    }
+    if (event.key === 'Backspace') {
+      var _getCursorPosition3 = getCursorPosition(),
+        _y2 = _getCursorPosition3.y;
 
-  // useMount: reset title
-  useEffect(function () {
-    var isSdocRevision = context.getSetting('isSdocRevision');
-    var originFilename = context.getSetting('originFilename');
-    if (isSdocRevision) {
-      window.document.getElementsByTagName('title')[0].innerText = "".concat(t('Revision'), " - ").concat(originFilename);
+      // above viewport
+      if (_y2 < 0) {
+        var newY = Math.abs(_y2);
+        if (isSelectionAtBlockStart(editor)) {
+          var _prevNode = getPrevNode(editor);
+          if (!_prevNode) return;
+          var _domNode2 = ReactEditor.toDOMNode(editor, _prevNode[0]);
+          var _domHeight2 = getDomHeight(_domNode2);
+          var node = getAboveBlockNode(editor);
+          if (!node) return;
+          var currentDomNode = ReactEditor.toDOMNode(editor, node[0]);
+          var marginTop = getDomMarginTop(currentDomNode);
+          scrollRef.current.scroll(0, Math.max(0, scrollTop - (newY + _domHeight2 + marginTop)));
+        } else {
+          scrollRef.current.scroll(0, Math.max(0, scrollTop - newY));
+        }
+        return;
+      }
+
+      // insider viewport
+      if (_y2 >= 0 && _y2 <= clientHeight) {
+        if (isSelectionAtBlockStart(editor)) {
+          var _prevNode2 = getPrevNode(editor);
+          if (!_prevNode2) return;
+          var _domNode3 = ReactEditor.toDOMNode(editor, _prevNode2[0]);
+          var _domHeight3 = getDomHeight(_domNode3);
+          if (_y2 >= _domHeight3) return;
+          // Scroll up the height of the previous block
+          scrollRef.current.scroll(0, Math.max(0, scrollTop - _domHeight3));
+          return;
+        }
+      }
+
+      // below viewport
+      if (_y2 > clientHeight) {
+        if (isSelectionAtBlockStart(editor)) {
+          // y: text top border
+          scrollRef.current.scroll(0, Math.max(0, scrollTop + (_y2 - clientHeight)));
+        } else {
+          var marginBottom = 11.2;
+          var _getCursorPosition4 = getCursorPosition(false),
+            _newY = _getCursorPosition4.y;
+          var rectBottom = _newY + marginBottom; // text bottom border
+          scrollRef.current.scroll(0, Math.max(0, scrollTop + (rectBottom - clientHeight)));
+        }
+        return;
+      }
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React.createElement(EditorContainer, {
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    scrollLeft = _useState4[0],
+    setScrollLeft = _useState4[1];
+  var onWrapperScroll = useCallback(function (event) {
+    var scrollLeft = event.target.scrollLeft;
+    setScrollLeft(scrollLeft);
+  }, []);
+  console.log(editor.children);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-editor-container"
+  }, /*#__PURE__*/React.createElement(ColorProvider, null, /*#__PURE__*/React.createElement(Toolbar, {
     editor: editor
-  }, /*#__PURE__*/React.createElement(EditorContent, {
-    docValue: slateValue,
-    showOutline: true
-  }, /*#__PURE__*/React.createElement(SlateEditor, {
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-editor-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-absolute-wrapper"
+  }, /*#__PURE__*/React.createElement(SDocOutline, {
+    scrollLeft: scrollLeft,
+    doc: slateValue,
+    docUuid: config.docUuid
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-absolute-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: scrollRef,
+    className: "sdoc-scroll-container",
+    onScroll: onWrapperScroll
+  }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {
+    value: {
+      scrollRef: scrollRef
+    }
+  }, /*#__PURE__*/React.createElement(Slate, {
     editor: editor,
-    slateValue: slateValue,
-    setSlateValue: setSlateValue
-  })));
+    value: slateValue,
+    onChange: onChange
+  }, /*#__PURE__*/React.createElement(ArticleContainer, {
+    editor: editor
+  }, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ContextToolbar, null), /*#__PURE__*/React.createElement(SetNodeToDecorations, null), /*#__PURE__*/React.createElement(Editable, {
+    cursors: cursors,
+    renderElement: renderElement,
+    renderLeaf: renderLeaf,
+    onKeyDown: onKeyDown,
+    onMouseDown: onMouseDown,
+    decorate: decorate,
+    onCut: eventProxy.onCut
+  })), /*#__PURE__*/React.createElement(SideToolbar, null), /*#__PURE__*/React.createElement(CommentContextProvider, null, /*#__PURE__*/React.createElement(CommentWrapper, null)))))))))));
 });
 export default SDocEditor;

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

@@ -161,4 +161,75 @@ export var LIST_TYPE_ARRAY = ['unordered_list', 'ordered_list'];
 export var TRANSPARENT = 'transparent';
 export var CLIPBOARD_FORMAT_KEY = 'x-slate-fragment';
 export var INSERT_FILE_DISPLAY_TYPE = ['text_link', 'icon_link', 'card_link'];
+export var SIDE_MENUS_CONFIG = [{
+  id: PARAGRAPH,
+  iconClass: 'sdocfont sdoc-text',
+  type: PARAGRAPH,
+  title: 'Paragraph'
+}, {
+  id: HEADER1,
+  iconClass: 'sdocfont sdoc-header1',
+  type: HEADER1,
+  title: 'Header_one'
+}, {
+  id: HEADER2,
+  iconClass: 'sdocfont sdoc-header2',
+  type: HEADER2,
+  title: 'Header_two'
+}, {
+  id: HEADER3,
+  iconClass: 'sdocfont sdoc-header3',
+  type: HEADER3,
+  title: 'Header_three'
+}, {
+  id: HEADER4,
+  iconClass: 'sdocfont sdoc-header4',
+  type: HEADER4,
+  title: 'Header_four'
+}, {
+  id: HEADER5,
+  iconClass: 'sdocfont sdoc-header5',
+  type: HEADER5,
+  title: 'Header_five'
+}, {
+  id: HEADER6,
+  iconClass: 'sdocfont sdoc-header6',
+  type: HEADER6,
+  title: 'Header_six'
+}, {
+  id: UNORDERED_LIST,
+  iconClass: 'sdocfont sdoc-list-ul',
+  type: UNORDERED_LIST,
+  title: 'Unordered_list'
+}, {
+  id: ORDERED_LIST,
+  iconClass: 'sdocfont sdoc-list-ol',
+  type: ORDERED_LIST,
+  title: 'Ordered_list'
+}, {
+  id: CHECK_LIST_ITEM,
+  iconClass: 'sdocfont sdoc-check-square',
+  type: CHECK_LIST_ITEM,
+  title: 'Check_list_item'
+}, {
+  id: ALIGN_LEFT,
+  iconClass: 'sdocfont sdoc-align-left',
+  type: 'left',
+  title: 'Left'
+}, {
+  id: ALIGN_CENTER,
+  iconClass: 'sdocfont sdoc-align-center',
+  type: 'center',
+  title: 'Center'
+}, {
+  id: ALIGN_RIGHT,
+  iconClass: 'sdocfont sdoc-align-right',
+  type: 'right',
+  title: 'Right'
+}, {
+  id: BLOCKQUOTE,
+  iconClass: 'sdocfont sdoc-quote1',
+  type: BLOCKQUOTE,
+  title: 'Quote'
+}];
 export { BLOCKQUOTE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, SUPERSCRIPT, SUBSCRIPT, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, TEXT_STYLE_MORE, BOLD_ITALIC, TEXT_ALIGN, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_CENTER, ELEMENT_TYPE, KEYBOARD, DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_LIST, CLEAR_FORMAT, DEFAULT_FONT_COLOR, RECENT_USED_HIGHLIGHT_COLORS_KEY, RECENT_USED_FONT_COLORS_KEY, RECENT_USED_TABLE_CELL_BG_COLORS_KEY, DEFAULT_LAST_USED_FONT_COLOR, DEFAULT_LAST_USED_HIGHLIGHT_COLOR, DEFAULT_LAST_USED_TABLE_CELL_BG_COLOR, SPECIAL_FONT_SIZE_NAME, DEFAULT_COMMON_FONT_SIZE, FONT_SIZE, DEFAULT_FONT, FONT, GOOGLE_FONT_CLASS, RECENT_USED_FONTS_KEY, HEADER_FONT_SIZE, SDOC_LINK };

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

@@ -4,7 +4,7 @@ import { withHistory } from '@seafile/slate-history';
 import Plugins from './plugins';
 import renderElement from './render/render-element';
 import renderLeaf from './render/render-leaf';
-import { Toolbar, ContextToolbar } from './toolbar';
+import { Toolbar, ContextToolbar, SideToolbar } from './toolbar';
 var baseEditor = withHistory(withReact(createEditor()));
 var defaultEditor = Plugins === null || Plugins === void 0 ? void 0 : Plugins.reduce(function (editor, pluginItem) {
   var withPlugin = pluginItem.editorPlugin;
@@ -14,4 +14,4 @@ var defaultEditor = Plugins === null || Plugins === void 0 ? void 0 : Plugins.re
   return editor;
 }, baseEditor);
 export default defaultEditor;
-export { renderLeaf, renderElement, Toolbar, ContextToolbar };
+export { renderLeaf, renderElement, Toolbar, ContextToolbar, SideToolbar };

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

@@ -3,8 +3,7 @@ import { Editor, Transforms, Element } from '@seafile/slate';
 import slugid from 'slugid';
 import { BLOCKQUOTE, CHECK_LIST_ITEM, IMAGE, ORDERED_LIST, UNORDERED_LIST } from '../../constants';
 import { focusEditor, getNodeType } from '../../core';
-export var isMenuDisabled = function isMenuDisabled(editor, readonly) {
-  if (readonly) return true;
+export var isMenuDisabled = function isMenuDisabled(editor) {
   if (editor.selection == null) return true;
   var _Editor$nodes = Editor.nodes(editor, {
       match: function match(n) {

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

@@ -22,10 +22,8 @@ var QuoteMenu = /*#__PURE__*/function (_React$Component) {
       return getBlockQuoteType(editor) === BLOCKQUOTE;
     };
     _this.isDisabled = function () {
-      var _this$props = _this.props,
-        editor = _this$props.editor,
-        readonly = _this$props.readonly;
-      return isMenuDisabled(editor, readonly);
+      var editor = _this.props.editor;
+      return isMenuDisabled(editor);
     };
     _this.onMouseDown = function (e) {
       var editor = _this.props.editor;
@@ -37,9 +35,9 @@ var QuoteMenu = /*#__PURE__*/function (_React$Component) {
   _createClass(QuoteMenu, [{
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-        isRichEditor = _this$props2.isRichEditor,
-        className = _this$props2.className;
+      var _this$props = this.props,
+        isRichEditor = _this$props.isRichEditor,
+        className = _this$props.className;
       var menuConfig = MENUS_CONFIG_MAP[BLOCKQUOTE];
       var props = _objectSpread(_objectSpread({
         isRichEditor: isRichEditor,

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

@@ -7,7 +7,8 @@ var renderBlockquote = function renderBlockquote(props, editor) {
     textAlign: element.align
   };
   return /*#__PURE__*/React.createElement("blockquote", Object.assign({
-    "data-id": element.id
+    "data-id": element.id,
+    "data-root": "true"
   }, attributes, {
     style: style
   }), children);

package/dist/basic-sdk/extension/plugins/check-list/helpers.js

@@ -3,8 +3,7 @@ import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIt
 import { Transforms, Editor, Element } from '@seafile/slate';
 import { CHECK_LIST_ITEM, PARAGRAPH, ELEMENT_TYPE } from '../../constants';
 import { getSelectedNodeByType } from '../../core';
-export var isMenuDisabled = function isMenuDisabled(editor, readonly) {
-  if (readonly) return true;
+export var isMenuDisabled = function isMenuDisabled(editor) {
   if (editor.selection == null) return true;
   var selectedElements = [];
   var nodeEntries = Editor.nodes(editor, {

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

@@ -22,10 +22,8 @@ var CheckListMenu = /*#__PURE__*/function (_React$Component) {
       return getCheckListItemType(editor) === CHECK_LIST_ITEM;
     };
     _this.isDisabled = function () {
-      var _this$props = _this.props,
-        editor = _this$props.editor,
-        readonly = _this$props.readonly;
-      return isMenuDisabled(editor, readonly);
+      var editor = _this.props.editor;
+      return isMenuDisabled(editor);
     };
     _this.onMouseDown = function () {
       var editor = _this.props.editor;
@@ -38,9 +36,9 @@ var CheckListMenu = /*#__PURE__*/function (_React$Component) {
   _createClass(CheckListMenu, [{
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-        isRichEditor = _this$props2.isRichEditor,
-        className = _this$props2.className;
+      var _this$props = this.props,
+        isRichEditor = _this$props.isRichEditor,
+        className = _this$props.className;
       var menuConfig = MENUS_CONFIG_MAP[CHECK_LIST];
       var props = _objectSpread(_objectSpread({
         isRichEditor: isRichEditor,

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

@@ -45,7 +45,8 @@ var CheckListItem = /*#__PURE__*/function (_React$PureComponent) {
         textAlign: align
       };
       return /*#__PURE__*/React.createElement("div", Object.assign({
-        "data-id": id
+        "data-id": id,
+        "data-root": "true"
       }, attributes, {
         style: style
       }), /*#__PURE__*/React.createElement("span", {

package/dist/basic-sdk/extension/plugins/clear-format/helpers.js

@@ -4,8 +4,6 @@ import { Editor, Text } from '@seafile/slate';
 import { CODE_BLOCK, CODE_LINE } from '../../constants';
 import { getNodeType } from '../../core';
 export var isMenuDisabled = function isMenuDisabled(editor) {
-  var readonly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  if (readonly) return true;
   if (editor.selection == null) return true;
   var _Editor$nodes = Editor.nodes(editor, {
       match: function match(n) {

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

@@ -7,8 +7,7 @@ var menuConfig = MENUS_CONFIG_MAP[CLEAR_FORMAT];
 var ClearFormatMenu = function ClearFormatMenu(_ref) {
   var isRichEditor = _ref.isRichEditor,
     className = _ref.className,
-    editor = _ref.editor,
-    readonly = _ref.readonly;
+    editor = _ref.editor;
   var onMouseDown = useCallback(function () {
     clearStyles(editor);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -17,7 +16,7 @@ var ClearFormatMenu = function ClearFormatMenu(_ref) {
     isRichEditor: isRichEditor,
     className: className
   }, menuConfig), {}, {
-    disabled: isMenuDisabled(editor, readonly),
+    disabled: isMenuDisabled(editor),
     isActive: false,
     'onMouseDown': onMouseDown
   });

package/dist/basic-sdk/extension/plugins/code-block/helpers.js

@@ -5,8 +5,7 @@ import { Transforms, Editor, Node } from '@seafile/slate';
 import slugid from 'slugid';
 import { CODE_BLOCK, CODE_LINE, PARAGRAPH } from '../../constants';
 import { getNodeType, getSelectedNodeByType, getSelectedElems } from '../../core';
-export var isMenuDisabled = function isMenuDisabled(editor, readonly) {
-  if (readonly) return true;
+export var isMenuDisabled = function isMenuDisabled(editor) {
   var selection = editor.selection;
   if (selection == null) return true;
   var selectedElems = getSelectedElems(editor);

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

@@ -24,10 +24,7 @@ var CodeBlockMenu = /*#__PURE__*/function (_React$Component) {
       return !!elem;
     };
     _this.isDisabled = function () {
-      var _this$props = _this.props,
-        editor = _this$props.editor,
-        readonly = _this$props.readonly;
-      return isMenuDisabled(editor, readonly);
+      return isMenuDisabled(_this.props.editor);
     };
     _this.onMouseDown = function (e) {
       e.preventDefault();
@@ -48,9 +45,9 @@ var CodeBlockMenu = /*#__PURE__*/function (_React$Component) {
   _createClass(CodeBlockMenu, [{
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-        isRichEditor = _this$props2.isRichEditor,
-        className = _this$props2.className;
+      var _this$props = this.props,
+        isRichEditor = _this$props.isRichEditor,
+        className = _this$props.className;
       var menuConfig = MENUS_CONFIG_MAP[CODE_BLOCK];
       var props = _objectSpread(_objectSpread({
         isRichEditor: isRichEditor,

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

@@ -126,6 +126,7 @@ var CodeBlock = function CodeBlock(_ref) {
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     "data-id": element.id,
+    "data-root": "true",
     ref: codeBlockRef,
     className: 'sdoc-code-block-container',
     onClick: onFocusCodeBlock,

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

@@ -4,8 +4,7 @@ import { CODE_BLOCK, DEFAULT_COMMON_FONT_SIZE, IMAGE, FONT_SIZE, SPECIAL_FONT_SI
 import { focusEditor, getParentNode } from '../../core';
 import context from '../../../../context';
 import { isMac } from '../../../../utils';
-export var isMenuDisabled = function isMenuDisabled(editor, readonly) {
-  if (readonly) return true;
+export var isMenuDisabled = function isMenuDisabled(editor) {
   if (!editor.selection) return true;
   var _Editor$nodes = Editor.nodes(editor, {
       match: function match(node) {

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

@@ -15,8 +15,7 @@ import './index.css';
 var FontFamily = function FontFamily(_ref) {
   var editor = _ref.editor,
     isRichEditor = _ref.isRichEditor,
-    className = _ref.className,
-    readonly = _ref.readonly;
+    className = _ref.className;
   var _useState = useState(LocalStorage.getItem(RECENT_USED_FONTS_KEY, [])),
     _useState2 = _slicedToArray(_useState, 2),
     recentUsedFonts = _useState2[0],
@@ -32,7 +31,7 @@ var FontFamily = function FontFamily(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var popoverRef = useRef(null);
-  var disabled = isMenuDisabled(editor, readonly);
+  var disabled = isMenuDisabled(editor);
   var fontSizeButtonId = 'sdoc-button-font';
   var selectedFont = getFont(editor);
   var lang = context.getSetting('lang');

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

@@ -13,8 +13,7 @@ import './index.css';
 var FontSize = function FontSize(_ref) {
   var isRichEditor = _ref.isRichEditor,
     className = _ref.className,
-    editor = _ref.editor,
-    readonly = _ref.readonly;
+    editor = _ref.editor;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isShowMenu = _useState2[0],
@@ -22,7 +21,7 @@ var FontSize = function FontSize(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var popoverRef = useRef(null);
-  var disabled = isMenuDisabled(editor, readonly);
+  var disabled = isMenuDisabled(editor);
   var fontSizeButtonId = 'sdoc-button-font-size';
   var selectedFontSize = getFontSize(editor);
   var selectedFontSizeValue = selectedFontSize;

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

@@ -2,14 +2,11 @@ import React from 'react';
 import FontFamily from './font-family';
 import FontSize from './font-size';
 var Font = function Font(_ref) {
-  var editor = _ref.editor,
-    readonly = _ref.readonly;
+  var editor = _ref.editor;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FontFamily, {
-    editor: editor,
-    readonly: readonly
+    editor: editor
   }), /*#__PURE__*/React.createElement(FontSize, {
-    editor: editor,
-    readonly: readonly
+    editor: editor
   }));
 };
 export default Font;

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

@@ -3,8 +3,6 @@ import { Editor, Transforms } from '@seafile/slate';
 import { getNodeType, isTextNode, getParentNode } from '../../core';
 import { ELEMENT_TYPE } from '../../constants';
 export var isMenuDisabled = function isMenuDisabled(editor) {
-  var readonly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  if (readonly) return true;
   if (!editor.selection) return true;
   var _Editor$nodes = Editor.nodes(editor, {
       match: function match(n) {

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

@@ -41,10 +41,8 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
       return _this.getValue() === type;
     };
     _this.isDisabled = function () {
-      var _this$props = _this.props,
-        editor = _this$props.editor,
-        readonly = _this$props.readonly;
-      return isMenuDisabled(editor, readonly);
+      var editor = _this.props.editor;
+      return isMenuDisabled(editor);
     };
     _this.onToggleClick = function (event) {
       event.stopPropagation();

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

@@ -19,8 +19,8 @@ var renderHeader = function renderHeader(props, editor) {
     isShowPlaceHolder = true;
   }
   return /*#__PURE__*/React.createElement(Tag, Object.assign({
-    id: element.id,
-    "data-id": element.id
+    "data-id": element.id,
+    "data-root": "true"
   }, attributes, {
     style: _objectSpread({
       position: isShowPlaceHolder ? 'relative' : ''

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

@@ -5,8 +5,7 @@ import { Editor, Range, Transforms } from '@seafile/slate';
 import { CODE_BLOCK, IMAGE } from '../../constants';
 import { generateEmptyElement, getNodeType, isTextNode, getParentNode } from '../../core';
 import context from '../../../../context';
-export var isInsertImageMenuDisabled = function isInsertImageMenuDisabled(editor, readonly) {
-  if (readonly) return true;
+export var isInsertImageMenuDisabled = function isInsertImageMenuDisabled(editor) {
   var selection = editor.selection;
   if (selection === null) return true;
   if (!Range.isCollapsed(selection)) return true;

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

@@ -35,10 +35,8 @@ var ImageMenu = /*#__PURE__*/function (_React$Component) {
       return false;
     };
     _this.isDisabled = function () {
-      var _this$props = _this.props,
-        editor = _this$props.editor,
-        readonly = _this$props.readonly;
-      return isInsertImageMenuDisabled(editor, readonly);
+      var editor = _this.props.editor;
+      return isInsertImageMenuDisabled(editor);
     };
     _this.onToggleClick = function (event) {
       event.stopPropagation();
@@ -107,10 +105,10 @@ var ImageMenu = /*#__PURE__*/function (_React$Component) {
   _createClass(ImageMenu, [{
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-        isRichEditor = _this$props2.isRichEditor,
-        className = _this$props2.className,
-        t = _this$props2.t;
+      var _this$props = this.props,
+        isRichEditor = _this$props.isRichEditor,
+        className = _this$props.className,
+        t = _this$props.t;
       var _this$state = this.state,
         isShowImagePopover = _this$state.isShowImagePopover,
         isShowInsertImageDialog = _this$state.isShowInsertImageDialog;