@seafile/sdoc-editor 0.1.60 → 0.1.62

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.62",
   "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",