@seafile/sdoc-editor 0.1.157 → 0.1.159-beta10

package/dist/basic-sdk/extension/plugins/html/rules/text.js

@@ -13,7 +13,7 @@ var textRule = function textRule(element, parseChild) {
     return {
       level: 'level3',
       id: slugid.nice(),
-      BOLD: true,
+      bold: true,
       text: element.textContent
     };
   }
@@ -21,7 +21,7 @@ var textRule = function textRule(element, parseChild) {
     return {
       level: 'level3',
       id: slugid.nice(),
-      CODE: true,
+      code: true,
       text: element.textContent
     };
   }
@@ -29,7 +29,7 @@ var textRule = function textRule(element, parseChild) {
     return {
       level: 'level3',
       id: slugid.nice(),
-      DELETE: true,
+      delete: true,
       text: element.textContent
     };
   }
@@ -37,7 +37,7 @@ var textRule = function textRule(element, parseChild) {
     return {
       level: 'level3',
       id: slugid.nice(),
-      ITALIC: true,
+      italic: true,
       text: element.textContent
     };
   }
@@ -45,7 +45,7 @@ var textRule = function textRule(element, parseChild) {
     return {
       level: 'level3',
       id: slugid.nice(),
-      ADD: true,
+      add: true,
       text: element.textContent
     };
   }

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

@@ -92,8 +92,8 @@ var withMarkDown = function withMarkDown(editor) {
           voids: true
         });
         var newText = beforeText.slice(startOffset + 3, endOffset - 3);
-        Editor.addMark(editor, 'BOLD', true);
-        Editor.addMark(editor, 'ITALIC', true);
+        Editor.addMark(editor, TEXT_STYLE_MAP.BOLD, true);
+        Editor.addMark(editor, TEXT_STYLE_MAP.ITALIC, true);
         return insertText(newText);
       }
     }
@@ -114,7 +114,7 @@ var withMarkDown = function withMarkDown(editor) {
         },
         voids: true
       });
-      var newType = boldType.toUpperCase();
+      var newType = boldType.toLowerCase();
       var _newText = beforeText.slice(_startOffset + 2, _endOffset - 2);
       Editor.addMark(editor, newType, true);
       return insertText(_newText);
@@ -134,7 +134,7 @@ var withMarkDown = function withMarkDown(editor) {
           },
           voids: true
         });
-        var _newType = italicType.toUpperCase();
+        var _newType = italicType.toLowerCase();
         var _newText2 = beforeText.slice(_startOffset2 + 1, _endOffset2 - 1);
         Editor.addMark(editor, _newType, true);
         return insertText(_newText2);

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

@@ -23,6 +23,9 @@ export var TABLE_ELEMENT_POSITION = {
 };
 export var SELECTED_TABLE_CELL_BACKGROUND_COLOR = '#dee8fe';
 export var TABLE_CELL_STYLE = {
-  TEXT_ALIGN: 'textAlign',
-  BACKGROUND_COLOR: 'bg_color'
+  TEXT_ALIGN: 'text_align',
+  BACKGROUND_COLOR: 'background_color'
+};
+export var TABLE_ROW_STYLE = {
+  MIN_HEIGHT: 'min_height'
 };

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

@@ -1,13 +1,14 @@
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import slugid from 'slugid';
 import { Editor, Range, Transforms, Point, Node } from '@seafile/slate';
 import { ReactEditor } from '@seafile/slate-react';
 import { getNodeType, getParentNode, getSelectedNodeByType, isTextNode, getSelectedElems, focusEditor, getNode, findPath, replaceNodeChildren } from '../../core';
 import { ELEMENT_TYPE, KEYBOARD, CLIPBOARD_FORMAT_KEY, INSERT_POSITION } from '../../constants';
-import { TABLE_MAX_ROWS, TABLE_MAX_COLUMNS, EMPTY_SELECTED_RANGE, TABLE_ROW_MIN_HEIGHT, TABLE_CELL_MIN_WIDTH, TABLE_ELEMENT, TABLE_ELEMENT_POSITION } from './constants';
+import { TABLE_MAX_ROWS, TABLE_MAX_COLUMNS, EMPTY_SELECTED_RANGE, TABLE_ROW_MIN_HEIGHT, TABLE_CELL_MIN_WIDTH, TABLE_ELEMENT, TABLE_ELEMENT_POSITION, TABLE_ROW_STYLE } from './constants';
 import EventBus from '../../../utils/event-bus';
 import { INTERNAL_EVENT, PAGE_EDIT_AREA_WIDTH } from '../../../constants';
 import ObjectUtils from '../../../utils/object-utils';
@@ -64,9 +65,7 @@ export var generateTableRow = function generateTableRow(colsCount) {
     id: slugid.nice(),
     type: ELEMENT_TYPE.TABLE_ROW,
     children: children,
-    style: {
-      minHeight: TABLE_ROW_MIN_HEIGHT
-    }
+    style: _defineProperty({}, TABLE_ROW_STYLE.MIN_HEIGHT, TABLE_ROW_MIN_HEIGHT)
   };
 };
 export var generateEmptyTable = function generateEmptyTable(editor) {
@@ -389,11 +388,11 @@ export var setTableSelectedRange = function setTableSelectedRange(editor, range)
 export var updateTableRowHeight = function updateTableRowHeight(editor, element, rowHeight) {
   var path = findPath(editor, element);
   var targetNode = getNode(editor, path);
-  if (targetNode.style && targetNode.style.minHeight === rowHeight) return;
+  var _targetNode$style = targetNode.style,
+    style = _targetNode$style === void 0 ? {} : _targetNode$style;
+  if (style[TABLE_ROW_STYLE.MIN_HEIGHT] === rowHeight) return;
   Transforms.setNodes(editor, {
-    style: _objectSpread(_objectSpread({}, targetNode.style), {}, {
-      minHeight: rowHeight
-    })
+    style: _objectSpread(_objectSpread({}, style), {}, _defineProperty({}, TABLE_ROW_STYLE.MIN_HEIGHT, rowHeight))
   }, {
     at: path
   });
@@ -878,4 +877,10 @@ export var colorBlend = function colorBlend(c1, c2, ratio) {
   g = ('0' + (g || 0).toString(16)).slice(-2);
   b = ('0' + (b || 0).toString(16)).slice(-2);
   return '#' + r + g + b;
+};
+export var getRowHeight = function getRowHeight(element, rowIndex) {
+  var _element$style = element.style,
+    style = _element$style === void 0 ? {} : _element$style;
+  var rowHeight = style[TABLE_ROW_STYLE.MIN_HEIGHT] || TABLE_ROW_MIN_HEIGHT;
+  return rowIndex === 0 ? rowHeight + 1 : rowHeight;
 };

package/dist/basic-sdk/extension/plugins/table/menu/active-table-menu/cell-bg-color-menu.js

@@ -18,7 +18,7 @@ var CellBackgroundColorMenu = function CellBackgroundColorMenu(_ref) {
     updateLastUsedTableCellBackgroundColor = _useColorContext.updateLastUsedTableCellBackgroundColor;
   var setColor = useCallback(function (color) {
     setCellStyle(editor, {
-      bg_color: color
+      background_color: color
     });
   }, [editor]);
   var props = _objectSpread(_objectSpread({

package/dist/basic-sdk/extension/plugins/table/menu/active-table-menu/cell-text-align-menu.js

@@ -1,7 +1,9 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import React, { useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import CommonMenu from './common-menu';
 import { setCellStyle } from '../../helpers';
+import { TABLE_CELL_STYLE } from '../../constants';
 var CellTextAlignMenu = function CellTextAlignMenu(_ref) {
   var editor = _ref.editor,
     readonly = _ref.readonly;
@@ -10,9 +12,7 @@ var CellTextAlignMenu = function CellTextAlignMenu(_ref) {
     t = _useTranslation.t;
   var setTextAlignStyle = useCallback(function (textAlign) {
     if (readonly) return;
-    setCellStyle(editor, {
-      textAlign: textAlign
-    });
+    setCellStyle(editor, _defineProperty({}, TABLE_CELL_STYLE.TEXT_ALIGN, textAlign));
     textAlignRef.current && textAlignRef.current.hidePopover();
   }, [editor, readonly]);
   return /*#__PURE__*/React.createElement(CommonMenu, {

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

@@ -40,7 +40,7 @@ var TableCell = function TableCell(_ref) {
   }, [editor, element]);
   var style = attributes.style || {};
   if (ObjectUtils.hasProperty(element.style, TABLE_CELL_STYLE.TEXT_ALIGN)) {
-    style[TABLE_CELL_STYLE.TEXT_ALIGN] = element.style[TABLE_CELL_STYLE.TEXT_ALIGN];
+    style['textAlign'] = element.style[TABLE_CELL_STYLE.TEXT_ALIGN];
   }
   if (isSelected) {
     style['backgroundColor'] = SELECTED_TABLE_CELL_BACKGROUND_COLOR;
@@ -86,7 +86,7 @@ function renderTableCell(props) {
     // const cellValue = element;
     var style = attributes.style || {};
     if (ObjectUtils.hasProperty(element.style, TABLE_CELL_STYLE.TEXT_ALIGN)) {
-      style[TABLE_CELL_STYLE.TEXT_ALIGN] = element[TABLE_CELL_STYLE.TEXT_ALIGN];
+      style['textAlign'] = element.style[TABLE_CELL_STYLE.TEXT_ALIGN];
     }
     if (ObjectUtils.hasProperty(element.style, TABLE_CELL_STYLE.BACKGROUND_COLOR) && element.style[TABLE_CELL_STYLE.BACKGROUND_COLOR]) {
       style['backgroundColor'] = element.style[TABLE_CELL_STYLE.BACKGROUND_COLOR];

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

@@ -6,12 +6,11 @@ import { useSlateStatic, useReadOnly } from '@seafile/slate-react';
 import { ReactEditor } from '@seafile/slate-react';
 import { findPath } from '../../../core';
 import { TABLE_ROW_MIN_HEIGHT } from '../constants';
-import { updateTableRowHeight } from '../helpers';
+import { getRowHeight, updateTableRowHeight } from '../helpers';
 import { eventStopPropagation, getMouseDownInfo, getMouseMoveInfo, registerResizeEvents, unregisterResizeEvents } from '../../../../utils/mouse-event';
 import { useSettingSelectRangeContext, useResizeHandlersContext } from './hooks';
 import { useScrollContext } from '../../../../hooks/use-scroll-context';
 var TableRow = function TableRow(_ref) {
-  var _element$style;
   var element = _ref.element,
     attributes = _ref.attributes,
     children = _ref.children;
@@ -29,10 +28,9 @@ var TableRow = function TableRow(_ref) {
   var rowPath = findPath(editor, element);
   var pathLength = rowPath ? rowPath.length : 0;
   var rowIndex = rowPath ? rowPath[pathLength - 1] : -1;
-  var minHeight = ((_element$style = element.style) === null || _element$style === void 0 ? void 0 : _element$style.minHeight) || TABLE_ROW_MIN_HEIGHT;
-  var initHeight = rowIndex === 0 ? minHeight + 1 : minHeight;
-  var tableRow = useRef(initHeight);
-  var _useState5 = useState(initHeight),
+  var rowHeight = getRowHeight(element, rowIndex);
+  var tableRow = useRef(rowHeight);
+  var _useState5 = useState(rowHeight),
     _useState6 = _slicedToArray(_useState5, 2),
     height = _useState6[0],
     setHeight = _useState6[1];
@@ -107,13 +105,13 @@ function renderTableRow(props) {
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     var editor = useSlateStatic();
-    var style = element.style;
     var rowPath = findPath(editor, element);
     if (!rowPath) return null;
     var pathLength = rowPath.length;
     var rowIndex = rowPath[pathLength - 1];
-    var minHeight = (style === null || style === void 0 ? void 0 : style.minHeight) || TABLE_ROW_MIN_HEIGHT;
-    var height = rowIndex === 0 ? minHeight + 1 : minHeight;
+    var _element$style = element.style,
+      style = _element$style === void 0 ? {} : _element$style;
+    var height = getRowHeight(element, rowIndex);
     return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
       className: classnames('table-row', attributes.className),
       style: _objectSpread(_objectSpread(_objectSpread({}, attributes.style), style), {}, {

package/dist/basic-sdk/extension/plugins/table/render/table-header/rows-header/row-header.js

@@ -8,9 +8,8 @@ import { useResizeHandlersContext, useTableSelectedRangeContext } from '../../ho
 import { useScrollContext } from '../../../../../../hooks/use-scroll-context';
 import { ELEMENT_TYPE } from '../../../../../constants';
 import { findPath, getSelectedNodeByType } from '../../../../../core';
-import { elementHasImage } from '../../../helpers';
+import { elementHasImage, getRowHeight } from '../../../helpers';
 var RowHeader = function RowHeader(_ref) {
-  var _row$style;
   var row = _ref.row,
     index = _ref.index,
     addIconPosition = _ref.addIconPosition,
@@ -18,8 +17,9 @@ var RowHeader = function RowHeader(_ref) {
     setInsertRowIndex = _ref.setInsertRowIndex,
     selectRange = _ref.selectRange,
     tableSize = _ref.tableSize;
+  var oldRowHeight = getRowHeight(row);
   var editor = useSlateStatic();
-  var _useState = useState(row === null || row === void 0 ? void 0 : (_row$style = row.style) === null || _row$style === void 0 ? void 0 : _row$style.minHeight),
+  var _useState = useState(oldRowHeight),
     _useState2 = _slicedToArray(_useState, 2),
     rowHeight = _useState2[0],
     setRowHeight = _useState2[1];

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

@@ -1,3 +1,4 @@
+import { TEXT_STYLE_MAP } from '../../constants';
 import { getValue, isMenuDisabled, addMark, removeMark } from './helpers';
 var withTextStyle = function withTextStyle(editor) {
   var toggleTextStyle = function toggleTextStyle(type) {
@@ -13,10 +14,10 @@ var withTextStyle = function withTextStyle(editor) {
     }
   };
   editor.toggleTextBold = function () {
-    toggleTextStyle('BOLD');
+    toggleTextStyle(TEXT_STYLE_MAP.BOLD);
   };
   editor.toggleTextItalic = function () {
-    toggleTextStyle('ITALIC');
+    toggleTextStyle(TEXT_STYLE_MAP.ITALIC);
   };
   return editor;
 };

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

@@ -2,7 +2,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["text"];
 import React from 'react';
 import Caret from './caret';
-import { DEFAULT_FONT } from '../../constants';
+import { DEFAULT_FONT, TEXT_STYLE_MAP } from '../../constants';
 import { generatorFontFamily } from '../font/helpers';
 var renderText = function renderText(props, editor) {
   var attributes = props.attributes,
@@ -20,54 +20,55 @@ var renderText = function renderText(props, editor) {
   if (leaf.computed_background_color) {
     style['backgroundColor'] = leaf.computed_background_color;
   }
-  if (leaf.color) {
-    style['color'] = leaf.color;
+  if (leaf[TEXT_STYLE_MAP.COLOR]) {
+    style['color'] = leaf[TEXT_STYLE_MAP.COLOR];
   }
-  if (leaf['highlight-color']) {
-    style['backgroundColor'] = leaf['highlight-color'];
+  if (leaf[TEXT_STYLE_MAP.HIGHLIGHT_COLOR]) {
+    style['backgroundColor'] = leaf[TEXT_STYLE_MAP.HIGHLIGHT_COLOR];
   }
-  if (leaf['font-size']) {
-    var fontSize = leaf['font-size'];
+  if (leaf[TEXT_STYLE_MAP.FONT_SIZE]) {
+    var fontSize = leaf[TEXT_STYLE_MAP.FONT_SIZE];
     if (typeof fontSize === 'number') {
       style['fontSize'] = "".concat(fontSize, "pt");
     }
   }
-  var font = leaf['font'] || DEFAULT_FONT;
-  var fontWeight = leaf.BOLD ? 600 : 400;
-  style['fontFamily'] = generatorFontFamily(font, fontWeight, leaf);
-  if (leaf.BOLD) {
+  if (leaf[TEXT_STYLE_MAP.FONT]) {
+    var fontWeight = leaf[TEXT_STYLE_MAP.BOLD] ? 600 : 400;
+    style['fontFamily'] = generatorFontFamily(leaf[TEXT_STYLE_MAP.FONT], fontWeight);
+  }
+  if (leaf[TEXT_STYLE_MAP.BOLD]) {
     markedChildren = /*#__PURE__*/React.createElement("strong", null, markedChildren);
   }
-  if (leaf.ITALIC) {
+  if (leaf[TEXT_STYLE_MAP.ITALIC]) {
     markedChildren = /*#__PURE__*/React.createElement("i", null, markedChildren);
   }
-  if (leaf.UNDERLINE) {
+  if (leaf[TEXT_STYLE_MAP.UNDERLINE]) {
     markedChildren = /*#__PURE__*/React.createElement("span", {
       style: {
         textDecoration: 'underline'
       }
     }, markedChildren);
   }
-  if (leaf.STRIKETHROUGH) {
+  if (leaf[TEXT_STYLE_MAP.STRIKETHROUGH]) {
     markedChildren = /*#__PURE__*/React.createElement("span", {
       style: {
         textDecoration: 'line-through'
       }
     }, markedChildren);
   }
-  if (leaf.SUPERSCRIPT) {
+  if (leaf[TEXT_STYLE_MAP.SUPERSCRIPT]) {
     markedChildren = /*#__PURE__*/React.createElement("sup", null, markedChildren);
   }
-  if (leaf.SUBSCRIPT) {
+  if (leaf[TEXT_STYLE_MAP.SUBSCRIPT]) {
     markedChildren = /*#__PURE__*/React.createElement("sub", null, markedChildren);
   }
-  if (leaf.CODE) {
+  if (leaf[TEXT_STYLE_MAP.CODE]) {
     markedChildren = /*#__PURE__*/React.createElement("code", null, markedChildren);
   }
-  if (leaf.DELETE) {
+  if (leaf[TEXT_STYLE_MAP.DELETE]) {
     markedChildren = /*#__PURE__*/React.createElement("del", null, markedChildren);
   }
-  if (leaf.ADD) {
+  if (leaf[TEXT_STYLE_MAP.ADD]) {
     markedChildren = /*#__PURE__*/React.createElement("span", null, markedChildren);
   }
   if (leaf.decoration) {

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++) {