@seafile/sdoc-editor 0.1.123 → 0.1.125-beta

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

@@ -1,5 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useSlateStatic } from '@seafile/slate-react';
+import { Node } from '@seafile/slate';
 import useSelectionUpdate from '../../hooks/use-selection-update';
 import { useCursorPosition } from '../helper';
 import CommentList from './comment-list';
@@ -7,6 +9,7 @@ import { useSelectionElement } from '../../hooks/use-selection-element';
 import { useCommentContext } from '../hooks/use-comment-context';
 var EditorComment = function EditorComment() {
   useSelectionUpdate();
+  var editor = useSlateStatic();
   var selectionElement = useSelectionElement();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -17,10 +20,16 @@ var EditorComment = function EditorComment() {
   }, []);
   var cursor = useCursorPosition();
   var style = useMemo(function () {
+    var _Node$string;
+    if (selectionElement && ((_Node$string = Node.string(selectionElement)) === null || _Node$string === void 0 ? void 0 : _Node$string.length) === 0) {
+      return {
+        top: '-99999px'
+      };
+    }
     return {
       top: cursor.y === 0 || isShowComments ? '-99999px' : cursor.y
     };
-  }, [cursor, isShowComments]);
+  }, [cursor, isShowComments, selectionElement]);
 
   // When selectionElement update, recalculate comment's panel state
   var _useState3 = useState([]),
@@ -41,7 +50,7 @@ var EditorComment = function EditorComment() {
     }
     setComments([]);
     setIsShowComments(false);
-  }, [element_comments_map, selectionElement]);
+  }, [element_comments_map, selectionElement, editor.selection]);
   return /*#__PURE__*/React.createElement("div", {
     className: "sdoc-comment-container"
   }, /*#__PURE__*/React.createElement("div", {

package/dist/basic-sdk/comment/comment/style.css

@@ -29,6 +29,7 @@
 
 .sdoc-comment-container .comment-container-right .comment-add-wrapper .sdocfont:hover {
   color: #333;
+  cursor: pointer;
 }
 
 .sdoc-comment-container .comment-container-right .comment-list-wrapper {

package/dist/basic-sdk/editor.js

@@ -1,30 +1,21 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useCallback, useEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle, Fragment } from 'react';
+import React, { useEffect, useMemo, useState, forwardRef, useImperativeHandle } from 'react';
 import { Editor } from '@seafile/slate';
-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 { useTranslation } from 'react-i18next';
+import defaultEditor from './extension';
+import { focusEditor } from './extension/core';
 import { withSocketIO } from './socket';
 import withNodeId from './node-id';
-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 { PAGE_EDIT_AREA_WIDTH } from './constants';
+import context from '../context';
+import { EditorContainer, EditorContent } from './layout';
+import SlateEditor from './slate-editor';
 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, {
@@ -41,16 +32,6 @@ 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 () {
@@ -94,153 +75,26 @@ 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;
 
-      // 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;
-      }
+  // 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);
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  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);
-  }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-editor-container"
-  }, /*#__PURE__*/React.createElement(ColorProvider, null, /*#__PURE__*/React.createElement(Toolbar, {
+  return /*#__PURE__*/React.createElement(EditorContainer, {
     editor: editor
-  }), /*#__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, {
+  }, /*#__PURE__*/React.createElement(EditorContent, {
+    docValue: slateValue,
+    showOutline: true
+  }, /*#__PURE__*/React.createElement(SlateEditor, {
     editor: editor,
-    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(CommentContextProvider, null, /*#__PURE__*/React.createElement(CommentWrapper, null)))))))))));
+    slateValue: slateValue,
+    setSlateValue: setSlateValue
+  })));
 });
 export default SDocEditor;

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

@@ -3,7 +3,8 @@ 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) {
+export var isMenuDisabled = function isMenuDisabled(editor, readonly) {
+  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/blockquote/menu/index.js

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

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

@@ -3,7 +3,8 @@ 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) {
+export var isMenuDisabled = function isMenuDisabled(editor, readonly) {
+  if (readonly) return true;
   if (editor.selection == null) return true;
   var selectedElements = [];
   var nodeEntries = Editor.nodes(editor, {

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

@@ -1,7 +1,7 @@
 import withCheckList from './plugin';
-import { CheckListItem, renderCheckList } from './render-elem';
+import { renderCheckListItem } from './render-elem';
 var CheckListPlugin = {
   editorPlugin: withCheckList,
-  renderElements: [renderCheckList, CheckListItem]
+  renderElements: [renderCheckListItem]
 };
 export default CheckListPlugin;

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

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

@@ -5,14 +5,6 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { Transforms } from '@seafile/slate';
 import { ReactEditor } from '@seafile/slate-react';
-var renderCheckList = function renderCheckList(props, editor) {
-  var attributes = props.attributes,
-    children = props.children,
-    style = props.style;
-  return /*#__PURE__*/React.createElement("p", Object.assign({}, attributes, {
-    style: style
-  }), children);
-};
 var CheckListItem = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(CheckListItem, _React$PureComponent);
   var _super = _createSuper(CheckListItem);
@@ -70,4 +62,8 @@ var CheckListItem = /*#__PURE__*/function (_React$PureComponent) {
   }]);
   return CheckListItem;
 }(React.PureComponent);
-export { CheckListItem, renderCheckList };
+export var renderCheckListItem = function renderCheckListItem(props, editor) {
+  return /*#__PURE__*/React.createElement(CheckListItem, Object.assign({}, props, {
+    editor: editor
+  }));
+};

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

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

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

@@ -5,7 +5,8 @@ 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) {
+export var isMenuDisabled = function isMenuDisabled(editor, readonly) {
+  if (readonly) return true;
   var selection = editor.selection;
   if (selection == null) return true;
   var selectedElems = getSelectedElems(editor);

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

@@ -1,12 +1,12 @@
 import { CODE_BLOCK } from '../../constants';
 import CodeBlockMenu from './menu';
 import withCodeBlock from './plugin';
-import { renderCodeBlock } from './render-elem';
+import { renderCodeBlock, renderCodeLine } from './render-elem';
 var CodeBlockPlugin = {
   type: CODE_BLOCK,
   nodeType: 'element',
   editorMenus: [CodeBlockMenu],
   editorPlugin: withCodeBlock,
-  renderElements: [renderCodeBlock]
+  renderElements: [renderCodeBlock, renderCodeLine]
 };
 export default CodeBlockPlugin;

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

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

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

@@ -97,14 +97,22 @@ var withCodeBlock = function withCodeBlock(editor) {
       node = _ref2[0],
       path = _ref2[1];
     var type = getNodeType(node);
-    if (type === 'code-line' && path.length <= 1) {
+    if (type === CODE_LINE && path.length <= 1) {
       Transforms.setNodes(newEditor, {
         type: 'paragraph'
       }, {
         at: path
       });
+      return;
     }
     if (type === CODE_BLOCK) {
+      if (node.children.length === 0) {
+        Transforms.delete(newEditor, {
+          at: path
+        });
+        return;
+      }
+
       // code-block is the last node in the editor and needs to be followed by a p node
       var isLast = isLastNode(newEditor, node);
       if (isLast) {

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

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useEffect, useState, useRef } from 'react';
-import { ReactEditor, useSlateStatic, useReadOnly } from '@seafile/slate-react';
+import { ReactEditor, useReadOnly } from '@seafile/slate-react';
 import { Transforms } from '@seafile/slate';
 import EventBus from '../../../utils/event-bus';
 import { useScrollContext } from '../../../hooks/use-scroll-context';
@@ -10,14 +10,13 @@ import { setClipboardData } from './helpers';
 import { INTERNAL_EVENT } from '../../../constants';
 import '../../../assets/css/code-block.css';
 var CodeBlock = function CodeBlock(_ref) {
-  var codeBlockProps = _ref.codeBlockProps;
+  var attributes = _ref.attributes,
+    children = _ref.children,
+    element = _ref.element,
+    editor = _ref.editor;
   var readOnly = useReadOnly();
-  var editor = useSlateStatic();
   var codeBlockRef = useRef();
   var scrollRef = useScrollContext();
-  var attributes = codeBlockProps.attributes,
-    children = codeBlockProps.children,
-    element = codeBlockProps.element;
   var _element$style = element.style,
     style = _element$style === void 0 ? {
       white_space: 'nowrap'
@@ -126,6 +125,7 @@ var CodeBlock = function CodeBlock(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React.createElement("div", {
+    "data-id": element.id,
     ref: codeBlockRef,
     className: 'sdoc-code-block-container',
     onClick: onFocusCodeBlock,
@@ -147,8 +147,17 @@ var CodeBlock = function CodeBlock(_ref) {
   }));
 };
 export var renderCodeBlock = function renderCodeBlock(props, editor) {
-  return /*#__PURE__*/React.createElement(CodeBlock, {
-    codeBlockProps: _objectSpread({}, props),
+  return /*#__PURE__*/React.createElement(CodeBlock, Object.assign({}, props, {
     editor: editor
-  });
+  }));
+};
+export var renderCodeLine = function renderCodeLine(props, editor) {
+  var element = props.element,
+    attributes = props.attributes,
+    children = props.children;
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    "data-id": element.id
+  }, attributes, {
+    className: 'sdoc-code-line'
+  }), children);
 };

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

@@ -4,7 +4,8 @@ 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) {
+export var isMenuDisabled = function isMenuDisabled(editor, readonly) {
+  if (readonly) return true;
   if (!editor.selection) return true;
   var _Editor$nodes = Editor.nodes(editor, {
       match: function match(node) {
@@ -132,9 +133,10 @@ export var loadFont = function loadFont() {
 };
 export var generatorFontFamily = function generatorFontFamily(fontName, fontWeight, leaf) {
   var isCodeBlock = leaf && Object.keys(leaf).includes('token');
+  if (isCodeBlock) return {};
   var lang = context.getSetting('lang') || 'zh-cn';
   if (fontName === DEFAULT_FONT) {
-    return "".concat(isCodeBlock ? 'monospace' : 'Arial', ", ").concat(lang === 'zh-cn' ? "\u5B8B\u4F53" : 'Arial', ", 'sans-serif'");
+    return "'Arial', ".concat(lang === 'zh-cn' ? "\u5B8B\u4F53" : 'Arial', ", 'sans-serif'");
   }
   var fontObject = FONT.find(function (item) {
     return item.name === fontName;
@@ -143,5 +145,5 @@ export var generatorFontFamily = function generatorFontFamily(fontName, fontWeig
     fontFamilyName = fontObject.fontFamilyName;
   loadFont(fontObject, fontWeight);
   var validFontName = fontFamilyName && isMac() ? fontFamilyName['mac'] : fontName;
-  return "".concat(isCodeBlock ? 'monospace' : validFontName, ", ").concat(lang === 'zh-cn' ? "\u5B8B\u4F53" : 'Arial', ", ").concat(usuallyFontFamilyName || 'sans-serif');
+  return "".concat(validFontName, ", ").concat(lang === 'zh-cn' ? "\u5B8B\u4F53" : 'Arial', ", ").concat(usuallyFontFamilyName || 'sans-serif');
 };

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

@@ -15,7 +15,8 @@ import './index.css';
 var FontFamily = function FontFamily(_ref) {
   var editor = _ref.editor,
     isRichEditor = _ref.isRichEditor,
-    className = _ref.className;
+    className = _ref.className,
+    readonly = _ref.readonly;
   var _useState = useState(LocalStorage.getItem(RECENT_USED_FONTS_KEY, [])),
     _useState2 = _slicedToArray(_useState, 2),
     recentUsedFonts = _useState2[0],
@@ -31,7 +32,7 @@ var FontFamily = function FontFamily(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var popoverRef = useRef(null);
-  var disabled = isMenuDisabled(editor);
+  var disabled = isMenuDisabled(editor, readonly);
   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,7 +13,8 @@ import './index.css';
 var FontSize = function FontSize(_ref) {
   var isRichEditor = _ref.isRichEditor,
     className = _ref.className,
-    editor = _ref.editor;
+    editor = _ref.editor,
+    readonly = _ref.readonly;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isShowMenu = _useState2[0],
@@ -21,7 +22,7 @@ var FontSize = function FontSize(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var popoverRef = useRef(null);
-  var disabled = isMenuDisabled(editor);
+  var disabled = isMenuDisabled(editor, readonly);
   var fontSizeButtonId = 'sdoc-button-font-size';
   var selectedFontSize = getFontSize(editor);
   var selectedFontSizeValue = selectedFontSize;

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

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

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

@@ -3,6 +3,8 @@ 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) {