@seafile/sdoc-editor 0.1.124 → 0.1.125-beta

package/dist/basic-sdk/extension/plugins/table/menu/active-table-menu/remove-table-menu.js

@@ -8,15 +8,17 @@ import { TABLE_ELEMENT } from '../../constants';
 var RemoveTable = function RemoveTable(_ref) {
   var isRichEditor = _ref.isRichEditor,
     className = _ref.className,
-    editor = _ref.editor;
+    editor = _ref.editor,
+    readonly = _ref.readonly;
   var removeTable = useCallback(function () {
+    if (readonly) return;
     removeTableElement(editor, TABLE_ELEMENT.TABLE);
-  }, [editor]);
+  }, [editor, readonly]);
   var menuConfig = MENUS_CONFIG_MAP[REMOVE_TABLE];
   var props = _objectSpread(_objectSpread({
     isRichEditor: isRichEditor,
     className: classnames(className, 'sdoc-remove-table menu-group-item'),
-    disabled: false,
+    disabled: readonly,
     isActive: false
   }, menuConfig), {}, {
     onMouseDown: removeTable

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

@@ -4,22 +4,26 @@ import CommonMenu from './common-menu';
 import { insertTableElement, removeTableElement } from '../../helpers';
 import { TABLE_ELEMENT } from '../../constants';
 var TableColumnMenu = function TableColumnMenu(_ref) {
-  var editor = _ref.editor;
+  var editor = _ref.editor,
+    readonly = _ref.readonly;
   var tableColumnRef = useRef(null);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var insertColumn = useCallback(function (type) {
+    if (readonly) return;
     insertTableElement(editor, type);
     tableColumnRef.current && tableColumnRef.current.hidePopover();
-  }, [editor]);
+  }, [editor, readonly]);
   var removeColumn = useCallback(function (type) {
+    if (readonly) return;
     removeTableElement(editor, type);
     tableColumnRef.current && tableColumnRef.current.hidePopover();
-  }, [editor]);
+  }, [editor, readonly]);
   return /*#__PURE__*/React.createElement(CommonMenu, {
     id: "table-column",
     iconClass: "sdocfont sdoc-column",
-    ref: tableColumnRef
+    ref: tableColumnRef,
+    disabled: readonly
   }, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-dropdown-menu-item",
     onClick: function onClick() {

package/dist/basic-sdk/extension/plugins/table/menu/active-table-menu/table-row-menu.js

@@ -4,22 +4,26 @@ import CommonMenu from './common-menu';
 import { insertTableElement, removeTableElement } from '../../helpers';
 import { TABLE_ELEMENT } from '../../constants';
 var TableRowMenu = function TableRowMenu(_ref) {
-  var editor = _ref.editor;
+  var editor = _ref.editor,
+    readonly = _ref.readonly;
   var tableRowRef = useRef(null);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var insertRow = useCallback(function (type) {
+    if (readonly) return;
     insertTableElement(editor, type);
     tableRowRef.current && tableRowRef.current.hidePopover();
-  }, [editor]);
+  }, [editor, readonly]);
   var removeRow = useCallback(function (type) {
+    if (readonly) return;
     removeTableElement(editor, type);
     tableRowRef.current && tableRowRef.current.hidePopover();
-  }, [editor]);
+  }, [editor, readonly]);
   return /*#__PURE__*/React.createElement(CommonMenu, {
     id: "table-row",
     iconClass: "sdocfont sdoc-row",
-    ref: tableRowRef
+    ref: tableRowRef,
+    disabled: readonly
   }, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-dropdown-menu-item",
     onClick: function onClick() {

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

@@ -23,8 +23,10 @@ var TableMenu = /*#__PURE__*/function (_React$Component) {
       return false;
     };
     _this.isDisabled = function () {
-      var editor = _this.props.editor;
-      return isTableMenuDisabled(editor);
+      var _this$props = _this.props,
+        editor = _this$props.editor,
+        readonly = _this$props.readonly;
+      return isTableMenuDisabled(editor, readonly);
     };
     _this.createTable = function (size) {
       var editor = _this.props.editor;
@@ -35,9 +37,9 @@ var TableMenu = /*#__PURE__*/function (_React$Component) {
   _createClass(TableMenu, [{
     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[TABLE];
       var props = _objectSpread(_objectSpread({
         isRichEditor: isRichEditor,

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

@@ -1,7 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { Editor, Transforms, Element } from '@seafile/slate';
 import { TEXT_ALIGN, MENUS_CONFIG_MAP, CODE_BLOCK, TABLE } from '../../constants';
-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) {

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

@@ -8,13 +8,14 @@ import { TEXT_ALIGN, MENUS_CONFIG_MAP } from '../../../constants';
 var TextAlignMenu = function TextAlignMenu(_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],
     setMenuShow = _useState2[1];
   var popoverRef = useRef(null);
-  var disabled = isMenuDisabled(editor);
+  var disabled = isMenuDisabled(editor, readonly);
   var buttonId = 'sdoc-button-text-align';
   var toggle = useCallback(function (event) {
     popoverRef.current.toggle();

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

@@ -1,7 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { Editor } from '@seafile/slate';
 import { 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/text-style/menu/index.js

@@ -12,7 +12,8 @@ var TextStyleMenuList = function TextStyleMenuList(_ref) {
     t = _ref.t,
     isRichEditor = _ref.isRichEditor,
     className = _ref.className,
-    idPrefix = _ref.idPrefix;
+    idPrefix = _ref.idPrefix,
+    readonly = _ref.readonly;
   var _useColorContext = useColorContext(),
     lastUsedFontColor = _useColorContext.lastUsedFontColor,
     updateLastUsedFontColor = _useColorContext.updateLastUsedFontColor,
@@ -25,10 +26,10 @@ var TextStyleMenuList = function TextStyleMenuList(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor]);
   var isDisabled = useCallback(function () {
-    return isMenuDisabled(editor);
+    return isMenuDisabled(editor, readonly);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editor]);
+  }, [editor, readonly]);
   var onMouseDown = useCallback(function (event, type) {
     event.preventDefault();
     event.stopPropagation();
@@ -72,7 +73,7 @@ var TextStyleMenuList = function TextStyleMenuList(_ref) {
     });
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editor, lastUsedFontColor, lastUsedHighlightColor]);
+  }, [editor, lastUsedFontColor, lastUsedHighlightColor, readonly]);
   var list = getTextStyleList(TEXT_STYLE);
   var dropdownList = getTextStyleList(TEXT_STYLE_MORE);
   return /*#__PURE__*/React.createElement(React.Fragment, null, list.map(function (itemProps, index) {

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

@@ -57,11 +57,9 @@ var CustomElement = function CustomElement(props) {
       }
     case CHECK_LIST_ITEM:
       {
-        var _CheckListPlugin$rend = _slicedToArray(CheckListPlugin.renderElements, 2),
-          CheckListItem = _CheckListPlugin$rend[1];
-        return /*#__PURE__*/React.createElement(CheckListItem, Object.assign({}, props, {
-          editor: editor
-        }));
+        var _CheckListPlugin$rend = _slicedToArray(CheckListPlugin.renderElements, 1),
+          renderCheckListItem = _CheckListPlugin$rend[0];
+        return renderCheckListItem(props, editor);
       }
     case CODE_BLOCK:
       {

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

@@ -17,44 +17,64 @@ import HistoryMenu from './redo-undo';
 import Font from '../../plugins/font/menu';
 import SdocLinkMenu from '../../plugins/sdoc-link/menu';
 var Toolbar = function Toolbar(_ref) {
-  var editor = _ref.editor;
+  var editor = _ref.editor,
+    readonly = _ref.readonly;
   useSelectionUpdate();
   return /*#__PURE__*/React.createElement("div", {
     className: "sdoc-editor-toolbar"
   }, /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(HistoryMenu, {
-    editor: editor
+    editor: editor,
+    readonly: readonly
   }), /*#__PURE__*/React.createElement(ClearFormatMenu, {
-    editor: editor
+    editor: editor,
+    readonly: readonly
   })), /*#__PURE__*/React.createElement(HeaderMenu, {
-    editor: editor
+    editor: editor,
+    readonly: readonly
   }), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(Font, {
-    editor: editor
+    editor: editor,
+    readonly: readonly
   }), /*#__PURE__*/React.createElement(TextStyleMenuList, {
-    editor: editor
+    editor: editor,
+    readonly: readonly
   })), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(QuoteMenu, {
-    editor: editor
+    editor: editor,
+    readonly: readonly
   }), /*#__PURE__*/React.createElement(ListMenu, {
     editor: editor,
-    type: UNORDERED_LIST
+    type: UNORDERED_LIST,
+    readonly: readonly
   }), /*#__PURE__*/React.createElement(ListMenu, {
     editor: editor,
-    type: ORDERED_LIST
+    type: ORDERED_LIST,
+    readonly: readonly
   }), /*#__PURE__*/React.createElement(CheckListMenu, {
-    editor: editor
+    editor: editor,
+    readonly: readonly
   }), /*#__PURE__*/React.createElement(TextAlignMenu, {
-    editor: editor
+    editor: editor,
+    readonly: readonly
   })), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(CodeBlockMenu, {
-    editor: editor
+    editor: editor,
+    readonly: readonly
   }), /*#__PURE__*/React.createElement(TableMenu, {
-    editor: editor
+    editor: editor,
+    readonly: readonly
   })), /*#__PURE__*/React.createElement(ActiveTableMenu, {
-    editor: editor
+    editor: editor,
+    readonly: readonly
   }), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(ImageMenu, {
-    editor: editor
+    editor: editor,
+    readonly: readonly
   }), /*#__PURE__*/React.createElement(LinkMenu, {
-    editor: editor
+    editor: editor,
+    readonly: readonly
   })), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(SdocLinkMenu, {
-    editor: editor
+    editor: editor,
+    readonly: readonly
   })));
 };
+Toolbar.defaultProps = {
+  readonly: false
+};
 export default Toolbar;

package/dist/basic-sdk/extension/toolbar/header-toolbar/redo-undo.js

@@ -17,7 +17,10 @@ var HistoryMenu = /*#__PURE__*/function (_React$Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _this.isDisabled = function (type) {
-      var editor = _this.props.editor;
+      var _this$props = _this.props,
+        editor = _this$props.editor,
+        readonly = _this$props.readonly;
+      if (readonly) return true;
       var history = editor.history;
       if (type === UNDO) {
         return history.undos.length === 0;
@@ -37,9 +40,9 @@ var HistoryMenu = /*#__PURE__*/function (_React$Component) {
   _createClass(HistoryMenu, [{
     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 undoConfig = MENUS_CONFIG_MAP[UNDO];
       var redoConfig = MENUS_CONFIG_MAP[REDO];
       var undoProps = _objectSpread(_objectSpread({

package/dist/basic-sdk/layout/editor-container.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import classnames from 'classnames';
+import { ColorProvider } from '../hooks/use-color-context';
+import { Toolbar } from '../extension';
+import { isMobile } from '../../utils';
+import '../assets/css/layout.css';
+import '../assets/css/sdoc-editor-plugins.css';
+import '../assets/css/dropdown-menu.css';
+var EditorContainer = function EditorContainer(_ref) {
+  var editor = _ref.editor,
+    readonly = _ref.readonly,
+    children = _ref.children,
+    showToolbar = _ref.showToolbar;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames('sdoc-editor-container', {
+      'mobile': isMobile && readonly
+    })
+  }, /*#__PURE__*/React.createElement(ColorProvider, null, showToolbar && /*#__PURE__*/React.createElement(Toolbar, {
+    editor: editor,
+    readonly: readonly
+  }), children));
+};
+EditorContainer.defaultProps = {
+  showToolbar: true
+};
+export default EditorContainer;

package/dist/basic-sdk/layout/editor-content.js

@@ -0,0 +1,56 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useState, useCallback } from 'react';
+import { ScrollContext } from '../hooks/use-scroll-context';
+import SDocOutline from '../outline';
+var EditorContent = function EditorContent(_ref) {
+  var readonly = _ref.readonly,
+    showOutline = _ref.showOutline,
+    children = _ref.children,
+    docValue = _ref.docValue;
+  var scrollRef = useRef(null);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    scrollLeft = _useState2[0],
+    setScrollLeft = _useState2[1];
+  var onWrapperScroll = useCallback(function (event) {
+    var scrollLeft = event.target.scrollLeft;
+    setScrollLeft(scrollLeft);
+  }, []);
+  if (readonly && !showOutline) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "sdoc-editor-content readonly"
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: scrollRef,
+      className: "sdoc-scroll-container",
+      id: "sdoc-scroll-container"
+    }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {
+      value: {
+        scrollRef: scrollRef
+      }
+    }, children)));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-editor-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-absolute-wrapper"
+  }, /*#__PURE__*/React.createElement(SDocOutline, {
+    scrollLeft: scrollLeft,
+    doc: docValue
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-absolute-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: scrollRef,
+    className: "sdoc-scroll-container",
+    onScroll: onWrapperScroll,
+    id: "sdoc-scroll-container"
+  }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {
+    value: {
+      scrollRef: scrollRef
+    }
+  }, children))));
+};
+EditorContent.defaultProps = {
+  readonly: false,
+  showOutline: true
+};
+export default EditorContent;

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

@@ -0,0 +1,4 @@
+import ArticleContainer from './article-container';
+import EditorContainer from './editor-container';
+import EditorContent from './editor-content';
+export { ArticleContainer, EditorContainer, EditorContent };

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

@@ -4,22 +4,21 @@ import { withTranslation } from 'react-i18next';
 import { UncontrolledTooltip } from 'reactstrap';
 import OutlineItem from './outline-item';
 import './style.css';
-var getOutlineSetting = function getOutlineSetting(docUuid) {
-  var currentValue = localStorage.getItem(docUuid);
+var getOutlineSetting = function getOutlineSetting() {
+  var currentValue = localStorage.getItem('sdoc');
   var config = currentValue ? JSON.parse(currentValue) : {};
   var _config$outlineOpen = config.outlineOpen,
     outlineOpen = _config$outlineOpen === void 0 ? false : _config$outlineOpen;
   return outlineOpen;
 };
-var setOutlineSetting = function setOutlineSetting(docUuid, isShown) {
-  var currentValue = localStorage.getItem(docUuid);
+var setOutlineSetting = function setOutlineSetting(isShown) {
+  var currentValue = localStorage.getItem('sdoc');
   var config = currentValue ? JSON.parse(currentValue) : {};
   config['outlineOpen'] = isShown;
-  localStorage.setItem(docUuid, JSON.stringify(config));
+  localStorage.setItem('sdoc', JSON.stringify(config));
 };
 var SDocOutline = function SDocOutline(_ref) {
   var scrollLeft = _ref.scrollLeft,
-    docUuid = _ref.docUuid,
     doc = _ref.doc,
     t = _ref.t;
   var _useState = useState(false),
@@ -27,7 +26,7 @@ var SDocOutline = function SDocOutline(_ref) {
     isShown = _useState2[0],
     setIsShown = _useState2[1];
   useEffect(function () {
-    var outlineOpen = getOutlineSetting(docUuid);
+    var outlineOpen = getOutlineSetting();
     setIsShown(outlineOpen);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

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

@@ -78,6 +78,10 @@
   left: -16px;
 }
 
-.sdoc-outline-menu:hover {
+.sdoc-outline-menu.disabled {
+  opacity: .65;
+}
+
+.sdoc-outline-menu:not(.disabled):hover {
   color: #333;
 }

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

@@ -0,0 +1,149 @@
+import React, { useCallback, useMemo, Fragment } from 'react';
+import { Editable, ReactEditor, Slate } from '@seafile/slate-react';
+import { renderLeaf, renderElement, ContextToolbar } from './extension';
+import { getAboveBlockNode, getNextNode, getPrevNode, isSelectionAtBlockEnd, isSelectionAtBlockStart } from './extension/core';
+import EventProxy from './utils/event-handler';
+import { useCursors } from './cursor/use-cursors';
+import { INTERNAL_EVENT } from './constants';
+import { SetNodeToDecorations } from './highlight-decorate/setNodeToDecorations';
+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 { ArticleContainer } from './layout';
+import { useScrollContext } from './hooks/use-scroll-context';
+var SlateEditor = function SlateEditor(_ref) {
+  var editor = _ref.editor,
+    setSlateValue = _ref.setSlateValue,
+    slateValue = _ref.slateValue;
+  var _useCursors = useCursors(editor),
+    cursors = _useCursors.cursors;
+  var decorate = usePipDecorate(editor);
+
+  // init eventHandler
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  var eventProxy = useMemo(function () {
+    return new EventProxy(editor);
+  }, []);
+  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 scrollRef = useScrollContext();
+  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;
+      }
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scrollRef]);
+  return /*#__PURE__*/React.createElement(Slate, {
+    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))));
+};
+export default SlateEditor;

package/dist/basic-sdk/socket/with-socket-io.js

@@ -19,6 +19,7 @@ var withSocketIO = function withSocketIO(editor, options) {
     SocketManager.destroy();
   };
   newEditor.onChange = function () {
+    if (newEditor.readonly) return;
     var operations = newEditor.operations;
     if (!newEditor.isRemote && operations.length > 0) {
       var isAllSetSelection = operations.every(function (operation) {

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

@@ -261,6 +261,18 @@ export var getDiff = function getDiff() {
   var oldValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
     children: []
   };
+  if (!currentValue && !oldValue) return {
+    value: [],
+    changes: []
+  };
+  if (!currentValue && oldValue) return {
+    value: normalizeChildren(oldValue.children),
+    changes: []
+  };
+  if (currentValue && !oldValue) return {
+    value: normalizeChildren(currentValue.children),
+    changes: []
+  };
   var _currentValue$childre = _objectSpread(_objectSpread({}, currentValue), {}, {
       children: normalizeChildren(currentValue.children)
     }),

package/dist/basic-sdk/views/diff-viewer.js

@@ -8,11 +8,10 @@ import '../../assets/css/diff-viewer.css';
 var DiffViewer = function DiffViewer(_ref) {
   var currentContent = _ref.currentContent,
     lastContent = _ref.lastContent,
-    didMountCallback = _ref.didMountCallback;
-  var diff = currentContent ? getDiff(currentContent, lastContent) : {
-    value: [],
-    changes: []
-  };
+    didMountCallback = _ref.didMountCallback,
+    showToolbar = _ref.showToolbar,
+    showOutline = _ref.showOutline;
+  var diff = getDiff(currentContent, lastContent);
   context.initSettings();
   useEffect(function () {
     didMountCallback && didMountCallback(diff);
@@ -39,6 +38,8 @@ var DiffViewer = function DiffViewer(_ref) {
     return renderElement(props, editor);
   }, []);
   return /*#__PURE__*/React.createElement(SDocViewer, {
+    showToolbar: showToolbar,
+    showOutline: showOutline,
     document: {
       children: diff.value
     },
@@ -46,4 +47,8 @@ var DiffViewer = function DiffViewer(_ref) {
     renderElement: customRenderElement
   });
 };
+DiffViewer.defaultProps = {
+  showToolbar: false,
+  showOutline: false
+};
 export default DiffViewer;