@seafile/sdoc-editor 1.0.54 → 1.0.55

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

@@ -1,13 +1,20 @@
-import { Transforms, Path, Editor, Range } from '@seafile/slate';
-import toaster from '../../../../components/toast';
-import context from '../../../../context';
-import EventBus from '../../../utils/event-bus';
-import { insertImage, hasSdocImages, getImageData, queryCopyMoveProgressView, resetCursor, isInsertImageMenuDisabled, getSingleImageFromFragment } from './helpers';
-import { focusEditor, generateEmptyElement, getLastChildPath, getSelectedNodeEntryByType, isSelectionAtBlockStart } from '../../core';
-import { getErrorMsg } from '../../../../utils';
-import { getSlateFragmentAttribute } from '../../../utils/document-utils';
-import { INSERT_POSITION, CLIPBOARD_FORMAT_KEY, CLIPBOARD_ORIGIN_SDOC_KEY, IMAGE, IMAGE_BLOCK, PARAGRAPH, ELEMENT_TYPE } from '../../constants';
-import { INTERNAL_EVENT } from '../../../constants';
+"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 _context = _interopRequireDefault(require("../../../../context"));
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+var _helpers = require("./helpers");
+var _core = require("../../core");
+var _utils = require("../../../../utils");
+var _documentUtils = require("../../../utils/document-utils");
+var _constants = require("../../constants");
+var _constants2 = require("../../../constants");
 const withImage = editor => {
   const {
     isInline,
@@ -24,7 +31,7 @@ const withImage = editor => {
     const {
       type
     } = elem;
-    if (type === IMAGE) {
+    if (type === _constants.IMAGE) {
       return true;
     }
     return isInline(elem);
@@ -35,63 +42,63 @@ const withImage = editor => {
     const {
       type
     } = elem;
-    if (type === IMAGE) {
+    if (type === _constants.IMAGE) {
       return true;
     }
     return isVoid(elem);
   };
   newEditor.insertData = data => {
-    const fragment = data.getData("application/".concat(CLIPBOARD_FORMAT_KEY)) || getSlateFragmentAttribute(data);
-    const originSdocUuid = data.getData("text/".concat(CLIPBOARD_ORIGIN_SDOC_KEY));
+    const fragment = data.getData(`application/${_constants.CLIPBOARD_FORMAT_KEY}`) || (0, _documentUtils.getSlateFragmentAttribute)(data);
+    const originSdocUuid = data.getData(`text/${_constants.CLIPBOARD_ORIGIN_SDOC_KEY}`);
     if (fragment && originSdocUuid) {
       const decoded = decodeURIComponent(window.atob(fragment));
       const fragmentData = JSON.parse(decoded);
-      if (hasSdocImages(originSdocUuid, fragmentData)) {
-        const imageData = getImageData(fragmentData);
-        context.copyImage(originSdocUuid, imageData).then(res => {
+      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.getInstance();
-                eventBus.dispatch(INTERNAL_EVENT.RELOAD_IMAGE);
+                const eventBus = _eventBus.default.getInstance();
+                eventBus.dispatch(_constants2.INTERNAL_EVENT.RELOAD_IMAGE);
               }, 300);
             } else {
-              queryCopyMoveProgressView(res.data.task_id);
+              (0, _helpers.queryCopyMoveProgressView)(res.data.task_id);
             }
           }
         }).catch(error => {
-          const errorMessage = getErrorMsg(error);
-          toaster.danger(errorMessage);
+          const errorMessage = (0, _utils.getErrorMsg)(error);
+          _toast.default.danger(errorMessage);
         });
       }
     }
-    if (data.types && data.types.includes('Files') && data.files[0].type.includes(IMAGE)) {
-      context.uploadLocalImage(data.files).then(fileUrl => {
-        insertImage(newEditor, fileUrl, editor.selection, INSERT_POSITION.CURRENT);
+    if (data.types && data.types.includes('Files') && data.files[0].type.includes(_constants.IMAGE)) {
+      _context.default.uploadLocalImage(data.files).then(fileUrl => {
+        (0, _helpers.insertImage)(newEditor, fileUrl, editor.selection, _constants.INSERT_POSITION.CURRENT);
       });
       return;
     }
     insertData(data);
   };
   newEditor.insertFragment = data => {
-    const singleImage = getSingleImageFromFragment(data);
-    if (singleImage && isInsertImageMenuDisabled(editor)) {
-      const path = Editor.path(editor, editor.selection);
-      const nextPath = Path.next([path[0]]);
-      const p = generateEmptyElement(ELEMENT_TYPE.PARAGRAPH);
+    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)(_constants.ELEMENT_TYPE.PARAGRAPH);
       p.children = [singleImage];
-      Transforms.insertNodes(editor, p, {
+      _slate.Transforms.insertNodes(editor, p, {
         at: nextPath
       });
       // There will be a space before and after the image
       const imagePath = [...nextPath, 1];
-      focusEditor(editor, Path.next(imagePath));
+      (0, _core.focusEditor)(editor, _slate.Path.next(imagePath));
       return;
     }
     if (singleImage) {
-      resetCursor(newEditor);
+      (0, _helpers.resetCursor)(newEditor);
     }
     return insertFragment(data);
   };
@@ -103,8 +110,8 @@ const withImage = editor => {
       const {
         focus
       } = selection;
-      const parentPath = Path.parent(focus.path);
-      const nextPath = Path.next(parentPath);
+      const parentPath = _slate.Path.parent(focus.path);
+      const nextPath = _slate.Path.next(parentPath);
       const nextSelection = {
         anchor: {
           offset: 0,
@@ -115,7 +122,7 @@ const withImage = editor => {
           path: nextPath
         }
       };
-      Transforms.setSelection(editor, nextSelection);
+      _slate.Transforms.setSelection(editor, nextSelection);
       return;
     }
   };
@@ -124,37 +131,37 @@ const withImage = editor => {
       selection
     } = editor;
     if (!selection) return deleteBackward(unit);
-    const point = Editor.before(editor, selection, {
+    const point = _slate.Editor.before(editor, selection, {
       distance: 1
     });
     if (!point) return deleteBackward(unit);
-    if (!Range.isCollapsed(selection)) {
+    if (!_slate.Range.isCollapsed(selection)) {
       return deleteBackward(unit);
     }
-    if (isSelectionAtBlockStart(editor)) {
+    if ((0, _core.isSelectionAtBlockStart)(editor)) {
       const path = selection.anchor.path;
       const beforePath = [path[0] - 1];
-      const beforeBlock = Editor.node(editor, beforePath);
-      if (beforeBlock && beforeBlock[0].type === IMAGE_BLOCK) {
-        focusEditor(editor, [...beforePath, 1]);
+      const beforeBlock = _slate.Editor.node(editor, beforePath);
+      if (beforeBlock && beforeBlock[0].type === _constants.IMAGE_BLOCK) {
+        (0, _core.focusEditor)(editor, [...beforePath, 1]);
         return;
       }
     }
-    const imageBlock = getSelectedNodeEntryByType(editor, IMAGE_BLOCK);
+    const imageBlock = (0, _core.getSelectedNodeEntryByType)(editor, _constants.IMAGE_BLOCK);
     if (imageBlock) {
       const path = selection.anchor.path;
       const deletePath = [path[0]];
-      Transforms.removeNodes(editor, {
+      _slate.Transforms.removeNodes(editor, {
         at: deletePath
       });
-      const beforeEntry = Editor.node(editor, Path.previous(deletePath));
-      const selectPath = getLastChildPath(beforeEntry);
-      const endOfFirstNode = Editor.end(editor, selectPath);
+      const beforeEntry = _slate.Editor.node(editor, _slate.Path.previous(deletePath));
+      const selectPath = (0, _core.getLastChildPath)(beforeEntry);
+      const endOfFirstNode = _slate.Editor.end(editor, selectPath);
       const range = {
         anchor: endOfFirstNode,
         focus: endOfFirstNode
       };
-      focusEditor(editor, range);
+      (0, _core.focusEditor)(editor, range);
       return;
     }
     deleteBackward(unit);
@@ -164,18 +171,18 @@ const withImage = editor => {
       selection
     } = editor;
     if (selection == null) return insertBreak();
-    const path = Editor.path(editor, selection);
-    const [node] = Editor.node(editor, [path[0]]);
-    if (node.type === IMAGE_BLOCK) {
-      const p = generateEmptyElement(PARAGRAPH);
-      Transforms.insertNodes(editor, p, {
+    const path = _slate.Editor.path(editor, selection);
+    const [node] = _slate.Editor.node(editor, [path[0]]);
+    if (node.type === _constants.IMAGE_BLOCK) {
+      const p = (0, _core.generateEmptyElement)(_constants.PARAGRAPH);
+      _slate.Transforms.insertNodes(editor, p, {
         at: [path[0] + 1]
       });
-      focusEditor(editor, [path[0] + 1]);
+      (0, _core.focusEditor)(editor, [path[0] + 1]);
       return;
     }
     insertBreak();
   };
   return newEditor;
 };
-export default withImage;
+var _default = exports.default = withImage;

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

@@ -1,16 +1,25 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react';
-import { ReactEditor, useSelected, useReadOnly } from '@seafile/slate-react';
-import { Transforms, Editor } from '@seafile/slate';
-import classNames from 'classnames';
-import { withTranslation } from 'react-i18next';
-import { getImageURL, handleBase64Image, selectImageWhenSelectPartial, updateImage } from './helpers';
-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, IMAGE_BLOCK } from '../../constants';
-import imagePlaceholder from '../../../assets/images/image-placeholder.png';
+"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 _slateReact = require("@seafile/slate-react");
+var _slate = require("@seafile/slate");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactI18next = require("react-i18next");
+var _helpers = require("./helpers");
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+var _constants = require("../../../constants");
+var _hoverMenu = _interopRequireDefault(require("./hover-menu"));
+var _useScrollContext = require("../../../hooks/use-scroll-context");
+var _constants2 = require("./constants");
+var _constants3 = require("../../constants");
+var _imagePlaceholder = _interopRequireDefault(require("../../../assets/images/image-placeholder.png"));
 const Image = _ref => {
   var _imageRef$current, _imageRef$current2;
   let {
@@ -25,38 +34,38 @@ const Image = _ref => {
   } = _ref;
   const {
     data,
-    border_type = IMAGE_BORDER_TYPE[0].type
+    border_type = _constants2.IMAGE_BORDER_TYPE[0].type
   } = element;
   const {
     show_caption = false
   } = data;
-  const path = ReactEditor.findPath(editor, element);
-  const nodeEntry = Editor.node(editor, [path[0]]);
+  const path = _slateReact.ReactEditor.findPath(editor, element);
+  const nodeEntry = _slate.Editor.node(editor, [path[0]]);
   const imageStyle = {
-    border: IMAGE_BORDER_TYPE.find(item => item.type === border_type).value
+    border: _constants2.IMAGE_BORDER_TYPE.find(item => item.type === border_type).value
   };
-  const readOnly = useReadOnly();
-  const imageRef = useRef(null);
-  const resizerRef = useRef(null);
-  const imageCaptionInputRef = useRef(null);
-  const scrollRef = useScrollContext();
-  const [movingWidth, setMovingWidth] = useState(null);
-  const [isResizing, setIsResizing] = useState(false);
-  const [isShowImagePlaceholder, setIsShowImagePlaceholder] = useState(false);
-  const [isShowImageHoverMenu, setIsShowImageHoverMenu] = useState(false);
-  const [menuPosition, setMenuPosition] = useState({});
-  const [caption, setCaption] = useState((data === null || data === void 0 ? void 0 : data.caption) || '');
-  const registerEvent = useCallback(eventList => {
+  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 registerEvent = (0, _react.useCallback)(eventList => {
     eventList.forEach(element => {
       document.addEventListener(element.eventName, element.event);
     });
   }, []);
-  const unregisterEvent = useCallback(eventList => {
+  const unregisterEvent = (0, _react.useCallback)(eventList => {
     eventList.forEach(element => {
       document.removeEventListener(element.eventName, element.event);
     });
   }, []);
-  const onMouseMove = useCallback(event => {
+  const onMouseMove = (0, _react.useCallback)(event => {
     var _resizerRef$current;
     event.preventDefault();
     event.stopPropagation();
@@ -66,7 +75,7 @@ const Image = _ref => {
     imageRef.current.width = imageWidth;
     setMovingWidth(imageWidth);
   }, []);
-  const onResizeEnd = useCallback(event => {
+  const onResizeEnd = (0, _react.useCallback)(event => {
     event.preventDefault();
     event.stopPropagation();
     unregisterEvent([{
@@ -80,7 +89,7 @@ const Image = _ref => {
       ...element.data,
       width: imageRef.current.width
     };
-    updateImage(editor, newData);
+    (0, _helpers.updateImage)(editor, newData);
 
     // Reset hover menu position
     setTimeout(() => {
@@ -90,7 +99,7 @@ const Image = _ref => {
     }, 100);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, element.data, imageRef.current]);
-  const onResizeStart = useCallback(event => {
+  const onResizeStart = (0, _react.useCallback)(event => {
     event.preventDefault();
     event.stopPropagation();
     setIsShowImageHoverMenu(false);
@@ -103,26 +112,26 @@ const Image = _ref => {
       'event': onResizeEnd
     }]);
   }, [onMouseMove, onResizeEnd, registerEvent]);
-  const getImageStyle = useCallback(() => {
+  const getImageStyle = (0, _react.useCallback)(() => {
     let imageWidth = element.data.width || '';
     if (movingWidth) imageWidth = movingWidth;
     return {
       width: imageWidth
     };
   }, [element.data, movingWidth]);
-  const onScroll = useCallback(() => {
+  const onScroll = (0, _react.useCallback)(() => {
     setPosition();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const onHideImageHoverMenu = useCallback(e => {
+  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 ? void 0 : _imagePreviewer$.contains(e.target)) || isCaptionInput) return;
+    if (e.target === imageRef.current || (_imagePreviewer$ = imagePreviewer[0]) !== null && _imagePreviewer$ !== void 0 && _imagePreviewer$.contains(e.target) || isCaptionInput) return;
     setIsShowImageHoverMenu(false);
   }, [isResizing]);
-  useEffect(() => {
+  (0, _react.useEffect)(() => {
     let observerRefValue = null;
     if (isShowImageHoverMenu) {
       registerEvent([{
@@ -149,7 +158,7 @@ const Image = _ref => {
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isShowImageHoverMenu, onHideImageHoverMenu]);
-  const setPosition = useCallback(() => {
+  const setPosition = (0, _react.useCallback)(() => {
     if (imageRef.current) {
       const {
         top,
@@ -161,91 +170,91 @@ const Image = _ref => {
       });
     }
   }, []);
-  const onClickImage = useCallback(e => {
+  const onClickImage = (0, _react.useCallback)(e => {
     setPosition();
     setIsShowImageHoverMenu(true);
   }, [setPosition]);
-  const reloadImage = useCallback(() => {
+  const reloadImage = (0, _react.useCallback)(() => {
     if (imageRef.current) {
-      imageRef.current['src'] = getImageURL(data.src);
+      imageRef.current['src'] = (0, _helpers.getImageURL)(data.src);
     }
   }, [data.src]);
-  const onImageLoadError = useCallback(() => {
+  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 handleBase64Image(editor, path, data);
+      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.getInstance();
-      eventBus.subscribe(INTERNAL_EVENT.RELOAD_IMAGE, reloadImage);
+      const eventBus = _eventBus.default.getInstance();
+      eventBus.subscribe(_constants.INTERNAL_EVENT.RELOAD_IMAGE, reloadImage);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const onSetCaption = useCallback(e => {
-    const path = ReactEditor.findPath(editor, element);
+  const onSetCaption = (0, _react.useCallback)(e => {
+    const path = _slateReact.ReactEditor.findPath(editor, element);
     const newData = {
       ...data,
       caption: e.target.value.trim()
     };
     if (path) {
-      Transforms.setNodes(editor, {
+      _slate.Transforms.setNodes(editor, {
         data: newData
       }, {
         at: path
       });
     }
   }, [data, editor, element]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isShowImagePlaceholder && /*#__PURE__*/React.createElement("span", Object.assign({
-    className: classNames('sdoc-image-wrapper', className)
+  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 => selectImageWhenSelectPartial(e, editor, element, isSelected),
+    onMouseOver: e => (0, _helpers.selectImageWhenSelectPartial)(e, editor, element, isSelected),
     contentEditable: "false",
     suppressContentEditableWarning: true
-  }), /*#__PURE__*/React.createElement("img", {
+  }), /*#__PURE__*/_react.default.createElement("img", {
     ref: imageRef,
-    src: imagePlaceholder,
+    src: _imagePlaceholder.default,
     style: getImageStyle(),
     draggable: false,
     alt: ""
-  }), children), !isShowImagePlaceholder && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", Object.assign({
+  }), children), !isShowImagePlaceholder && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", Object.assign({
     "data-id": element.id,
-    className: classNames('sdoc-image-wrapper', className)
+    className: (0, _classnames.default)('sdoc-image-wrapper', className)
   }, attributes, {
     style: {
       ...style
     },
-    onMouseOver: e => selectImageWhenSelectPartial(e, editor, element, isSelected),
+    onMouseOver: e => (0, _helpers.selectImageWhenSelectPartial)(e, editor, element, isSelected),
     contentEditable: "false",
     suppressContentEditableWarning: true
-  }), /*#__PURE__*/React.createElement("span", {
+  }), /*#__PURE__*/_react.default.createElement("span", {
     className: "sdoc-image-inner"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("span", {
     className: "sdoc-image-content"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("span", {
     style: imageStyle
-  }, /*#__PURE__*/React.createElement("img", {
-    className: classNames({
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    className: (0, _classnames.default)({
       'image-selected': isSelected
     }),
     onClick: onClickImage,
     ref: imageRef,
-    src: getImageURL(data.src),
+    src: (0, _helpers.getImageURL)(data.src),
     style: getImageStyle(),
     draggable: false,
     onError: onImageLoadError,
     alt: ""
-  }), isSelected && /*#__PURE__*/React.createElement("span", {
+  }), isSelected && /*#__PURE__*/_react.default.createElement("span", {
     className: "image-resizer",
     ref: resizerRef,
     onMouseDown: onResizeStart
-  }), isResizing && /*#__PURE__*/React.createElement("span", {
+  }), isResizing && /*#__PURE__*/_react.default.createElement("span", {
     className: "image-size"
-  }, /*#__PURE__*/React.createElement("span", null, t('Width'), ':', parseInt(movingWidth || ((_imageRef$current = imageRef.current) === null || _imageRef$current === void 0 ? void 0 : _imageRef$current.clientWidth))), /*#__PURE__*/React.createElement("span", null, "\xA0\xA0"), /*#__PURE__*/React.createElement("span", null, t('Height'), ':', imageRef.current.clientHeight))), nodeEntry[0].type === IMAGE_BLOCK && show_caption && /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/_react.default.createElement("span", null, t('Width'), ':', parseInt(movingWidth || ((_imageRef$current = imageRef.current) === null || _imageRef$current === void 0 ? void 0 : _imageRef$current.clientWidth))), /*#__PURE__*/_react.default.createElement("span", null, "\xA0\xA0"), /*#__PURE__*/_react.default.createElement("span", null, t('Height'), ':', imageRef.current.clientHeight))), nodeEntry[0].type === _constants3.IMAGE_BLOCK && show_caption && /*#__PURE__*/_react.default.createElement("input", {
     id: "sdoc-image-caption-input",
     ref: imageCaptionInputRef,
     className: "sdoc-image-caption-input-wrapper",
@@ -262,7 +271,7 @@ const Image = _ref => {
     onCompositionStart: e => {
       e.stopPropagation();
     }
-  }))), children), isShowImageHoverMenu && /*#__PURE__*/React.createElement(ImageHoverMenu, {
+  }))), children), isShowImageHoverMenu && /*#__PURE__*/_react.default.createElement(_hoverMenu.default, {
     editor: editor,
     menuPosition: menuPosition,
     element: element,
@@ -274,10 +283,10 @@ const Image = _ref => {
     }
   })));
 };
-const SdocImage = withTranslation('sdoc-editor')(Image);
-export function renderImage(props, editor) {
+const SdocImage = (0, _reactI18next.withTranslation)('sdoc-editor')(Image);
+function renderImage(props, editor) {
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const isSelected = useSelected();
+  const isSelected = (0, _slateReact.useSelected)();
 
   // decorate diff-viewer
   const {
@@ -291,18 +300,18 @@ export function renderImage(props, editor) {
     style['backgroundColor'] = leaf.computed_background_color;
   }
   if (element.add || element.delete) {
-    style = Object.assign({}, style, element.add ? ADDED_STYLE : DELETED_STYLE);
+    style = Object.assign({}, style, element.add ? _constants3.ADDED_STYLE : _constants3.DELETED_STYLE);
     if (style.computed_background_color) {
       style['backgroundColor'] = style.computed_background_color;
     }
   }
-  return /*#__PURE__*/React.createElement(SdocImage, Object.assign({}, props, {
+  return /*#__PURE__*/_react.default.createElement(SdocImage, Object.assign({}, props, {
     style: style,
     editor: editor,
     isSelected: isSelected
   }));
 }
-export function renderImageBlock(props, editor) {
+function renderImageBlock(props, editor) {
   const {
     element,
     children,
@@ -312,19 +321,19 @@ export function renderImageBlock(props, editor) {
     align
   } = element;
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const isSelected = useSelected();
+  const isSelected = (0, _slateReact.useSelected)();
   let justifyContent = '';
   if (align) {
     justifyContent = align === 'left' ? 'start' : align === 'right' ? 'end' : align;
   }
-  return /*#__PURE__*/React.createElement("div", Object.assign({
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
     className: "sdoc-image-block-wrapper",
     style: {
       display: 'flex',
-      justifyContent: "".concat(justifyContent)
+      justifyContent: `${justifyContent}`
     }
   }, attributes, {
-    onMouseOver: e => selectImageWhenSelectPartial(e, editor, element, isSelected),
+    onMouseOver: e => (0, _helpers.selectImageWhenSelectPartial)(e, editor, element, isSelected),
     contentEditable: "false",
     suppressContentEditableWarning: true
   }), children);