@seafile/sdoc-editor 3.0.36 → 3.0.38

package/dist/comment/components/comment-image-previewer.js

@@ -6,10 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _reactI18next = require("react-i18next");
 var _reactImageLightbox = _interopRequireDefault(require("@seafile/react-image-lightbox"));
+var _commonUtils = require("../../utils/common-utils");
 require("@seafile/react-image-lightbox/style.css");
 function CommentImagePreviewer(props) {
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
   var mainSrc = props.imageUrl;
+  var shortcutMain = (0, _commonUtils.isMac)() ? '⌘' : 'Ctrl';
   var imageTitle = '';
   try {
     imageTitle = mainSrc ? decodeURI(mainSrc.slice(mainSrc.lastIndexOf('/') + 1)) : '';
@@ -33,7 +38,9 @@ function CommentImagePreviewer(props) {
     onMoveNextRequest: function onMoveNextRequest() {},
     reactModalProps: {
       shouldReturnFocusAfterClose: false
-    }
+    },
+    zoomInTip: t('Enlarge: {Ctrl} + Wheel').replace('{Ctrl}', shortcutMain),
+    zoomOutTip: t('Shrink: {Ctrl} + Wheel').replace('{Ctrl}', shortcutMain)
   });
 }
 var _default = exports["default"] = CommentImagePreviewer;

package/dist/comment/components/comment-list.css

@@ -174,14 +174,14 @@
 }
 
 .sdoc-comment-list-container .comment-header .comment-author__info .name {
-  color: #1f1f1f;
+  color: #212529;
   font-size: 14px;
   line-height: 20px;
   font-weight: 500;
 }
 
 .sdoc-comment-list-container .comment-header .comment-author__info .time {
-  color: #444746;
+  color: #666666;
   font-size: 12px;
   line-height: 16px;
   display: inline-flex;
@@ -221,7 +221,7 @@
   align-items: center;
   justify-content: center;
   background-color: #fff;
-  color: rgb(70, 77, 90);
+  color: #666666;
   overflow: hidden;
   border-radius: 2px;
 }

package/dist/extension/commons/color-menu/index.css

@@ -36,7 +36,7 @@
   width: 12px;
   line-height: 12px;
   font-size: 12px !important;
-  margin-top: 5px;
+  margin-top: 3px;
 }
 
 .sdoc-color-menu .last-used-color {

package/dist/extension/plugins/file-view/helpers.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateFileView = exports.insertFileView = exports.getWikiSettings = exports.getFileUrl = exports.getAccessibleRepos = exports.genFileViewNode = void 0;
+exports.updateFileView = exports.insertFileView = exports.getWikiSettings = exports.getFileUrl = exports.getAccessibleRepos = exports.genFileViewNode = exports.calculateSize = void 0;
 var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
 var _slugid = _interopRequireDefault(require("slugid"));
@@ -74,4 +74,16 @@ var updateFileView = exports.updateFileView = function updateFileView(newData, e
   }, {
     at: nodePath
   });
+};
+var calculateSize = exports.calculateSize = function calculateSize(e, position) {
+  var clientX = e.clientX,
+    clientY = e.clientY;
+  var left = position.left,
+    top = position.top;
+  var rightWidth = clientX - left;
+  var bottomHeight = clientY - top;
+  return {
+    width: rightWidth < 300 ? 300 : rightWidth,
+    height: bottomHeight < 200 ? 200 : bottomHeight
+  };
 };

package/dist/extension/plugins/file-view/render-elem/index.css

@@ -2,14 +2,6 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  border: 2px;
-  border: 2px solid #eee;
-  border-radius: 4px;
-}
-
-.sdoc-file-view-container.is-selected {
-  border: 2px solid rgb(0, 123, 255);
-  border-radius: 4px;
 }
 
 .sdoc-file-view-container .sdoc-file-view-title {
@@ -27,9 +19,30 @@
 
 .sdoc-file-view-container .sdoc-file-view-content {
   position: relative;
+  border: 2px solid #eee;
+  border-radius: 4px;
+}
+
+.sdoc-file-view-container .sdoc-file-view-content.is-selected {
+  border: 2px solid rgb(0, 123, 255);
+  border-radius: 4px;
+}
+
+.sdoc-file-view-container .sdoc-file-view-content {
+  height: 400;
 }
 
-.sdoc-file-view-container .sdoc-file-view-content,
 .sdoc-file-view-container .sdoc-file-view-content .sea-metadata {
-  height: 400px;
+  height: 396px;
+}
+
+.sdoc-file-view-container .sdoc-file-view-content .file-view-resizer {
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  right: -5px;
+  bottom: -5px;
+  background-color: #007bff;
+  border: 1px solid #fff;
+  cursor: se-resize;
 }

package/dist/extension/plugins/file-view/render-elem/index.js

@@ -7,7 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.renderFileView = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
 var _seafileDatabase = require("@seafile/seafile-database");
 var _slateReact = require("@seafile/slate-react");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -25,17 +27,34 @@ var FileView = function FileView(_ref) {
   var data = element.data;
   var editor = (0, _slateReact.useSlateStatic)();
   var isSelected = (0, _slateReact.useSelected)();
+  var _useReadOnly = (0, _slateReact.useReadOnly)(),
+    readOnly = _useReadOnly.readOnly;
+  var wrapperRef = (0, _react.useRef)(null);
+  var resizerRef = (0, _react.useRef)(null);
+  var databaseRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isResizing = _useState2[0],
+    setIsResizing = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    movingSize = _useState4[0],
+    setMovingSize = _useState4[1];
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
   var viewSettings = (0, _react.useMemo)(function () {
     var settings = _context["default"].getFileViewSetting();
     var viewSettings = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, settings), {}, {
       repoID: data.link_repo_id,
       view_data: {
         view_id: data.view_id,
-        wiki_id: data.wiki_id
+        wiki_id: data.wiki_id,
+        height: data.height,
+        width: data.width
       }
     });
     return viewSettings;
-  }, [data.link_repo_id, data.view_id, data.wiki_id]);
+  }, [data.height, data.link_repo_id, data.view_id, data.width, data.wiki_id]);
   (0, _react.useEffect)(function () {
     var copyContent = _localStorageUtils["default"].getItem(_constants.RECENT_COPY_CONTENT);
     var wikiId = _context["default"].getSetting('wikiId');
@@ -57,21 +76,108 @@ var FileView = function FileView(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  var registerEvent = (0, _react.useCallback)(function (eventList) {
+    eventList.forEach(function (element) {
+      document.addEventListener(element.eventName, element.event);
+    });
+  }, []);
+  var unregisterEvent = (0, _react.useCallback)(function (eventList) {
+    eventList.forEach(function (element) {
+      document.removeEventListener(element.eventName, element.event);
+    });
+  }, []);
+  var onMouseMove = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    var wrapperElement = wrapperRef.current;
+    var _wrapperElement$getBo = wrapperElement.getBoundingClientRect(),
+      left = _wrapperElement$getBo.left,
+      right = _wrapperElement$getBo.right,
+      top = _wrapperElement$getBo.top,
+      bottom = _wrapperElement$getBo.bottom;
+    var size = (0, _helpers.calculateSize)(event, {
+      left: left,
+      right: right,
+      top: top,
+      bottom: bottom
+    });
+    var style = wrapperElement.style;
+    style.width = size.width + 'px';
+    style.height = size.height + 'px';
+    var databaseStyle = databaseRef.current.style;
+    databaseStyle.width = size.width - 4 + 'px';
+    databaseStyle.height = size.height - 4 + 'px';
+    setMovingSize(size);
+  }, []);
+  var onResizeEnd = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    unregisterEvent([{
+      'eventName': 'mousemove',
+      'event': onMouseMove
+    }, {
+      'eventName': 'mouseup',
+      'event': onResizeEnd
+    }]);
+    var style = wrapperRef.current.style;
+    var newData = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, element.data), {}, {
+      width: parseFloat(style.width),
+      height: parseFloat(style.height)
+    });
+    (0, _helpers.updateFileView)(newData, editor, element);
+    // Reset hover menu position
+    setTimeout(function () {
+      setIsResizing(false);
+    }, 100);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, element.data, wrapperRef.current]);
+  var onResizeStart = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsResizing(true);
+    registerEvent([{
+      'eventName': 'mousemove',
+      'event': onMouseMove
+    }, {
+      'eventName': 'mouseup',
+      'event': onResizeEnd
+    }]);
+  }, [onMouseMove, onResizeEnd, registerEvent]);
+  var style = (0, _react.useMemo)(function () {
+    var width = data.width,
+      height = data.height;
+    if (width && height) {
+      return {
+        width: width,
+        height: height
+      };
+    }
+    return null;
+  }, [data]);
   return /*#__PURE__*/_react["default"].createElement("div", Object.assign({
     "data-id": element.id
   }, attributes, {
-    className: (0, _classnames["default"])('sdoc-file-view-container', {
-      'is-selected': isSelected
-    }),
+    className: "sdoc-file-view-container",
     contentEditable: "false",
     suppressContentEditableWarning: true
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-file-view-title"
   }, data.view_name), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "sdoc-file-view-content"
+    className: (0, _classnames["default"])('sdoc-file-view-content', {
+      'is-selected': isSelected
+    }),
+    ref: wrapperRef,
+    style: style
   }, /*#__PURE__*/_react["default"].createElement(_seafileDatabase.Database, {
-    settings: viewSettings
-  })), children);
+    settings: viewSettings,
+    ref: databaseRef
+  }), !readOnly && isSelected && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "file-view-resizer",
+    ref: resizerRef,
+    onMouseDown: onResizeStart
+  }), isResizing && movingSize && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "image-size"
+  }, /*#__PURE__*/_react["default"].createElement("span", null, t('Width'), ':', parseInt(movingSize.width)), /*#__PURE__*/_react["default"].createElement("span", null, "\xA0\xA0"), /*#__PURE__*/_react["default"].createElement("span", null, t('Height'), ':', parseInt(movingSize.height)))), children);
 };
 var renderFileView = exports.renderFileView = function renderFileView(props) {
   return /*#__PURE__*/_react["default"].createElement(FileView, props);

package/dist/extension/plugins/image/dialogs/image-previewer.js

@@ -13,6 +13,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inhe
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _reactImageLightbox = _interopRequireDefault(require("@seafile/react-image-lightbox"));
+var _commonUtils = require("../../../../utils/common-utils");
 var _helpers = require("../helpers");
 require("@seafile/react-image-lightbox/style.css");
 var ImagePreviewer = /*#__PURE__*/function (_React$Component) {
@@ -73,6 +74,7 @@ var ImagePreviewer = /*#__PURE__*/function (_React$Component) {
       var imageIndex = this.state.imageIndex;
       var imageItemsLength = this.images.length;
       var mainSrc = this.images[imageIndex] || '';
+      var shortcutMain = (0, _commonUtils.isMac)() ? '⌘' : 'Ctrl';
       var imageTitle = '';
       try {
         imageTitle = mainSrc ? decodeURI(mainSrc.slice(mainSrc.lastIndexOf('/') + 1)) : '';
@@ -104,7 +106,9 @@ var ImagePreviewer = /*#__PURE__*/function (_React$Component) {
         onMoveNextRequest: this.moveToNextImage,
         reactModalProps: {
           shouldReturnFocusAfterClose: false
-        }
+        },
+        zoomInTip: this.props.t('Enlarge: {Ctrl} + Wheel').replace('{Ctrl}', shortcutMain),
+        zoomOutTip: this.props.t('Shrink: {Ctrl} + Wheel').replace('{Ctrl}', shortcutMain)
       });
     }
   }]);

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

@@ -308,7 +308,8 @@ var ImageHoverMenu = function ImageHoverMenu(_ref) {
     editor: editor,
     toggleImagePreviewer: function toggleImagePreviewer() {
       setIsShowImagePreview(!isShowImagePreview);
-    }
+    },
+    t: t
   })));
 };
 var _default = exports["default"] = (0, _reactI18next.withTranslation)('sdoc-editor')(ImageHoverMenu);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "3.0.36",
+  "version": "3.0.38",
   "main": "dist/index.js",
   "scripts": {
     "test": "jest",
@@ -17,10 +17,10 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "@seafile/comment-editor": "1.0.1",
+    "@seafile/comment-editor": "1.0.3",
     "@seafile/print-js": "1.6.6",
-    "@seafile/react-image-lightbox": "^5.0.1",
-    "@seafile/seafile-database": "0.0.13",
+    "@seafile/react-image-lightbox": "^5.0.2",
+    "@seafile/seafile-database": "0.0.15",
     "@seafile/slate": "0.91.8",
     "@seafile/slate-history": "0.86.2",
     "@seafile/slate-hyperscript": "0.81.7",
@@ -72,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e1b3a4aa2e5830f7a238c710f26d3b0cb33338ba"
+  "gitHead": "c89a3c31a2f1885ca2f237d98f70affbd8981102"
 }