@seafile/sdoc-editor 2.0.82 → 2.0.83

package/dist/extension/plugins/image/plugin.js

@@ -0,0 +1,228 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+var _slate = require("@seafile/slate");
+var _toast = _interopRequireDefault(require("../../../components/toast"));
+var _constants = require("../../../constants");
+var _context = _interopRequireDefault(require("../../../context"));
+var _commonUtils = require("../../../utils/common-utils");
+var _documentUtils = require("../../../utils/document-utils");
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+var _constants2 = require("../../constants");
+var _core = require("../../core");
+var _helpers = require("./helpers");
+var withImage = function withImage(editor) {
+  var isInline = editor.isInline,
+    isVoid = editor.isVoid,
+    insertData = editor.insertData,
+    deleteBackward = editor.deleteBackward,
+    insertFragment = editor.insertFragment,
+    insertBreak = editor.insertBreak;
+  var newEditor = editor;
+
+  // rewrite isInline
+  newEditor.isInline = function (elem) {
+    var type = elem.type;
+    if (type === _constants2.IMAGE) {
+      return true;
+    }
+    return isInline(elem);
+  };
+
+  // rewrite isVoid
+  newEditor.isVoid = function (elem) {
+    var type = elem.type;
+    if (type === _constants2.IMAGE) {
+      return true;
+    }
+    return isVoid(elem);
+  };
+  newEditor.insertData = function (data) {
+    var fragment = data.getData("application/".concat(_constants2.CLIPBOARD_FORMAT_KEY)) || (0, _documentUtils.getSlateFragmentAttribute)(data);
+    var originSdocUuid = data.getData("text/".concat(_constants2.CLIPBOARD_ORIGIN_SDOC_KEY));
+    if (fragment && originSdocUuid) {
+      var decoded = decodeURIComponent(window.atob(fragment));
+      var fragmentData = JSON.parse(decoded);
+      if ((0, _helpers.hasSdocImages)(originSdocUuid, fragmentData)) {
+        var imageData = (0, _helpers.getImageData)(fragmentData);
+        _context["default"].copyImage(originSdocUuid, imageData).then(function (res) {
+          if (res.status === 200) {
+            // Task_id is an empty character and is copied from the same database.
+            if (res.data.task_id.length === 0) {
+              // Reload image
+              setTimeout(function () {
+                var eventBus = _eventBus["default"].getInstance();
+                eventBus.dispatch(_constants.INTERNAL_EVENT.RELOAD_IMAGE);
+              }, 300);
+            } else {
+              (0, _helpers.queryCopyMoveProgressView)(res.data.task_id);
+            }
+          }
+        })["catch"](function (error) {
+          var errorMessage = (0, _commonUtils.getErrorMsg)(error);
+          _toast["default"].danger(errorMessage);
+        });
+      }
+    }
+    if (data.types && data.types.includes('Files') && data.files[0].type.includes(_constants2.IMAGE)) {
+      var imgInfos = (0, _helpers.generateImageInfos)(data.files);
+      (0, _helpers.insertImage)(newEditor, imgInfos, editor.selection, _constants2.INSERT_POSITION.CURRENT);
+      return;
+    }
+    insertData(data);
+  };
+  newEditor.insertFragment = function (data) {
+    var singleImage = (0, _helpers.getSingleImageFromFragment)(data);
+    if (singleImage && (0, _helpers.isInsertImageMenuDisabled)(editor)) {
+      var path = _slate.Editor.path(editor, editor.selection);
+      var nextPath = _slate.Path.next([path[0]]);
+      var p = (0, _core.generateEmptyElement)(_constants2.ELEMENT_TYPE.PARAGRAPH);
+      p.children = [singleImage];
+      _slate.Transforms.insertNodes(editor, p, {
+        at: nextPath
+      });
+      // There will be a space before and after the image
+      var imagePath = [].concat((0, _toConsumableArray2["default"])(nextPath), [1]);
+      (0, _core.focusEditor)(editor, _slate.Path.next(imagePath));
+      return;
+    }
+    if (singleImage) {
+      (0, _helpers.resetCursor)(newEditor);
+    }
+    return insertFragment(data);
+  };
+  newEditor.imageOnKeyDown = function (e) {
+    if (e.keyCode === 13) {
+      var _getSelectedNodeEntry = (0, _core.getSelectedNodeEntryByType)(editor, _constants2.ELEMENT_TYPE.IMAGE),
+        _getSelectedNodeEntry2 = (0, _slicedToArray2["default"])(_getSelectedNodeEntry, 2),
+        imagePath = _getSelectedNodeEntry2[1];
+      var nextPath = _slate.Path.next(imagePath);
+      var parentPath = _slate.Path.parent(imagePath);
+      var _Editor$node = _slate.Editor.node(editor, parentPath),
+        _Editor$node2 = (0, _slicedToArray2["default"])(_Editor$node, 1),
+        parentNode = _Editor$node2[0];
+      if (parentNode.type === _constants2.IMAGE_BLOCK) {
+        var _nextPath = _slate.Path.next(parentPath);
+        var p = (0, _core.generateEmptyElement)(_constants2.PARAGRAPH);
+        _slate.Transforms.insertNodes(editor, p, {
+          at: _nextPath
+        });
+        setTimeout(function () {
+          (0, _core.focusEditor)(editor, _nextPath);
+        }, 0);
+        return;
+      }
+      if (_slate.Editor.hasPath(editor, nextPath)) {
+        var nextSelection = {
+          anchor: {
+            offset: 0,
+            path: nextPath
+          },
+          focus: {
+            offset: 0,
+            path: nextPath
+          }
+        };
+        _slate.Transforms.setSelection(editor, nextSelection);
+        return true;
+      } else {
+        var _nextPath2 = _slate.Path.next(parentPath);
+        var _p = (0, _core.generateEmptyElement)(_constants2.PARAGRAPH);
+        _slate.Transforms.insertNodes(editor, _p, {
+          at: _nextPath2
+        });
+        setTimeout(function () {
+          (0, _core.focusEditor)(editor, _nextPath2);
+        }, 0);
+      }
+      return true;
+    }
+  };
+  newEditor.deleteBackward = function (unit) {
+    var selection = editor.selection;
+    if (!selection) return deleteBackward(unit);
+    var point = _slate.Editor.before(editor, selection, {
+      distance: 1
+    });
+    if (!point) return deleteBackward(unit);
+    if (!_slate.Range.isCollapsed(selection)) {
+      return deleteBackward(unit);
+    }
+    if ((0, _core.isSelectionAtBlockStart)(editor)) {
+      var path = selection.anchor.path;
+      if ((0, _core.isFirstChild)(path)) {
+        return deleteBackward(unit);
+      }
+      var beforePath = [path[0] - 1];
+      var beforeBlock = _slate.Editor.node(editor, beforePath);
+      if (beforeBlock && beforeBlock[0].type === _constants2.IMAGE_BLOCK) {
+        (0, _core.focusEditor)(editor, [].concat(beforePath, [1]));
+        return;
+      }
+    }
+    var imageBlock = (0, _core.getSelectedNodeEntryByType)(editor, _constants2.IMAGE_BLOCK);
+    if (imageBlock) {
+      var _path = selection.anchor.path;
+      var deletePath = [_path[0]];
+
+      // Delete image_block element in multi-column node
+      var currentTopNode = (0, _core.getNode)(editor, deletePath);
+      var currentBlockNode = (0, _core.getNode)(editor, _path.slice(0, 3));
+      // Image_block not in callout or blockquote
+      if (currentTopNode.type === _constants2.MULTI_COLUMN && ![_constants2.CALL_OUT, _constants2.BLOCKQUOTE].includes(currentBlockNode.type)) {
+        (0, _helpers.removeImageBlockNode)(editor, _path.slice(0, 3));
+        return;
+      }
+      // Image_block in callout or blockquote
+      if (currentTopNode.type === _constants2.MULTI_COLUMN && [_constants2.CALL_OUT, _constants2.BLOCKQUOTE].includes(currentBlockNode.type)) {
+        (0, _helpers.removeImageBlockNode)(editor, _path.slice(0, 4));
+        return;
+      }
+      _slate.Transforms.removeNodes(editor, {
+        at: deletePath
+      });
+      if ((0, _core.isEmptyArticle)(editor)) {
+        var p = (0, _core.generateEmptyElement)(_constants2.ELEMENT_TYPE.PARAGRAPH);
+        _slate.Transforms.insertNodes(editor, p, {
+          at: [0]
+        });
+      }
+      var prevPath = deletePath[0] === 0 ? deletePath : _slate.Path.previous(deletePath);
+      var beforeEntry = _slate.Editor.node(editor, prevPath);
+      var selectPath = (0, _core.getLastChildPath)(beforeEntry);
+      var endOfFirstNode = _slate.Editor.end(editor, selectPath);
+      var range = {
+        anchor: endOfFirstNode,
+        focus: endOfFirstNode
+      };
+      (0, _core.focusEditor)(editor, range);
+      return;
+    }
+    deleteBackward(unit);
+  };
+  newEditor.insertBreak = function () {
+    var selection = editor.selection;
+    if (selection == null) return insertBreak();
+    var path = _slate.Editor.path(editor, selection);
+    var _Editor$node3 = _slate.Editor.node(editor, [path[0]]),
+      _Editor$node4 = (0, _slicedToArray2["default"])(_Editor$node3, 1),
+      node = _Editor$node4[0];
+    if (node.type === _constants2.IMAGE_BLOCK) {
+      var p = (0, _core.generateEmptyElement)(_constants2.PARAGRAPH);
+      _slate.Transforms.insertNodes(editor, p, {
+        at: [path[0] + 1]
+      });
+      (0, _core.focusEditor)(editor, [path[0] + 1]);
+      return;
+    }
+    insertBreak();
+  };
+  return newEditor;
+};
+var _default = exports["default"] = withImage;

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

@@ -0,0 +1,412 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderImage = renderImage;
+exports.renderImageBlock = renderImageBlock;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _imagePlaceholder = _interopRequireDefault(require("../../../assets/images/image-placeholder.png"));
+var _constants = require("../../../constants");
+var _useScrollContext = require("../../../hooks/use-scroll-context");
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+var _constants2 = require("../../constants");
+var _constants3 = require("./constants");
+var _copyImageErrorSvg = _interopRequireDefault(require("./copy-image-error-svg"));
+var _helpers = require("./helpers");
+var _hoverMenu = _interopRequireDefault(require("./hover-menu"));
+var _imageLoader = _interopRequireDefault(require("./image-loader"));
+var _useCopyImage2 = _interopRequireDefault(require("./use-copy-image"));
+var _useUploadImage2 = _interopRequireDefault(require("./use-upload-image"));
+var Image = function Image(_ref) {
+  var _imageRef$current, _imageRef$current2;
+  var element = _ref.element,
+    editor = _ref.editor,
+    style = _ref.style,
+    className = _ref.className,
+    attributes = _ref.attributes,
+    children = _ref.children,
+    isSelected = _ref.isSelected,
+    t = _ref.t;
+  var data = element.data,
+    _element$border_type = element.border_type,
+    border_type = _element$border_type === void 0 ? _constants3.IMAGE_BORDER_TYPE[0].type : _element$border_type;
+  var _data$show_caption = data.show_caption,
+    show_caption = _data$show_caption === void 0 ? false : _data$show_caption,
+    column_key = data.column_key;
+  var path = _slateReact.ReactEditor.findPath(editor, element);
+  var nodeEntry = _slate.Editor.node(editor, [path[0]]);
+  var imageStyle = {
+    border: _constants3.IMAGE_BORDER_TYPE.find(function (item) {
+      return item.type === border_type;
+    }).value
+  };
+  var readOnly = (0, _slateReact.useReadOnly)();
+  var imageRef = (0, _react.useRef)(null);
+  var resizerRef = (0, _react.useRef)(null);
+  var imageCaptionInputRef = (0, _react.useRef)(null);
+  var scrollRef = (0, _useScrollContext.useScrollContext)();
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    movingWidth = _useState2[0],
+    setMovingWidth = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isResizing = _useState4[0],
+    setIsResizing = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    isShowImagePlaceholder = _useState6[0],
+    setIsShowImagePlaceholder = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    isShowImageHoverMenu = _useState8[0],
+    setIsShowImageHoverMenu = _useState8[1];
+  var _useState9 = (0, _react.useState)({}),
+    _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
+    menuPosition = _useState0[0],
+    setMenuPosition = _useState0[1];
+  var _useState1 = (0, _react.useState)((data === null || data === void 0 ? void 0 : data.caption) || ''),
+    _useState10 = (0, _slicedToArray2["default"])(_useState1, 2),
+    caption = _useState10[0],
+    setCaption = _useState10[1];
+  var _useCopyImage = (0, _useCopyImage2["default"])({
+      editor: editor,
+      element: element
+    }),
+    isCopyImageLoading = _useCopyImage.isCopyImageLoading,
+    isCopyImageError = _useCopyImage.isCopyImageError,
+    setCopyImageLoading = _useCopyImage.setCopyImageLoading;
+  var _useUploadImage = (0, _useUploadImage2["default"])({
+      editor: editor,
+      element: element
+    }),
+    isUploadLoading = _useUploadImage.isUploadLoading,
+    isUploadError = _useUploadImage.isUploadError;
+  var registerEvent = (0, _react.useCallback)(function (eventList) {
+    eventList.forEach(function (element) {
+      document.addEventListener(element.eventName, element.event);
+    });
+  }, []);
+  var unregisterEvent = (0, _react.useCallback)(function (eventList) {
+    eventList.forEach(function (element) {
+      document.removeEventListener(element.eventName, element.event);
+    });
+  }, []);
+  var onMouseMove = (0, _react.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;
+    imageRef.current.width = imageWidth;
+    setMovingWidth(imageWidth);
+  }, []);
+  var onResizeEnd = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    unregisterEvent([{
+      'eventName': 'mousemove',
+      'event': onMouseMove
+    }, {
+      'eventName': 'mouseup',
+      'event': onResizeEnd
+    }]);
+    var newData = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, element.data), {}, {
+      width: imageRef.current.width
+    });
+    (0, _helpers.updateImage)(editor, newData);
+
+    // Reset hover menu position
+    setTimeout(function () {
+      setIsResizing(false);
+      setIsShowImageHoverMenu(true);
+      setPosition();
+    }, 100);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, element.data, imageRef.current]);
+  var onResizeStart = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsShowImageHoverMenu(false);
+    setIsResizing(true);
+    registerEvent([{
+      'eventName': 'mousemove',
+      'event': onMouseMove
+    }, {
+      'eventName': 'mouseup',
+      'event': onResizeEnd
+    }]);
+  }, [onMouseMove, onResizeEnd, registerEvent]);
+  var getImageStyle = (0, _react.useCallback)(function () {
+    var imageWidth = element.data.width || '';
+    if (movingWidth) imageWidth = movingWidth;
+    return {
+      width: imageWidth
+    };
+  }, [element.data, movingWidth]);
+  var onScroll = (0, _react.useCallback)(function () {
+    setPosition();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onHideImageHoverMenu = (0, _react.useCallback)(function (e) {
+    var _imagePreviewer$;
+    if (isResizing) return;
+    var imagePreviewer = document.getElementsByClassName('sf-editor-image-previewer');
+    var isCaptionInput = e.target.id === 'sdoc-image-caption-input';
+    if (e.target === imageRef.current || (_imagePreviewer$ = imagePreviewer[0]) !== null && _imagePreviewer$ !== void 0 && _imagePreviewer$.contains(e.target) || isCaptionInput) return;
+    setIsShowImageHoverMenu(false);
+  }, [isResizing]);
+  (0, _react.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);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowImageHoverMenu, onHideImageHoverMenu]);
+  var onImageColumnToggle = (0, _react.useCallback)(function () {
+    // Handle switching to empty data and switching back
+    setIsShowImagePlaceholder(false);
+  }, []);
+  (0, _react.useEffect)(function () {
+    var unsubscribeImageColumnToggle = null;
+    if (column_key) {
+      var eventBus = _eventBus["default"].getInstance();
+      unsubscribeImageColumnToggle = eventBus.subscribe(_constants.INTERNAL_EVENT.IMAGE_COLUMN_TOGGLE, onImageColumnToggle);
+    }
+    return function () {
+      unsubscribeImageColumnToggle && unsubscribeImageColumnToggle();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [column_key]);
+  var setPosition = (0, _react.useCallback)(function () {
+    if (imageRef.current) {
+      var _imageRef$current$get = imageRef.current.getBoundingClientRect(),
+        top = _imageRef$current$get.top,
+        left = _imageRef$current$get.left;
+      setMenuPosition({
+        top: top - 42,
+        left: left - 3
+      });
+    }
+  }, []);
+  var onClickImage = (0, _react.useCallback)(function (e) {
+    setPosition();
+    setIsShowImageHoverMenu(true);
+  }, [setPosition]);
+  var reloadImage = (0, _react.useCallback)(function () {
+    if (imageRef.current) {
+      imageRef.current['src'] = (0, _helpers.getImageURL)(data, editor);
+      setIsShowImagePlaceholder(false);
+    }
+  }, [data, editor]);
+  var onImageLoaded = (0, _react.useCallback)(function () {
+    if ((0, _helpers.isImageUrlIsFromCopy)(data.src)) {
+      setCopyImageLoading(true);
+    }
+  }, [data.src, setCopyImageLoading]);
+  var onImageLoadError = (0, _react.useCallback)(function () {
+    // Check is due to the image is pasted from the clipboard in base64
+    if (data.src.startsWith('data:image/jpeg;base64')) {
+      return (0, _helpers.handleBase64Image)(editor, path, data);
+    }
+    setIsShowImagePlaceholder(true);
+    // External network images do not reload after failure to load
+    if (!data.src.startsWith('http')) {
+      var eventBus = _eventBus["default"].getInstance();
+      eventBus.subscribe(_constants.INTERNAL_EVENT.RELOAD_IMAGE, reloadImage);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onSetCaption = (0, _react.useCallback)(function (e) {
+    var path = _slateReact.ReactEditor.findPath(editor, element);
+    var newData = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, data), {}, {
+      caption: e.target.value.trim()
+    });
+    if (path) {
+      _slate.Transforms.setNodes(editor, {
+        data: newData
+      }, {
+        at: path
+      });
+    }
+  }, [data, editor, element]);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isShowImagePlaceholder && /*#__PURE__*/_react["default"].createElement("span", Object.assign({
+    className: (0, _classnames["default"])('sdoc-image-wrapper', className)
+  }, attributes, {
+    style: (0, _objectSpread2["default"])({}, style),
+    onMouseOver: function onMouseOver(e) {
+      return (0, _helpers.selectImageWhenSelectPartial)(e, editor, element, isSelected);
+    },
+    contentEditable: "false",
+    "data-src": (0, _helpers.getImageURL)(data, editor),
+    suppressContentEditableWarning: true
+  }), /*#__PURE__*/_react["default"].createElement("img", {
+    ref: imageRef,
+    src: _imagePlaceholder["default"],
+    style: getImageStyle(),
+    draggable: false,
+    alt: ""
+  }), children), isCopyImageError && /*#__PURE__*/_react["default"].createElement("span", Object.assign({
+    className: (0, _classnames["default"])('sdoc-image-wrapper', className)
+  }, attributes, {
+    style: (0, _objectSpread2["default"])({}, style),
+    onMouseOver: function onMouseOver(e) {
+      return (0, _helpers.selectImageWhenSelectPartial)(e, editor, element, isSelected);
+    },
+    contentEditable: "false",
+    "data-src": data.src,
+    suppressContentEditableWarning: true
+  }), /*#__PURE__*/_react["default"].createElement(_copyImageErrorSvg["default"], {
+    t: t,
+    isSelected: isSelected,
+    imageRef: imageRef
+  }), children), !isShowImagePlaceholder && !isCopyImageError && /*#__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, {
+    style: (0, _objectSpread2["default"])({}, style),
+    onMouseOver: function onMouseOver(e) {
+      return (0, _helpers.selectImageWhenSelectPartial)(e, editor, element, isSelected);
+    },
+    contentEditable: "false",
+    suppressContentEditableWarning: true
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "sdoc-image-inner"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: (0, _classnames["default"])('sdoc-image-content', {
+      'upload-error': isUploadError
+    })
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    style: imageStyle
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    ref: imageRef,
+    className: (0, _classnames["default"])({
+      'image-selected': isSelected
+    }),
+    onClick: onClickImage,
+    src: (0, _helpers.getImageURL)(data, editor),
+    style: getImageStyle(),
+    draggable: false,
+    onLoad: onImageLoaded,
+    onError: onImageLoadError,
+    alt: ""
+  }), (isCopyImageLoading || isUploadLoading) && /*#__PURE__*/_react["default"].createElement(_imageLoader["default"], {
+    copyright: t('Image_is_uploading')
+  }), isUploadError && /*#__PURE__*/_react["default"].createElement(_imageLoader["default"], {
+    copyright: t('Image_is_upload_error'),
+    isError: true
+  }), 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))), nodeEntry[0].type === _constants2.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)
+    },
+    placeholder: t('Caption'),
+    autoComplete: "off",
+    value: caption,
+    disabled: readOnly,
+    onBlur: onSetCaption,
+    onChange: function onChange(e) {
+      setCaption(e.target.value);
+    },
+    onCompositionStart: function onCompositionStart(e) {
+      e.stopPropagation();
+    }
+  }))), children), isShowImageHoverMenu && /*#__PURE__*/_react["default"].createElement(_hoverMenu["default"], {
+    editor: editor,
+    menuPosition: menuPosition,
+    element: element,
+    parentNodeEntry: nodeEntry,
+    imageCaptionInputRef: imageCaptionInputRef,
+    readonly: readOnly,
+    onHideImageHoverMenu: function onHideImageHoverMenu() {
+      setIsShowImageHoverMenu(false);
+    }
+  })));
+};
+var SdocImage = (0, _reactI18next.withTranslation)('sdoc-editor')(Image);
+function renderImage(props, editor) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  var isSelected = (0, _slateReact.useSelected)();
+
+  // decorate diff-viewer
+  var element = props.element,
+    leaf = props.leaf;
+  var style = (0, _objectSpread2["default"])({}, props.style);
+  if (leaf && leaf.computed_background_color) {
+    style['backgroundColor'] = leaf.computed_background_color;
+  }
+  if (element.add || element["delete"]) {
+    style = Object.assign({}, style, element.add ? _constants2.ADDED_STYLE : _constants2.DELETED_STYLE);
+    if (style.computed_background_color) {
+      style['backgroundColor'] = style.computed_background_color;
+    }
+  }
+  return /*#__PURE__*/_react["default"].createElement(SdocImage, Object.assign({}, props, {
+    style: style,
+    editor: editor,
+    isSelected: isSelected
+  }));
+}
+function renderImageBlock(props, editor) {
+  var element = props.element,
+    children = props.children,
+    attributes = props.attributes;
+  var align = element.align;
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  var isSelected = (0, _slateReact.useSelected)();
+  var justifyContent = '';
+  if (align) {
+    justifyContent = align === 'left' ? 'start' : align === 'right' ? 'end' : align;
+  }
+  return /*#__PURE__*/_react["default"].createElement("div", Object.assign({
+    className: "sdoc-image-block-wrapper",
+    style: {
+      display: 'flex',
+      justifyContent: "".concat(justifyContent)
+    }
+  }, attributes, {
+    onMouseOver: function onMouseOver(e) {
+      return (0, _helpers.selectImageWhenSelectPartial)(e, editor, element, isSelected);
+    },
+    contentEditable: "false",
+    suppressContentEditableWarning: true
+  }), children);
+}