@seafile/seafile-editor 3.0.30 → 3.0.31

package/dist/extension/plugins/image/render-element/image-previewer.js

@@ -14,18 +14,40 @@ var _reactI18next = require("react-i18next");
 var _constants = require("../../../../constants");
 require("@seafile/react-image-lightbox/style.css");
 require("./style.css");
+const formatImageInfos = images => {
+  const formatImages = images.map(src => {
+    let name = '';
+    try {
+      name = src ? decodeURI(src.slice(src.lastIndexOf('/') + 1)).split(/[?？]/)[0] : '';
+    } catch (error) {
+      console.log('error', error);
+      name = '';
+    }
+    return {
+      name: name,
+      thumbnail: src
+    };
+  });
+  return formatImages;
+};
 const ImagePreviewer = _ref => {
   let {
     imgUrl,
     toggleImagePreviewer
   } = _ref;
   const editor = (0, _slateReact.useSlateStatic)();
-  let images = (0, _helper.getImagesUrlList)(editor.children);
+  const originImages = (0, _helper.getImagesUrlList)(editor.children);
+  const images = formatImageInfos(originImages);
   const {
     t
   } = (0, _reactI18next.useTranslation)(_constants.TRANSLATE_NAMESPACE);
-  const [imageIndex, setImageIndex] = (0, _react.useState)(images.findIndex(item => item === imgUrl));
-  const mainSrc = images[imageIndex];
+  const [imageIndex, setImageIndex] = (0, _react.useState)(Math.max(0, images.findIndex(item => item.thumbnail === imgUrl)));
+  const imagesLength = images.length;
+  const imageItem = images[imageIndex];
+  const imageName = imageItem ? imageItem.name : '';
+  const mainSrc = imageItem ? imageItem.thumbnail : {};
+  const nextImg = images[(imageIndex + 1) % images.length];
+  const prevImg = images[(imageIndex + images.length - 1) % images.length];
   const moveToPrevImage = () => {
     const currentImageIndex = (imageIndex + images.length - 1) % images.length;
     setImageIndex(currentImageIndex);
@@ -39,15 +61,11 @@ const ImagePreviewer = _ref => {
     currentIndex: imageIndex,
     setImageIndex: setImageIndex,
     wrapperClassName: "sf-editor-image-previewer",
-    imageTitle: /*#__PURE__*/_react.default.createElement(ImageTitleElement, {
-      mainSrc: mainSrc,
-      imageIndex: imageIndex,
-      images: images
-    }),
+    imageTitle: "".concat(imageName, " (").concat(imageIndex + 1, "/").concat(imagesLength, ")"),
     mainSrc: mainSrc,
     toolbarButtons: [],
-    nextSrc: images[(imageIndex + 1) % images.length],
-    prevSrc: images[(imageIndex + images.length - 1) % images.length],
+    nextSrc: nextImg.thumbnail || nextImg.src,
+    prevSrc: prevImg.thumbnail || prevImg.src,
     onCloseRequest: toggleImagePreviewer,
     reactModalProps: {
       shouldReturnFocusAfterClose: true,
@@ -56,35 +74,8 @@ const ImagePreviewer = _ref => {
     onMovePrevRequest: moveToPrevImage,
     onMoveNextRequest: moveToNextImage,
     imagePadding: 70,
-    reactModalStyle: {
-      overlay: {
-        zIndex: 1071
-      }
-    },
     zoomInTip: t('Zoom_in'),
     zoomOutTip: t('Zoom_out')
   });
 };
-var _default = exports.default = ImagePreviewer;
-const ImageTitleElement = props => {
-  const {
-    mainSrc,
-    imageIndex,
-    images
-  } = props;
-  const getImgTitle = () => {
-    try {
-      return mainSrc ? decodeURI(mainSrc.slice(mainSrc.lastIndexOf('/') + 1)) : '';
-    } catch (error) {
-      console.log('error', error);
-      return '';
-    }
-  };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-    className: "d-flex"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "text-truncate"
-  }, getImgTitle()), /*#__PURE__*/_react.default.createElement("span", {
-    className: "flex-shrink-0"
-  }, "(", imageIndex + 1, "/", images.length, ")")));
-};
+var _default = exports.default = ImagePreviewer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-editor",
-  "version": "3.0.30",
+  "version": "3.0.31",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -85,7 +85,7 @@
     ]
   },
   "dependencies": {
-    "@seafile/react-image-lightbox": "^5.0.4",
+    "@seafile/react-image-lightbox": "^5.0.6",
     "classnames": "2.3.2",
     "copy-to-clipboard": "3.3.1",
     "deep-copy": "1.4.2",