@seafile/sdoc-editor 2.0.176 → 2.0.177

package/dist/extension/plugins/whiteboard/index.css

@@ -39,3 +39,22 @@
   position: relative;
   z-index: 1;
 }
+
+.whiteboard-zoom-out-container {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+.whiteboard-zoom-out-container .sdoc-whiteboard-element-full-screen {
+  pointer-events: auto;
+  background: #fff;
+  border-radius: 12px;
+  width: 80%;
+  height: 80%;
+  overflow: auto;
+}

package/dist/extension/plugins/whiteboard/render-elem.js

@@ -9,6 +9,7 @@ exports.renderWhiteboard = renderWhiteboard;
 var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
 var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -38,14 +39,20 @@ var Whiteboard = function Whiteboard(_ref) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     menuPosition = _useState2[0],
     setMenuPosition = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isShowZoomOut = _useState4[0],
+    setIsShowZoomOut = _useState4[1];
   (0, _react.useEffect)(function () {
     var handleMessage = function handleMessage(event) {
       var _event$data;
       if (((_event$data = event.data) === null || _event$data === void 0 ? void 0 : _event$data.type) === 'checkSdocParent') {
         var isSdocClass = whiteboardRef === null || whiteboardRef === void 0 ? void 0 : whiteboardRef.current.classList.contains('sdoc-whiteboard-element');
+        var isWhiteboardFullScreen = whiteboardRef === null || whiteboardRef === void 0 ? void 0 : whiteboardRef.current.classList.contains('sdoc-whiteboard-element-full-screen');
         whiteboardRef === null || whiteboardRef === void 0 ? void 0 : whiteboardRef.current.contentWindow.postMessage({
           type: 'checkSdocParentResult',
-          isInSdoc: isSdocClass
+          isInSdoc: isSdocClass,
+          isFullScreen: isWhiteboardFullScreen
         }, '*');
       }
     };
@@ -123,18 +130,23 @@ var Whiteboard = function Whiteboard(_ref) {
       setMenuPosition(_menuPosition);
     }
   }, [editor, isSelected, readOnly]);
-  var openFullscreen = function openFullscreen() {
-    if (whiteboardRef.current.requestFullscreen) {
-      // Chrome
-      whiteboardRef.current.requestFullscreen();
-    } else if (whiteboardRef.current.webkitRequestFullscreen) {
-      // Safari
-      whiteboardRef.current.webkitRequestFullscreen();
-    } else if (whiteboardRef.current.msRequestFullscreen) {
-      // IE11
-      whiteboardRef.current.msRequestFullscreen();
-    }
+  var openFullscreen = function openFullscreen(e) {
+    e.stopPropagation();
+    setIsShowZoomOut(true);
   };
+  (0, _react.useEffect)(function () {
+    var handleKeyDown = function handleKeyDown(e) {
+      if (e.key === 'Escape') {
+        setIsShowZoomOut(false);
+      }
+    };
+    if (isShowZoomOut) {
+      document.addEventListener('keydown', handleKeyDown);
+    }
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isShowZoomOut, setIsShowZoomOut]);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])('sdoc-whiteboard-container', {
       'isSelected': isSelected
@@ -152,12 +164,21 @@ var Whiteboard = function Whiteboard(_ref) {
     className: "iframe-overlay",
     onDoubleClick: handleDoubleClick,
     onClick: handleOnClick
-  })), isSelected && !readOnly && /*#__PURE__*/_react["default"].createElement(_hoverMenu["default"], {
+  })), isSelected && !readOnly && !isShowZoomOut && /*#__PURE__*/_react["default"].createElement(_hoverMenu["default"], {
     menuPosition: menuPosition,
     onOpen: handleDoubleClick,
     openFullscreen: openFullscreen,
     onDeleteWhiteboard: onDeleteWhiteboard
-  }));
+  }), isShowZoomOut && (/*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/_react["default"].createElement("div", {
+    className: "whiteboard-zoom-out-container",
+    onClick: function onClick() {
+      return setIsShowZoomOut(false);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("iframe", {
+    className: "sdoc-whiteboard-element-full-screen",
+    src: link,
+    ref: whiteboardRef
+  })), document.body)));
 };
 function renderWhiteboard(props, editor) {
   var element = props.element,

package/dist/hooks/use-selection-position.js

@@ -8,7 +8,7 @@ var _helper = require("../comment/helper");
 var _constants = require("../constants");
 var _useScrollContext = require("./use-scroll-context");
 var useCommentListPosition = exports.useCommentListPosition = function useCommentListPosition(selectedElementIds, isContextComment, isClickedContextComment, commentedDom, commentDetail, closeComment, editor) {
-  var _document$querySelect;
+  var _document$querySelect2;
   var headerHeight = 100;
   var scrollRef = (0, _useScrollContext.useScrollContext)();
   var _ref = scrollRef.current || {},
@@ -17,7 +17,9 @@ var useCommentListPosition = exports.useCommentListPosition = function useCommen
   if (isContextComment || isClickedContextComment) {
     var rect;
     if (isContextComment) {
-      rect = commentedDom.getBoundingClientRect();
+      var _document$querySelect;
+      var commentedDomId = commentedDom.getAttribute('data-id');
+      rect = (_document$querySelect = document.querySelector("[data-id=\"".concat(commentedDomId, "\"]"))) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.getBoundingClientRect();
     }
 
     // rect is the last commented context dom
@@ -65,7 +67,7 @@ var useCommentListPosition = exports.useCommentListPosition = function useCommen
       y: topPara
     };
   }
-  var selectionPosition = (_document$querySelect = document.querySelectorAll("[data-id=\"".concat(selectedElementIds[0], "\"]"))[0]) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.getBoundingClientRect();
+  var selectionPosition = (_document$querySelect2 = document.querySelectorAll("[data-id=\"".concat(selectedElementIds[0], "\"]"))[0]) === null || _document$querySelect2 === void 0 ? void 0 : _document$querySelect2.getBoundingClientRect();
   // Boundary check
   if (!selectionPosition) closeComment();
   if (selectionPosition && selectionPosition.y !== 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "2.0.176",
+  "version": "2.0.177",
   "main": "dist/index.js",
   "scripts": {
     "test": "jest",
@@ -71,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "af682c37664669ad91b127c27821758bd1d61a30"
+  "gitHead": "471a56e253db6798199eee066673bc59a9f6172b"
 }