@seafile/seafile-editor 0.3.82 → 0.3.83

package/dist/css/richeditor/image.css

@@ -98,44 +98,41 @@
   display: inline;
 }
 
-.big-image-cover {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1049;
-  text-align: center;
+/* set button font style in image previewer */
+.sf-editor-image-previewer .dtable-icon-left {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-.big-image-container {
-  position: absolute;
-  width: 100%;
-  top: 50px;
-  bottom: 0;
-  overflow-y: auto;
-  padding: 0 30px 10px 30px;
+.sf-editor-image-previewer .dtable-icon-left:before {
+  content: "\e756";
 }
 
-.big-image-cover .image-container-close {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  border-radius: 50%;
-  height: 20px;
-  width: 20px;
-  z-index: 10000;
-  font-size: 20px;
-  color: hsla(0,0%,100%,.6);
-  line-height: 26px;
-  text-align: center;
+.sf-editor-image-previewer .dtable-icon-right {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: normal;
 }
 
-.image-container-close:hover {
-  color: #fff;
+.sf-editor-image-previewer .dtable-icon-right:before {
+  content: "\e755";
 }
 
-.big-image-cover img{
-  max-width: 100%;
+.sf-editor-image-previewer .dtable-icon-fork-number {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: normal;
+}
+
+.sf-editor-image-previewer .dtable-icon-fork-number:before {
+  content: "\e6ce";
 }

package/dist/editor/editor-component/image.js

@@ -1,12 +1,14 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 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 React from 'react';
 import { withTranslation } from 'react-i18next';
+import Lightbox from '@seafile/react-image-lightbox';
 import { Utils } from '../../utils/utils';
 import InlineElementUtils from '../editor-utils/inline-element-utils';
-import Modal from '../../components/modal-portal';
+import '@seafile/react-image-lightbox/style.css';
 
 var Image = /*#__PURE__*/function (_React$Component) {
   _inherits(Image, _React$Component);
@@ -86,10 +88,10 @@ var Image = /*#__PURE__*/function (_React$Component) {
       _this.imgSrc = src;
     };
 
-    _this.renderBigImage = function () {
-      return /*#__PURE__*/React.createElement(BigImage, {
-        bigImageSrc: _this.imgSrc,
-        toggleBigImage: _this.toggleBigImage
+    _this.renderImagePreviewer = function () {
+      return /*#__PURE__*/React.createElement(ImagePreviewer, {
+        imageUrl: _this.imgSrc,
+        toggleImagePreviewer: _this.toggleBigImage
       });
     };
 
@@ -164,7 +166,7 @@ var Image = /*#__PURE__*/function (_React$Component) {
         src: src,
         alt: ' ',
         ref: "image"
-      }), children, this.state.isShowBigImage && this.renderBigImage());
+      }), children, this.state.isShowBigImage && this.renderImagePreviewer());
       return src ? dom : /*#__PURE__*/React.createElement("span", attributes, "Loading...");
     }
   }]);
@@ -172,44 +174,106 @@ var Image = /*#__PURE__*/function (_React$Component) {
   return Image;
 }(React.Component);
 
-var BigImage = /*#__PURE__*/function (_React$Component2) {
-  _inherits(BigImage, _React$Component2);
+var ImagePreviewer = /*#__PURE__*/function (_React$Component2) {
+  _inherits(ImagePreviewer, _React$Component2);
 
-  var _super2 = _createSuper(BigImage);
+  var _super2 = _createSuper(ImagePreviewer);
 
-  function BigImage() {
-    _classCallCheck(this, BigImage);
+  function ImagePreviewer(props) {
+    var _this2;
 
-    return _super2.apply(this, arguments);
+    _classCallCheck(this, ImagePreviewer);
+
+    _this2 = _super2.call(this, props);
+
+    _this2.getImageNodes = function (nodes) {
+      var nodeIndex = 0;
+      var list = [];
+
+      while (nodes && nodeIndex <= nodes.length - 1) {
+        var currentNode = nodes[nodeIndex];
+
+        if (currentNode.type === 'image') {
+          currentNode.data.src && list.push(currentNode.data.src);
+        } else {
+          list.push.apply(list, _toConsumableArray(_this2.getImageNodes(currentNode.children)));
+        }
+
+        nodeIndex++;
+      }
+
+      return list;
+    };
+
+    _this2.moveToPrevImage = function () {
+      _this2.setState(function (prevState) {
+        return {
+          imageIndex: (prevState.imageIndex + _this2.images.length - 1) % _this2.images.length
+        };
+      });
+    };
+
+    _this2.moveToNextImage = function () {
+      _this2.setState(function (prevState) {
+        return {
+          imageIndex: (prevState.imageIndex + 1) % _this2.images.length
+        };
+      });
+    };
+
+    _this2.images = _this2.getImageNodes(window.editor.children);
+    _this2.state = {
+      imageIndex: _this2.images.findIndex(function (item) {
+        return item === props.imageUrl;
+      })
+    };
+    return _this2;
   }
 
-  _createClass(BigImage, [{
+  _createClass(ImagePreviewer, [{
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var imageUrl = this.props.imageUrl;
+      var imageIndex = this.state.imageIndex;
+      var imageItemsLength = this.images.length;
+      var imageTitle = '';
+
+      try {
+        imageTitle = imageUrl ? decodeURI(imageUrl.slice(imageUrl.lastIndexOf('/') + 1)) : '';
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.log(error);
+      }
 
-      return /*#__PURE__*/React.createElement(Modal, null, /*#__PURE__*/React.createElement("div", {
-        className: 'big-image-cover',
-        onClick: function onClick(event) {
-          return _this2.props.toggleBigImage(event);
+      var imageTitleEl = /*#__PURE__*/React.createElement("span", {
+        className: "d-flex"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "text-truncate"
+      }, imageTitle), /*#__PURE__*/React.createElement("span", {
+        className: "flex-shrink-0"
+      }, "(", imageIndex + 1, "/", this.images.length, ")"));
+      var mainSrc = this.images[imageIndex];
+      return /*#__PURE__*/React.createElement(Lightbox, {
+        wrapperClassName: "sf-editor-image-previewer",
+        imageTitle: imageTitleEl,
+        mainSrc: mainSrc,
+        toolbarButtons: [],
+        nextSrc: this.images[(imageIndex + 1) % imageItemsLength],
+        prevSrc: this.images[(imageIndex + imageItemsLength - 1) % imageItemsLength],
+        onCloseRequest: this.props.toggleImagePreviewer,
+        onMovePrevRequest: this.moveToPrevImage,
+        onMoveNextRequest: this.moveToNextImage,
+        imagePadding: 70,
+        reactModalStyle: {
+          overlay: {
+            zIndex: 1051
+          }
         }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: 'big-image-container'
-      }, /*#__PURE__*/React.createElement("img", {
-        src: this.props.bigImageSrc,
-        alt: ""
-      })), /*#__PURE__*/React.createElement("div", {
-        onClick: function onClick(event) {
-          return _this2.props.toggleBigImage(event);
-        },
-        className: 'image-container-close'
-      }, /*#__PURE__*/React.createElement("i", {
-        className: 'iconfont icon-close'
-      }))));
+      });
     }
   }]);
 
-  return BigImage;
+  return ImagePreviewer;
 }(React.Component);
 
 export default withTranslation('seafile-editor')(Image);

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@seafile/seafile-editor",
-  "version": "0.3.82",
+  "version": "0.3.83",
   "private": false,
   "dependencies": {
+    "@seafile/react-image-lightbox": "^0.0.9",
     "@seafile/slate-react": "^0.54.13",
     "codemirror": "^5.37.0",
     "crypto-js": "^3.1.9-1",