@seafile/sdoc-editor 1.0.212-alph-0.1.9 → 1.0.212-alph-2.1.0

package/dist/api/seafile-api.js

@@ -40,13 +40,17 @@ class SeafileAPI {
   uploadSdocImage(docUuid, imageFiles) {
     const url = '/api/v2.1/seadoc/upload-image/' + docUuid + '/';
     const form = new FormData();
+    console.log(form, imageFiles);
     for (const fileItem of imageFiles) {
+      console.log(imageFiles, fileItem);
       if (fileItem.type.startsWith('image/')) {
         const fileName = this.getImageFileNameWithUuid(fileItem);
         const file = new File([fileItem], fileName, {
           type: fileItem.type
         });
+        console.log(1, file);
         form.append('file', file);
+        console.log(form);
       }
     }
     return this.req.post(url, form);

package/dist/basic-sdk/assets/css/sdoc-editor-plugins.css

@@ -62,6 +62,61 @@
   caret-color: transparent;
 }
 
+.sdoc-editor__article .sdoc-image-wrapper .sdoc-image-placeholder-wrapper {
+  width: 100%;
+  aspect-ratio: 1;
+  background-color: #f0f0f0;
+  border: 1px solid #ccc;
+  padding: 0 3%;
+  max-width: 100%;
+  user-select: all;
+  pointer-events: all;
+}
+
+.sdoc-editor__article .sdoc-image-wrapper .sdoc-image-tip-content,
+.sdoc-editor__article .sdoc-image-wrapper .sdoc-image-title {
+  user-select: none;
+  pointer-events: none;
+}
+
+.sdoc-editor__article .sdoc-image-title .sdoc-exclamation-circle {
+  font-size: 18px;
+  align-items: center;
+  justify-content: center;
+  color: red;
+  display: flex;
+}
+
+.sdoc-editor__article .sdoc-image-title .sdoc-image-tip-title {
+  color: red;
+  font-size: 18px;
+  user-select: none;
+  pointer-events: none;
+}
+
+.sdoc-editor__article .sdoc-image-process-container {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+}
+
+.sdoc-editor__article .sdoc-image-process-container .loading-spinner {
+  border: 5px solid #d8d8d8;
+  border-top: 5px solid #939393;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  animation: spin 1s linear infinite;
+  user-select: none;
+  pointer-events: none;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
 .sdoc-editor__article .sdoc-image-inner {
   position: relative;
   display: inline-block;

package/dist/basic-sdk/extension/commons/insert-element-dialog/index.js

@@ -44,7 +44,9 @@ const InsertElementDialog = _ref => {
   const uploadLocalVideoInputRef = (0, _react.useRef)();
   const onFileChanged = (0, _react.useCallback)(event => {
     const files = event.target.files;
+    console.log(1, files);
     _context.default.uploadLocalImage(files).then(fileUrl => {
+      console.log(2, fileUrl);
       (0, _helpers.insertImage)(validEditor, fileUrl, validEditor.selection, insertPosition);
       if (uploadLocalImageInputRef.current) {
         uploadLocalImageInputRef.current.value = '';

package/dist/basic-sdk/extension/constants/element-type.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WIKI_LINK = exports.VIDEO_LINK = exports.VIDEO = exports.UNORDERED_LIST = exports.TWO_COLUMN = exports.TOP_LEVEL_TYPES = exports.TITLE = exports.THREE_COLUMN = exports.TABLE_ROW = exports.TABLE_CELL = exports.TABLE = exports.SUBTITLE = exports.SEATABLE_TABLE = exports.SEATABLE_COLUMN = exports.SDOC_LINK = exports.QUICK_INSERT = exports.PARAGRAPH = exports.ORDERED_LIST = exports.MULTI_COLUMN = exports.MENTION_TEMP = exports.MENTION = exports.LIST_ITEM = exports.LINK = exports.INLINE_LEVEL_TYPES = exports.IMAGE_BLOCK = exports.IMAGE = exports.HEADER6 = exports.HEADER5 = exports.HEADER4 = exports.HEADER3 = exports.HEADER2 = exports.HEADER1 = exports.HEADER = exports.FOUR_COLUMN = exports.FONT_SIZE_REDUCE = exports.FONT_SIZE_INCREASE = exports.FONT_SIZE = exports.FIVE_COLUMN = exports.FILE_LINK_INSET_INPUT_TEMP = exports.FILE_LINK = exports.COLUMN = exports.CODE_LINE = exports.CODE_BLOCK = exports.CHECK_LIST_ITEM = exports.CALL_OUT = exports.BLOCKQUOTE = exports.ASK_AI = void 0;
+exports.WIKI_LINK = exports.VIDEO_LINK = exports.VIDEO = exports.UNORDERED_LIST = exports.TWO_COLUMN = exports.TOP_LEVEL_TYPES = exports.TITLE = exports.THREE_COLUMN = exports.TABLE_ROW = exports.TABLE_CELL = exports.TABLE = exports.SUBTITLE = exports.SEATABLE_TABLE = exports.SEATABLE_COLUMN = exports.SDOC_LINK = exports.QUICK_INSERT = exports.PARAGRAPH = exports.ORDERED_LIST = exports.MULTI_COLUMN = exports.MENTION_TEMP = exports.MENTION = exports.LIST_ITEM = exports.LINK = exports.INLINE_LEVEL_TYPES = exports.IMAGE_BLOCK = exports.IMAGE = exports.HEADER6 = exports.HEADER5 = exports.HEADER4 = exports.HEADER3 = exports.HEADER2 = exports.HEADER1 = exports.HEADER = exports.GROUP = exports.FOUR_COLUMN = exports.FONT_SIZE_REDUCE = exports.FONT_SIZE_INCREASE = exports.FONT_SIZE = exports.FIVE_COLUMN = exports.FILE_LINK_INSET_INPUT_TEMP = exports.FILE_LINK = exports.COLUMN = exports.CODE_LINE = exports.CODE_BLOCK = exports.CHECK_LIST_ITEM = exports.CALL_OUT = exports.BLOCKQUOTE = exports.ASK_AI = void 0;
 const BLOCKQUOTE = exports.BLOCKQUOTE = 'blockquote';
 const TITLE = exports.TITLE = 'title';
 const SUBTITLE = exports.SUBTITLE = 'subtitle';
@@ -51,5 +51,8 @@ const ASK_AI = exports.ASK_AI = 'ask_ai';
 const FONT_SIZE = exports.FONT_SIZE = 'font-size';
 const FONT_SIZE_INCREASE = exports.FONT_SIZE_INCREASE = 'font-size-increase';
 const FONT_SIZE_REDUCE = exports.FONT_SIZE_REDUCE = 'font-size-reduce';
+
+// group
+const GROUP = exports.GROUP = 'group';
 const TOP_LEVEL_TYPES = exports.TOP_LEVEL_TYPES = [BLOCKQUOTE, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, ORDERED_LIST, UNORDERED_LIST, CHECK_LIST_ITEM, PARAGRAPH, CODE_BLOCK, TABLE];
 const INLINE_LEVEL_TYPES = exports.INLINE_LEVEL_TYPES = [IMAGE, LINK, MENTION, MENTION_TEMP];

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

@@ -158,6 +158,12 @@ Object.defineProperty(exports, "GOOGLE_FONT_CLASS", {
     return _font.GOOGLE_FONT_CLASS;
   }
 });
+Object.defineProperty(exports, "GROUP", {
+  enumerable: true,
+  get: function () {
+    return _elementType.GROUP;
+  }
+});
 Object.defineProperty(exports, "HEADER", {
   enumerable: true,
   get: function () {

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

@@ -47,7 +47,7 @@ Object.keys(_replaceNode).forEach(function (key) {
     }
   });
 });
-var _updateParentNode = require("./update-parent-node.js");
+var _updateParentNode = require("./update-parent-node");
 Object.keys(_updateParentNode).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _updateParentNode[key]) return;
@@ -57,4 +57,15 @@ Object.keys(_updateParentNode).forEach(function (key) {
       return _updateParentNode[key];
     }
   });
+});
+var _rebase = require("./rebase");
+Object.keys(_rebase).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _rebase[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _rebase[key];
+    }
+  });
 });

package/dist/basic-sdk/extension/core/transforms/rebase.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.replaceRebaseNodeChildren = exports.replaceRebaseNode = exports.rebaseNode = exports.deleteRebaseNodeMark = void 0;
+var _slate = require("@seafile/slate");
+var _removeNodeChildren = require("./remove-node-children");
+var _queries = require("../queries");
+var _constants = require("../../constants");
+const replaceRebaseNodeChildren = (editor, _ref) => {
+  let {
+    at,
+    nodes,
+    insertOptions,
+    removeOptions
+  } = _ref;
+  (0, _removeNodeChildren.removeNodeChildren)(editor, at, removeOptions);
+  _slate.Transforms.insertNodes(editor, nodes, {
+    ...insertOptions,
+    at: at.concat([0])
+  });
+};
+exports.replaceRebaseNodeChildren = replaceRebaseNodeChildren;
+const replaceRebaseNode = function (editor) {
+  let {
+    at,
+    nodes,
+    insertOptions,
+    removeOptions
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const parentPath = at.slice(0, -1);
+  const parentNode = at.length > 1 ? (0, _queries.getNode)(editor, parentPath) : {};
+  if ([_constants.ELEMENT_TYPE.ORDERED_LIST, _constants.ELEMENT_TYPE.UNORDERED_LIST].includes(parentNode.type)) {
+    const newChildren = parentNode.children.slice(0);
+    newChildren.splice(at[at.length - 1], 1, ...nodes);
+    replaceRebaseNodeChildren(editor, {
+      at: parentPath,
+      nodes: newChildren
+    });
+    return;
+  }
+  _slate.Transforms.removeNodes(editor, {
+    at,
+    ...removeOptions
+  });
+  _slate.Transforms.insertNodes(editor, nodes, {
+    ...insertOptions,
+    at
+  });
+};
+exports.replaceRebaseNode = replaceRebaseNode;
+const deleteRebaseNodeMark = function (editor, path, element) {
+  let marks = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+  const newElement = {
+    ...element
+  };
+  marks.forEach(markItem => {
+    newElement[markItem] && delete newElement[markItem];
+  });
+  _slate.Transforms.removeNodes(editor, {
+    at: path
+  });
+  _slate.Transforms.insertNodes(editor, newElement, {
+    at: path
+  });
+};
+exports.deleteRebaseNodeMark = deleteRebaseNodeMark;
+const rebaseNode = (editor, callback) => {
+  if (!callback) return;
+  _slate.Editor.withoutNormalizing(editor, () => {
+    callback && callback();
+  });
+};
+exports.rebaseNode = rebaseNode;

package/dist/basic-sdk/extension/core/transforms/replace-node.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.replaceNodeChildren = exports.replaceNode = exports.deleteNodeMark = void 0;
+exports.replaceNodeChildren = exports.replaceNode = void 0;
 var _slate = require("@seafile/slate");
 var _removeNodeChildren = require("./remove-node-children");
 const replaceNodeChildren = (editor, _ref) => {
@@ -40,18 +40,4 @@ const replaceNode = function (editor) {
     });
   });
 };
-exports.replaceNode = replaceNode;
-const deleteNodeMark = function (editor, path, element) {
-  let marks = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
-  const newElement = {
-    ...element
-  };
-  marks.forEach(markItem => {
-    newElement[markItem] && delete newElement[markItem];
-  });
-  replaceNode(editor, {
-    at: path,
-    nodes: newElement
-  });
-};
-exports.deleteNodeMark = deleteNodeMark;
+exports.replaceNode = replaceNode;

package/dist/basic-sdk/extension/core/transforms/update-parent-node.js

@@ -4,13 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.updateRebaseParentNodeByPath = void 0;
+var _slate = require("@seafile/slate");
 var _constants = require("../../../constants");
+var _constants2 = require("../../constants");
 var _queries = require("../queries");
-var _replaceNode = require("./replace-node");
 const updateRebaseParentNodeByPath = (editor, path) => {
   const parentPath = path.slice(0, -1);
   const parentNode = (0, _queries.getNode)(editor, parentPath);
-  if (parentNode.children.filter(item => item[_constants.REBASE_MARK_KEY.REBASE_TYPE]).length !== 0) return;
+  if (![_constants2.ELEMENT_TYPE.ORDERED_LIST, _constants2.ELEMENT_TYPE.UNORDERED_LIST].includes(parentNode.type)) return;
   const newParentElement = {
     ...parentNode
   };
@@ -23,9 +24,11 @@ const updateRebaseParentNodeByPath = (editor, path) => {
     item[_constants.REBASE_MARK_KEY.ORIGIN] && delete item[_constants.REBASE_MARK_KEY.ORIGIN];
     return item;
   });
-  (0, _replaceNode.replaceNode)(editor, {
-    at: parentPath,
-    nodes: newParentElement
+  _slate.Transforms.removeNodes(editor, {
+    at: parentPath
+  });
+  _slate.Transforms.insertNodes(editor, newParentElement, {
+    at: parentPath
   });
 };
 exports.updateRebaseParentNodeByPath = updateRebaseParentNodeByPath;

package/dist/basic-sdk/extension/plugins/group/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _constants = require("../../constants");
+var _renderElem = require("./render-elem");
+const GroupPlugin = {
+  type: _constants.ELEMENT_TYPE.GROUP,
+  renderElements: [_renderElem.renderGroup]
+};
+var _default = exports.default = GroupPlugin;

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

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderGroup = void 0;
+var _react = _interopRequireDefault(require("react"));
+const Group = _ref => {
+  let {
+    element,
+    attributes,
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
+    "data-id": element.id
+  }, attributes, {
+    className: className
+  }), children);
+};
+const renderGroup = props => {
+  return /*#__PURE__*/_react.default.createElement(Group, props);
+};
+exports.renderGroup = renderGroup;

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IMAGE_DISPLAY_TYPE = exports.IMAGE_BORDER_TYPE = void 0;
+exports.SVG_WIDTH = exports.IMAGE_DISPLAY_TYPE = exports.IMAGE_BORDER_TYPE = void 0;
 var _blackBorder = _interopRequireDefault(require("../../../../assets/images/black-border.png"));
 var _greyBorder = _interopRequireDefault(require("../../../../assets/images/grey-border.png"));
 var _noBorder = _interopRequireDefault(require("../../../../assets/images/no-border.png"));
@@ -27,4 +27,5 @@ const IMAGE_BORDER_TYPE = exports.IMAGE_BORDER_TYPE = [{
   type: 'black',
   imgUrl: _blackBorder.default,
   value: '2px solid #41464A'
-}];
+}];
+const SVG_WIDTH = exports.SVG_WIDTH = 360;

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateImage = exports.selectImageWhenSelectPartial = exports.resetCursor = exports.queryCopyMoveProgressView = exports.isInsertImageMenuDisabled = exports.insertImageFiles = exports.insertImage = exports.hasSdocImages = exports.handleBase64Image = exports.getSingleImageFromFragment = exports.getImageURL = exports.getImageData = exports.generateImageNode = void 0;
+exports.updateImage = exports.selectImageWhenSelectPartial = exports.resetCursor = exports.queryCopyMoveProgressView = exports.isInsertImageMenuDisabled = exports.insertImageFiles = exports.insertImage = exports.hasSdocImages = exports.handleBase64Image = exports.getSingleImageFromFragment = exports.getImageURL = exports.getImageData = exports.generateImageNode = exports.downloadImage = void 0;
 var _urlJoin = _interopRequireDefault(require("url-join"));
 var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
@@ -133,11 +133,25 @@ const updateImage = (editor, data) => {
   });
 };
 exports.updateImage = updateImage;
+const downloadImage = async url => {
+  const response = await fetch(url);
+  const blob = await response.blob();
+  const file = new File([blob], 'downloaded_image', {
+    type: blob.type
+  });
+  // console.log(file, context.uploadLocalImage(file));
+  console.log(10);
+  const fileUrl = await _context.default.uploadLocalImage([file]);
+  console.log(fileUrl);
+  return fileUrl;
+};
+exports.downloadImage = downloadImage;
 const getImageURL = (data, editor) => {
   const {
     src: url,
     column_key
   } = data;
+  console.log('data', data);
   if (column_key) {
     const column = (0, _helpers.getColumnByKey)(editor.columns || [], column_key);
     const {
@@ -153,7 +167,12 @@ const getImageURL = (data, editor) => {
       return imgUrl;
     }
   }
-  if (url && url.startsWith('http')) return url;
+  if (url && url.startsWith('http')) {
+    // return url;
+    console.log(6, url);
+    // debugger;
+    return Promise.resolve().then(() => downloadImage(url));
+  }
   const serviceUrl = _context.default.getSetting('serviceUrl');
   const assetsUrl = _context.default.getSetting('assetsUrl');
   return (0, _urlJoin.default)(serviceUrl, assetsUrl, url);

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

@@ -20,9 +20,8 @@ var _useScrollContext = require("../../../hooks/use-scroll-context");
 var _constants2 = require("./constants");
 var _constants3 = require("../../constants");
 var _constants4 = require("../../../../constants");
-var _imagePlaceholder = _interopRequireDefault(require("../../../assets/images/image-placeholder.png"));
 const Image = _ref => {
-  var _imageRef$current, _imageRef$current2;
+  var _imageRef$current, _imageRef$current2, _imageRef$current3;
   let {
     element,
     editor,
@@ -57,6 +56,8 @@ const Image = _ref => {
   const [isShowImageHoverMenu, setIsShowImageHoverMenu] = (0, _react.useState)(false);
   const [menuPosition, setMenuPosition] = (0, _react.useState)({});
   const [caption, setCaption] = (0, _react.useState)((data === null || data === void 0 ? void 0 : data.caption) || '');
+  const [isLoading, setIsLoading] = (0, _react.useState)(true);
+  const svgWidth = movingWidth || element.data.width || _constants2.SVG_WIDTH;
   const registerEvent = (0, _react.useCallback)(eventList => {
     eventList.forEach(element => {
       document.addEventListener(element.eventName, element.event);
@@ -71,12 +72,17 @@ const Image = _ref => {
     var _resizerRef$current;
     event.preventDefault();
     event.stopPropagation();
+    if (!imageRef.current) return;
     const changeX = event.clientX - ((_resizerRef$current = resizerRef.current) === null || _resizerRef$current === void 0 ? void 0 : _resizerRef$current.getBoundingClientRect().left) - 5;
-    const imageWidth = imageRef.current.width + changeX;
-    if (imageWidth < 20) return;
-    imageRef.current.width = imageWidth;
-    setMovingWidth(imageWidth);
-  }, []);
+    let newWidth = isShowImagePlaceholder ? imageRef.current.getBoundingClientRect().width + changeX : imageRef.current.width + changeX;
+    if (newWidth < 20) return;
+    if (isShowImagePlaceholder) {
+      imageRef.current.width.baseVal.value = newWidth;
+    } else {
+      imageRef.current.width = newWidth;
+    }
+    setMovingWidth(newWidth);
+  }, [isShowImagePlaceholder]);
   const onResizeEnd = (0, _react.useCallback)(event => {
     event.preventDefault();
     event.stopPropagation();
@@ -89,7 +95,7 @@ const Image = _ref => {
     }]);
     const newData = {
       ...element.data,
-      width: imageRef.current.width
+      width: parseFloat(imageRef.current.style.width)
     };
     (0, _helpers.updateImage)(editor, newData);
 
@@ -194,6 +200,7 @@ const Image = _ref => {
   const reloadImage = (0, _react.useCallback)(() => {
     if (imageRef.current) {
       imageRef.current['src'] = (0, _helpers.getImageURL)(data, editor);
+      console.log((0, _helpers.getImageURL)(data, editor));
       setIsShowImagePlaceholder(false);
     }
   }, [data, editor]);
@@ -202,6 +209,7 @@ const Image = _ref => {
     if (data.src.startsWith('data:image/jpeg;base64')) {
       return (0, _helpers.handleBase64Image)(editor, path, data);
     }
+    setIsLoading(false);
     setIsShowImagePlaceholder(true);
     // External network images do not reload after failure to load
     if (!data.src.startsWith('http')) {
@@ -224,7 +232,22 @@ const Image = _ref => {
       });
     }
   }, [data, editor, element]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isShowImagePlaceholder && /*#__PURE__*/_react.default.createElement("span", Object.assign({
+  (0, _react.useEffect)(() => {
+    if (imageRef.current) {
+      imageRef.current.onload = () => setIsLoading(false);
+      imageRef.current.onerror = onImageLoadError;
+    }
+  }, [element.data]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-image-process-container",
+    style: {
+      display: isLoading ? 'inline-block' : 'none'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "loading-spinner"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "spinner"
+  })), children), isShowImagePlaceholder && /*#__PURE__*/_react.default.createElement("span", Object.assign({
     className: (0, _classnames.default)('sdoc-image-wrapper', className)
   }, attributes, {
     style: {
@@ -233,13 +256,60 @@ const Image = _ref => {
     onMouseOver: e => (0, _helpers.selectImageWhenSelectPartial)(e, editor, element, isSelected),
     contentEditable: "false",
     suppressContentEditableWarning: true
-  }), /*#__PURE__*/_react.default.createElement("img", {
+  }), /*#__PURE__*/_react.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: `0 0 ${svgWidth} ${svgWidth}`,
+    preserveAspectRatio: "xMinYMin meet",
+    className: (0, _classnames.default)('sdoc-image-placeholder-wrapper', {
+      'image-selected': isSelected
+    }),
     ref: imageRef,
-    src: _imagePlaceholder.default,
     style: getImageStyle(),
-    draggable: false,
-    alt: ""
-  }), children), !isShowImagePlaceholder && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", Object.assign({
+    draggable: false
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    fill: "#f0f0f0"
+  }), /*#__PURE__*/_react.default.createElement("g", {
+    className: "sdoc-image-content-wrapper",
+    transform: `translate(${svgWidth / 2}, ${svgWidth / 2}) scale(${svgWidth / _constants2.SVG_WIDTH})`
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    className: "sdoc-image-title",
+    transform: "translate(0, 0)"
+  }, /*#__PURE__*/_react.default.createElement("foreignObject", {
+    x: "-85",
+    y: "-16",
+    width: "20",
+    height: "28"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdocfont sdoc-exclamation-circle"
+  })), /*#__PURE__*/_react.default.createElement("text", {
+    className: "sdoc-image-tip-title",
+    transform: "translate(-55, 4)",
+    fontSize: "20",
+    fill: "red",
+    fontFamily: "Arial, sans-serif"
+  }, t('Image_copy_error'))), /*#__PURE__*/_react.default.createElement("text", {
+    className: "sdoc-image-tip-content",
+    transform: "translate(0, 35)",
+    fontSize: "12",
+    textAnchor: "middle",
+    fill: "black",
+    fontFamily: "Arial, sans-serif"
+  }, t('Image_cannot_be_copied_Please_download_the_source_image')), /*#__PURE__*/_react.default.createElement("text", {
+    className: "sdoc-image-tip-content",
+    transform: "translate(0, 55)",
+    fontSize: "12",
+    textAnchor: "middle",
+    fill: "black",
+    fontFamily: "Arial, sans-serif"
+  }, t('And_select_insert_-_image_to_upload')))), isSelected && /*#__PURE__*/_react.default.createElement("span", {
+    className: "image-resizer",
+    ref: resizerRef,
+    onMouseDown: onResizeStart
+  }), isResizing && /*#__PURE__*/_react.default.createElement("span", {
+    className: "image-size"
+  }, /*#__PURE__*/_react.default.createElement("span", null, t('Width'), ':', parseInt(movingWidth || ((_imageRef$current = imageRef.current) === null || _imageRef$current === void 0 ? void 0 : _imageRef$current.clientWidth))), /*#__PURE__*/_react.default.createElement("span", null, "\xA0\xA0"), /*#__PURE__*/_react.default.createElement("span", null, t('Height'), ':', imageRef.current.clientHeight)), children), !isShowImagePlaceholder && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", Object.assign({
     "data-id": element.id,
     className: (0, _classnames.default)('sdoc-image-wrapper', className)
   }, attributes, {
@@ -272,12 +342,12 @@ const Image = _ref => {
     onMouseDown: onResizeStart
   }), isResizing && /*#__PURE__*/_react.default.createElement("span", {
     className: "image-size"
-  }, /*#__PURE__*/_react.default.createElement("span", null, t('Width'), ':', parseInt(movingWidth || ((_imageRef$current = imageRef.current) === null || _imageRef$current === void 0 ? void 0 : _imageRef$current.clientWidth))), /*#__PURE__*/_react.default.createElement("span", null, "\xA0\xA0"), /*#__PURE__*/_react.default.createElement("span", null, t('Height'), ':', imageRef.current.clientHeight))), nodeEntry[0].type === _constants3.IMAGE_BLOCK && show_caption && /*#__PURE__*/_react.default.createElement("input", {
+  }, /*#__PURE__*/_react.default.createElement("span", null, t('Width'), ':', parseInt(movingWidth || ((_imageRef$current2 = imageRef.current) === null || _imageRef$current2 === void 0 ? void 0 : _imageRef$current2.clientWidth))), /*#__PURE__*/_react.default.createElement("span", null, "\xA0\xA0"), /*#__PURE__*/_react.default.createElement("span", null, t('Height'), ':', imageRef.current.clientHeight))), nodeEntry[0].type === _constants3.IMAGE_BLOCK && show_caption && /*#__PURE__*/_react.default.createElement("input", {
     id: "sdoc-image-caption-input",
     ref: imageCaptionInputRef,
     className: "sdoc-image-caption-input-wrapper",
     style: {
-      width: (data === null || data === void 0 ? void 0 : data.width) || ((_imageRef$current2 = imageRef.current) === null || _imageRef$current2 === void 0 ? void 0 : _imageRef$current2.clientWidth)
+      width: (data === null || data === void 0 ? void 0 : data.width) || ((_imageRef$current3 = imageRef.current) === null || _imageRef$current3 === void 0 ? void 0 : _imageRef$current3.clientWidth)
     },
     placeholder: t('Caption'),
     autoComplete: "off",

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

@@ -41,6 +41,12 @@ Object.defineProperty(exports, "FontPlugin", {
     return _font.default;
   }
 });
+Object.defineProperty(exports, "GroupPlugin", {
+  enumerable: true,
+  get: function () {
+    return _group.default;
+  }
+});
 Object.defineProperty(exports, "HeaderPlugin", {
   enumerable: true,
   get: function () {
@@ -181,7 +187,8 @@ var _quickInsert = _interopRequireDefault(require("./quick-insert"));
 var _wikiLink = _interopRequireDefault(require("./wiki-link"));
 var _seatableColumn = _interopRequireDefault(require("./seatable-column"));
 var _seatableTables = _interopRequireDefault(require("./seatable-tables"));
-const Plugins = [_markdown.default, _html.default, _header.default, _link.default, _blockquote.default, _list.default, _checkList.default, _codeBlock.default, _image.default, _video.default, _table.default, _multiColumn.default, _textStyle.default, _textAlign.default, _font.default, _sdocLink.default, _paragraph.default, _fileLink.default, _callout.default, _searchReplace.default, _quickInsert.default];
+var _group = _interopRequireDefault(require("./group"));
+const Plugins = [_markdown.default, _html.default, _header.default, _link.default, _blockquote.default, _list.default, _checkList.default, _codeBlock.default, _image.default, _video.default, _table.default, _multiColumn.default, _textStyle.default, _textAlign.default, _font.default, _sdocLink.default, _paragraph.default, _fileLink.default, _callout.default, _searchReplace.default, _quickInsert.default, _group.default];
 const WikiPlugins = exports.WikiPlugins = [...Plugins, _wikiLink.default];
 const CommentPlugins = exports.CommentPlugins = [_markdown.default, _html.default, _paragraph.default, _textStyle.default, _list.default, _image.default, _link.default, _mention.default, _blockquote.default];
 var _default = exports.default = Plugins;

package/dist/basic-sdk/extension/plugins/list/plugin/normalize-list.js

@@ -10,6 +10,7 @@ var _core = require("../../../core");
 var _queries = require("../queries");
 var _transforms = require("../transforms");
 var _model = require("../model");
+const validChildrenTypes = [_constants.GROUP, _constants.LIST_ITEM];
 const normalizeList = editor => {
   const {
     normalizeNode
@@ -26,7 +27,7 @@ const normalizeList = editor => {
       const children = (0, _core.getChildren)([node, path]);
       const nonLiChild = children.find(_ref2 => {
         let [child] = _ref2;
-        return child.type !== _constants.LIST_ITEM;
+        return !validChildrenTypes.includes(child.type);
       });
       if (nonLiChild) {
         const listItem = (0, _model.generateEmptyListItem)();
@@ -39,7 +40,7 @@ const normalizeList = editor => {
     if ((0, _core.match)(node, [], {
       type: listTypes
     })) {
-      if (!node.children.length || !node.children.find(item => item.type === _constants.LIST_ITEM)) {
+      if (!node.children.length || !node.children.find(child => validChildrenTypes.includes(child.type))) {
         _slate.Transforms.removeNodes(editor, {
           at: path
         });

package/dist/basic-sdk/extension/plugins/list/transforms/normalize-list-item.js

@@ -15,7 +15,7 @@ const normalizeListItem = (editor, _ref) => {
     listItem
   } = _ref;
   let changed = false;
-  const validLiChildrenTypes = [...(0, _queries.getListTypes)(), _constants.PARAGRAPH];
+  const validLiChildrenTypes = [...(0, _queries.getListTypes)(), _constants.PARAGRAPH, _constants.GROUP];
   const [, liPath] = listItem;
   const liChildren = (0, _core.getChildren)(listItem);
   const invalidLiChildrenPathRefs = liChildren.filter(_ref2 => {

package/dist/basic-sdk/extension/render/custom-element.js

@@ -210,6 +210,11 @@ const CustomRenderElement = props => {
         const [renderSeaTableTable] = _plugins.SeaTableViewsPlugin.renderElements;
         return renderSeaTableTable(props, editor);
       }
+    case _constants.ELEMENT_TYPE.GROUP:
+      {
+        const [renderGroup] = _plugins.GroupPlugin.renderElements;
+        return renderGroup(props);
+      }
     default:
       {
         const [renderParagraph] = _plugins.ParagraphPlugin.renderElements;

package/dist/basic-sdk/extension/render/element-decorate/rebase-decorate/index.css

@@ -41,6 +41,7 @@
 
 .sdoc-rebase-my-changes > *:first-child,
 .sdoc-rebase-other-changes > *:first-child {
-  margin: 0;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
   padding: 0.8em 0 0.8em 0.2em;
 }

package/dist/basic-sdk/extension/render/element-decorate/rebase-decorate/rebase-delete-modify-decorate.js

@@ -34,7 +34,7 @@ const RebaseDeleteModifyDecorate = _ref => {
   }, [editor, element]);
   const deleteMark = (0, _react.useCallback)(() => {
     const path = (0, _core.findPath)(editor, element);
-    (0, _core.deleteNodeMark)(editor, path, element, _constants2.REBASE_MARKS);
+    (0, _core.deleteRebaseNodeMark)(editor, path, element, _constants2.REBASE_MARKS);
     if (element.type === _constants.ELEMENT_TYPE.LIST_ITEM) {
       (0, _core.updateRebaseParentNodeByPath)(editor, path);
     }

package/dist/basic-sdk/extension/render/element-decorate/rebase-decorate/rebase-modify-delete-decorate.js

@@ -34,7 +34,7 @@ const RebaseModifyDeleteDecorate = _ref => {
   }, [editor, element]);
   const deleteMark = (0, _react.useCallback)(() => {
     const path = (0, _core.findPath)(editor, element);
-    (0, _core.deleteNodeMark)(editor, path, element, _constants2.REBASE_MARKS);
+    (0, _core.deleteRebaseNodeMark)(editor, path, element, _constants2.REBASE_MARKS);
     if (element.type === _constants.ELEMENT_TYPE.LIST_ITEM) {
       (0, _core.updateRebaseParentNodeByPath)(editor, path);
     }

package/dist/basic-sdk/extension/render/element-decorate/rebase-decorate/rebase-modify-modify-decorate.js

@@ -24,47 +24,79 @@ const RebaseModifyModifyDecorate = _ref => {
   } = (0, _reactI18next.useTranslation)('sdoc-editor');
   const editor = (0, _slateReact.useSlateStatic)();
   const useMasterChanges = (0, _react.useCallback)(() => {
-    const path = (0, _core.findPath)(editor, element);
-    (0, _core.deleteNodeMark)(editor, path, element[_constants2.REBASE_MARK_KEY.OLD_ELEMENT], _constants2.REBASE_MARKS);
-    const nextElementPath = [...path];
-    nextElementPath[path.length - 1] = path[path.length - 1] + 1;
-    _slate.Transforms.removeNodes(editor, {
-      at: nextElementPath
-    });
-    if (element.type === _constants.ELEMENT_TYPE.LIST_ITEM) {
+    (0, _core.rebaseNode)(editor, () => {
+      const path = (0, _core.findPath)(editor, element);
+
+      // delete my changes
+      const nextElementPath = [...path];
+      nextElementPath[path.length - 1] = path[path.length - 1] + 1;
+      _slate.Transforms.removeNodes(editor, {
+        at: nextElementPath
+      });
+
+      // update master changes
+      if (element.type === _constants.ELEMENT_TYPE.GROUP) {
+        (0, _core.replaceRebaseNode)(editor, {
+          at: path,
+          nodes: element.children
+        });
+      } else {
+        (0, _core.deleteRebaseNodeMark)(editor, path, element[_constants2.REBASE_MARK_KEY.OLD_ELEMENT], _constants2.REBASE_MARKS);
+      }
       (0, _core.updateRebaseParentNodeByPath)(editor, path);
-    }
+    });
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, element]);
-  const useCurrentChanges = (0, _react.useCallback)(() => {
-    const path = (0, _core.findPath)(editor, element);
-    const currentElementPath = [...path];
-    currentElementPath[path.length - 1] = path[path.length - 1] + 1;
-    const currentElement = (0, _core.getNode)(editor, currentElementPath);
-    const newCurrentElement = (0, _deepCopy.default)(currentElement);
-    (0, _core.deleteNodeMark)(editor, currentElementPath, newCurrentElement, _constants2.REBASE_MARKS);
-    _slate.Transforms.removeNodes(editor, {
-      at: path
-    });
-    if (element.type === _constants.ELEMENT_TYPE.LIST_ITEM) {
+  const useMyChanges = (0, _react.useCallback)(() => {
+    (0, _core.rebaseNode)(editor, () => {
+      const path = (0, _core.findPath)(editor, element);
+      const currentElementPath = [...path];
+      currentElementPath[path.length - 1] = path[path.length - 1] + 1;
+      const currentElement = (0, _core.getNode)(editor, currentElementPath);
+      const newCurrentElement = (0, _deepCopy.default)(currentElement);
+      if (element.type === _constants.ELEMENT_TYPE.GROUP) {
+        (0, _core.replaceRebaseNode)(editor, {
+          at: currentElementPath,
+          nodes: newCurrentElement.children
+        });
+      } else {
+        (0, _core.deleteRebaseNodeMark)(editor, currentElementPath, newCurrentElement, _constants2.REBASE_MARKS);
+      }
+      _slate.Transforms.removeNodes(editor, {
+        at: path
+      });
       (0, _core.updateRebaseParentNodeByPath)(editor, path);
-    }
+    });
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, element]);
   const useBothChanges = (0, _react.useCallback)(() => {
-    // delete element marks
-    const path = (0, _core.findPath)(editor, element);
-    (0, _core.deleteNodeMark)(editor, path, element, _constants2.REBASE_MARKS);
+    (0, _core.rebaseNode)(editor, () => {
+      const path = (0, _core.findPath)(editor, element);
+      const nextElementPath = [...path.slice(0, -1), path[path.length - 1] + 1];
+      const nextElement = (0, _core.getNode)(editor, nextElementPath);
+      if (element.type === _constants.ELEMENT_TYPE.GROUP) {
+        // replace next element
+        (0, _core.replaceRebaseNode)(editor, {
+          at: nextElementPath,
+          nodes: nextElement.children
+        });
 
-    // delete next element marks
-    const nextElementPath = [...path.slice(0, -1), path[path.length - 1] + 1];
-    const nextElement = (0, _core.getNode)(editor, nextElementPath);
-    (0, _core.deleteNodeMark)(editor, nextElementPath, nextElement, _constants2.REBASE_MARKS);
-    if (element.type === _constants.ELEMENT_TYPE.LIST_ITEM) {
+        // replace current element
+        (0, _core.replaceRebaseNode)(editor, {
+          at: path,
+          nodes: element.children
+        });
+      } else {
+        // delete element marks
+        (0, _core.deleteRebaseNodeMark)(editor, path, element, _constants2.REBASE_MARKS);
+
+        // delete next element marks
+        (0, _core.deleteRebaseNodeMark)(editor, nextElementPath, nextElement, _constants2.REBASE_MARKS);
+      }
       (0, _core.updateRebaseParentNodeByPath)(editor, path);
-    }
+    });
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, element]);
@@ -79,7 +111,7 @@ const RebaseModifyModifyDecorate = _ref => {
       className: "mr-2 ml-2"
     }, '|'), /*#__PURE__*/_react.default.createElement("div", {
       className: "sdoc-rebase-btn",
-      onClick: useCurrentChanges
+      onClick: useMyChanges
     }, t('Keep_my_modification')), /*#__PURE__*/_react.default.createElement("div", {
       className: "mr-2 ml-2"
     }, '|'), /*#__PURE__*/_react.default.createElement("div", {

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

@@ -37,7 +37,9 @@ const getTopLevelChanges = changes => {
       if (parentNode instanceof Document) {
         break;
       } else {
+        var _dom4, _dom4$dataset;
         dom = parentNode;
+        if ((_dom4 = dom) !== null && _dom4 !== void 0 && (_dom4$dataset = _dom4.dataset) !== null && _dom4$dataset !== void 0 && _dom4$dataset.id && !dom.classList.contains('table-cell')) break;
       }
     }
     topLevelChanges.push(dom.dataset.id);

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

@@ -32,6 +32,49 @@ const hasConflict = content => {
   return flag;
 };
 exports.hasConflict = hasConflict;
+const expandGroup = content => {
+  if ([_constants2.ELEMENT_TYPE.UNORDERED_LIST, _constants2.ELEMENT_TYPE.ORDERED_LIST].includes(content.type)) {
+    return [{
+      ...content,
+      children: content.children.map(item => {
+        if (item.type === _constants2.ELEMENT_TYPE.GROUP) {
+          return expandGroup(item);
+        }
+        return item;
+      }).flat(1)
+    }];
+  }
+  return content.type === _constants2.ELEMENT_TYPE.GROUP ? content.children : [content];
+};
+const mergeChanges = changes => {
+  if (!Array.isArray(changes) || changes.length === 0) return changes;
+  let value = [];
+  let i = 0;
+  while (i < changes.length) {
+    const change = changes[i];
+    const lastChange = value[value.length - 1];
+    if (change && lastChange && change[_constants.REBASE_MARK_KEY.MODIFY_TYPE] === _constants.MODIFY_TYPE.ADD && lastChange[_constants.REBASE_MARK_KEY.MODIFY_TYPE] === _constants.MODIFY_TYPE.DELETE) {
+      value = value.slice(0, value.length - 1);
+      lastChange[_constants.REBASE_MARK_KEY.MODIFY_TYPE] && delete lastChange[_constants.REBASE_MARK_KEY.MODIFY_TYPE];
+      change[_constants.REBASE_MARK_KEY.MODIFY_TYPE] && delete change[_constants.REBASE_MARK_KEY.MODIFY_TYPE];
+      value.push({
+        id: change.id.endsWith('_group') ? change.id : change.id + '_group',
+        type: _constants2.ELEMENT_TYPE.GROUP,
+        [_constants.REBASE_MARK_KEY.MODIFY_TYPE]: _constants.MODIFY_TYPE.MODIFY,
+        children: expandGroup(change),
+        [_constants.REBASE_MARK_KEY.OLD_ELEMENT]: {
+          id: lastChange.id.endsWith('_group') ? lastChange.id : lastChange.id + '_group',
+          type: _constants2.ELEMENT_TYPE.GROUP,
+          children: expandGroup(lastChange)
+        }
+      });
+    } else {
+      value.push(change);
+    }
+    i++;
+  }
+  return value;
+};
 const getChanges = function (masterContent, revisionContent) {
   let childrenName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'children';
   const {
@@ -51,17 +94,21 @@ const getChanges = function (masterContent, revisionContent) {
       removed
     } = idDiff;
     if (added) {
-      const addedList = value.map(item => ({
-        ...currentContentMap[item],
-        [_constants.REBASE_MARK_KEY.MODIFY_TYPE]: _constants.MODIFY_TYPE.ADD
-      }));
-      content.push(...addedList);
+      // merge consecutive identical operations
+      content.push({
+        id: value[0] + '_group',
+        type: _constants2.ELEMENT_TYPE.GROUP,
+        [_constants.REBASE_MARK_KEY.MODIFY_TYPE]: _constants.MODIFY_TYPE.ADD,
+        children: value.map(item => currentContentMap[item])
+      });
     } else if (removed) {
-      const deletedList = value.map(item => ({
-        ...masterContentMap[item],
-        [_constants.REBASE_MARK_KEY.MODIFY_TYPE]: _constants.MODIFY_TYPE.DELETE
-      }));
-      content.push(...deletedList);
+      // merge consecutive identical operations
+      content.push({
+        id: value[0] + '_group',
+        type: _constants2.ELEMENT_TYPE.GROUP,
+        [_constants.REBASE_MARK_KEY.MODIFY_TYPE]: _constants.MODIFY_TYPE.DELETE,
+        children: value.map(item => masterContentMap[item])
+      });
     } else {
       value.forEach(elementId => {
         if (_objectUtils.default.isSameObject(masterContentMap[elementId], currentContentMap[elementId])) {
@@ -87,7 +134,7 @@ const getChanges = function (masterContent, revisionContent) {
       });
     }
   });
-  return content;
+  return mergeChanges(content);
 };
 const getMergeElement = (diffElement, baseElement) => {
   const modifyType = diffElement[_constants.REBASE_MARK_KEY.MODIFY_TYPE];
@@ -99,7 +146,7 @@ const getMergeElement = (diffElement, baseElement) => {
   // revision does not have this element, master has this element
   if (modifyType === _constants.MODIFY_TYPE.DELETE) {
     // base content does not have this element, indicating that it is newly added by master and needs to be retained, and will not be counted as a conflict.
-    if (!baseElement) return [newElement];
+    if (!baseElement) return expandGroup(newElement);
 
     // base content has this element, master modified it, indicating that revision deleted it, and the user manually selected the conflict
     if (!_objectUtils.default.isSameObject(baseElement, diffElement, [_constants.REBASE_MARK_KEY.MODIFY_TYPE])) {
@@ -114,7 +161,7 @@ const getMergeElement = (diffElement, baseElement) => {
   // revision has this element, master does not have this element
   if (modifyType === _constants.MODIFY_TYPE.ADD) {
     // base content does not have this element, indicating that it is newly added by revision and needs to be retained, and will not be counted as a conflict.
-    if (!baseElement) return [newElement];
+    if (!baseElement) return expandGroup(newElement);
 
     // master deleted it, revision modified it, and the user manually selected the conflict
     if (!_objectUtils.default.isSameObject(baseElement, diffElement, [_constants.REBASE_MARK_KEY.MODIFY_TYPE])) {
@@ -184,10 +231,10 @@ const getMergeElement = (diffElement, baseElement) => {
         [_constants.REBASE_MARK_KEY.ORIGIN]: _constants.REBASE_ORIGIN.MY
       }];
     }
-    if (_objectUtils.default.isSameObject(masterElement, baseElement)) return [newElement];
+    if (_objectUtils.default.isSameObject(masterElement, baseElement)) return expandGroup(newElement);
     if (_objectUtils.default.isSameObject(newElement, baseElement)) return [masterElement];
     if (_objectUtils.default.isSameObject(masterElement, newElement, ['type'])) {
-      if (_objectUtils.default.isSameObject(masterElement, baseElement, ['type'])) return [newElement];
+      if (_objectUtils.default.isSameObject(masterElement, baseElement, ['type'])) return expandGroup(newElement);
       if (_objectUtils.default.isSameObject(newElement, baseElement, ['type'])) return [masterElement];
     }
 
@@ -199,7 +246,7 @@ const getMergeElement = (diffElement, baseElement) => {
     }];
   }
   newElement[_constants.REBASE_MARK_KEY.OLD_ELEMENT] && delete newElement[_constants.REBASE_MARK_KEY.OLD_ELEMENT];
-  return [newElement];
+  return expandGroup(newElement);
 };
 const getMergeContent = function (baseContent, diffChanges) {
   let childrenName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'children';

package/dist/components/doc-operations/revision-operations/changes-count/index.js

@@ -33,12 +33,9 @@ const ChangesCount = _ref => {
         }
       }, 100);
     }).then(() => {
-      console.log('allchange', allChanges);
       if (allChanges.changes.length !== 0) {
         const topLevelChanges = (0, _diff.getTopLevelChanges)(allChanges.changes);
-        console.log(topLevelChanges);
         const changes = (0, _diff.getMergedChanges)(topLevelChanges, allChanges.value);
-        console.log(9, changes);
         setChanges(changes);
       }
     });
@@ -78,12 +75,10 @@ const ChangesCount = _ref => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [changes, currentDiffIndex]);
   if (!Array.isArray(changes) || changes.length === 0) {
-    console.log('change', changes);
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "sdoc-revision-changes-container d-flex align-items-center pl-2 pr-2 ml-4"
     }, t('No_changes'));
   }
-  console.log('changes', changes);
   const changesCount = changes.length;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-revision-changes-container d-flex align-items-center ml-4"

package/dist/components/doc-operations/revision-operations/revisions/index.css

@@ -3,7 +3,7 @@
   width: fit-content;
   border: 1px solid #E5E5E5;
   border-radius: 3px;
-  line-height: 28px;
+  line-height: 26px;
   text-align: center;
   padding: 0 16px;
   margin-left: 1rem;

package/dist/pages/simple-editor.js

@@ -52,7 +52,6 @@ const SimpleEditor = _ref => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const setDiffChanges = (0, _react.useCallback)(diff => {
-    console.log(32323);
     setChanges(diff);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isShowChanges]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "1.0.212-alph-0.1.9",
+  "version": "1.0.212-alph-2.1.0",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",

package/public/locales/cs/sdoc-editor.json

@@ -610,5 +610,7 @@
   "Add_video_link": "Add video link",
   "Link_Seafile_video_file": "Link Seafile video file",
   "Select_video_file": "Select video file",
-  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more"
+  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more",
+  "Image_cannot_be_copied_Please_download_the_source_image": "Image cannot be copied. Please download the source image,",
+  "And_select_insert_-_image_to_upload": "and select 「insert」 - 「image」 to upload."
 }

package/public/locales/de/sdoc-editor.json

@@ -610,5 +610,7 @@
   "Add_video_link": "Videolink hinzufügen",
   "Link_Seafile_video_file": "Link Seafile video file",
   "Select_video_file": "Select video file",
-  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more"
+  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more",
+  "Image_cannot_be_copied_Please_download_the_source_image": "Image cannot be copied. Please download the source image,",
+  "And_select_insert_-_image_to_upload": "and select 「insert」 - 「image」 to upload."
 }

package/public/locales/en/sdoc-editor.json

@@ -610,5 +610,7 @@
   "Add_video_link": "Add video link",
   "Link_Seafile_video_file": "Link Seafile video file",
   "Select_video_file": "Select video file",
-  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more"
+  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more",
+  "Image_cannot_be_copied_Please_download_the_source_image": "Image cannot be copied. Please download the source image,",
+  "And_select_insert_-_image_to_upload": "and select 「insert」 - 「image」 to upload."
 }

package/public/locales/es/sdoc-editor.json

@@ -610,5 +610,7 @@
   "Add_video_link": "Add video link",
   "Link_Seafile_video_file": "Link Seafile video file",
   "Select_video_file": "Select video file",
-  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more"
+  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more",
+  "Image_cannot_be_copied_Please_download_the_source_image": "Image cannot be copied. Please download the source image,",
+  "And_select_insert_-_image_to_upload": "and select 「insert」 - 「image」 to upload."
 }

package/public/locales/es_AR/sdoc-editor.json

@@ -610,5 +610,7 @@
   "Add_video_link": "Add video link",
   "Link_Seafile_video_file": "Link Seafile video file",
   "Select_video_file": "Select video file",
-  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more"
+  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more",
+  "Image_cannot_be_copied_Please_download_the_source_image": "Image cannot be copied. Please download the source image,",
+  "And_select_insert_-_image_to_upload": "and select 「insert」 - 「image」 to upload."
 }

package/public/locales/es_MX/sdoc-editor.json

@@ -610,5 +610,7 @@
   "Add_video_link": "Add video link",
   "Link_Seafile_video_file": "Link Seafile video file",
   "Select_video_file": "Select video file",
-  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more"
+  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more",
+  "Image_cannot_be_copied_Please_download_the_source_image": "Image cannot be copied. Please download the source image,",
+  "And_select_insert_-_image_to_upload": "and select 「insert」 - 「image」 to upload."
 }

package/public/locales/fr/sdoc-editor.json

@@ -610,5 +610,7 @@
   "Add_video_link": "Add video link",
   "Link_Seafile_video_file": "Link Seafile video file",
   "Select_video_file": "Select video file",
-  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more"
+  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more",
+  "Image_cannot_be_copied_Please_download_the_source_image": "Image cannot be copied. Please download the source image,",
+  "And_select_insert_-_image_to_upload": "and select 「insert」 - 「image」 to upload."
 }

package/public/locales/it/sdoc-editor.json

@@ -610,5 +610,7 @@
   "Add_video_link": "Add video link",
   "Link_Seafile_video_file": "Link Seafile video file",
   "Select_video_file": "Select video file",
-  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more"
+  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more",
+  "Image_cannot_be_copied_Please_download_the_source_image": "Image cannot be copied. Please download the source image,",
+  "And_select_insert_-_image_to_upload": "and select 「insert」 - 「image」 to upload."
 }

package/public/locales/ru/sdoc-editor.json

@@ -610,5 +610,7 @@
   "Add_video_link": "Добавить ссылку на видео",
   "Link_Seafile_video_file": "Ссылка на видео файл Seafile",
   "Select_video_file": "Выбрать видео файл",
-  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more"
+  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more",
+  "Image_cannot_be_copied_Please_download_the_source_image": "Image cannot be copied. Please download the source image,",
+  "And_select_insert_-_image_to_upload": "and select 「insert」 - 「image」 to upload."
 }

package/public/locales/zh_CN/sdoc-editor.json

@@ -610,5 +610,7 @@
   "Add_video_link": "添加视频链接",
   "Link_Seafile_video_file": "链接Seafile视频文件",
   "Select_video_file": "选择视频文件",
-  "Support_Youtube_Tencent_Bilibili_and_more": "支持Youtube，腾讯视频，B站及其他平台"
+  "Support_Youtube_Tencent_Bilibili_and_more": "支持Youtube，腾讯视频，B站及其他平台",
+  "Image_cannot_be_copied_Please_download_the_source_image": "此照片不支持复制，请下载原图",
+  "And_select_insert_-_image_to_upload": "后点击工具栏「插入」- 「照片」上传"
 }