@seafile/comment-editor 0.0.1-alpha.0

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

@@ -0,0 +1,230 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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");
+const withImage = editor => {
+  const {
+    isInline,
+    isVoid,
+    insertData,
+    deleteBackward,
+    insertFragment,
+    insertBreak
+  } = editor;
+  const newEditor = editor;
+
+  // rewrite isInline
+  newEditor.isInline = elem => {
+    const {
+      type
+    } = elem;
+    if (type === _constants2.IMAGE) {
+      return true;
+    }
+    return isInline(elem);
+  };
+
+  // rewrite isVoid
+  newEditor.isVoid = elem => {
+    const {
+      type
+    } = elem;
+    if (type === _constants2.IMAGE) {
+      return true;
+    }
+    return isVoid(elem);
+  };
+  newEditor.insertData = data => {
+    const fragment = data.getData(`application/${_constants2.CLIPBOARD_FORMAT_KEY}`) || (0, _documentUtils.getSlateFragmentAttribute)(data);
+    const originSdocUuid = data.getData(`text/${_constants2.CLIPBOARD_ORIGIN_SDOC_KEY}`);
+    if (fragment && originSdocUuid) {
+      const decoded = decodeURIComponent(window.atob(fragment));
+      const fragmentData = JSON.parse(decoded);
+      if ((0, _helpers.hasSdocImages)(originSdocUuid, fragmentData)) {
+        const imageData = (0, _helpers.getImageData)(fragmentData);
+        _context.default.copyImage(originSdocUuid, imageData).then(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(() => {
+                const eventBus = _eventBus.default.getInstance();
+                eventBus.dispatch(_constants.INTERNAL_EVENT.RELOAD_IMAGE);
+              }, 300);
+            } else {
+              (0, _helpers.queryCopyMoveProgressView)(res.data.task_id);
+            }
+          }
+        }).catch(error => {
+          const errorMessage = (0, _commonUtils.getErrorMsg)(error);
+          _toast.default.danger(errorMessage);
+        });
+      }
+    }
+    if (data.types && data.types.includes('Files') && data.files[0].type.includes(_constants2.IMAGE)) {
+      const imgInfos = (0, _helpers.generateImageInfos)(data.files);
+      (0, _helpers.insertImage)(newEditor, imgInfos, editor.selection, _constants2.INSERT_POSITION.CURRENT);
+      return;
+    }
+    insertData(data);
+  };
+  newEditor.insertFragment = data => {
+    const singleImage = (0, _helpers.getSingleImageFromFragment)(data);
+    if (singleImage && (0, _helpers.isInsertImageMenuDisabled)(editor)) {
+      const path = _slate.Editor.path(editor, editor.selection);
+      const nextPath = _slate.Path.next([path[0]]);
+      const 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
+      const imagePath = [...nextPath, 1];
+      (0, _core.focusEditor)(editor, _slate.Path.next(imagePath));
+      return;
+    }
+    if (singleImage) {
+      (0, _helpers.resetCursor)(newEditor);
+    }
+    return insertFragment(data);
+  };
+  newEditor.imageOnKeyDown = e => {
+    if (e.keyCode === 13) {
+      const [, imagePath] = (0, _core.getSelectedNodeEntryByType)(editor, _constants2.ELEMENT_TYPE.IMAGE);
+      const nextPath = _slate.Path.next(imagePath);
+      const parentPath = _slate.Path.parent(imagePath);
+      const [parentNode] = _slate.Editor.node(editor, parentPath);
+      if (parentNode.type === _constants2.IMAGE_BLOCK) {
+        const nextPath = _slate.Path.next(parentPath);
+        const p = (0, _core.generateEmptyElement)(_constants2.PARAGRAPH);
+        _slate.Transforms.insertNodes(editor, p, {
+          at: nextPath
+        });
+        setTimeout(() => {
+          (0, _core.focusEditor)(editor, nextPath);
+        }, 0);
+        return;
+      }
+      if (_slate.Editor.hasPath(editor, nextPath)) {
+        const nextSelection = {
+          anchor: {
+            offset: 0,
+            path: nextPath
+          },
+          focus: {
+            offset: 0,
+            path: nextPath
+          }
+        };
+        _slate.Transforms.setSelection(editor, nextSelection);
+        return true;
+      } else {
+        const nextPath = _slate.Path.next(parentPath);
+        const p = (0, _core.generateEmptyElement)(_constants2.PARAGRAPH);
+        _slate.Transforms.insertNodes(editor, p, {
+          at: nextPath
+        });
+        setTimeout(() => {
+          (0, _core.focusEditor)(editor, nextPath);
+        }, 0);
+      }
+      return true;
+    }
+  };
+  newEditor.deleteBackward = unit => {
+    const {
+      selection
+    } = editor;
+    if (!selection) return deleteBackward(unit);
+    const 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)) {
+      const path = selection.anchor.path;
+      if ((0, _core.isFirstChild)(path)) {
+        return deleteBackward(unit);
+      }
+      const beforePath = [path[0] - 1];
+      const beforeBlock = _slate.Editor.node(editor, beforePath);
+      if (beforeBlock && beforeBlock[0].type === _constants2.IMAGE_BLOCK) {
+        (0, _core.focusEditor)(editor, [...beforePath, 1]);
+        return;
+      }
+    }
+    const imageBlock = (0, _core.getSelectedNodeEntryByType)(editor, _constants2.IMAGE_BLOCK);
+    if (imageBlock) {
+      const path = selection.anchor.path;
+      const deletePath = [path[0]];
+
+      // Delete image_block element in multi-column node
+      const currentTopNode = (0, _core.getNode)(editor, deletePath);
+      const 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)) {
+        const p = (0, _core.generateEmptyElement)(_constants2.ELEMENT_TYPE.PARAGRAPH);
+        _slate.Transforms.insertNodes(editor, p, {
+          at: [0]
+        });
+      }
+      const prevPath = deletePath[0] === 0 ? deletePath : _slate.Path.previous(deletePath);
+      const beforeEntry = _slate.Editor.node(editor, prevPath);
+      const selectPath = (0, _core.getLastChildPath)(beforeEntry);
+      const endOfFirstNode = _slate.Editor.end(editor, selectPath);
+      const range = {
+        anchor: endOfFirstNode,
+        focus: endOfFirstNode
+      };
+      (0, _core.focusEditor)(editor, range);
+      return;
+    }
+    deleteBackward(unit);
+  };
+  newEditor.insertBreak = () => {
+    const {
+      selection
+    } = editor;
+    if (selection == null) return insertBreak();
+    const path = _slate.Editor.path(editor, selection);
+    const [node] = _slate.Editor.node(editor, [path[0]]);
+    if (node.type === _constants2.IMAGE_BLOCK) {
+      const 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/basic-sdk/extension/plugins/image/render-elem.js

@@ -0,0 +1,405 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderImage = renderImage;
+exports.renderImageBlock = renderImageBlock;
+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 _useCopyImage = _interopRequireDefault(require("./use-copy-image"));
+var _useUploadImage = _interopRequireDefault(require("./use-upload-image"));
+const Image = _ref => {
+  var _imageRef$current, _imageRef$current2;
+  let {
+    element,
+    editor,
+    style,
+    className,
+    attributes,
+    children,
+    isSelected,
+    t
+  } = _ref;
+  const {
+    data,
+    border_type = _constants3.IMAGE_BORDER_TYPE[0].type
+  } = element;
+  const {
+    show_caption = false,
+    column_key
+  } = data;
+  const path = _slateReact.ReactEditor.findPath(editor, element);
+  const nodeEntry = _slate.Editor.node(editor, [path[0]]);
+  const imageStyle = {
+    border: _constants3.IMAGE_BORDER_TYPE.find(item => item.type === border_type).value
+  };
+  const readOnly = (0, _slateReact.useReadOnly)();
+  const imageRef = (0, _react.useRef)(null);
+  const resizerRef = (0, _react.useRef)(null);
+  const imageCaptionInputRef = (0, _react.useRef)(null);
+  const scrollRef = (0, _useScrollContext.useScrollContext)();
+  const [movingWidth, setMovingWidth] = (0, _react.useState)(null);
+  const [isResizing, setIsResizing] = (0, _react.useState)(false);
+  const [isShowImagePlaceholder, setIsShowImagePlaceholder] = (0, _react.useState)(false);
+  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 {
+    isCopyImageLoading,
+    isCopyImageError,
+    setCopyImageLoading
+  } = (0, _useCopyImage.default)({
+    editor,
+    element
+  });
+  const {
+    isUploadLoading,
+    isUploadError
+  } = (0, _useUploadImage.default)({
+    editor,
+    element
+  });
+  const registerEvent = (0, _react.useCallback)(eventList => {
+    eventList.forEach(element => {
+      document.addEventListener(element.eventName, element.event);
+    });
+  }, []);
+  const unregisterEvent = (0, _react.useCallback)(eventList => {
+    eventList.forEach(element => {
+      document.removeEventListener(element.eventName, element.event);
+    });
+  }, []);
+  const onMouseMove = (0, _react.useCallback)(event => {
+    var _resizerRef$current;
+    event.preventDefault();
+    event.stopPropagation();
+    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);
+  }, []);
+  const onResizeEnd = (0, _react.useCallback)(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    unregisterEvent([{
+      'eventName': 'mousemove',
+      'event': onMouseMove
+    }, {
+      'eventName': 'mouseup',
+      'event': onResizeEnd
+    }]);
+    const newData = {
+      ...element.data,
+      width: imageRef.current.width
+    };
+    (0, _helpers.updateImage)(editor, newData);
+
+    // Reset hover menu position
+    setTimeout(() => {
+      setIsResizing(false);
+      setIsShowImageHoverMenu(true);
+      setPosition();
+    }, 100);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, element.data, imageRef.current]);
+  const onResizeStart = (0, _react.useCallback)(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsShowImageHoverMenu(false);
+    setIsResizing(true);
+    registerEvent([{
+      'eventName': 'mousemove',
+      'event': onMouseMove
+    }, {
+      'eventName': 'mouseup',
+      'event': onResizeEnd
+    }]);
+  }, [onMouseMove, onResizeEnd, registerEvent]);
+  const getImageStyle = (0, _react.useCallback)(() => {
+    let imageWidth = element.data.width || '';
+    if (movingWidth) imageWidth = movingWidth;
+    return {
+      width: imageWidth
+    };
+  }, [element.data, movingWidth]);
+  const onScroll = (0, _react.useCallback)(() => {
+    setPosition();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onHideImageHoverMenu = (0, _react.useCallback)(e => {
+    var _imagePreviewer$;
+    if (isResizing) return;
+    const imagePreviewer = document.getElementsByClassName('sf-editor-image-previewer');
+    const 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)(() => {
+    let 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 () => {
+      unregisterEvent([{
+        'eventName': 'click',
+        'event': onHideImageHoverMenu
+      }]);
+      if (observerRefValue) {
+        observerRefValue.removeEventListener('scroll', onScroll);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowImageHoverMenu, onHideImageHoverMenu]);
+  const onImageColumnToggle = (0, _react.useCallback)(() => {
+    // Handle switching to empty data and switching back
+    setIsShowImagePlaceholder(false);
+  }, []);
+  (0, _react.useEffect)(() => {
+    let unsubscribeImageColumnToggle = null;
+    if (column_key) {
+      const eventBus = _eventBus.default.getInstance();
+      unsubscribeImageColumnToggle = eventBus.subscribe(_constants.INTERNAL_EVENT.IMAGE_COLUMN_TOGGLE, onImageColumnToggle);
+    }
+    return () => {
+      unsubscribeImageColumnToggle && unsubscribeImageColumnToggle();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [column_key]);
+  const setPosition = (0, _react.useCallback)(() => {
+    if (imageRef.current) {
+      const {
+        top,
+        left
+      } = imageRef.current.getBoundingClientRect();
+      setMenuPosition({
+        top: top - 42,
+        left: left - 3
+      });
+    }
+  }, []);
+  const onClickImage = (0, _react.useCallback)(e => {
+    setPosition();
+    setIsShowImageHoverMenu(true);
+  }, [setPosition]);
+  const reloadImage = (0, _react.useCallback)(() => {
+    if (imageRef.current) {
+      imageRef.current['src'] = (0, _helpers.getImageURL)(data, editor);
+      setIsShowImagePlaceholder(false);
+    }
+  }, [data, editor]);
+  const onImageLoaded = (0, _react.useCallback)(() => {
+    if ((0, _helpers.isImageUrlIsFromCopy)(data.src)) {
+      setCopyImageLoading(true);
+    }
+  }, [data.src, setCopyImageLoading]);
+  const onImageLoadError = (0, _react.useCallback)(() => {
+    // 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')) {
+      const eventBus = _eventBus.default.getInstance();
+      eventBus.subscribe(_constants.INTERNAL_EVENT.RELOAD_IMAGE, reloadImage);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onSetCaption = (0, _react.useCallback)(e => {
+    const path = _slateReact.ReactEditor.findPath(editor, element);
+    const newData = {
+      ...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: {
+      ...style
+    },
+    onMouseOver: e => (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: {
+      ...style
+    },
+    onMouseOver: e => (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: {
+      ...style
+    },
+    onMouseOver: e => (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: e => {
+      setCaption(e.target.value);
+    },
+    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: () => {
+      setIsShowImageHoverMenu(false);
+    }
+  })));
+};
+const SdocImage = (0, _reactI18next.withTranslation)('sdoc-editor')(Image);
+function renderImage(props, editor) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const isSelected = (0, _slateReact.useSelected)();
+
+  // decorate diff-viewer
+  const {
+    element,
+    leaf
+  } = props;
+  let style = {
+    ...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) {
+  const {
+    element,
+    children,
+    attributes
+  } = props;
+  const {
+    align
+  } = element;
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const isSelected = (0, _slateReact.useSelected)();
+  let 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: `${justifyContent}`
+    }
+  }, attributes, {
+    onMouseOver: e => (0, _helpers.selectImageWhenSelectPartial)(e, editor, element, isSelected),
+    contentEditable: "false",
+    suppressContentEditableWarning: true
+  }), children);
+}