@seafile/sdoc-editor 0.1.28-beta3 → 0.1.28-beta4

package/dist/assets/css/diff-viewer.css

@@ -11,3 +11,9 @@
 .sdoc-diff-removed {
   background-color: #ffeef0;
 }
+
+.sdoc-diff-modify {
+  padding-left: 2px;
+  margin-left: -5px;
+  border-left: 3px solid #f9c513;
+}

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

@@ -1,5 +1,4 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-// import shallowEqual from 'shallowequal';
 import { DIFF_TYPE, ELEMENT_TYPE } from '../../basic-sdk/extension/constants';
 import ObjectUtils from './object-utils';
 var getElementIndexInDiffDocument = function getElementIndexInDiffDocument(diffDocument, element) {
@@ -37,7 +36,7 @@ var getNearestElementIndex = function getNearestElementIndex(diffDocument, oldDo
   if (elementInDiffDocument === -1) return diffDocument.length - 1;
   return elementInDiffDocument;
 };
-var updateDiffDocument = function updateDiffDocument(diffDocument, element, oldElement) {
+var updateDiffDocument = function updateDiffDocument(diffDocument, count, element, oldElement) {
   if (!diffDocument || !element || !oldElement) return;
   if (ObjectUtils.isSameObject(element, oldElement)) {
     diffDocument.push(_objectSpread(_objectSpread({}, element), {}, {
@@ -48,6 +47,7 @@ var updateDiffDocument = function updateDiffDocument(diffDocument, element, oldE
   var currentElementType = element.type;
   var oldElementType = oldElement.type;
   if (currentElementType !== oldElementType) {
+    count++;
     diffDocument.push(_objectSpread(_objectSpread({}, oldElement), {}, {
       diff_type: DIFF_TYPE.DELETE
     }));
@@ -70,6 +70,7 @@ var updateDiffDocument = function updateDiffDocument(diffDocument, element, oldE
     case ELEMENT_TYPE.CODE_BLOCK:
     case ELEMENT_TYPE.IMAGE:
       {
+        count++;
         diffDocument.push(_objectSpread(_objectSpread({}, oldElement), {}, {
           diff_type: DIFF_TYPE.DELETE
         }));
@@ -83,15 +84,19 @@ var updateDiffDocument = function updateDiffDocument(diffDocument, element, oldE
     case ELEMENT_TYPE.LIST_ITEM:
     case ELEMENT_TYPE.LIST_LIC:
       {
-        var orderDiff = getElementDiffValue(element.children, oldElement.children);
+        var _getElementDiffValue = getElementDiffValue(element.children, oldElement.children),
+          diffValue = _getElementDiffValue.value,
+          diffCount = _getElementDiffValue.count;
+        count += diffCount;
         diffDocument.push(_objectSpread(_objectSpread({}, element), {}, {
-          children: orderDiff,
+          children: diffValue,
           diff_type: DIFF_TYPE.MODIFY
         }));
         break;
       }
     default:
       {
+        count++;
         diffDocument.push(_objectSpread(_objectSpread({}, oldElement), {}, {
           diff_type: DIFF_TYPE.DELETE
         }));
@@ -105,6 +110,7 @@ var updateDiffDocument = function updateDiffDocument(diffDocument, element, oldE
 var getElementDiffValue = function getElementDiffValue(currentChildren, oldChildren) {
   // init
   var diffDocument = [];
+  var count = 0;
   var currentChildrenMap = {};
   var oldChildrenMap = {};
   currentChildren.forEach(function (element) {
@@ -117,31 +123,39 @@ var getElementDiffValue = function getElementDiffValue(currentChildren, oldChild
   // generator diff elements
   for (var i = 0; i < currentChildren.length; i++) {
     var element = currentChildren[i];
-    var isAdded = !oldChildrenMap[element.id]; // 增加的
+    var isAdded = !oldChildrenMap[element.id]; // added
     if (isAdded) {
+      count++;
       diffDocument.push(_objectSpread(_objectSpread({}, element), {}, {
         diff_type: DIFF_TYPE.ADD
       }));
       continue;
     }
-    updateDiffDocument(diffDocument, element, oldChildrenMap[element.id]);
+    updateDiffDocument(diffDocument, count, element, oldChildrenMap[element.id]);
   }
   oldChildren.forEach(function (oldElement) {
     if (!currentChildrenMap[oldElement.id]) {
-      // 删除的
+      // deleted
+      count++;
       var elementIndex = getNearestElementIndex(diffDocument, oldChildren, oldElement.id);
       diffDocument.splice(elementIndex, 0, _objectSpread(_objectSpread({}, oldElement), {}, {
         diff_type: DIFF_TYPE.DELETE
       }));
     }
   });
-  return diffDocument;
+  return {
+    value: diffDocument,
+    count: count
+  };
 };
-export var getDiffValue = function getDiffValue(currentValue, oldValue) {
+export var getDiff = function getDiff(currentValue, oldValue) {
   var currentVersion = currentValue.version,
     currentChildren = currentValue.children;
   var oldVersion = oldValue.version,
     oldChildren = oldValue.children;
-  if (currentVersion === oldVersion) return currentChildren;
+  if (currentVersion === oldVersion) return {
+    value: currentChildren,
+    count: 0
+  };
   return getElementDiffValue(currentChildren, oldChildren);
 };

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

@@ -7,7 +7,7 @@ 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 { getDiffValue } from '../../basic-sdk/utils/diff';
+import { getDiff } from '../../basic-sdk/utils/diff';
 import { DIFF_TYPE, ELEMENT_TYPE } from '../../basic-sdk/extension/constants';
 import '../../assets/css/diff-viewer.css';
 var DiffViewer = /*#__PURE__*/function (_Component) {
@@ -65,7 +65,7 @@ var DiffViewer = /*#__PURE__*/function (_Component) {
           }), _this.editor);
         }
         return /*#__PURE__*/React.createElement("div", {
-          className: "sdoc-diff sdoc-diff-modify"
+          className: "sdoc-diff-modify"
         }, renderElement(_objectSpread(_objectSpread({}, props), {}, {
           attributes: _objectSpread(_objectSpread({}, props.attributes), {}, {
             className: 'sdoc-diff-modify'
@@ -74,16 +74,27 @@ var DiffViewer = /*#__PURE__*/function (_Component) {
       }
       return renderElement(props, _this.editor);
     };
+    var currentContent = _props.currentContent,
+      lastContent = _props.lastContent;
+    var _getDiff = getDiff(currentContent, lastContent),
+      value = _getDiff.value,
+      count = _getDiff.count;
     _this.editor = withNodeId(editor);
+    _this.value = value;
+    _this.count = count;
     return _this;
   }
   _createClass(DiffViewer, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.didMountCallback && this.props.didMountCallback({
+        value: this.value,
+        count: this.count
+      });
+    }
+  }, {
     key: "render",
     value: function render() {
-      var _this$props = this.props,
-        currentContent = _this$props.currentContent,
-        lastContent = _this$props.lastContent;
-      var value = getDiffValue(currentContent, lastContent);
       return /*#__PURE__*/React.createElement("div", {
         className: "sdoc-editor-container"
       }, /*#__PURE__*/React.createElement("div", {
@@ -92,7 +103,7 @@ var DiffViewer = /*#__PURE__*/function (_Component) {
         className: "flex-fill o-auto"
       }, /*#__PURE__*/React.createElement(Slate, {
         editor: this.editor,
-        value: value,
+        value: this.value,
         onChange: function onChange() {}
       }, /*#__PURE__*/React.createElement("div", {
         className: "article mx-auto"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.1.28beta3",
+  "version": "0.1.28beta4",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",