@seafile/seafile-editor 0.3.110 → 0.3.112

package/dist/editor/editor-plugin.js

@@ -207,6 +207,9 @@ var Plugin = function Plugin(_editor) {
   };
 
   this.onCopy = function (event, editor) {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+
     if (_this.tableUtils.isInTable()) {
       event.preventDefault();
 

package/dist/viewer/viewer-image.css

@@ -1,23 +1,7 @@
-.big-image-cover {
-  position: relative;
+.sf-editor-image-previewer .ril__closeButton {
+  background-image: none !important;
 }
 
-.big-image-cover .image-container-close {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  cursor: pointer;
-  width: 30px;
-  height: 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.big-image-cover .image-container-close .icon-close {
-  color: rgba(0, 0, 0, 0.5);
-}
-
-.big-image-cover .image-container-close .icon-close:hover {
-  color: rgba(0, 0, 0, 0.75);
+.sf-editor-image-previewer .ril__caption {
+  justify-content: center !important;
 }

package/dist/viewer/viewer-image.js

@@ -3,8 +3,7 @@ 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 React from 'react';
-import ModalPortal from '../components/modal-portal';
-import { Modal } from 'reactstrap';
+import Lightbox from '@seafile/react-image-lightbox';
 import './viewer-image.css';
 
 var ViewerImage = /*#__PURE__*/function (_React$Component) {
@@ -28,9 +27,16 @@ var ViewerImage = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.renderBigImage = function (src) {
-      return /*#__PURE__*/React.createElement(BigImage, {
-        src: src,
-        toggleBigImage: _this.toggleBigImage
+      return /*#__PURE__*/React.createElement(Lightbox, {
+        wrapperClassName: "sf-editor-image-previewer",
+        mainSrc: src,
+        imagePadding: 70,
+        onCloseRequest: _this.toggleBigImage,
+        reactModalStyle: {
+          overlay: {
+            zIndex: 1051
+          }
+        }
       });
     };
 
@@ -49,7 +55,12 @@ var ViewerImage = /*#__PURE__*/function (_React$Component) {
       var data = node.data;
       var isShowBigImage = this.state.isShowBigImage;
       var src = data.src;
-      var dom = /*#__PURE__*/React.createElement("span", {
+
+      if (!src) {
+        return /*#__PURE__*/React.createElement("span", attributes, "Loading...");
+      }
+
+      return /*#__PURE__*/React.createElement("span", {
         className: "seafile-ed-image seafile-ed-image-viwer"
       }, /*#__PURE__*/React.createElement("img", Object.assign({
         draggable: false,
@@ -64,38 +75,10 @@ var ViewerImage = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement("i", {
         className: 'iconfont icon-fullscreen'
       })), isShowBigImage && this.renderBigImage(src));
-      return src ? dom : /*#__PURE__*/React.createElement("span", attributes, "Loading...");
     }
   }]);
 
   return ViewerImage;
 }(React.Component);
 
-var BigImage = function BigImage(props) {
-  return /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement(Modal, {
-    isOpen: true,
-    centered: true,
-    toggle: function toggle() {
-      props.toggleBigImage();
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "big-image-cover",
-    onClick: function onClick(event) {
-      return props.toggleBigImage(event);
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "big-image-container"
-  }, /*#__PURE__*/React.createElement("img", {
-    src: props.src,
-    alt: ""
-  })), /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick(event) {
-      return props.toggleBigImage(event);
-    },
-    className: "image-container-close"
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "iconfont icon-close"
-  })))));
-};
-
 export { ViewerImage };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-editor",
-  "version": "0.3.110",
+  "version": "0.3.112",
   "private": false,
   "dependencies": {
     "@seafile/react-image-lightbox": "^0.0.9",