@seafile/sdoc-editor 0.1.27-beta2 → 0.1.27-beta3

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

@@ -0,0 +1,7 @@
+.sdoc-diff-added {
+  background-color: #e6ffed;
+}
+
+.sdoc-diff-removed {
+  background-color: #ffeef0;
+}

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

@@ -1,5 +1,42 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import shallowEqual from 'shallowequal';
 import { DIFF_TYPE } from '../../constants';
+var getElementIndexInDiffDocument = function getElementIndexInDiffDocument(diffDocument, elementId) {
+  return diffDocument.findIndex(function (element) {
+    return element.id === elementId;
+  });
+};
+var getNearestElementIndex = function getNearestElementIndex(diffDocument, oldDocument, elementId) {
+  var elementInDiffDocument = getElementIndexInDiffDocument(diffDocument, elementId);
+  if (elementInDiffDocument > -1) {
+    return elementInDiffDocument;
+  }
+  var oldDocumentIds = oldDocument.map(function (item) {
+    return typeof item === 'string' ? item : item.id;
+  });
+  var oldElementCount = oldDocumentIds.length;
+  var elementInOldDocumentIndex = oldDocumentIds.indexOf(elementId);
+  var leftIndex = elementInOldDocumentIndex - 1;
+  leftIndex = leftIndex === -1 ? 0 : leftIndex;
+  var rightIndex = elementInOldDocumentIndex + 1;
+  rightIndex = rightIndex === oldElementCount - 1 ? oldElementCount - 1 : rightIndex;
+  while (elementInDiffDocument === -1 && leftIndex > -1 && rightIndex < oldElementCount) {
+    var oldLeftElementId = oldDocumentIds[leftIndex];
+    elementInDiffDocument = getElementIndexInDiffDocument(diffDocument, oldLeftElementId);
+    if (elementInDiffDocument > -1) {
+      break;
+    }
+    var oldLastElementId = oldDocumentIds[rightIndex];
+    elementInDiffDocument = getElementIndexInDiffDocument(diffDocument, oldLastElementId);
+    if (elementInDiffDocument > -1) {
+      break;
+    }
+    leftIndex--;
+    rightIndex++;
+  }
+  if (elementInDiffDocument === -1) return diffDocument.length - 1;
+  return elementInDiffDocument;
+};
 export var getDiffValue = function getDiffValue(currentValue, oldValue) {
   var currentVersion = currentValue.version,
     currentChildren = currentValue.children;
@@ -7,10 +44,61 @@ export var getDiffValue = function getDiffValue(currentValue, oldValue) {
     oldChildren = oldValue.children;
   if (currentVersion === oldVersion) return currentChildren;
   var diffDocument = [];
-  diffDocument = currentChildren.map(function (item) {
-    return _objectSpread(_objectSpread({}, item), {}, {
-      diff_type: DIFF_TYPE.MODIFY
-    });
+
+  // init
+  var currentChildrenMap = {};
+  var oldChildrenMap = {};
+  var currentChildrenIds = [];
+  var oldChildrenIds = [];
+  currentChildren.forEach(function (element) {
+    currentChildrenMap[element.id] = element;
+    currentChildrenIds.push(element.id);
+  });
+  oldChildren.forEach(function (element) {
+    oldChildrenMap[element.id] = element;
+    oldChildrenIds.push(element.id);
   });
+
+  // element ids
+  var addedChildrenIds = currentChildrenIds.filter(function (item) {
+    return !oldChildren.includes(item);
+  }); // 增加的
+  var deletedChildrenIds = oldChildrenIds.filter(function (item) {
+    return !currentChildrenIds.includes(item);
+  }); // 删除的
+
+  // generator diff elements
+  for (var i = 0; i < currentChildren.length; i++) {
+    var element = currentChildren[i];
+    var isAdded = addedChildrenIds.includes(element.id);
+    if (isAdded) {
+      diffDocument.push(_objectSpread(_objectSpread({}, element), {}, {
+        diff_type: DIFF_TYPE.ADD
+      }));
+      continue;
+    }
+    var oldElement = oldChildrenMap[element.id];
+    if (shallowEqual(oldElement, element)) {
+      diffDocument.push(_objectSpread(_objectSpread({}, element), {}, {
+        diff_type: DIFF_TYPE.COMMON
+      }));
+    } else {
+      // 深度比较: 需要修改编辑器，暂时不做
+      diffDocument.push(_objectSpread(_objectSpread({}, element), {}, {
+        diff_type: DIFF_TYPE.ADD
+      }));
+      diffDocument.push(_objectSpread(_objectSpread({}, oldElement), {}, {
+        diff_type: DIFF_TYPE.DELETE
+      }));
+    }
+  }
+  for (var _i = 0; _i < deletedChildrenIds.length; _i++) {
+    var deletedElementId = deletedChildrenIds[_i];
+    var deletedElement = oldChildrenMap[deletedElementId];
+    var elementIndex = getNearestElementIndex(diffDocument, oldChildrenIds, deletedElementId);
+    diffDocument.splice(elementIndex, 0, _objectSpread(_objectSpread({}, deletedElement), {}, {
+      diff_type: DIFF_TYPE.DELETE
+    }));
+  }
   return diffDocument;
 };

package/dist/constants/index.js

@@ -1,5 +1,6 @@
 export var DIFF_TYPE = {
   ADD: 'add',
   DELETE: 'delete',
-  MODIFY: 'modify'
+  MODIFY: 'modify',
+  COMMON: 'common'
 };

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

@@ -7,6 +7,8 @@ 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 { DIFF_TYPE } from '../../constants';
+import '../../assets/css/diff-viewer.css';
 var DiffViewer = /*#__PURE__*/function (_Component) {
   _inherits(DiffViewer, _Component);
   var _super = _createSuper(DiffViewer);
@@ -15,11 +17,26 @@ var DiffViewer = /*#__PURE__*/function (_Component) {
     _classCallCheck(this, DiffViewer);
     _this = _super.call(this, _props);
     _this.renderLeaf = function (props) {
-      console.log('renderLeaf params: ', props);
       return renderLeaf(props, _this.editor);
     };
     _this.renderElement = function (props) {
-      console.log('renderElement params: ', props);
+      var element = props.element;
+      var diff_type = element.diff_type;
+      if (diff_type === DIFF_TYPE.ADD) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "sdoc-diff-added"
+        }, renderElement(props, _this.editor));
+      }
+      if (diff_type === DIFF_TYPE.DELETE) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "sdoc-diff-removed"
+        }, renderElement(props, _this.editor));
+      }
+      if (diff_type === DIFF_TYPE.MODIFY) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "sdoc-diff-modify"
+        }, renderElement(props, _this.editor));
+      }
       return renderElement(props, _this.editor);
     };
     _this.editor = withNodeId(editor);
@@ -32,7 +49,13 @@ var DiffViewer = /*#__PURE__*/function (_Component) {
         currentContent = _this$props.currentContent,
         lastContent = _this$props.lastContent;
       var value = getDiffValue(currentContent, lastContent);
-      return /*#__PURE__*/React.createElement(Slate, {
+      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: value,
         onChange: function onChange() {}
@@ -45,7 +68,7 @@ var DiffViewer = /*#__PURE__*/function (_Component) {
         renderLeaf: this.renderLeaf,
         onDOMBeforeInput: function onDOMBeforeInput() {},
         onKeyDown: function onKeyDown() {}
-      })));
+      }))))));
     }
   }]);
   return DiffViewer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.1.27beta2",
+  "version": "0.1.27beta3",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",
@@ -16,6 +16,7 @@
     "is-url": "^1.2.4",
     "react-cookies": "0.1.1",
     "reactstrap": "8.9.0",
+    "shallowequal": "^1.1.0",
     "slugid": "3.2.0",
     "socket.io-client": "4.6.1",
     "url-parse": "1.5.10",