@seafile/sdoc-editor 0.1.175 → 0.2.0

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

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

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

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

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

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

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

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

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

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

package/package.json

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

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

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

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

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