@seafile/sdoc-editor 2.0.82 → 2.0.83

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

@@ -1,230 +0,0 @@
-"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

@@ -1,405 +0,0 @@
-"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);
-}