@seafile/seafile-editor 0.3.82 → 0.3.86

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 button.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/dist/editor/editor-plugin.js

@@ -210,43 +210,47 @@ var Plugin = function Plugin(_editor) {
 
       var table = _this.tableUtils.getSelectedTableCells();
 
-      if (!table) {
-        setEventTransfer(event, 'text', SfEditor.text(editor, editor.selection));
+      if (table) {
+        setEventTransfer(event, 'fragment', table);
         return;
       }
-
-      setEventTransfer(event, 'fragment', table);
-      return;
     }
 
-    if (_this.codeUtils.isInCodeBlock() && !Range.isCollapsed(editor.selection)) {
-      var anchorPoint = editor.selection.anchor;
-      var focusPoint = editor.selection.focus;
-      var anchorCodeBlock = Editor.match(_this.editor, anchorPoint, {
-        type: 'code_block'
+    if (editor.selection && !Range.isCollapsed(editor.selection)) {
+      // get block deepest block node. 
+      // for example: code line in a code block, paragraph in a list
+      var blockList = Editor.nodes(editor, {
+        at: editor.selection,
+        match: 'block'
       });
-      var focusCodeBlock = Editor.match(_this.editor, focusPoint, {
-        type: 'code_block'
-      });
-      /* 
-        If the selection is within the range of the selected code block 
-        copy the selected code line as paragraph
-      */
 
-      if (anchorCodeBlock && focusCodeBlock && Path.equals(focusCodeBlock[1], anchorCodeBlock[1])) {
-        event.preventDefault();
-        var fragment = Node.fragment(editor, editor.selection);
-        fragment = fragment[0].children.map(function (codeLine) {
-          var text = Node.text(codeLine);
-          return {
-            type: 'paragraph',
-            children: [{
-              text: text
-            }]
-          };
-        });
-        setEventTransfer(event, 'fragment', fragment);
-        return;
+      if (blockList) {
+        var nodeList = Array.from(blockList);
+        /**
+         * if only one block element selected, write the selected content as paragraph or text to clipboard
+         * instead of use slate default behavior which write the outest element to clipboard
+        */
+
+        if (nodeList.length === 1) {
+          event.preventDefault();
+
+          var _nodeList$ = _slicedToArray(nodeList[0], 2),
+              node = _nodeList$[0],
+              path = _nodeList$[1];
+
+          path = path.slice(1);
+
+          if (node && node.type === 'paragraph') {
+            // get selected paragraph node in selection and write to clipboard
+            var fragment = Node.fragment(editor, editor.selection);
+            var selectedNode = Node.get(fragment[0], Array(path.length).fill(0));
+            setEventTransfer(event, 'fragment', [selectedNode]);
+          } else {
+            setEventTransfer(event, 'text', SfEditor.text(editor, editor.selection));
+          }
+
+          return;
+        }
       }
     }
   };