@seafile/sdoc-editor 0.1.153 → 0.1.154-beta1

package/dist/basic-sdk/extension/constants/menus-config.js

@@ -0,0 +1,234 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _MENUS_CONFIG_MAP;
+import { RECENT_USED_HIGHLIGHT_COLORS_KEY, DEFAULT_LAST_USED_HIGHLIGHT_COLOR, RECENT_USED_FONT_COLORS_KEY, DEFAULT_FONT_COLOR, DEFAULT_LAST_USED_FONT_COLOR } from './color';
+import { BLOCKQUOTE, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, ORDERED_LIST, UNORDERED_LIST, CHECK_LIST_ITEM, CODE_BLOCK, LINK, IMAGE, TABLE, SDOC_LINK, FILE_LINK, PARAGRAPH } from './element-type';
+export var UNDO = 'undo';
+export var REDO = 'redo';
+export var CLEAR_FORMAT = 'clear_format';
+export var REMOVE_TABLE = 'remove_table';
+export var BG_COLOR = 'bg_color';
+
+// text style
+var ITALIC = 'italic';
+var BOLD = 'bold';
+var UNDERLINE = 'underline';
+var HIGHLIGHT_COLOR = 'highlight-color';
+var COLOR = 'color';
+export var TEXT_STYLE = 'text_style';
+export var TEXT_STYLE_MAP = {
+  ITALIC: ITALIC,
+  BOLD: BOLD,
+  BOLD_ITALIC: "".concat(BOLD, "-").concat(ITALIC),
+  COLOR: COLOR
+};
+
+// text-align
+export var TEXT_ALIGN = 'text_align';
+var ALIGN_LEFT = 'align_left';
+var ALIGN_RIGHT = 'align_right';
+var ALIGN_CENTER = 'align_center';
+export var TEXT_STYLE_MORE = 'text_style_more';
+var STRIKETHROUGH = 'strikethrough';
+var SUPERSCRIPT = 'superscript';
+var SUBSCRIPT = 'subscript';
+// const FONT_SIZE_INCREASE = 'font-size-increase';
+// const FONT_SIZE_REDUCE = 'font-size-reduce';
+
+// header menu config
+export var MENUS_CONFIG_MAP = (_MENUS_CONFIG_MAP = {}, _defineProperty(_MENUS_CONFIG_MAP, BLOCKQUOTE, {
+  id: "sdoc_".concat(BLOCKQUOTE),
+  iconClass: 'sdocfont sdoc-quote-left',
+  text: 'Quote'
+}), _defineProperty(_MENUS_CONFIG_MAP, ORDERED_LIST, {
+  id: ORDERED_LIST,
+  iconClass: 'sdocfont sdoc-list-ol',
+  text: 'Ordered_list'
+}), _defineProperty(_MENUS_CONFIG_MAP, UNORDERED_LIST, {
+  id: UNORDERED_LIST,
+  iconClass: 'sdocfont sdoc-list-ul',
+  text: 'Unordered_list'
+}), _defineProperty(_MENUS_CONFIG_MAP, CHECK_LIST_ITEM, {
+  id: CHECK_LIST_ITEM,
+  iconClass: 'sdocfont sdoc-check-square',
+  text: 'Check_list_item'
+}), _defineProperty(_MENUS_CONFIG_MAP, CODE_BLOCK, {
+  id: CODE_BLOCK,
+  iconClass: 'sdocfont sdoc-code-block',
+  text: 'Code_block'
+}), _defineProperty(_MENUS_CONFIG_MAP, LINK, {
+  id: "sdoc_".concat(LINK),
+  iconClass: 'sdocfont sdoc-link',
+  text: 'Insert_link'
+}), _defineProperty(_MENUS_CONFIG_MAP, IMAGE, {
+  id: "sdoc_".concat(IMAGE),
+  iconClass: 'sdocfont sdoc-image',
+  text: 'Insert_image'
+}), _defineProperty(_MENUS_CONFIG_MAP, TABLE, {
+  id: "sdoc_".concat(TABLE),
+  iconClass: 'sdocfont sdoc-table',
+  text: 'Insert_table'
+}), _defineProperty(_MENUS_CONFIG_MAP, REMOVE_TABLE, {
+  id: "sdoc_".concat(REMOVE_TABLE),
+  iconClass: 'sdocfont sdoc-delete-table',
+  text: 'Delete_table'
+}), _defineProperty(_MENUS_CONFIG_MAP, TEXT_STYLE, [{
+  id: ITALIC,
+  iconClass: 'sdocfont sdoc-italic',
+  text: 'Italic',
+  type: 'ITALIC'
+}, {
+  id: BOLD,
+  iconClass: 'sdocfont sdoc-bold',
+  text: 'Bold',
+  type: 'BOLD'
+}, {
+  id: UNDERLINE,
+  iconClass: 'sdocfont sdoc-underline',
+  text: 'Underline',
+  type: 'UNDERLINE'
+}, {
+  id: "sdoc-".concat(HIGHLIGHT_COLOR),
+  iconClass: 'sdocfont sdoc-highlight-color',
+  text: 'Highlight_color',
+  type: HIGHLIGHT_COLOR,
+  isColor: true,
+  recentUsedColorsKey: RECENT_USED_HIGHLIGHT_COLORS_KEY,
+  defaultLastUsedColor: DEFAULT_LAST_USED_HIGHLIGHT_COLOR
+}, {
+  id: "sdoc-font-".concat(COLOR),
+  iconClass: 'sdocfont sdoc-font-color',
+  text: 'Font_color',
+  type: COLOR,
+  defaultColor: DEFAULT_FONT_COLOR,
+  isColor: true,
+  recentUsedColorsKey: RECENT_USED_FONT_COLORS_KEY,
+  defaultLastUsedColor: DEFAULT_LAST_USED_FONT_COLOR
+}]), _defineProperty(_MENUS_CONFIG_MAP, TEXT_STYLE_MORE, [
+//
+{
+  id: STRIKETHROUGH,
+  iconClass: 'sdocfont sdoc-strikethrough',
+  text: 'Strikethrough',
+  type: 'STRIKETHROUGH'
+}, {
+  id: SUPERSCRIPT,
+  iconClass: 'sdocfont sdoc-subscripts',
+  text: 'Superscript',
+  type: 'SUPERSCRIPT'
+}, {
+  id: SUBSCRIPT,
+  iconClass: 'sdocfont sdoc-subscripts',
+  text: 'Subscript',
+  type: 'SUBSCRIPT'
+}]), _defineProperty(_MENUS_CONFIG_MAP, TEXT_ALIGN, [{
+  id: ALIGN_LEFT,
+  iconClass: 'sdocfont sdoc-align-left',
+  type: 'left'
+}, {
+  id: ALIGN_CENTER,
+  iconClass: 'sdocfont sdoc-align-center',
+  type: 'center'
+}, {
+  id: ALIGN_RIGHT,
+  iconClass: 'sdocfont sdoc-align-right',
+  type: 'right'
+}]), _defineProperty(_MENUS_CONFIG_MAP, UNDO, {
+  id: UNDO,
+  iconClass: 'sdocfont sdoc-revoke',
+  text: 'Undo',
+  type: 'undo'
+}), _defineProperty(_MENUS_CONFIG_MAP, REDO, {
+  id: REDO,
+  iconClass: 'sdocfont sdoc-redo',
+  text: 'Redo',
+  type: 'redo'
+}), _defineProperty(_MENUS_CONFIG_MAP, BG_COLOR, {
+  id: "sdoc_".concat(BG_COLOR),
+  iconClass: 'sdocfont sdoc-bg-color',
+  text: 'Background_color'
+}), _defineProperty(_MENUS_CONFIG_MAP, CLEAR_FORMAT, {
+  id: "sdoc_".concat(CLEAR_FORMAT),
+  iconClass: 'sdocfont sdoc-format-clear',
+  text: 'Clear_format'
+}), _defineProperty(_MENUS_CONFIG_MAP, SDOC_LINK, {
+  id: "sdoc_".concat(SDOC_LINK),
+  iconClass: 'sdocfont sdoc-document',
+  text: 'Link_sdoc'
+}), _defineProperty(_MENUS_CONFIG_MAP, FILE_LINK, {
+  id: "sdoc_".concat(FILE_LINK),
+  iconClass: 'sdocfont sdoc-link-file',
+  text: 'Link_file'
+}), _MENUS_CONFIG_MAP);
+
+// side menu config
+export var SIDE_MENUS_CONFIG = [{
+  id: PARAGRAPH,
+  iconClass: 'sdocfont sdoc-text',
+  type: PARAGRAPH,
+  text: 'Paragraph'
+}, {
+  id: HEADER1,
+  iconClass: 'sdocfont sdoc-header1',
+  type: HEADER1,
+  text: 'Header_one'
+}, {
+  id: HEADER2,
+  iconClass: 'sdocfont sdoc-header2',
+  type: HEADER2,
+  text: 'Header_two'
+}, {
+  id: HEADER3,
+  iconClass: 'sdocfont sdoc-header3',
+  type: HEADER3,
+  text: 'Header_three'
+}, {
+  id: HEADER4,
+  iconClass: 'sdocfont sdoc-header4',
+  type: HEADER4,
+  text: 'Header_four'
+}, {
+  id: HEADER5,
+  iconClass: 'sdocfont sdoc-header5',
+  type: HEADER5,
+  text: 'Header_five'
+}, {
+  id: HEADER6,
+  iconClass: 'sdocfont sdoc-header6',
+  type: HEADER6,
+  text: 'Header_six'
+}, {
+  id: UNORDERED_LIST,
+  iconClass: 'sdocfont sdoc-list-ul',
+  type: UNORDERED_LIST,
+  text: 'Unordered_list'
+}, {
+  id: ORDERED_LIST,
+  iconClass: 'sdocfont sdoc-list-ol',
+  type: ORDERED_LIST,
+  text: 'Ordered_list'
+}, {
+  id: CHECK_LIST_ITEM,
+  iconClass: 'sdocfont sdoc-check-square',
+  type: CHECK_LIST_ITEM,
+  text: 'Check_list_item'
+}, {
+  id: ALIGN_LEFT,
+  iconClass: 'sdocfont sdoc-align-left',
+  type: 'left',
+  text: 'Left'
+}, {
+  id: ALIGN_CENTER,
+  iconClass: 'sdocfont sdoc-align-center',
+  type: 'center',
+  text: 'Center'
+}, {
+  id: ALIGN_RIGHT,
+  iconClass: 'sdocfont sdoc-align-right',
+  type: 'right',
+  text: 'Right'
+}, {
+  id: BLOCKQUOTE,
+  iconClass: 'sdocfont sdoc-quote1',
+  type: BLOCKQUOTE,
+  text: 'Quote'
+}];

package/dist/basic-sdk/extension/core/transforms/replace-node-children.js

@@ -12,4 +12,30 @@ export var replaceNodeChildren = function replaceNodeChildren(editor, _ref) {
       at: at.concat([0])
     }));
   });
+};
+export var replaceNode = function replaceNode(editor) {
+  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    at = _ref2.at,
+    nodes = _ref2.nodes,
+    insertOptions = _ref2.insertOptions,
+    removeOptions = _ref2.removeOptions;
+  Editor.withoutNormalizing(editor, function () {
+    Transforms.removeNodes(editor, _objectSpread({
+      at: at
+    }, removeOptions));
+    Transforms.insertNodes(editor, nodes, _objectSpread(_objectSpread({}, insertOptions), {}, {
+      at: at
+    }));
+  });
+};
+export var deleteNodeMark = function deleteNodeMark(editor, path, element) {
+  var marks = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+  var newElement = _objectSpread({}, element);
+  marks.forEach(function (markItem) {
+    newElement[markItem] && delete newElement[markItem];
+  });
+  replaceNode(editor, {
+    at: path,
+    nodes: newElement
+  });
 };

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

@@ -2,7 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { Editor, Transforms, Range } from '@seafile/slate';
 import { toggleList } from '../list/transforms';
 import { getSelectedNodeByType } from '../../core';
-import { HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, UNORDERED_LIST, BLOCKQUOTE, BOLD, ITALIC, BOLD_ITALIC } from '../../constants';
+import { HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, UNORDERED_LIST, BLOCKQUOTE, TEXT_STYLE_MAP } from '../../constants';
 var KEY_TO_TYPE_FOR_SPACE = {
   // Title shortcut
   '#': HEADER1,
@@ -19,9 +19,9 @@ var KEY_TO_TYPE_FOR_SPACE = {
 };
 var KEY_TO_INLINE_TYPE_FOR_SPACE = {
   // Inline shortcut keys
-  '**': BOLD,
-  '*': ITALIC,
-  '***': BOLD_ITALIC
+  '**': TEXT_STYLE_MAP.BOLD,
+  '*': TEXT_STYLE_MAP.ITALIC,
+  '***': TEXT_STYLE_MAP.BOLD_ITALIC
 };
 var getBeforeText = function getBeforeText(editor) {
   var selection = editor.selection;
@@ -76,7 +76,7 @@ var withMarkDown = function withMarkDown(editor) {
     var italicType = KEY_TO_INLINE_TYPE_FOR_SPACE[beforeText.slice(-1)];
     var italicAndBoldType = KEY_TO_INLINE_TYPE_FOR_SPACE[beforeText.slice(-3)];
     if (!type && !boldType && !italicType && !italicAndBoldType) return insertText(text);
-    if (italicAndBoldType === BOLD_ITALIC) {
+    if (italicAndBoldType === TEXT_STYLE_MAP.BOLD_ITALIC) {
       var restStr = beforeText === null || beforeText === void 0 ? void 0 : beforeText.slice(0, beforeText.length - 3);
       var startOffset = restStr === null || restStr === void 0 ? void 0 : restStr.lastIndexOf('***');
       var endOffset = (beforeText === null || beforeText === void 0 ? void 0 : beforeText.lastIndexOf('***')) + 3;
@@ -97,7 +97,7 @@ var withMarkDown = function withMarkDown(editor) {
         return insertText(newText);
       }
     }
-    if (boldType === BOLD) {
+    if (boldType === TEXT_STYLE_MAP.BOLD) {
       var _restStr = beforeText.slice(0, beforeText.length - 2);
       var _startOffset = _restStr.lastIndexOf('**');
       var _endOffset = beforeText.lastIndexOf('**') + 2;
@@ -119,7 +119,7 @@ var withMarkDown = function withMarkDown(editor) {
       Editor.addMark(editor, newType, true);
       return insertText(_newText);
     }
-    if (italicType === ITALIC) {
+    if (italicType === TEXT_STYLE_MAP.ITALIC) {
       var _restStr2 = beforeText === null || beforeText === void 0 ? void 0 : beforeText.slice(0, beforeText.length - 1);
       var _startOffset2 = _restStr2 === null || _restStr2 === void 0 ? void 0 : _restStr2.lastIndexOf('*');
       var _endOffset2 = (beforeText === null || beforeText === void 0 ? void 0 : beforeText.lastIndexOf('*')) + 1;

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

@@ -21,4 +21,8 @@ export var TABLE_ELEMENT_POSITION = {
   AFTER: 'after',
   BEFORE: 'before'
 };
-export var SELECTED_TABLE_CELL_BG_COLOR = '#dee8fe';
+export var SELECTED_TABLE_CELL_BG_COLOR = '#dee8fe';
+export var STYLE_KEY = {
+  TEXT_ALIGN: 'textAlign',
+  BG_COLOR: 'bg_color'
+};

package/dist/basic-sdk/extension/plugins/table/render/render-cell.js

@@ -4,10 +4,9 @@ import classnames from 'classnames';
 import { useSlateStatic, useReadOnly } from '@seafile/slate-react';
 import { Transforms } from '@seafile/slate';
 import ObjectUtils from '../../../../utils/object-utils';
-import { STYLE_KEY } from '../../../constants';
 import { findPath, focusEditor } from '../../../core';
 import { useResizeHandlersContext, useTableSelectedRangeContext } from './hooks';
-import { EMPTY_SELECTED_RANGE, SELECTED_TABLE_CELL_BG_COLOR } from '../constants';
+import { EMPTY_SELECTED_RANGE, SELECTED_TABLE_CELL_BG_COLOR, STYLE_KEY } from '../constants';
 import { getTableColumns, getCellColumn, colorBlend } from '../helpers';
 var TableCell = function TableCell(_ref) {
   var attributes = _ref.attributes,
@@ -86,7 +85,7 @@ function renderTableCell(props) {
 
     // const cellValue = element;
     var style = attributes.style || {};
-    if (ObjectUtils.hasProperty(element, STYLE_KEY.TEXT_ALIGN)) {
+    if (ObjectUtils.hasProperty(element.style, STYLE_KEY.TEXT_ALIGN)) {
       style[STYLE_KEY.TEXT_ALIGN] = element[STYLE_KEY.TEXT_ALIGN];
     }
     if (ObjectUtils.hasProperty(element.style, STYLE_KEY.BG_COLOR) && element.style[STYLE_KEY.BG_COLOR]) {

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

@@ -1,6 +1,6 @@
 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';
+import { CODE_BLOCK, TABLE } from '../../constants';
 export var isMenuDisabled = function isMenuDisabled(editor, readonly) {
   if (readonly) return true;
   if (!editor.selection) return true;
@@ -15,13 +15,13 @@ export var isMenuDisabled = function isMenuDisabled(editor, readonly) {
     match = _Editor$nodes2[0];
   var elementType = match[0].type;
   // at present, TABLE got its own 'text align'
-  if (elementType == CODE_BLOCK || elementType == TABLE) {
+  if (elementType === CODE_BLOCK || elementType === TABLE) {
     return true;
   }
   return false;
 };
 export var getAlignType = function getAlignType(editor) {
-  var defaultType = MENUS_CONFIG_MAP[TEXT_ALIGN][0].type;
+  var defaultType = 'left';
   var selection = editor.selection;
   if (!selection) {
     return defaultType;

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

@@ -2,7 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useCallback } from 'react';
 import { withTranslation } from 'react-i18next';
 import { Editor } from '@seafile/slate';
-import { TEXT_STYLE, TEXT_STYLE_MORE, MENUS_CONFIG_MAP, ELEMENT_TYPE } from '../../../constants';
+import { TEXT_STYLE, TEXT_STYLE_MAP, TEXT_STYLE_MORE, MENUS_CONFIG_MAP } from '../../../constants';
 import { focusEditor } from '../../../core';
 import { MenuItem, ColorMenu, MoreDropdown } from '../../../commons';
 import { getFontSize, setFontSize } from '../../font/helpers';
@@ -82,9 +82,9 @@ var TextStyleMenuList = function TextStyleMenuList(_ref) {
         itemProps['setColor'] = function (color) {
           return setColor(item.type, color);
         };
-        itemProps['defaultColorTip'] = item.type === ELEMENT_TYPE.COLOR ? t('Default') : '';
-        itemProps['lastUsedColor'] = item.type === ELEMENT_TYPE.COLOR ? lastUsedFontColor : lastUsedHighlightColor;
-        itemProps['updateLastUsedColor'] = item.type === ELEMENT_TYPE.COLOR ? updateLastUsedFontColor : updateLastUsedHighlightColor;
+        itemProps['defaultColorTip'] = item.type === TEXT_STYLE_MAP.COLOR ? t('Default') : '';
+        itemProps['lastUsedColor'] = item.type === TEXT_STYLE_MAP.COLOR ? lastUsedFontColor : lastUsedHighlightColor;
+        itemProps['updateLastUsedColor'] = item.type === TEXT_STYLE_MAP.COLOR ? updateLastUsedFontColor : updateLastUsedHighlightColor;
       }
       return _objectSpread(_objectSpread(_objectSpread({}, itemProps), item), {}, {
         id: idPrefix ? "".concat(idPrefix, "_").concat(item.id) : item.id

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

@@ -1,10 +1,16 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback } from 'react';
 import { useSlateStatic } from '@seafile/slate-react';
+import { Transforms } from '@seafile/slate';
+import deepCopy from 'deep-copy';
+import { useTranslation } from 'react-i18next';
 import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, LIST_LIC, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, CODE_LINE, IMAGE, ELEMENT_TYPE, SDOC_LINK, FILE_LINK, TITLE, SUBTITLE } from '../constants';
 import { BlockquotePlugin, LinkPlugin, CheckListPlugin, HeaderPlugin, ListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin } from '../plugins';
 import EventBus from '../../utils/event-bus';
-import { INTERNAL_EVENT } from '../../constants';
+import { INTERNAL_EVENT, REBASE_TYPE, REBASE_MARKS, REBASE_MARK_KEY, REBASE_ORIGIN } from '../../constants';
+import { findPath, getNode, replaceNode, deleteNodeMark } from '../../extension/core';
 var CustomElement = function CustomElement(props) {
   var editor = useSlateStatic();
   var element = props.element,
@@ -146,6 +152,220 @@ var CustomElement = function CustomElement(props) {
   }
 };
 var RenderElement = function RenderElement(props) {
+  var editor = useSlateStatic();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var updateParentNodeByPath = useCallback(function (path) {
+    var parentPath = path.slice(0, -1);
+    var parentNode = getNode(editor, parentPath);
+    if (parentNode.children.filter(function (item) {
+      return item[REBASE_MARK_KEY.REBASE_TYPE];
+    }).length === 0) {
+      var newParentElement = _objectSpread({}, parentNode);
+      newParentElement[REBASE_MARK_KEY.REBASE_TYPE] && delete newParentElement[REBASE_MARK_KEY.REBASE_TYPE];
+      newParentElement[REBASE_MARK_KEY.OLD_ELEMENT] && delete newParentElement[REBASE_MARK_KEY.OLD_ELEMENT];
+      newParentElement[REBASE_MARK_KEY.ORIGIN] && delete newParentElement[REBASE_MARK_KEY.ORIGIN];
+      newParentElement['children'] = newParentElement['children'].map(function (item) {
+        item[REBASE_MARK_KEY.REBASE_TYPE] && delete item[REBASE_MARK_KEY.REBASE_TYPE];
+        item[REBASE_MARK_KEY.OLD_ELEMENT] && delete item[REBASE_MARK_KEY.OLD_ELEMENT];
+        item[REBASE_MARK_KEY.ORIGIN] && delete item[REBASE_MARK_KEY.ORIGIN];
+        return item;
+      });
+      replaceNode(editor, {
+        at: parentPath,
+        nodes: newParentElement
+      });
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+  var deleteElement = useCallback(function (element) {
+    var path = findPath(editor, element);
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+    if (element.type === ELEMENT_TYPE.LIST_ITEM) {
+      updateParentNodeByPath(path);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+  var deleteMark = useCallback(function (element) {
+    var path = findPath(editor, element);
+    deleteNodeMark(editor, path, element, REBASE_MARKS);
+    if (element.type === ELEMENT_TYPE.LIST_ITEM) {
+      updateParentNodeByPath(path);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+  var useMasterChanges = useCallback(function (element) {
+    var path = findPath(editor, element);
+    deleteNodeMark(editor, path, element[REBASE_MARK_KEY.OLD_ELEMENT], REBASE_MARKS);
+    var nextElementPath = _toConsumableArray(path);
+    nextElementPath[path.length - 1] = path[path.length - 1] + 1;
+    Transforms.removeNodes(editor, {
+      at: nextElementPath
+    });
+    if (element.type === ELEMENT_TYPE.LIST_ITEM) {
+      updateParentNodeByPath(path);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+  var useCurrentChanges = useCallback(function (element) {
+    var path = findPath(editor, element);
+    var currentElementPath = _toConsumableArray(path);
+    currentElementPath[path.length - 1] = path[path.length - 1] + 1;
+    var currentElement = getNode(editor, currentElementPath);
+    var newCurrentElement = deepCopy(currentElement);
+    deleteNodeMark(editor, currentElementPath, newCurrentElement, REBASE_MARKS);
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+    if (element.type === ELEMENT_TYPE.LIST_ITEM) {
+      updateParentNodeByPath(path);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+  var useBothChanges = useCallback(function (element) {
+    // delete element marks
+    var path = findPath(editor, element);
+    deleteNodeMark(editor, path, element, REBASE_MARKS);
+
+    // delete next element marks
+    var nextElementPath = [].concat(_toConsumableArray(path.slice(0, -1)), [path[path.length - 1] + 1]);
+    var nextElement = getNode(editor, nextElementPath);
+    deleteNodeMark(editor, nextElementPath, nextElement, REBASE_MARKS);
+    if (element.type === ELEMENT_TYPE.LIST_ITEM) {
+      updateParentNodeByPath(path);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+  var element = props.element;
+  var rebaseType = element[REBASE_MARK_KEY.REBASE_TYPE];
+  if (!rebaseType) {
+    return /*#__PURE__*/React.createElement(CustomElement, props);
+  }
+  if (rebaseType === REBASE_TYPE.MODIFY_DELETE) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "w-100 d-flex sdoc-rebase-btn-group",
+      contentEditable: false
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "sdoc-rebase-btn",
+      onClick: function onClick() {
+        return deleteMark(element);
+      }
+    }, t('Keep_other_modification')), /*#__PURE__*/React.createElement("div", {
+      className: "mr-2 ml-2"
+    }, '|'), /*#__PURE__*/React.createElement("div", {
+      className: "sdoc-rebase-btn",
+      onClick: function onClick() {
+        return deleteElement(element);
+      }
+    }, t('Keep_my_modification')), /*#__PURE__*/React.createElement("div", {
+      className: "mr-2 ml-2"
+    }, '|'), /*#__PURE__*/React.createElement("div", {
+      className: "sdoc-rebase-btn",
+      onClick: function onClick() {
+        return deleteMark(element);
+      }
+    }, t('Keep_both_modification'))), /*#__PURE__*/React.createElement("div", {
+      className: "w-100 sdoc-rebase-current-changes-start",
+      contentEditable: false
+    }, '<<<<<<<'), /*#__PURE__*/React.createElement("div", {
+      className: "w-100 sdoc-rebase-incoming-changes",
+      contentEditable: false
+    }, /*#__PURE__*/React.createElement(CustomElement, props)), /*#__PURE__*/React.createElement("div", {
+      className: "w-100",
+      contentEditable: false
+    }, '======='), /*#__PURE__*/React.createElement("div", {
+      className: "w-100 sdoc-rebase-incoming-changes-end",
+      contentEditable: false
+    }, '>>>>>>>'));
+  }
+  if (rebaseType === REBASE_TYPE.DELETE_MODIFY) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "w-100 d-flex sdoc-rebase-btn-group",
+      contentEditable: false
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "sdoc-rebase-btn",
+      onClick: function onClick() {
+        return deleteElement(element);
+      }
+    }, t('Keep_other_modification')), /*#__PURE__*/React.createElement("div", {
+      className: "mr-2 ml-2"
+    }, '|'), /*#__PURE__*/React.createElement("div", {
+      className: "sdoc-rebase-btn",
+      onClick: function onClick() {
+        return deleteMark(element);
+      }
+    }, t('Keep_my_modification')), /*#__PURE__*/React.createElement("div", {
+      className: "mr-2 ml-2"
+    }, '|'), /*#__PURE__*/React.createElement("div", {
+      className: "sdoc-rebase-btn",
+      onClick: function onClick() {
+        return deleteMark(element);
+      }
+    }, t('Keep_both_modification'))), /*#__PURE__*/React.createElement("div", {
+      className: "w-100 sdoc-rebase-current-changes-start",
+      contentEditable: false
+    }, '<<<<<<<'), /*#__PURE__*/React.createElement("div", {
+      className: "w-100",
+      contentEditable: false
+    }, '======='), /*#__PURE__*/React.createElement("div", {
+      className: "w-100 sdoc-rebase-incoming-changes",
+      contentEditable: false
+    }, /*#__PURE__*/React.createElement(CustomElement, props)), /*#__PURE__*/React.createElement("div", {
+      className: "w-100 sdoc-rebase-incoming-changes-end",
+      contentEditable: false
+    }, '>>>>>>>'));
+  }
+  if (rebaseType === REBASE_TYPE.MODIFY_MODIFY) {
+    if (element[REBASE_MARK_KEY.ORIGIN] === REBASE_ORIGIN.OTHER) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "w-100 d-flex sdoc-rebase-btn-group",
+        contentEditable: false
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-rebase-btn",
+        onClick: function onClick() {
+          return useMasterChanges(element);
+        }
+      }, t('Keep_other_modification')), /*#__PURE__*/React.createElement("div", {
+        className: "mr-2 ml-2"
+      }, '|'), /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-rebase-btn",
+        onClick: function onClick() {
+          return useCurrentChanges(element);
+        }
+      }, t('Keep_my_modification')), /*#__PURE__*/React.createElement("div", {
+        className: "mr-2 ml-2"
+      }, '|'), /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-rebase-btn",
+        onClick: function onClick() {
+          return useBothChanges(element);
+        }
+      }, t('Keep_both_modification'))), /*#__PURE__*/React.createElement("div", {
+        className: "w-100 sdoc-rebase-current-changes-start",
+        contentEditable: false
+      }, '<<<<<<<'), /*#__PURE__*/React.createElement("div", {
+        className: "w-100 sdoc-rebase-current-changes",
+        contentEditable: false
+      }, /*#__PURE__*/React.createElement(CustomElement, props)));
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "w-100",
+      contentEditable: false
+    }, '======='), /*#__PURE__*/React.createElement("div", {
+      className: "w-100 sdoc-rebase-incoming-changes",
+      contentEditable: false
+    }, /*#__PURE__*/React.createElement(CustomElement, props)), /*#__PURE__*/React.createElement("div", {
+      className: "w-100 sdoc-rebase-incoming-changes-end",
+      contentEditable: false
+    }, '>>>>>>>'));
+  }
   return /*#__PURE__*/React.createElement(CustomElement, props);
 
   // const { element } = props;

package/dist/basic-sdk/socket/helpers.js

@@ -4,6 +4,7 @@ import { Editor, Operation } from '@seafile/slate';
 import { getNode } from '../extension/core';
 import * as OPERATION from '../node-id/constants';
 import { setCursor } from '../cursor/helper';
+import { MODE } from '../../constants';
 export var getNodePathById = function getNodePathById(rootNode, nodeId) {
   var path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
   if (rootNode.id === nodeId) return path;
@@ -252,6 +253,7 @@ export var reExecRevertOperationList = function reExecRevertOperationList(editor
   }
 };
 export var syncRemoteOperations = function syncRemoteOperations(editor, remoteOperations) {
+  if (editor.mode !== MODE.EDITOR) return;
   if (remoteOperations.length === 0) return;
   Editor.withoutNormalizing(editor, function () {
     for (var i = 0; i < remoteOperations.length; i++) {