@seafile/sdoc-editor 0.1.174 → 0.2.0

package/dist/api/seafile-api.js

@@ -133,6 +133,12 @@ var SeafileAPI = /*#__PURE__*/function () {
         files_url: filesUrl
       });
     }
+  }, {
+    key: "getCopyMoveProgressView",
+    value: function getCopyMoveProgressView(docUuid, taskId) {
+      var url = 'api/v2.1/seadoc/query-copy-move-progress/' + docUuid + '/?&doc_uuid=' + docUuid + '&task_id=' + taskId;
+      return this.req.get(url);
+    }
   }]);
   return SeafileAPI;
 }();

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

@@ -34,6 +34,11 @@
   margin: 0 3px;
 }
 
+.sdoc-editor-container .article .sdoc-image-inner {
+  position: relative;
+  display: inline-block;
+}
+
 .sdoc-editor-container .article .image-selected {
   box-shadow: 0 0 0 2px #007bff;
 }

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

@@ -4,7 +4,8 @@ export var INTERNAL_EVENT = {
   HIDDEN_CODE_BLOCK_HOVER_MENU: 'hidden_code_block_hover_menu',
   ON_MOUSE_ENTER_BLOCK: 'on_mouse_enter_block',
   INSERT_ELEMENT: 'insert_element',
-  OUTLINE_STATE_CHANGED: 'outline_state_changed'
+  OUTLINE_STATE_CHANGED: 'outline_state_changed',
+  RELOAD_IMAGE: 'reload_image'
 };
 export var PAGE_EDIT_AREA_WIDTH = 672; // 672 = 794 - 2[borderLeft + borderRight] - 120[paddingLeft + paddingRight]
 

package/dist/basic-sdk/editor/editable-article.js

@@ -140,7 +140,8 @@ var EditableArticle = function EditableArticle(_ref) {
     onKeyDown: onKeyDown,
     onMouseDown: onMouseDown,
     decorate: decorate,
-    onCut: eventProxy.onCut
+    onCut: eventProxy.onCut,
+    onCopy: eventProxy.onCopy
   })), /*#__PURE__*/React.createElement(SideToolbar, null), isShowComment && /*#__PURE__*/React.createElement(CommentContextProvider, null, /*#__PURE__*/React.createElement(CommentWrapper, null))));
 };
 EditableArticle.defaultProps = {

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

@@ -12,6 +12,7 @@ export var HEADERS = [HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6];
 export var HEADER_TITLE_MAP = (_HEADER_TITLE_MAP = {}, _defineProperty(_HEADER_TITLE_MAP, TITLE, 'Title'), _defineProperty(_HEADER_TITLE_MAP, SUBTITLE, 'Subtitle'), _defineProperty(_HEADER_TITLE_MAP, HEADER1, 'Header_one'), _defineProperty(_HEADER_TITLE_MAP, HEADER2, 'Header_two'), _defineProperty(_HEADER_TITLE_MAP, HEADER3, 'Header_three'), _defineProperty(_HEADER_TITLE_MAP, HEADER4, 'Header_four'), _defineProperty(_HEADER_TITLE_MAP, HEADER5, 'Header_five'), _defineProperty(_HEADER_TITLE_MAP, HEADER6, 'Header_six'), _defineProperty(_HEADER_TITLE_MAP, PARAGRAPH, 'Paragraph'), _HEADER_TITLE_MAP);
 export var TRANSPARENT = 'transparent';
 export var CLIPBOARD_FORMAT_KEY = 'x-slate-fragment';
+export var CLIPBOARD_ORIGIN_SDOC_KEY = 'origin-sdoc-uuid';
 export var INSERT_FILE_DISPLAY_TYPE = ['text_link', 'icon_link', 'card_link'];
 export var INSERT_POSITION = {
   BEFORE: 'before',

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

@@ -0,0 +1,17 @@
+import blackBorder from '../../../../assets/images/black-border.png';
+import greyBorder from '../../../../assets/images/grey-border.png';
+import noBorder from '../../../../assets/images/no-border.png';
+export var IMAGE_DISPLAY_TYPE = ['Inline', 'Block'];
+export var IMAGE_BORDER_TYPE = [{
+  type: 'none',
+  imgUrl: noBorder,
+  value: 'none'
+}, {
+  type: 'grey',
+  imgUrl: greyBorder,
+  value: '2px solid #E5E5E5'
+}, {
+  type: 'black',
+  imgUrl: blackBorder,
+  value: '2px solid #41464A'
+}];

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

@@ -1,11 +1,15 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(typeof e + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
 import urlJoin from 'url-join';
 import { Editor, Range, Transforms, Path } from '@seafile/slate';
 import { ReactEditor } from '@seafile/slate-react';
-import { CODE_BLOCK, ELEMENT_TYPE, IMAGE, INSERT_POSITION, LIST_ITEM } from '../../constants';
-import { generateEmptyElement, getNodeType, isTextNode, getParentNode } from '../../core';
 import context from '../../../../context';
+import EventBus from '../../../utils/event-bus';
+import { generateEmptyElement, getNodeType, isTextNode, getParentNode } from '../../core';
+import { INTERNAL_EVENT } from '../../../constants';
+import { CODE_BLOCK, ELEMENT_TYPE, IMAGE, INSERT_POSITION, LIST_ITEM } from '../../constants';
 export var isInsertImageMenuDisabled = function isInsertImageMenuDisabled(editor, readonly) {
   if (readonly) return true;
   var selection = editor.selection;
@@ -32,11 +36,9 @@ export var isInsertImageMenuDisabled = function isInsertImageMenuDisabled(editor
 };
 export var generateImageNode = function generateImageNode(src) {
   var element = generateEmptyElement(IMAGE);
-  var docUuid = context.getSetting('docUuid');
   return _objectSpread(_objectSpread({}, element), {}, {
     data: {
-      src: src,
-      origin_doc_uuid: docUuid
+      src: src
     }
   });
 };
@@ -86,4 +88,61 @@ export var getImageURL = function getImageURL(url) {
   var serviceUrl = context.getSetting('serviceUrl');
   var assetsUrl = context.getSetting('assetsUrl');
   return urlJoin(serviceUrl, assetsUrl, url);
+};
+export var hasSdocImages = function hasSdocImages(originSdocUuid, fragmentData) {
+  var sdocUuid = context.getSetting('docUuid');
+  var hasImg = fragmentData.some(function (item) {
+    return item.children.some(function (child) {
+      return (child === null || child === void 0 ? void 0 : child.type) === IMAGE;
+    });
+  });
+  return originSdocUuid !== sdocUuid && hasImg;
+};
+export var getImageData = function getImageData(fragmentData) {
+  var imageData = new Set();
+  fragmentData.forEach(function (item) {
+    return item.children.forEach(function (child) {
+      if ((child === null || child === void 0 ? void 0 : child.type) === IMAGE && !child.data.src.startsWith('http')) {
+        imageData.add(child.data.src.slice(1));
+      }
+    });
+  });
+  return Array.from(imageData);
+};
+export var queryCopyMoveProgressView = function queryCopyMoveProgressView(taskId) {
+  var interval = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 300;
+  var timer;
+  var stop = function stop() {
+    clearTimeout(timer);
+  };
+  var start = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var res, done, eventBus;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return context.getCopyMoveProgressView(taskId);
+          case 2:
+            res = _context.sent;
+            done = res.data.done;
+            if (done) {
+              stop();
+              // Reload image
+              eventBus = EventBus.getInstance();
+              eventBus.dispatch(INTERNAL_EVENT.RELOAD_IMAGE);
+            } else {
+              timer = setTimeout(start, interval);
+            }
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function start() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  start();
 };

package/dist/basic-sdk/extension/plugins/image/hover-menu/index.css

@@ -0,0 +1,108 @@
+.sdoc-image-hover-menu-container {
+  position: absolute;
+  height: 42px;
+  z-index: 101;
+  width: auto;
+}
+  
+.sdoc-image-hover-menu-container .hover-menu-container {
+  height: 36px;
+  padding: 7px 8px;
+  background-color: #fff;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
+  border: 1px solid #e8e8e8;
+}
+
+.sdoc-image-hover-menu-container .hover-menu-container > span:not(:last-of-type) {
+  padding: 0 8px;
+  border-right: 1px solid #e5e5e5;
+}
+
+.sdoc-image-hover-menu-container .hover-menu-container .op-item {
+  position: relative;
+  font-size: 12px;
+  color: #212529;
+  padding: 0 5px;
+  border-radius: 2px;
+  min-width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sdoc-image-hover-menu-container .hover-menu-container .op-item:hover {
+  color: #212529;
+  text-decoration: none;
+  background: #f1f1f1;
+}
+
+.sdoc-image-hover-menu-container .op-group-item:last-child .op-item {
+  margin-left: 8px;
+}
+
+.sdoc-image-hover-menu-container .hover-menu-container .active {
+  background: #f1f1f1;
+}
+
+.sdoc-image-hover-menu-container .hover-menu-container .op-tooltip:hover::after {
+  position: absolute;
+  color: #212529;
+  content: attr(op-item-tooltip);
+  top: -40px;
+  left: -20px;
+  width: 70px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+  border-radius: 3px;
+  border: 1px solid #e8e8e8;
+  font-size: 12px;
+  box-shadow: 0 0 5px #ccc;
+}
+
+.sdoc-image-hover-menu-container .hover-menu-container .icon-font {
+  font-size: 12px;
+  color: #999999;
+}
+
+.sdoc-image-hover-menu-container .sdoc-image-popover {
+  position: absolute;
+  top: 37px;
+  background-color: #fff;
+  border: 1px solid #e5e6e8;
+  border-radius: 2px;
+  box-shadow: 0 0 10px #ccc;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  z-index: 101;
+  white-space: nowrap;
+}
+
+.sdoc-image-hover-menu-container .align-popover {
+  left: 80px;
+  min-width: 6rem;
+}
+
+.sdoc-image-hover-menu-container .border-popover {
+  left: 115px;
+  flex-direction: row;
+  height: 80px;
+  align-items: center;
+  padding: 0 8px;
+}
+
+.sdoc-image-hover-menu-container .border-popover .sdoc-dropdown-menu-item .sdoc-dropdown-item-content .sdoc-check-mark {
+  transform: translateX(-24px);
+}
+
+.sdoc-image-hover-menu-container .border-popover .sdoc-dropdown-menu-item:hover {
+  background-color: transparent;
+}

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

@@ -0,0 +1,179 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useState } from 'react';
+import { Transforms } from '@seafile/slate';
+import { ReactEditor } from '@seafile/slate-react';
+import { withTranslation } from 'react-i18next';
+import classnames from 'classnames';
+import { ElementPopover } from '../../../commons';
+import ImagePreviewer from '../dialogs/image-previewer';
+import { getImageURL } from '../helpers';
+import { IMAGE_DISPLAY_TYPE, IMAGE_BORDER_TYPE } from '../constants';
+import { MENUS_CONFIG_MAP, TEXT_ALIGN } from '../../../constants';
+import './index.css';
+var ImageHoverMenu = function ImageHoverMenu(_ref) {
+  var editor = _ref.editor,
+    menuPosition = _ref.menuPosition,
+    element = _ref.element,
+    onHideImageHoverMenu = _ref.onHideImageHoverMenu,
+    t = _ref.t;
+  var data = element.data,
+    display_type = element.display_type,
+    align = element.align,
+    border_type = element.border_type;
+  var _useState = useState({
+      displayPopover: false,
+      alignPopover: false,
+      borderPopover: false
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    popoverState = _useState2[0],
+    setPopoverState = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isShowImagePreview = _useState4[0],
+    setIsShowImagePreview = _useState4[1];
+  var onShowProver = useCallback(function (event, showProverKey) {
+    event.stopPropagation();
+    var newPopoverState = popoverState;
+    for (var key in newPopoverState) {
+      if (key === showProverKey) {
+        newPopoverState[key] = !newPopoverState[key];
+      } else {
+        newPopoverState[key] = false;
+      }
+    }
+    setPopoverState(_objectSpread({}, newPopoverState));
+  }, [popoverState]);
+  var onSelect = useCallback(function (event, props) {
+    event.stopPropagation();
+    var path = ReactEditor.findPath(editor, element);
+    if (path) {
+      Transforms.setNodes(editor, props, {
+        at: path
+      });
+    }
+    onHideImageHoverMenu();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement(ElementPopover, null, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-image-hover-menu-container",
+    style: menuPosition
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "hover-menu-container"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "op-group-item"
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "button",
+    className: classnames('op-item', {
+      'active': popoverState.displayPopover
+    }),
+    onClick: function onClick(e) {
+      onShowProver(e, 'displayPopover');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "mr-1"
+  }, t(display_type || IMAGE_DISPLAY_TYPE[0])), /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-drop-down icon-font"
+  }))), /*#__PURE__*/React.createElement("span", {
+    className: "op-group-item"
+  }, display_type === IMAGE_DISPLAY_TYPE[1] && /*#__PURE__*/React.createElement("span", {
+    role: "button",
+    className: classnames('op-item', {
+      'active': popoverState.alignPopover
+    }),
+    onClick: function onClick(e) {
+      onShowProver(e, 'alignPopover');
+    }
+  }, /*#__PURE__*/React.createElement("i", {
+    className: classnames("sdocfont sdoc-align-".concat(align || 'left', " icon-font mr-1"))
+  }), /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-drop-down icon-font"
+  })), /*#__PURE__*/React.createElement("span", {
+    role: "button",
+    className: classnames('op-item', 'ml-1', {
+      'active': popoverState.borderPopover
+    }),
+    onClick: function onClick(e) {
+      onShowProver(e, 'borderPopover');
+    }
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-image icon-font mr-1"
+  }), /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-drop-down icon-font"
+  }))), /*#__PURE__*/React.createElement("span", {
+    className: "op-group-item"
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "button",
+    className: "op-item",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      setIsShowImagePreview(!isShowImagePreview);
+    }
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-fullscreen icon-font"
+  })))), popoverState.displayPopover && /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-image-popover sdoc-dropdown-menu"
+  }, IMAGE_DISPLAY_TYPE.map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: item,
+      className: "sdoc-dropdown-menu-item sdoc-dropdown-item-with-left-icon pr-2",
+      onClick: function onClick(event) {
+        return onSelect(event, {
+          display_type: item
+        });
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "sdoc-dropdown-item-content"
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "sdoc-dropdown-item-content-icon"
+    }), /*#__PURE__*/React.createElement("span", null, t(item))), display_type === item && /*#__PURE__*/React.createElement("i", {
+      className: "sdocfont sdoc-check-mark sdoc-dropdown-item-right-icon"
+    }));
+  })), popoverState.alignPopover && /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-image-popover align-popover sdoc-dropdown-menu"
+  }, MENUS_CONFIG_MAP[TEXT_ALIGN].map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.id,
+      className: "sdoc-dropdown-menu-item sdoc-dropdown-item-with-left-icon pr-2",
+      onClick: function onClick(event) {
+        return onSelect(event, {
+          align: item.type
+        });
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "sdoc-dropdown-item-content"
+    }, /*#__PURE__*/React.createElement("i", {
+      className: classnames(item.iconClass, 'icon-font')
+    })), align === item.type && /*#__PURE__*/React.createElement("i", {
+      className: "sdocfont sdoc-check-mark sdoc-dropdown-item-right-icon"
+    }));
+  })), popoverState.borderPopover && /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-image-popover border-popover sdoc-dropdown-menu"
+  }, IMAGE_BORDER_TYPE.map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.type,
+      className: "sdoc-dropdown-menu-item sdoc-dropdown-item-with-left-icon pr-2",
+      onClick: function onClick(event) {
+        return onSelect(event, {
+          border_type: item.type
+        });
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "sdoc-dropdown-item-content"
+    }, /*#__PURE__*/React.createElement("img", {
+      src: item.imgUrl,
+      draggable: false,
+      alt: ""
+    }), border_type === item.type && /*#__PURE__*/React.createElement("i", {
+      className: "sdocfont sdoc-check-mark sdoc-dropdown-item-right-icon"
+    })));
+  })), isShowImagePreview && /*#__PURE__*/React.createElement(ImagePreviewer, {
+    imageUrl: getImageURL(data.src),
+    editor: editor,
+    toggleImagePreviewer: function toggleImagePreviewer() {
+      setIsShowImagePreview(!isShowImagePreview);
+    }
+  })));
+};
+export default withTranslation('sdoc-editor')(ImageHoverMenu);

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

@@ -1,9 +1,12 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { Transforms, Path, Editor, Element } from '@seafile/slate';
+import toaster from '../../../../components/toast';
 import context from '../../../../context';
-import { insertImage, copyImage } from './helpers';
+import { insertImage, hasSdocImages, getImageData, queryCopyMoveProgressView } from './helpers';
 import { focusEditor } from '../../core';
-import { INSERT_POSITION, CLIPBOARD_FORMAT_KEY } from '../../constants';
+import { getErrorMsg } from '../../../../utils';
+import { getSlateFragmentAttribute } from '../../../utils/document-utils';
+import { INSERT_POSITION, CLIPBOARD_FORMAT_KEY, CLIPBOARD_ORIGIN_SDOC_KEY, IMAGE } from '../../constants';
 var withImage = function withImage(editor) {
   var isInline = editor.isInline,
     isVoid = editor.isVoid,
@@ -14,7 +17,7 @@ var withImage = function withImage(editor) {
   // rewrite isInline
   newEditor.isInline = function (elem) {
     var type = elem.type;
-    if (type === 'image') {
+    if (type === IMAGE) {
       return true;
     }
     return isInline(elem);
@@ -23,13 +26,30 @@ var withImage = function withImage(editor) {
   // rewrite isVoid
   newEditor.isVoid = function (elem) {
     var type = elem.type;
-    if (type === 'image') {
+    if (type === IMAGE) {
       return true;
     }
     return isVoid(elem);
   };
   newEditor.insertData = function (data) {
-    if (data.types && data.types.includes('Files') && data.files[0].type.includes('image')) {
+    var fragment = data.getData("application/".concat(CLIPBOARD_FORMAT_KEY)) || getSlateFragmentAttribute(data);
+    var originSdocUuid = data.getData("text/".concat(CLIPBOARD_ORIGIN_SDOC_KEY));
+    if (fragment && originSdocUuid) {
+      var decoded = decodeURIComponent(window.atob(fragment));
+      var fragmentData = JSON.parse(decoded);
+      if (hasSdocImages(originSdocUuid, fragmentData)) {
+        var imageData = getImageData(fragmentData);
+        context.copyImage(originSdocUuid, imageData).then(function (res) {
+          if (res.status === 200) {
+            queryCopyMoveProgressView(res.data.task_id);
+          }
+        }).catch(function (error) {
+          var errorMessage = getErrorMsg(error);
+          toaster.danger(errorMessage);
+        });
+      }
+    }
+    if (data.types && data.types.includes('Files') && data.files[0].type.includes(IMAGE)) {
       context.uploadLocalImage(data.files[0]).then(function (fileUrl) {
         insertImage(newEditor, fileUrl, editor.selection, INSERT_POSITION.CURRENT);
       });
@@ -65,7 +85,7 @@ var withImage = function withImage(editor) {
       _Editor$parent2 = _slicedToArray(_Editor$parent, 2),
       node = _Editor$parent2[0],
       path = _Editor$parent2[1];
-    if (Element.isElement(node) && node.type === 'image') {
+    if (Element.isElement(node) && node.type === IMAGE) {
       focusEditor(editor, Path.next(path));
     }
   };

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

@@ -1,197 +1,227 @@
 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 { ReactEditor, useSelected } from '@seafile/slate-react';
-import { Transforms } from '@seafile/slate';
-import React from 'react';
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { useSelected, useReadOnly } from '@seafile/slate-react';
 import classNames from 'classnames';
 import { withTranslation } from 'react-i18next';
 import { getImageURL, updateImage } from './helpers';
-import ImagePreviewer from './dialogs/image-previewer';
-import toaster from '../../../../components/toast';
-import context from '../../../../context';
-import { getErrorMsg } from '../../../../utils';
-import imagePlaceholder from '../../../assets/images/image-placeholder.png';
+import EventBus from '../../../utils/event-bus';
+import { INTERNAL_EVENT } from '../../../constants';
+import ImageHoverMenu from './hover-menu';
+import { useScrollContext } from '../../../hooks/use-scroll-context';
+import { IMAGE_BORDER_TYPE } from './constants';
 import { ADDED_STYLE, DELETED_STYLE } from '../../constants';
-var Image = /*#__PURE__*/function (_React$Component) {
-  _inherits(Image, _React$Component);
-  var _super = _createSuper(Image);
-  function Image(props) {
-    var _this;
-    _classCallCheck(this, Image);
-    _this = _super.call(this, props);
-    _this.registerEvent = function () {
-      document.addEventListener('mousemove', _this.onMouseMove);
-      document.addEventListener('mouseup', _this.onResizeEnd);
-    };
-    _this.unregisterEvent = function () {
-      document.removeEventListener('mousemove', _this.onMouseMove);
-      document.removeEventListener('mouseup', _this.onResizeEnd);
-    };
-    _this.onResizeStart = function (event) {
-      event.preventDefault();
-      event.stopPropagation();
-      _this.setState({
-        isResizing: true
-      }, function () {
-        _this.registerEvent();
-      });
-    };
-    _this.onMouseMove = function (event) {
-      event.preventDefault();
-      event.stopPropagation();
-      var changeX = event.clientX - _this.resizer.getBoundingClientRect().left - 5;
-      var imageWidth = _this.image.width + changeX;
-      if (imageWidth < 20) return;
-      _this.setState({
-        width: imageWidth
-      });
-    };
-    _this.onResizeEnd = function (event) {
-      event.preventDefault();
-      event.stopPropagation();
-      _this.unregisterEvent();
-      var width = _this.state.width;
-      var _this$props = _this.props,
-        editor = _this$props.editor,
-        element = _this$props.element;
-      var newData = _objectSpread(_objectSpread({}, element.data), {}, {
-        width: width
-      });
-      updateImage(editor, newData);
-      _this.setState({
-        isResizing: false
-      });
+import imagePlaceholder from '../../../assets/images/image-placeholder.png';
+var Image = function Image(_ref) {
+  var element = _ref.element,
+    editor = _ref.editor,
+    className = _ref.className,
+    attributes = _ref.attributes,
+    children = _ref.children,
+    isSelected = _ref.isSelected,
+    t = _ref.t;
+  var data = element.data,
+    display_type = element.display_type,
+    align = element.align,
+    _element$border_type = element.border_type,
+    border_type = _element$border_type === void 0 ? IMAGE_BORDER_TYPE[0].type : _element$border_type;
+  var imageWrapStyle = {
+    display: display_type === 'Block' ? 'block' : 'inline-block',
+    textAlign: display_type === 'Block' ? align : ''
+  };
+  var imageInnerStyle = {
+    border: IMAGE_BORDER_TYPE.find(function (item) {
+      return item.type === border_type;
+    }).value
+  };
+  var readOnly = useReadOnly();
+  var imageRef = useRef(null);
+  var resizerRef = useRef(null);
+  var scrollRef = useScrollContext();
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isResizing = _useState4[0],
+    setIsResizing = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isShowImagePlaceholder = _useState6[0],
+    setIsShowImagePlaceholder = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isShowImageHoverMenu = _useState8[0],
+    setIsShowImageHoverMenu = _useState8[1];
+  var _useState9 = useState({}),
+    _useState10 = _slicedToArray(_useState9, 2),
+    menuPosition = _useState10[0],
+    setMenuPosition = _useState10[1];
+  var registerEvent = useCallback(function (eventList) {
+    eventList.forEach(function (element) {
+      document.addEventListener(element.eventName, element.event);
+    });
+  }, []);
+  var unregisterEvent = useCallback(function (eventList) {
+    eventList.forEach(function (element) {
+      document.removeEventListener(element.eventName, element.event);
+    });
+  }, []);
+  var onMouseMove = useCallback(function (event) {
+    var _resizerRef$current;
+    event.preventDefault();
+    event.stopPropagation();
+    var changeX = event.clientX - ((_resizerRef$current = resizerRef.current) === null || _resizerRef$current === void 0 ? void 0 : _resizerRef$current.getBoundingClientRect().left) - 5;
+    var imageWidth = imageRef.current.width + changeX;
+    if (imageWidth < 20) return;
+    setWidth(imageWidth);
+  }, []);
+  var onResizeEnd = useCallback(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    unregisterEvent([{
+      'eventName': 'mousemove',
+      'event': onMouseMove
+    }, {
+      'eventName': 'mouseup',
+      'event': onResizeEnd
+    }]);
+    var newData = _objectSpread(_objectSpread({}, element.data), {}, {
+      width: width
+    });
+    updateImage(editor, newData);
+    setIsResizing(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, element.data, width]);
+  var onResizeStart = useCallback(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsResizing(true);
+    registerEvent([{
+      'eventName': 'mousemove',
+      'event': onMouseMove
+    }, {
+      'eventName': 'mouseup',
+      'event': onResizeEnd
+    }]);
+  }, [onMouseMove, onResizeEnd, registerEvent]);
+  var getImageStyle = useCallback(function () {
+    var imageWidth = element.data.width || '';
+    if (width) imageWidth = width;
+    return {
+      width: imageWidth
     };
-    _this.getImageStyle = function () {
-      var element = _this.props.element;
-      var width = _this.state.width;
-      var imageWidth = element.data.width || '';
-      if (width) imageWidth = width;
-      return {
-        width: imageWidth
-      };
+  }, [element.data, width]);
+  var onScroll = useCallback(function () {
+    setPosition(imageRef.current);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onHideImageHoverMenu = useCallback(function (e) {
+    if (e.target === imageRef.current) return;
+    setIsShowImageHoverMenu(false);
+  }, []);
+  useEffect(function () {
+    var observerRefValue = null;
+    if (isShowImageHoverMenu) {
+      registerEvent([{
+        'eventName': 'click',
+        'event': onHideImageHoverMenu
+      }]);
+      scrollRef.current && scrollRef.current.addEventListener('scroll', onScroll);
+      observerRefValue = scrollRef.current;
+    } else {
+      unregisterEvent([{
+        'eventName': 'click',
+        'event': onHideImageHoverMenu
+      }]);
+      scrollRef.current && scrollRef.current.removeEventListener('scroll', onScroll);
+    }
+    return function () {
+      unregisterEvent([{
+        'eventName': 'click',
+        'event': onHideImageHoverMenu
+      }]);
+      if (observerRefValue) {
+        observerRefValue.removeEventListener('scroll', onScroll);
+      }
     };
-    _this.setFullScreen = function () {
-      _this.setState({
-        isShowImagePreview: !_this.state.isShowImagePreview
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowImageHoverMenu, onHideImageHoverMenu]);
+  var setPosition = useCallback(function (elem) {
+    if (elem) {
+      var _elem$getBoundingClie = elem.getBoundingClientRect(),
+        top = _elem$getBoundingClie.top,
+        left = _elem$getBoundingClie.left;
+      var menuTop = top - 42;
+      var menuLeft = left - 18;
+      setMenuPosition({
+        top: menuTop,
+        left: menuLeft
       });
-    };
-    _this.setImageRef = function (ref) {
-      _this.image = ref;
-    };
-    _this.setResizerRef = function (ref) {
-      _this.resizer = ref;
-    };
-    _this.state = {
-      width: null,
-      isResizing: false,
-      isShowImagePreview: false,
-      isShowImagePlaceholder: false
-    };
-    return _this;
-  }
-  _createClass(Image, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-      var docUuid = context.getSetting('docUuid');
-      var _this$props2 = this.props,
-        element = _this$props2.element,
-        editor = _this$props2.editor;
-      var data = element.data;
-      var origin_doc_uuid = data.origin_doc_uuid,
-        src = data.src;
-
-      // Pictures are copied from other documents
-      if (origin_doc_uuid && origin_doc_uuid !== docUuid) {
-        this.setState({
-          isShowImagePlaceholder: true
-        });
-        var originDocUuid = origin_doc_uuid;
-        var imageList = [src.slice(1)];
-        context.copyImage(originDocUuid, imageList).then(function (res) {
-          if (res.status === 200) {
-            var path = ReactEditor.findPath(editor, element);
-            Transforms.setNodes(editor, {
-              data: _objectSpread(_objectSpread({}, data), {}, {
-                origin_doc_uuid: docUuid
-              })
-            }, {
-              at: path
-            });
-            _this2.setState({
-              isShowImagePlaceholder: false
-            });
-          }
-        }).catch(function (error) {
-          var errorMessage = getErrorMsg(error);
-          toaster.danger(errorMessage);
-        });
-      }
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props3 = this.props,
-        className = _this$props3.className,
-        attributes = _this$props3.attributes,
-        element = _this$props3.element,
-        children = _this$props3.children,
-        isSelected = _this$props3.isSelected,
-        t = _this$props3.t;
-      var _this$state = this.state,
-        isResizing = _this$state.isResizing,
-        isShowImagePreview = _this$state.isShowImagePreview,
-        isShowImagePlaceholder = _this$state.isShowImagePlaceholder;
-      var data = element.data;
-      var imageClassName = isSelected ? 'image-selected' : '';
-      var imageStyle = this.getImageStyle();
-      if (isShowImagePlaceholder) {
-        return /*#__PURE__*/React.createElement("span", Object.assign({
-          className: classNames('sdoc-image-wrapper', className)
-        }, attributes), /*#__PURE__*/React.createElement("img", {
-          ref: this.setImageRef,
-          src: imagePlaceholder,
-          style: imageStyle,
-          draggable: false,
-          alt: ""
-        }), children);
-      }
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", Object.assign({
-        className: classNames('sdoc-image-wrapper', className)
-      }, attributes), /*#__PURE__*/React.createElement("img", {
-        className: imageClassName,
-        ref: this.setImageRef,
-        src: getImageURL(data.src),
-        style: imageStyle,
-        draggable: false,
-        alt: ""
-      }), isSelected && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-        className: "image-resizer",
-        ref: this.setResizerRef,
-        onMouseDown: this.onResizeStart
-      }), /*#__PURE__*/React.createElement("span", {
-        className: "image-full-screen",
-        contentEditable: false,
-        onClick: this.setFullScreen
-      }, /*#__PURE__*/React.createElement("i", {
-        className: 'sdocfont sdoc-fullscreen',
-        title: t('Full_screen')
-      }))), isResizing && /*#__PURE__*/React.createElement("span", {
-        className: "image-size",
-        contentEditable: false
-      }, /*#__PURE__*/React.createElement("span", null, t('Width'), ':', parseInt(this.state.width || this.image.clientWidth)), /*#__PURE__*/React.createElement("span", null, "\xA0\xA0"), /*#__PURE__*/React.createElement("span", null, t('Height'), ':', this.image.clientHeight)), children), isShowImagePreview && /*#__PURE__*/React.createElement(ImagePreviewer, {
-        imageUrl: getImageURL(data.src),
-        editor: this.props.editor,
-        toggleImagePreviewer: this.setFullScreen
-      }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onClickImage = useCallback(function (e) {
+    setPosition(e.currentTarget);
+    setIsShowImageHoverMenu(true);
+  }, [setPosition]);
+  var reloadImage = useCallback(function () {
+    if (imageRef) {
+      imageRef.current = getImageURL(data.src);
+    }
+  }, [data.src]);
+  var onImageLoadError = useCallback(function () {
+    setIsShowImagePlaceholder(true);
+    // External network images do not reload after failure to load
+    if (!data.src.startsWith('http')) {
+      var eventBus = EventBus.getInstance();
+      eventBus.subscribe(INTERNAL_EVENT.RELOAD_IMAGE, reloadImage);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isShowImagePlaceholder && /*#__PURE__*/React.createElement("span", Object.assign({
+    className: classNames('sdoc-image-wrapper', className)
+  }, attributes), /*#__PURE__*/React.createElement("img", {
+    ref: imageRef,
+    src: imagePlaceholder,
+    style: getImageStyle(),
+    draggable: false,
+    alt: ""
+  }), children), !isShowImagePlaceholder && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", Object.assign({
+    className: classNames('sdoc-image-wrapper', className)
+  }, attributes, {
+    style: imageWrapStyle
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "sdoc-image-inner",
+    onClick: onClickImage,
+    style: imageInnerStyle
+  }, /*#__PURE__*/React.createElement("img", {
+    className: classNames({
+      'image-selected': isSelected
+    }),
+    ref: imageRef,
+    src: getImageURL(data.src),
+    style: getImageStyle(),
+    draggable: false,
+    onError: onImageLoadError,
+    alt: ""
+  }), isSelected && /*#__PURE__*/React.createElement("span", {
+    className: "image-resizer",
+    ref: resizerRef,
+    onMouseDown: onResizeStart
+  }), isResizing && /*#__PURE__*/React.createElement("span", {
+    className: "image-size",
+    contentEditable: false
+  }, /*#__PURE__*/React.createElement("span", null, t('Width'), ':', parseInt(width || imageRef.current.clientWidth)), /*#__PURE__*/React.createElement("span", null, "\xA0\xA0"), /*#__PURE__*/React.createElement("span", null, t('Height'), ':', imageRef.current.clientHeight))), children), isShowImageHoverMenu && !readOnly && /*#__PURE__*/React.createElement(ImageHoverMenu, {
+    editor: editor,
+    menuPosition: menuPosition,
+    element: element,
+    onHideImageHoverMenu: function onHideImageHoverMenu() {
+      setIsShowImageHoverMenu(false);
     }
-  }]);
-  return Image;
-}(React.Component);
+  })));
+};
 var SdocImage = withTranslation('sdoc-editor')(Image);
 function renderImage(props, editor) {
   // eslint-disable-next-line react-hooks/rules-of-hooks

package/dist/basic-sdk/node-id/index.js

@@ -1,14 +1,6 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { decorateOperation, replacePastedDataId } from './helpers';
+import { getSlateFragmentAttribute } from '../utils/document-utils';
 import { CLIPBOARD_FORMAT_KEY } from '../extension/constants';
-var catchSlateFragment = /data-slate-fragment="(.+?)"/m;
-var getSlateFragmentAttribute = function getSlateFragmentAttribute(dataTransfer) {
-  var htmlData = dataTransfer.getData('text/html');
-  var _ref = htmlData.match(catchSlateFragment) || [],
-    _ref2 = _slicedToArray(_ref, 2),
-    fragment = _ref2[1];
-  return fragment;
-};
 var withNodeId = function withNodeId(editor) {
   var apply = editor.apply;
   var newEditor = editor;

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

@@ -1,5 +1,8 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import ObjectUtils from './object-utils';
+import context from '../../context';
 import { generateDefaultText } from '../../basic-sdk/extension/core/utils/index';
+import { CLIPBOARD_ORIGIN_SDOC_KEY } from '../extension/constants';
 export var normalizeChildren = function normalizeChildren(children) {
   // text
   if (!Array.isArray(children)) return children;
@@ -15,4 +18,16 @@ export var normalizeChildren = function normalizeChildren(children) {
     child.children = normalizeChildren(child.children);
     return child;
   });
+};
+export var setOriginSdocKey = function setOriginSdocKey(event) {
+  var docUuid = context.getSetting('docUuid');
+  event.clipboardData.setData("text/".concat(CLIPBOARD_ORIGIN_SDOC_KEY), docUuid);
+};
+export var getSlateFragmentAttribute = function getSlateFragmentAttribute(dataTransfer) {
+  var catchSlateFragment = /data-slate-fragment="(.+?)"/m;
+  var htmlData = dataTransfer.getData('text/html');
+  var _ref = htmlData.match(catchSlateFragment) || [],
+    _ref2 = _slicedToArray(_ref, 2),
+    fragment = _ref2[1];
+  return fragment;
 };

package/dist/basic-sdk/utils/event-handler.js

@@ -3,6 +3,7 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import isHotkey from 'is-hotkey';
 import EventBus from '../utils/event-bus';
 import { getSelectedNodeByType } from '../extension/core/queries/';
+import { setOriginSdocKey } from './document-utils';
 import { ELEMENT_TYPE } from '../extension/constants';
 import { INTERNAL_EVENT } from '../constants';
 var EventProxy = /*#__PURE__*/_createClass(function EventProxy(_editor) {
@@ -79,11 +80,10 @@ var EventProxy = /*#__PURE__*/_createClass(function EventProxy(_editor) {
     }
   };
   this.onCopy = function (event) {
-    event.stopPropagation();
-    event.nativeEvent.stopImmediatePropagation();
-    // 处理数据
+    setOriginSdocKey(event);
   };
   this.onCut = function (event) {
+    setOriginSdocKey(event);
     if (_this.editor.cut) {
       _this.editor.cut(event);
     }

package/dist/context.js

@@ -242,6 +242,12 @@ var Context = /*#__PURE__*/function () {
       var docUuid = this.getSetting('docUuid');
       return this.api.getLinkFilesInfo(docUuid, filesUrl);
     }
+  }, {
+    key: "getCopyMoveProgressView",
+    value: function getCopyMoveProgressView(taskId) {
+      var docUuid = this.getSetting('docUuid');
+      return this.api.getCopyMoveProgressView(docUuid, taskId);
+    }
   }]);
   return Context;
 }();

package/package.json

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

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

@@ -378,5 +378,7 @@
   "Has_been_removed_tip": "Document has been removed, please view other documents.",
   "Revision_created": "Revision {{id}} created",
   "Checking": "Checking...",
-  "Publishing": "Publishing..."
+  "Publishing": "Publishing...",
+  "Inline": "Inline",
+  "Block": "Block"
 }

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

@@ -378,5 +378,7 @@
   "Has_been_removed_tip": "文档已经被删除，请查看其他文档",
   "Revision_created": "已创建修订稿 {{id}}",
   "Checking": "检查中...",
-  "Publishing": "发布中..."
+  "Publishing": "发布中...",
+  "Inline": "嵌入行内",
+  "Block": "独占一行"
 }