@seafile/sdoc-editor 0.1.60 → 0.1.61

package/dist/basic-sdk/editor.js

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
 import { Node } from '@seafile/slate';
 import { Editable, Slate, ReactEditor } from '@seafile/slate-react';
 import defaultEditor, { renderLeaf, renderElement, Toolbar, ContextMenu } from './extension';
@@ -19,6 +19,8 @@ import './assets/css/sdoc-editor-plugins.css';
 var SDocEditor = function SDocEditor(_ref) {
   var document = _ref.document,
     config = _ref.config;
+  var articleRef = useRef(null);
+
   // init editor
   var editor = useMemo(function () {
     var newEditor = withNodeId(withSocketIO(defaultEditor, {
@@ -57,6 +59,7 @@ var SDocEditor = function SDocEditor(_ref) {
   // useMount: init socket connection
   useEffect(function () {
     editor.openConnection();
+    editor.width = articleRef.current.children[0].clientWidth;
     return function () {
       editor.closeConnection();
     };
@@ -111,7 +114,8 @@ var SDocEditor = function SDocEditor(_ref) {
     value: slateValue,
     onChange: onChange
   }, /*#__PURE__*/React.createElement("div", {
-    className: "article"
+    className: "article",
+    ref: articleRef
   }, /*#__PURE__*/React.createElement(SetNodeToDecorations, null), /*#__PURE__*/React.createElement(Editable, {
     renderElement: renderElement,
     renderLeaf: renderLeaf,

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

@@ -113,4 +113,12 @@ export var TABLE_ELEMENT_POSITION = {
   AFTER: 'after',
   BEFORE: 'before'
 };
+export var DELETED_STYLE = {
+  background_color: '#ffeef0',
+  color: 'rgb(165, 32, 21)'
+};
+export var ADDED_STYLE = {
+  background_color: '#e6ffed',
+  color: 'rgb(137, 181, 66)'
+};
 export { BLOCKQUOTE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, BOLD_ITALIC, TEXT_ALIGN, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_CENTER, ELEMENT_TYPE, KEYBOARD };

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

@@ -18,13 +18,16 @@ export var match = function match(node, path, predicate) {
   }
   return predicate(node, path);
 };
+export var generateDefaultText = function generateDefaultText() {
+  return {
+    id: slugid.nice(),
+    text: ''
+  };
+};
 export var generateEmptyElement = function generateEmptyElement(type) {
   return {
     type: type,
-    children: [{
-      id: slugid.nice(),
-      text: ''
-    }]
+    children: [generateDefaultText()]
   };
 };
 export function Placeholder(props) {

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

@@ -68,7 +68,8 @@ export var changeToCodeBlock = function changeToCodeBlock(editor, language) {
       id: slugid.nice(),
       type: CODE_LINE,
       children: [{
-        text: strArr.join('\n')
+        text: strArr.join('\n'),
+        id: slugid.nice()
       } // Select the plain text of the node
       ]
     }]
@@ -95,8 +96,10 @@ export var changeToPlainText = function changeToPlainText(editor) {
     return {
       type: 'paragraph',
       children: [{
-        text: s
-      }]
+        text: s,
+        id: slugid.nice()
+      }],
+      id: elem.id
     };
   });
   Transforms.insertNodes(editor, pList, {

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

@@ -99,7 +99,8 @@ var CodeBlock = function CodeBlock(_ref) {
       document.getElementById('sdoc-editor-article-container').removeEventListener('scroll', onScroll);
     }
     return function () {
-      document.getElementById('sdoc-editor-article-container').removeEventListener('scroll', onScroll);
+      var articleContainer = document.getElementById('sdoc-editor-article-container');
+      articleContainer && articleContainer.removeEventListener('scroll', onScroll);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showHoverMenu]);

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

@@ -6,7 +6,5 @@ export var EMPTY_SELECTED_RANGE = {
   minColIndex: -1,
   maxColIndex: -1
 };
-export var TABLE_MAX_WIDTH = 672; // 673 = 794 - 2[borderLeft + borderRight] - 120[paddingLeft + paddingRight]
-
 export var TABLE_ROW_MIN_HEIGHT = 42;
 export var TABLE_CELL_MIN_WIDTH = 35;

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

@@ -5,7 +5,7 @@ import slugid from 'slugid';
 import { Editor, Range, Transforms } from '@seafile/slate';
 import { getNodeType, getParentNode, getSelectedNodeByType, isTextNode, getSelectedElems, focusEditor, getNode, findPath } from '../../core';
 import { ELEMENT_TYPE, 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_MAX_WIDTH } from './constants';
+import { TABLE_MAX_ROWS, TABLE_MAX_COLUMNS, EMPTY_SELECTED_RANGE, TABLE_ROW_MIN_HEIGHT, TABLE_CELL_MIN_WIDTH } from './constants';
 import EventBus from '../../../utils/event-bus';
 import { EXTERNAL_EVENT } from '../../../../constants';
 import ObjectUtils from '../../../utils/object-utils';
@@ -65,8 +65,8 @@ export var generateTableRow = function generateTableRow(colsCount) {
     }
   };
 };
-export var generateEmptyTable = function generateEmptyTable() {
-  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0];
+export var generateEmptyTable = function generateEmptyTable(editor) {
+  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 0];
   var rowsCount = size[0];
   var colsCount = size[1];
   var children = [];
@@ -74,7 +74,7 @@ export var generateEmptyTable = function generateEmptyTable() {
     var tableRow = generateTableRow(colsCount);
     children.push(tableRow);
   }
-  var columnWidth = Math.max(TABLE_CELL_MIN_WIDTH, parseInt(TABLE_MAX_WIDTH / colsCount));
+  var columnWidth = Math.max(TABLE_CELL_MIN_WIDTH, parseInt(editor.width / colsCount));
   var columns = [];
   for (var _i = 0; _i < colsCount; _i++) {
     columns.push({
@@ -91,7 +91,7 @@ export var generateEmptyTable = function generateEmptyTable() {
 export var insertTable = function insertTable(editor, size, selection) {
   if (!size) return;
   if (isTableMenuDisabled(editor)) return;
-  var tableNode = generateEmptyTable(size);
+  var tableNode = generateEmptyTable(editor, size);
   Transforms.insertNodes(editor, tableNode, {
     at: selection
   });
@@ -351,7 +351,7 @@ export var getTableColumnsAfterInsertColumn = function getTableColumnsAfterInser
   var targetInsertColumnsWidth = targetColumn.width * insertColumnCount;
 
   // Currently in scrolling state, insert directly
-  if (totalColumnsWidth > TABLE_MAX_WIDTH) {
+  if (totalColumnsWidth > editor.width) {
     for (var i = 0; i < insertColumnCount; i++) {
       newColumns.splice(targetColumnIndex, 0, targetColumn);
     }
@@ -360,7 +360,7 @@ export var getTableColumnsAfterInsertColumn = function getTableColumnsAfterInser
 
   // Not currently scrolling
   // It is not a scroll state after inserting a new column
-  if (totalColumnsWidth + targetInsertColumnsWidth < TABLE_MAX_WIDTH) {
+  if (totalColumnsWidth + targetInsertColumnsWidth < editor.width) {
     for (var _i5 = 0; _i5 < insertColumnCount; _i5++) {
       newColumns.push(targetColumn);
     }
@@ -372,7 +372,7 @@ export var getTableColumnsAfterInsertColumn = function getTableColumnsAfterInser
     totalColumnsWidth += targetColumn.width;
     newColumns.splice(targetColumnIndex, 0, targetColumn);
   }
-  var proportion = totalColumnsWidth / (TABLE_MAX_WIDTH - 1);
+  var proportion = totalColumnsWidth / (editor.width - 1);
   return newColumns.map(function (column) {
     return _objectSpread(_objectSpread({}, column), {}, {
       width: Math.max(parseInt(column.width / proportion), TABLE_CELL_MIN_WIDTH)
@@ -395,7 +395,7 @@ export var getTableColumns = function getTableColumns(editor, element) {
   var initColumns = [];
   for (var i = 0; i < columnsCount; i++) {
     var column = {
-      width: Math.max(TABLE_CELL_MIN_WIDTH, parseInt(TABLE_MAX_WIDTH / columnsCount))
+      width: Math.max(TABLE_CELL_MIN_WIDTH, parseInt(editor.width / columnsCount))
     };
     initColumns.push(column);
   }
@@ -418,7 +418,7 @@ export var getCellColumn = function getCellColumn(editor, cellElement) {
   } else {
     var columnsCount = tableElement.children[0].children.length;
     column = {
-      width: Math.max(TABLE_CELL_MIN_WIDTH, parseInt(TABLE_MAX_WIDTH / columnsCount))
+      width: Math.max(TABLE_CELL_MIN_WIDTH, parseInt(editor.width / columnsCount))
     };
   }
   return column;

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

@@ -74,6 +74,7 @@ function renderTableCell(props) {
     var width = column.width;
     return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
       style: _objectSpread(_objectSpread(_objectSpread({}, style), element.style), {}, {
+        minWidth: width,
         width: width
       }),
       className: classnames('table-cell', attributes.className),

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

@@ -1,13 +1,15 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useCallback } from 'react';
 import classnames from 'classnames';
-import { TABLE_MAX_WIDTH } from '../constants';
+import { useSlateStatic } from '@seafile/slate-react';
 import { TableRootContext } from './hooks';
 var TableRoot = function TableRoot(_ref) {
   var attributes = _ref.attributes,
     _ref$columns = _ref.columns,
     columns = _ref$columns === void 0 ? [] : _ref$columns,
     children = _ref.children;
+  var editor = useSlateStatic();
   var tableScrollWrapper = useRef(null);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
@@ -16,19 +18,22 @@ var TableRoot = function TableRoot(_ref) {
   var allWidth = columns.reduce(function (pre, cur) {
     return pre + cur.width;
   }, 0);
-  var onScroll = function onScroll(event) {
+  var onScroll = useCallback(function (event) {
     setScrollLeft(event.target.scrollLeft);
-  };
+  }, []);
   return /*#__PURE__*/React.createElement(TableRootContext.Provider, {
     value: tableScrollWrapper.current
-  }, /*#__PURE__*/React.createElement("div", Object.assign({
-    className: classnames('sdoc-table-wrapper', {
-      'scroll position-relative': allWidth > TABLE_MAX_WIDTH
+  }, /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
+    className: classnames('sdoc-table-wrapper', attributes.className, {
+      'scroll position-relative': allWidth > editor.width
+    }),
+    style: _objectSpread(_objectSpread({}, attributes.style), {}, {
+      maxWidth: editor.width
     })
-  }, attributes), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: classnames('sdoc-table-scroll-wrapper', {
-      'scroll-at-center': scrollLeft + TABLE_MAX_WIDTH !== allWidth && scrollLeft > 0,
-      'scroll-at-right': scrollLeft + TABLE_MAX_WIDTH === allWidth,
+      'scroll-at-center': scrollLeft + editor.width !== allWidth && scrollLeft > 0,
+      'scroll-at-right': scrollLeft + editor.width === allWidth,
       'scroll-at-left': scrollLeft === 0
     }),
     ref: tableScrollWrapper,

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

@@ -9,6 +9,18 @@ var renderText = function renderText(props, editor) {
   var text = leaf.text,
     rest = _objectWithoutProperties(leaf, _excluded);
   var markedChildren = React.cloneElement(children);
+  var style = {};
+  if (leaf.isCaret) {
+    style['position'] = 'relative';
+    style['display'] = 'inline-block';
+    style['minWidth'] = '2px';
+  }
+  if (leaf.background_color) {
+    style['backgroundColor'] = leaf.background_color;
+  }
+  if (leaf.color) {
+    style['color'] = leaf.color;
+  }
   if (leaf.BOLD) {
     markedChildren = /*#__PURE__*/React.createElement("strong", null, markedChildren);
   }
@@ -36,20 +48,13 @@ var renderText = function renderText(props, editor) {
     markedChildren = /*#__PURE__*/React.createElement("del", null, markedChildren);
   }
   if (leaf.ADD) {
-    markedChildren = /*#__PURE__*/React.createElement("ins", null, markedChildren);
+    markedChildren = /*#__PURE__*/React.createElement("span", null, markedChildren);
   }
   if (leaf.decoration) {
     markedChildren = /*#__PURE__*/React.createElement("span", {
       className: "token ".concat(leaf.type)
     }, markedChildren);
   }
-  var style = {
-    position: 'relative'
-  };
-  if (leaf.isCaret) {
-    style['display'] = 'inline-block';
-    style['minWidth'] = '2px';
-  }
   return /*#__PURE__*/React.createElement("span", Object.assign({
     "data-id": leaf.id
   }, attributes, {

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

@@ -0,0 +1,255 @@
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import ObjectUtils from './object-utils';
+var buildValues = function buildValues(diff, components, newString, oldString, valueType, useLongestToken) {
+  var componentPos = 0;
+  var componentLen = components.length;
+  var newPos = 0;
+  var oldPos = 0;
+  for (; componentPos < componentLen; componentPos++) {
+    var component = components[componentPos];
+    if (!component.removed) {
+      if (!component.added && useLongestToken) {
+        var value = newString.slice(newPos, newPos + component.count);
+        // eslint-disable-next-line no-loop-func
+        value = value.map(function (value, i) {
+          var oldValue = oldString[oldPos + i];
+          return oldValue.length > value.length ? oldValue : value;
+        });
+        component.value = diff.join(value, valueType);
+      } else {
+        component.value = diff.join(newString.slice(newPos, newPos + component.count), valueType);
+      }
+      newPos += component.count;
+
+      // Common case
+      if (!component.added) {
+        oldPos += component.count;
+      }
+    } else {
+      component.value = diff.join(oldString.slice(oldPos, oldPos + component.count), valueType);
+      oldPos += component.count;
+
+      // Reverse add and remove so removes are output first to match common convention
+      // The diffing algorithm is tied to add then remove output and this is the simplest
+      // route to get the desired output with minimal overhead.
+      if (componentPos && components[componentPos - 1].added) {
+        var tmp = components[componentPos - 1];
+        components[componentPos - 1] = components[componentPos];
+        components[componentPos] = tmp;
+      }
+    }
+  }
+
+  // Special case handle for when one terminal is ignored (i.e. whitespace).
+  // For this case we merge the terminal into the prior string and drop the change.
+  // This is only available for string mode.
+  var lastComponent = components[componentLen - 1];
+  if (componentLen > 1 && typeof lastComponent.value === 'string' && (lastComponent.added || lastComponent.removed) && diff.equals('', lastComponent.value)) {
+    components[componentLen - 2].value += lastComponent.value;
+    components.pop();
+  }
+  return components;
+};
+var clonePath = function clonePath(path) {
+  return {
+    newPos: path.newPos,
+    components: path.components.slice(0)
+  };
+};
+var DiffText = /*#__PURE__*/_createClass(function DiffText(oldValue, newValue) {
+  var _this = this;
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  _classCallCheck(this, DiffText);
+  this.done = function (value) {
+    if (_this.callback) {
+      setTimeout(function () {
+        this.callback(undefined, value);
+      }, 0);
+      return true;
+    }
+    return value;
+  };
+  // Main worker method. checks all permutations of a given edit length for acceptance.
+  this.execCompareLength = function (bestPath) {
+    for (var diagonalPath = -1 * _this.comparePath; diagonalPath <= _this.comparePath; diagonalPath += 2) {
+      var basePath = void 0;
+      var addPath = bestPath[diagonalPath - 1];
+      var removePath = bestPath[diagonalPath + 1];
+      var oldPos = (removePath ? removePath.newPos : 0) - diagonalPath;
+      if (addPath) {
+        // No one else is going to attempt to use this value, clear it
+        bestPath[diagonalPath - 1] = undefined;
+      }
+      var canAdd = addPath && addPath.newPos + 1 < _this.newLen;
+      var canRemove = removePath && 0 <= oldPos && oldPos < _this.oldLen;
+      if (!canAdd && !canRemove) {
+        // If this path is a terminal then prune
+        bestPath[diagonalPath] = undefined;
+        continue;
+      }
+
+      // Select the diagonal that we want to branch from. We select the prior
+      // path whose position in the new string is the farthest from the origin
+      // and does not pass the bounds of the diff graph
+      if (!canAdd || canRemove && addPath.newPos < removePath.newPos) {
+        basePath = clonePath(removePath);
+        _this.pushComponent(basePath.components, undefined, true);
+      } else {
+        basePath = addPath; // No need to clone, we've pulled it from the list
+        basePath.newPos++;
+        _this.pushComponent(basePath.components, true, undefined);
+      }
+      oldPos = _this.extractCommon(basePath, _this.newValue, _this.oldValue, diagonalPath);
+
+      // If we have hit the end of both strings, then we are done
+      if (basePath.newPos + 1 >= _this.newLen && oldPos + 1 >= _this.oldLen) {
+        return _this.done(buildValues(_this, basePath.components, _this.newValue, _this.oldValue, _this.valueType, _this.useLongestToken));
+      } else {
+        // Otherwise track this path as a potential candidate and continue.
+        bestPath[diagonalPath] = basePath;
+      }
+    }
+    _this.comparePath++;
+  };
+  this.exec = function (bestPath) {
+    setTimeout(function () {
+      if (this.comparePath > this.maxEditLength) {
+        return this.callback();
+      }
+      if (!this.execCompareLength(bestPath)) {
+        this.exec(bestPath);
+      }
+    }, 0);
+  };
+  this.pushComponent = function (components, added, removed) {
+    var last = components[components.length - 1];
+    if (last && last.added === added && last.removed === removed) {
+      // We need to clone here as the component clone operation is just
+      // as shallow array clone
+      components[components.length - 1] = {
+        count: last.count + 1,
+        added: added,
+        removed: removed
+      };
+    } else {
+      components.push({
+        count: 1,
+        added: added,
+        removed: removed
+      });
+    }
+  };
+  this.extractCommon = function (basePath, newString, oldString, diagonalPath) {
+    var newLen = newString.length;
+    var oldLen = oldString.length;
+    var newPos = basePath.newPos;
+    var oldPos = newPos - diagonalPath;
+    var commonCount = 0;
+    while (newPos + 1 < newLen && oldPos + 1 < oldLen && _this.equals(newString[newPos + 1], oldString[oldPos + 1])) {
+      newPos++;
+      oldPos++;
+      commonCount++;
+    }
+    if (commonCount) {
+      basePath.components.push({
+        count: commonCount
+      });
+    }
+    basePath.newPos = newPos;
+    return oldPos;
+  };
+  this.equals = function (left, right) {
+    if (_this.options.comparator) {
+      return _this.options.comparator(left, right);
+    } else {
+      return left === right || _this.options.ignoreCase && left.toLowerCase() === right.toLowerCase();
+    }
+  };
+  this.removeEmpty = function (array, type) {
+    if (type === 'Array') return array;
+    var ret = [];
+    for (var i = 0; i < array.length; i++) {
+      if (array[i]) {
+        ret.push(array[i]);
+      }
+    }
+    return ret;
+  };
+  this.tokenize = function (value, valueType) {
+    if (valueType === 'Array') return value.slice();
+    return value.split('');
+  };
+  this.join = function (value, valueType) {
+    if (valueType === 'Array') return value;
+    return value.join('');
+  };
+  this.getDiffs = function () {
+    if (!_this.canCompare) {
+      return [{
+        value: _this.oldValue,
+        removed: true
+      }, {
+        value: _this.newValue,
+        added: true
+      }];
+    }
+    var bestPath = [{
+      newPos: -1,
+      components: []
+    }];
+
+    // Seed editLength = 0, i.e. the content starts with the same values
+    var oldPos = _this.extractCommon(bestPath[0], _this.newValue, _this.oldValue, 0);
+    if (bestPath[0].newPos + 1 >= _this.newLen && oldPos + 1 >= _this.oldLen) {
+      // Identity per the equality and tokenizer
+      return _this.done([{
+        value: _this.join(_this.newValue, _this.valueType),
+        count: _this.oldValue.length
+      }]);
+    }
+
+    // Performs the length of edit iteration. Is a bit fugly as this has to support the
+    // sync and async mode which is never fun. Loops over execCompareLength until a value
+    // is produced, or until the edit length exceeds options.maxEditLength (if given),
+    // in which case it will return undefined.
+    if (_this.callback) {
+      _this.exec(bestPath);
+    } else {
+      while (_this.comparePath <= _this.maxEditLength) {
+        var ret = _this.execCompareLength(bestPath);
+        if (ret) {
+          return ret;
+        }
+      }
+    }
+  };
+  this.oldValue = oldValue;
+  this.newValue = newValue;
+  var oldValueType = ObjectUtils.getDataType(oldValue);
+  var newValueType = ObjectUtils.getDataType(newValue);
+  this.canCompare = true;
+  if (oldValueType !== newValueType) {
+    this.canCompare = false;
+    return;
+  }
+  this.valueType = newValueType;
+  this.callback = options.callback;
+  var optionsType = ObjectUtils.getDataType(options);
+  if (optionsType === 'function') {
+    this.callback = options;
+    this.options = {};
+  } else {
+    this.options = {};
+  }
+  this.comparePath = 1;
+  this.oldValue = this.removeEmpty(this.tokenize(oldValue, oldValueType), oldValueType);
+  this.oldLen = this.oldValue.length;
+  this.newValue = this.removeEmpty(this.tokenize(newValue, newValueType), newValueType);
+  this.newLen = this.newValue.length;
+  this.maxEditLength = this.newLen + this.oldLen;
+  if (this.options.maxEditLength) {
+    this.maxEditLength = Math.min(this.maxEditLength, this.options.maxEditLength);
+  }
+});
+export default DiffText;

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

@@ -1,122 +1,206 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import { DIFF_TYPE, ELEMENT_TYPE } from '../../basic-sdk/extension/constants';
+import slugid from 'slugid';
+import { ELEMENT_TYPE, ADDED_STYLE, DELETED_STYLE } from '../../basic-sdk/extension/constants';
 import ObjectUtils from './object-utils';
-var getElementIndexInDiffDocument = function getElementIndexInDiffDocument(diffValue, element) {
-  if (!diffValue || !element) return -1;
-  return diffValue.findIndex(function (item) {
-    return item.id === element.id;
-  });
+import DiffText from './diff-text';
+import { normalizeChildren } from './document-utils';
+
+// ignore
+var IGNORE_KEYS = ['BOLD', 'ITALIC', 'columns', 'minHeight', 'language', 'white_space'];
+var generatorDiffTextElement = function generatorDiffTextElement(textElement, diffType) {
+  var style = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  if (!textElement) return null;
+  if (!diffType) return textElement;
+  var id = textElement.id;
+  return _objectSpread(_objectSpread({}, textElement), {}, _defineProperty({
+    id: id || slugid.nice()
+  }, diffType, true), style);
+};
+
+// Depth facilitates each child node, adding diffType to each end node
+var generatorDiffElement = function generatorDiffElement(element, diffType) {
+  var _objectSpread3;
+  var style = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  if (!element) return null;
+  if (!Array.isArray(element.children) || element.children.length === 0) {
+    return generatorDiffTextElement(element, diffType, style);
+  }
+  return _objectSpread(_objectSpread({}, element), {}, (_objectSpread3 = {}, _defineProperty(_objectSpread3, diffType, true), _defineProperty(_objectSpread3, "children", element.children.map(function (item) {
+    return generatorDiffElement(item, diffType, style);
+  })), _objectSpread3));
 };
-var getNearestElementIndex = function getNearestElementIndex(diff, oldDocument, elementId) {
-  var diffValue = diff.value;
-  var elementInDiffDocumentIdx = getElementIndexInDiffDocument(diffValue, elementId);
-  if (elementInDiffDocumentIdx > -1) return elementInDiffDocumentIdx + 1;
-  var oldElementCount = oldDocument.length;
-  var elementInOldDocumentIndex = oldDocument.findIndex(function (item) {
-    return item.id === elementId;
+var generateIdMapAndIds = function generateIdMapAndIds(elements) {
+  var map = {};
+  var ids = [];
+  if (!Array.isArray(elements) || elements.length === 0) return {
+    map: map,
+    ids: ids
+  };
+  elements.forEach(function (element) {
+    ids.push(element.id);
+    map[element.id] = element;
   });
-  var leftIndex = elementInOldDocumentIndex - 1;
-  leftIndex = leftIndex === -1 ? 0 : leftIndex;
-  var rightIndex = elementInOldDocumentIndex + 1;
-  rightIndex = rightIndex === oldElementCount - 1 ? oldElementCount - 1 : rightIndex;
-  while (elementInDiffDocumentIdx === -1 && leftIndex > -2 && rightIndex < oldElementCount + 1) {
-    if (leftIndex > -1) {
-      var oldLeftElement = oldDocument[leftIndex];
-      elementInDiffDocumentIdx = getElementIndexInDiffDocument(diffValue, oldLeftElement);
-      if (elementInDiffDocumentIdx > -1) {
-        return elementInDiffDocumentIdx + 1;
-      }
-    }
-    if (rightIndex < oldElementCount) {
-      var oldLastElement = oldDocument[rightIndex];
-      elementInDiffDocumentIdx = getElementIndexInDiffDocument(diffValue, oldLastElement);
-      if (elementInDiffDocumentIdx > -1) {
-        return elementInDiffDocumentIdx;
-      }
-    }
-    leftIndex--;
-    rightIndex++;
-    if (leftIndex === -2 && rightIndex < oldElementCount) {
-      leftIndex = -1;
-    }
-    if (rightIndex === oldElementCount && leftIndex > -1) {
-      rightIndex = oldElementCount;
+  return {
+    map: map,
+    ids: ids
+  };
+};
+var hasChildren = function hasChildren(element) {
+  if (!element) return false;
+  if (!Array.isArray(element.children) || element.children.length === 0) return false;
+  return true;
+};
+
+// id diffs
+var getIdDiffs = function getIdDiffs(oldIds, newIds) {
+  var diff = new DiffText(oldIds, newIds);
+  return diff.getDiffs();
+};
+
+// text diffs
+var getTextDiff = function getTextDiff(element, oldElement, diff) {
+  var newText = element.text;
+  var oldText = oldElement.text;
+  var textDiff = new DiffText(oldText || '', newText || '');
+  var textDiffs = textDiff.getDiffs();
+  var newChildren = [];
+  textDiffs.forEach(function (item, index) {
+    var id = "".concat(element.id || slugid.nice(), "-").concat(index);
+    var elementItem = {
+      id: id,
+      text: item.value
+    };
+    if (item.added) {
+      diff.changes.push(id);
+      var commonChild = generatorDiffTextElement(elementItem, 'ADD', ADDED_STYLE);
+      newChildren.push(commonChild);
+    } else if (item.removed) {
+      diff.changes.push(id);
+      var _commonChild = generatorDiffTextElement(elementItem, 'DELETE', DELETED_STYLE);
+      newChildren.push(_commonChild);
+    } else {
+      var _commonChild2 = generatorDiffTextElement(elementItem);
+      newChildren.push(_commonChild2);
     }
+  });
+  return newChildren;
+};
+var getCommonDiff = function getCommonDiff(element, oldElement, diff) {
+  if (!hasChildren(element) && !hasChildren(oldElement)) {
+    var _newChildren = getTextDiff(element, oldElement, diff);
+    return [_objectSpread(_objectSpread({}, element), {}, {
+      children: _newChildren
+    })];
   }
-  return diffValue.length - 1;
+  if (!hasChildren(element) || !hasChildren(oldElement)) {
+    var elementId = element.id || slugid.nice();
+    diff.changes.push("".concat(elementId, "_delete"));
+    return [generatorDiffElement(_objectSpread(_objectSpread({}, oldElement), {}, {
+      id: "".concat(elementId, "_delete")
+    }), 'DELETE', DELETED_STYLE), generatorDiffElement(_objectSpread(_objectSpread({}, element), {}, {
+      id: "".concat(elementId, "_add")
+    }), 'ADD', ADDED_STYLE)];
+  }
+
+  // Content does not change
+  if (ObjectUtils.isSameObject(element, oldElement, [].concat(IGNORE_KEYS, ['type']))) {
+    return [element];
+  }
+
+  // Compare content
+  var currentChildren = element.children;
+  var oldChildren = oldElement.children;
+  var _generateIdMapAndIds = generateIdMapAndIds(currentChildren),
+    currentMap = _generateIdMapAndIds.map,
+    currentIds = _generateIdMapAndIds.ids;
+  var _generateIdMapAndIds2 = generateIdMapAndIds(oldChildren),
+    oldMap = _generateIdMapAndIds2.map,
+    oldIds = _generateIdMapAndIds2.ids;
+  var idDiffs = getIdDiffs(oldIds, currentIds);
+  var newChildren = [];
+  idDiffs.forEach(function (idDiff) {
+    var ids = idDiff.value;
+    var isAdded = idDiff.added;
+    var isDelete = idDiff.removed;
+    ids.forEach(function (id) {
+      var newChildrenElement = currentMap[id];
+      var oldChildrenElement = oldMap[id];
+      if (isAdded) {
+        diff.changes.push(id);
+        newChildren.push(generatorDiffElement(newChildrenElement, 'ADD', ADDED_STYLE));
+      } else if (isDelete) {
+        diff.changes.push(id);
+        newChildren.push(generatorDiffElement(oldChildrenElement, 'DELETE', DELETED_STYLE));
+      } else {
+        if (ObjectUtils.isSameObject(newChildrenElement, oldChildrenElement, IGNORE_KEYS)) {
+          newChildren.push(newChildrenElement);
+        } else {
+          if (newChildrenElement.type === oldChildrenElement.type) {
+            if (!newChildrenElement.type) {
+              var textDiffs = getTextDiff(newChildrenElement, oldChildrenElement, diff);
+              newChildren.push.apply(newChildren, _toConsumableArray(textDiffs));
+            } else if (newChildrenElement.type === ELEMENT_TYPE.IMAGE) {
+              if (newChildrenElement.data.src === oldChildrenElement.data.src) {
+                newChildren.push(newChildrenElement);
+              } else {
+                newChildren.push(generatorDiffTextElement(_objectSpread(_objectSpread({}, element), {}, {
+                  id: element.id + '_add'
+                }), 'ADD', ADDED_STYLE));
+                newChildren.push(generatorDiffTextElement(_objectSpread(_objectSpread({}, oldChildrenElement), {}, {
+                  id: element.id + '_delete'
+                }), 'DELETE', DELETED_STYLE));
+              }
+            } else if (newChildrenElement.type === ELEMENT_TYPE.LINK) {
+              if (newChildrenElement.title !== oldChildrenElement.title) {
+                var diffElements = getCommonDiff(newChildrenElement, oldChildrenElement, diff);
+                newChildren.push.apply(newChildren, _toConsumableArray(diffElements));
+              } else if (newChildrenElement.href !== oldChildrenElement.href) {
+                diff.changes.push(oldChildrenElement.id + '_delete');
+                newChildren.push(generatorDiffTextElement(_objectSpread(_objectSpread({}, oldChildrenElement), {}, {
+                  id: oldChildrenElement.id + '_delete'
+                }), 'DELETE', DELETED_STYLE));
+                newChildren.push(generatorDiffTextElement(_objectSpread(_objectSpread({}, newChildrenElement), {}, {
+                  id: newChildrenElement.id + '_add'
+                }), 'ADD', ADDED_STYLE));
+              } else {
+                newChildren.push(newChildrenElement);
+              }
+            } else if (newChildrenElement.type === ELEMENT_TYPE.TABLE_ROW || newChildrenElement.type === ELEMENT_TYPE.TABLE_CELL) {
+              var newRows = getCommonDiff(newChildrenElement, oldChildrenElement, diff);
+              newChildren.push.apply(newChildren, _toConsumableArray(newRows));
+            } else {
+              var commonDiffs = getCommonDiff(newChildrenElement, oldChildrenElement, diff);
+              newChildren.push.apply(newChildren, _toConsumableArray(commonDiffs));
+            }
+          } else {
+            diff.changes.push(oldChildrenElement.id + '_delete');
+            newChildren.push(generatorDiffTextElement(_objectSpread(_objectSpread({}, oldChildrenElement), {}, {
+              id: oldChildrenElement.id + '_delete'
+            }), 'DELETE', DELETED_STYLE));
+            newChildren.push(generatorDiffTextElement(_objectSpread(_objectSpread({}, newChildrenElement), {}, {
+              id: newChildrenElement.id + '_add'
+            }), 'ADD', ADDED_STYLE));
+          }
+        }
+      }
+    });
+  });
+  return [_objectSpread(_objectSpread({}, element), {}, {
+    children: newChildren
+  })];
 };
 var updateDiffValue = function updateDiffValue(diff, element, oldElement) {
   if (!diff || !element || !oldElement) return;
-  if (ObjectUtils.isSameObject(element, oldElement)) {
-    diff.value.push(_objectSpread(_objectSpread({}, element), {}, {
-      diff_type: DIFF_TYPE.COMMON
-    }));
-    return;
-  }
-  var currentElementType = element.type;
-  var oldElementType = oldElement.type;
-  if (currentElementType !== oldElementType) {
-    diff.changes.push(oldElement.id);
-    diff.value.push(_objectSpread(_objectSpread({}, oldElement), {}, {
-      diff_type: DIFF_TYPE.DELETE
-    }));
-    diff.value.push(_objectSpread(_objectSpread({}, element), {}, {
-      diff_type: DIFF_TYPE.ADD
-    }));
+  if (ObjectUtils.isSameObject(element, oldElement, IGNORE_KEYS)) {
+    diff.value.push(element);
     return;
   }
-  switch (currentElementType) {
-    case ELEMENT_TYPE.PARAGRAPH:
-    case ELEMENT_TYPE.HEADER1:
-    case ELEMENT_TYPE.HEADER2:
-    case ELEMENT_TYPE.HEADER3:
-    case ELEMENT_TYPE.HEADER4:
-    case ELEMENT_TYPE.HEADER5:
-    case ELEMENT_TYPE.HEADER6:
-    case ELEMENT_TYPE.BLOCKQUOTE:
-    case ELEMENT_TYPE.LINK:
-    case ELEMENT_TYPE.CHECK_LIST_ITEM:
-    case ELEMENT_TYPE.CODE_BLOCK:
-    case ELEMENT_TYPE.IMAGE:
-      {
-        diff.changes.push(oldElement.id);
-        diff.value.push(_objectSpread(_objectSpread({}, oldElement), {}, {
-          diff_type: DIFF_TYPE.DELETE
-        }));
-        diff.value.push(_objectSpread(_objectSpread({}, element), {}, {
-          diff_type: DIFF_TYPE.ADD
-        }));
-        break;
-      }
-    case ELEMENT_TYPE.ORDERED_LIST:
-    case ELEMENT_TYPE.UNORDERED_LIST:
-    case ELEMENT_TYPE.LIST_ITEM:
-    case ELEMENT_TYPE.LIST_LIC:
-      {
-        var _diff$changes;
-        var _getElementDiffValue = getElementDiffValue(element.children, oldElement.children),
-          diffValue = _getElementDiffValue.value,
-          diffChanges = _getElementDiffValue.changes;
-        (_diff$changes = diff.changes).push.apply(_diff$changes, _toConsumableArray(diffChanges));
-        diff.value.push(_objectSpread(_objectSpread({}, element), {}, {
-          children: diffValue,
-          diff_type: DIFF_TYPE.MODIFY
-        }));
-        break;
-      }
-    default:
-      {
-        diff.changes.push(oldElement.id);
-        diff.value.push(_objectSpread(_objectSpread({}, oldElement), {}, {
-          diff_type: DIFF_TYPE.DELETE
-        }));
-        diff.value.push(_objectSpread(_objectSpread({}, element), {}, {
-          diff_type: DIFF_TYPE.ADD
-        }));
-        break;
-      }
-  }
+  var elements = getCommonDiff(element, oldElement, diff);
+  elements.forEach(function (item) {
+    diff.value.push(item);
+  });
 };
 
 /**
@@ -131,37 +215,34 @@ var getElementDiffValue = function getElementDiffValue(currentContent, oldConten
     value: [],
     changes: []
   };
-  var currentContentMap = {};
-  var oldContentMap = {};
-  currentContent.forEach(function (element) {
-    currentContentMap[element.id] = element;
-  });
-  oldContent.forEach(function (element) {
-    oldContentMap[element.id] = element;
-  });
-
-  // generator diff elements
-  for (var i = 0; i < currentContent.length; i++) {
-    var element = currentContent[i];
-    var isAdded = !oldContentMap[element.id]; // added
-    if (isAdded) {
-      diff.changes.push(element.id);
-      diff.value.push(_objectSpread(_objectSpread({}, element), {}, {
-        diff_type: DIFF_TYPE.ADD
-      }));
-      continue;
-    }
-    updateDiffValue(diff, element, oldContentMap[element.id]);
-  }
-  oldContent.forEach(function (oldElement) {
-    var oldElementId = oldElement.id;
-    if (!currentContentMap[oldElementId]) {
-      // deleted
-      diff.changes.push(oldElementId);
-      var elementIndex = getNearestElementIndex(diff, oldContent, oldElementId);
-      diff.value.splice(elementIndex, 0, _objectSpread(_objectSpread({}, oldElement), {}, {
-        diff_type: DIFF_TYPE.DELETE
-      }));
+  var _generateIdMapAndIds3 = generateIdMapAndIds(currentContent),
+    currentContentMap = _generateIdMapAndIds3.map,
+    currentIds = _generateIdMapAndIds3.ids;
+  var _generateIdMapAndIds4 = generateIdMapAndIds(oldContent),
+    oldContentMap = _generateIdMapAndIds4.map,
+    oldIds = _generateIdMapAndIds4.ids;
+  var diffs = getIdDiffs(oldIds, currentIds);
+  diffs.forEach(function (diffItem) {
+    var elementIds = diffItem.value;
+    if (diffItem.removed) {
+      elementIds.forEach(function (elementId) {
+        diff.changes.push(elementId);
+        var element = oldContentMap[elementId];
+        var diffElement = generatorDiffElement(element, 'DELETE', DELETED_STYLE);
+        diff.value.push(diffElement);
+      });
+    } else if (diffItem.added) {
+      elementIds.forEach(function (elementId) {
+        diff.changes.push(elementId);
+        var element = currentContentMap[elementId];
+        var diffElement = generatorDiffElement(element, 'ADD', ADDED_STYLE);
+        diff.value.push(diffElement);
+      });
+    } else {
+      elementIds.forEach(function (elementId) {
+        var element = currentContentMap[elementId];
+        updateDiffValue(diff, element, oldContentMap[element.id]);
+      });
     }
   });
   return diff;
@@ -180,10 +261,16 @@ export var getDiff = function getDiff() {
   var oldValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
     children: []
   };
-  var currentVersion = currentValue.version,
-    currentContent = currentValue.children;
-  var oldVersion = oldValue.version,
-    oldContent = oldValue.children;
+  var _currentValue$childre = _objectSpread(_objectSpread({}, currentValue), {}, {
+      children: normalizeChildren(currentValue.children)
+    }),
+    currentVersion = _currentValue$childre.version,
+    currentContent = _currentValue$childre.children;
+  var _oldValue$children = _objectSpread(_objectSpread({}, oldValue), {}, {
+      children: normalizeChildren(oldValue.children)
+    }),
+    oldVersion = _oldValue$children.version,
+    oldContent = _oldValue$children.children;
   if (currentVersion === oldVersion) return {
     value: currentContent,
     changes: []

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

@@ -0,0 +1,18 @@
+import ObjectUtils from './object-utils';
+import { generateDefaultText } from '../../basic-sdk/extension/core/utils/index';
+export var normalizeChildren = function normalizeChildren(children) {
+  // text
+  if (!Array.isArray(children)) return children;
+
+  // element
+  if (Array.isArray(children) && children.length === 0) return [generateDefaultText()];
+  return children.map(function (child) {
+    // child is text
+    if (ObjectUtils.hasProperty(child, 'text') && !ObjectUtils.hasProperty(child, 'children')) {
+      return child;
+    }
+    // child is element
+    child.children = normalizeChildren(child.children);
+    return child;
+  });
+};

package/dist/basic-sdk/viewer.js

@@ -1,74 +1,56 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React from 'react';
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useEffect, useState } from 'react';
 import { Editable, Slate } from '@seafile/slate-react';
-import editor, { renderLeaf as _renderLeaf, renderElement as _renderElement } from './extension';
+import defaultEditor, { renderLeaf as _renderLeaf, renderElement as _renderElement } from './extension';
 import { withSocketIO } from './socket';
 import withNodeId from './node-id';
 import './assets/css/layout.css';
 import './assets/css/sdoc-editor-plugins.css';
 import { generateDefaultDocContent } from '../utils';
-var SDocViewer = /*#__PURE__*/function (_React$Component) {
-  _inherits(SDocViewer, _React$Component);
-  var _super = _createSuper(SDocViewer);
-  function SDocViewer(props) {
-    var _this;
-    _classCallCheck(this, SDocViewer);
-    _this = _super.call(this, props);
-    var _ref = props.document || generateDefaultDocContent(),
-      children = _ref.children;
-    _this.state = {
-      slateValue: children,
-      isLoading: true
-    };
-    _this.socketManager = null;
-    if (!props.isOpenSocket) {
-      _this.editor = withNodeId(editor);
-    } else {
-      var document = props.document,
-        config = props.config;
-      _this.editor = withSocketIO(withNodeId(editor, {
-        document: document,
-        config: config
-      }));
-    }
-    return _this;
-  }
-  _createClass(SDocViewer, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var slateValue = this.state.slateValue;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-editor-container"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-editor-content"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "flex-fill o-auto"
-      }, /*#__PURE__*/React.createElement(Slate, {
-        editor: this.editor,
-        value: slateValue,
-        onChange: function onChange() {}
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "article mx-auto"
-      }, /*#__PURE__*/React.createElement(Editable, {
-        readOnly: true,
-        placeholder: "",
-        renderElement: function renderElement(props) {
-          return _renderElement(props, _this2.editor);
-        },
-        renderLeaf: function renderLeaf(props) {
-          return _renderLeaf(props, _this2.editor);
-        },
-        onDOMBeforeInput: function onDOMBeforeInput(event) {}
-      }))))));
-    }
-  }]);
-  return SDocViewer;
-}(React.Component);
-SDocViewer.defaultProps = {
-  isOpenSocket: false
+var SDocViewer = function SDocViewer(_ref) {
+  var isOpenSocket = _ref.isOpenSocket,
+    document = _ref.document,
+    config = _ref.config,
+    customRenderLeaf = _ref.renderLeaf,
+    customRenderElement = _ref.renderElement;
+  var editor = !isOpenSocket ? withNodeId(defaultEditor) : withSocketIO(withNodeId(defaultEditor, {
+    document: document,
+    config: config
+  }));
+  var slateValue = (document || generateDefaultDocContent()).children;
+  var articleRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    setUpdate = _useState2[1];
+  useEffect(function () {
+    editor.width = articleRef.current.children[0].clientWidth;
+    setUpdate(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-editor-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-editor-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex-fill o-auto sdoc-editor-article-container",
+    id: "sdoc-editor-article-container"
+  }, /*#__PURE__*/React.createElement(Slate, {
+    editor: editor,
+    value: slateValue,
+    onChange: function onChange() {}
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "article mx-auto",
+    ref: articleRef
+  }, /*#__PURE__*/React.createElement(Editable, {
+    readOnly: true,
+    placeholder: "",
+    renderElement: function renderElement(props) {
+      return (customRenderElement || _renderElement)(props, editor);
+    },
+    renderLeaf: function renderLeaf(props) {
+      return (customRenderLeaf || _renderLeaf)(props, editor);
+    },
+    onDOMBeforeInput: function onDOMBeforeInput(event) {}
+  }))))));
 };
 export default SDocViewer;

package/dist/pages/diff-viewer/diff-viewer.js

@@ -1,120 +1,49 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React, { Component } from 'react';
-import { Editable, Slate } from '@seafile/slate-react';
-import editor, { renderLeaf, renderElement } from '../../basic-sdk/extension';
-import withNodeId from '../../basic-sdk/node-id';
+import React, { useCallback, useEffect } from 'react';
+import { renderLeaf, renderElement } from '../../basic-sdk/extension';
 import { getDiff } from '../../basic-sdk/utils/diff';
-import { DIFF_TYPE, ELEMENT_TYPE } from '../../basic-sdk/extension/constants';
 import context from '../../context';
+import { ELEMENT_TYPE, ADDED_STYLE, DELETED_STYLE } from '../../basic-sdk/extension/constants';
+import { SDocViewer } from '../../basic-sdk';
 import '../../assets/css/diff-viewer.css';
-var DiffViewer = /*#__PURE__*/function (_Component) {
-  _inherits(DiffViewer, _Component);
-  var _super = _createSuper(DiffViewer);
-  function DiffViewer(_props) {
-    var _this;
-    _classCallCheck(this, DiffViewer);
-    _this = _super.call(this, _props);
-    _this.renderLeaf = function (props) {
-      return renderLeaf(props, _this.editor);
-    };
-    _this.renderElement = function (props) {
-      var element = props.element;
-      var diff_type = element.diff_type,
-        type = element.type;
-      if (diff_type === DIFF_TYPE.ADD) {
-        if (type === ELEMENT_TYPE.LIST_ITEM) {
-          return renderElement(_objectSpread(_objectSpread({}, props), {}, {
-            attributes: _objectSpread(_objectSpread({}, props.attributes), {}, {
-              className: 'sdoc-diff-added'
-            })
-          }), _this.editor);
-        }
-        return /*#__PURE__*/React.createElement("div", {
-          className: "sdoc-diff sdoc-diff-added"
-        }, renderElement(_objectSpread(_objectSpread({}, props), {}, {
-          attributes: _objectSpread(_objectSpread({}, props.attributes), {}, {
-            className: 'sdoc-diff-added'
-          })
-        }), _this.editor));
-      }
-      if (diff_type === DIFF_TYPE.DELETE) {
-        if (type === ELEMENT_TYPE.LIST_ITEM) {
-          return renderElement(_objectSpread(_objectSpread({}, props), {}, {
-            attributes: _objectSpread(_objectSpread({}, props.attributes), {}, {
-              className: 'sdoc-diff-removed'
-            })
-          }), _this.editor);
-        }
-        return /*#__PURE__*/React.createElement("div", {
-          className: "sdoc-diff sdoc-diff-removed"
-        }, renderElement(_objectSpread(_objectSpread({}, props), {}, {
-          attributes: _objectSpread(_objectSpread({}, props.attributes), {}, {
-            className: 'sdoc-diff-removed'
-          })
-        }), _this.editor));
-      }
-      if (diff_type === DIFF_TYPE.MODIFY) {
-        if (type === ELEMENT_TYPE.ORDERED_LIST || type === ELEMENT_TYPE.UNORDERED_LIST) {
-          return renderElement(_objectSpread(_objectSpread({}, props), {}, {
-            attributes: _objectSpread(_objectSpread({}, props.attributes), {}, {
-              className: 'sdoc-diff-modify'
-            })
-          }), _this.editor);
-        }
-        return /*#__PURE__*/React.createElement("div", {
-          className: "sdoc-diff-modify"
-        }, renderElement(_objectSpread(_objectSpread({}, props), {}, {
-          attributes: _objectSpread(_objectSpread({}, props.attributes), {}, {
-            className: 'sdoc-diff-modify'
-          })
-        }), _this.editor));
-      }
-      return renderElement(props, _this.editor);
-    };
-    var currentContent = _props.currentContent,
-      lastContent = _props.lastContent;
-    _this.diff = currentContent ? getDiff(currentContent, lastContent) : {
-      value: [],
-      changes: []
-    };
-    _this.editor = withNodeId(editor);
-    context.initSettings();
-    return _this;
-  }
-  _createClass(DiffViewer, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.props.didMountCallback && this.props.didMountCallback(this.diff);
-    }
-  }, {
-    key: "render",
-    value: function render() {
+var DiffViewer = function DiffViewer(_ref) {
+  var currentContent = _ref.currentContent,
+    lastContent = _ref.lastContent,
+    didMountCallback = _ref.didMountCallback;
+  var diff = currentContent ? getDiff(currentContent, lastContent) : {
+    value: [],
+    changes: []
+  };
+  context.initSettings();
+  useEffect(function () {
+    didMountCallback && didMountCallback(diff);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var customRenderLeaf = useCallback(function (props, editor) {
+    return renderLeaf(props, editor);
+  }, []);
+  var customRenderElement = useCallback(function (props, editor) {
+    var element = props.element;
+    var type = element.type;
+    if (type === ELEMENT_TYPE.IMAGE && (element.ADD || element.DELETE)) {
+      var style = element.ADD ? ADDED_STYLE : DELETED_STYLE;
       return /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-editor-container"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-editor-content"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "flex-fill o-auto"
-      }, /*#__PURE__*/React.createElement(Slate, {
-        editor: this.editor,
-        value: this.diff.value,
-        onChange: function onChange() {}
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "article mx-auto"
-      }, /*#__PURE__*/React.createElement(Editable, {
-        readOnly: true,
-        placeholder: "",
-        renderElement: this.renderElement,
-        renderLeaf: this.renderLeaf,
-        onDOMBeforeInput: function onDOMBeforeInput() {},
-        onKeyDown: function onKeyDown() {}
-      }))))));
+        className: "p-1",
+        style: {
+          backgroundColor: style.background_color,
+          width: 'fit-content',
+          height: 'fit-content'
+        }
+      }, renderElement(props, editor));
     }
-  }]);
-  return DiffViewer;
-}(Component);
+    return renderElement(props, editor);
+  }, []);
+  return /*#__PURE__*/React.createElement(SDocViewer, {
+    document: {
+      children: diff.value
+    },
+    renderLeaf: customRenderLeaf,
+    renderElement: customRenderElement
+  });
+};
 export default DiffViewer;

package/dist/pages/diff-viewer/history-version-viewer.js

@@ -1,10 +1,15 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React from 'react';
 import { SDocViewer } from '../../basic-sdk';
 import { generateDefaultDocContent } from '../../utils';
+import { normalizeChildren } from '../../basic-sdk/utils/document-utils';
 function HistoryVersionViewer(props) {
   var document = props.document;
+  var validDocument = document || generateDefaultDocContent();
   return /*#__PURE__*/React.createElement(SDocViewer, {
-    document: document || generateDefaultDocContent()
+    document: _objectSpread(_objectSpread({}, validDocument), {}, {
+      children: normalizeChildren(validDocument.children)
+    })
   });
 }
 export default HistoryVersionViewer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.1.60",
+  "version": "0.1.61",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",
@@ -116,7 +116,7 @@
     "resolve": "1.12.0",
     "resolve-url-loader": "3.1.5",
     "sass-loader": "7.2.0",
-    "seafile-js": "0.2.190",
+    "seafile-js": "0.2.202",
     "semver": "6.3.0",
     "style-loader": "^1.0.1",
     "terser-webpack-plugin": "4.2.3",