@ctzhian/tiptap 2.1.3 → 2.1.5

package/dist/Editor/index.js

@@ -1,9 +1,9 @@
 import "core-js/modules/es.array.find-last.js";
 import { EditorContent } from '@tiptap/react';
 import React from 'react';
-import { PhotoProvider } from 'react-photo-view';
 import CustomBubbleMenu from "../component/CustomBubbleMenu";
 import CustomDragHandle from "../component/CustomDragHandle";
+import { ImageViewerProvider } from "../component/ImageViewer";
 import { TableCellHandleMenu } from "../extension/component/TableCellHandleMenu";
 import { TableExtendRowColumnButtons } from "../extension/component/TableExtendButton";
 import { TableHandle } from "../extension/component/TableHandle";
@@ -16,48 +16,9 @@ var Editor = function Editor(_ref) {
     menuInDragHandle = _ref.menuInDragHandle,
     menuInBubbleMenu = _ref.menuInBubbleMenu,
     onTip = _ref.onTip;
-  return /*#__PURE__*/React.createElement(PhotoProvider, {
-    speed: function speed() {
-      return 500;
-    },
-    maskOpacity: 0.3,
-    toolbarRender: function toolbarRender(_ref2) {
-      var onScale = _ref2.onScale,
-        scale = _ref2.scale,
-        rotate = _ref2.rotate,
-        onRotate = _ref2.onRotate;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {
-        width: "44",
-        height: "44",
-        viewBox: "0 0 768 768",
-        className: "PhotoView-Slider__toolbarIcon",
-        onClick: function onClick() {
-          return onScale(scale + 1);
-        }
-      }, /*#__PURE__*/React.createElement("path", {
-        d: "M384 640.5q105 0 180.75-75.75t75.75-180.75-75.75-180.75-180.75-75.75-180.75 75.75-75.75 180.75 75.75 180.75 180.75 75.75zM384 64.5q132 0 225.75 93.75t93.75 225.75-93.75 225.75-225.75 93.75-225.75-93.75-93.75-225.75 93.75-225.75 225.75-93.75zM415.5 223.5v129h129v63h-129v129h-63v-129h-129v-63h129v-129h63z"
-      })), /*#__PURE__*/React.createElement("svg", {
-        width: "44",
-        height: "44",
-        viewBox: "0 0 768 768",
-        className: "PhotoView-Slider__toolbarIcon",
-        onClick: function onClick() {
-          return onScale(scale - 1);
-        }
-      }, /*#__PURE__*/React.createElement("path", {
-        d: "M384 640.5q105 0 180.75-75.75t75.75-180.75-75.75-180.75-180.75-75.75-180.75 75.75-75.75 180.75 75.75 180.75 180.75 75.75zM384 64.5q132 0 225.75 93.75t93.75 225.75-93.75 225.75-225.75 93.75-225.75-93.75-93.75-225.75 93.75-225.75 225.75-93.75zM223.5 352.5h321v63h-321v-63z"
-      })), /*#__PURE__*/React.createElement("svg", {
-        width: "44",
-        height: "44",
-        viewBox: "0 0 768 768",
-        className: "PhotoView-Slider__toolbarIcon",
-        onClick: function onClick() {
-          return onRotate(rotate + 90);
-        }
-      }, /*#__PURE__*/React.createElement("path", {
-        d: "M565.5 202.5l75-75v225h-225l103.5-103.5c-34.5-34.5-82.5-57-135-57-106.5 0-192 85.5-192 192s85.5 192 192 192c84 0 156-52.5 181.5-127.5h66c-28.5 111-127.5 192-247.5 192-141 0-255-115.5-255-256.5s114-256.5 255-256.5c70.5 0 135 28.5 181.5 75z"
-      })));
-    }
+  return /*#__PURE__*/React.createElement(ImageViewerProvider, {
+    speed: 500,
+    maskOpacity: 0.3
   }, /*#__PURE__*/React.createElement(CustomBubbleMenu, {
     editor: editor,
     more: menuInBubbleMenu

package/dist/EditorDiff/index.js

@@ -1,7 +1,7 @@
 import "core-js/modules/es.array.find-last.js";
 import { EditorContent } from "@tiptap/react";
 import React, { useEffect } from "react";
-import { PhotoProvider } from "react-photo-view";
+import { ImageViewerProvider } from "../component/ImageViewer";
 import useTiptap from "../hook";
 
 // fix: https://github.com/ueberdosis/tiptap/issues/6785
@@ -22,48 +22,9 @@ var EditorDiff = function EditorDiff(_ref) {
       (_editorRef$editor = editorRef.editor) === null || _editorRef$editor === void 0 || (_editorRef$editor$com = (_editorRef$editor$com2 = _editorRef$editor.commands).hideStructuredDiff) === null || _editorRef$editor$com === void 0 || _editorRef$editor$com.call(_editorRef$editor$com2);
     };
   }, [oldHtml, newHtml, editorRef.editor]);
-  return /*#__PURE__*/React.createElement(PhotoProvider, {
-    speed: function speed() {
-      return 500;
-    },
-    maskOpacity: 0.3,
-    toolbarRender: function toolbarRender(_ref2) {
-      var onScale = _ref2.onScale,
-        scale = _ref2.scale,
-        rotate = _ref2.rotate,
-        onRotate = _ref2.onRotate;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {
-        width: "44",
-        height: "44",
-        viewBox: "0 0 768 768",
-        className: "PhotoView-Slider__toolbarIcon",
-        onClick: function onClick() {
-          return onScale(scale + 1);
-        }
-      }, /*#__PURE__*/React.createElement("path", {
-        d: "M384 640.5q105 0 180.75-75.75t75.75-180.75-75.75-180.75-180.75-75.75-180.75 75.75-75.75 180.75 75.75 180.75 180.75 75.75zM384 64.5q132 0 225.75 93.75t93.75 225.75-93.75 225.75-225.75 93.75-225.75-93.75-93.75-225.75 93.75-225.75 225.75-93.75zM415.5 223.5v129h129v63h-129v129h-63v-129h-129v-63h129v-129h63z"
-      })), /*#__PURE__*/React.createElement("svg", {
-        width: "44",
-        height: "44",
-        viewBox: "0 0 768 768",
-        className: "PhotoView-Slider__toolbarIcon",
-        onClick: function onClick() {
-          return onScale(scale - 1);
-        }
-      }, /*#__PURE__*/React.createElement("path", {
-        d: "M384 640.5q105 0 180.75-75.75t75.75-180.75-75.75-180.75-180.75-75.75-180.75 75.75-75.75 180.75 75.75 180.75 180.75 75.75zM384 64.5q132 0 225.75 93.75t93.75 225.75-93.75 225.75-225.75 93.75-225.75-93.75-93.75-225.75 93.75-225.75 225.75-93.75zM223.5 352.5h321v63h-321v-63z"
-      })), /*#__PURE__*/React.createElement("svg", {
-        width: "44",
-        height: "44",
-        viewBox: "0 0 768 768",
-        className: "PhotoView-Slider__toolbarIcon",
-        onClick: function onClick() {
-          return onRotate(rotate + 90);
-        }
-      }, /*#__PURE__*/React.createElement("path", {
-        d: "M565.5 202.5l75-75v225h-225l103.5-103.5c-34.5-34.5-82.5-57-135-57-106.5 0-192 85.5-192 192s85.5 192 192 192c84 0 156-52.5 181.5-127.5h66c-28.5 111-127.5 192-247.5 192-141 0-255-115.5-255-256.5s114-256.5 255-256.5c70.5 0 135 28.5 181.5 75z"
-      })));
-    }
+  return /*#__PURE__*/React.createElement(ImageViewerProvider, {
+    speed: 500,
+    maskOpacity: 0.3
   }, /*#__PURE__*/React.createElement(EditorContent, {
     editor: editorRef.editor
   }));

package/dist/component/ImageViewer/Item.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ImageViewerItemProps } from './types';
+export declare const ImageViewerItem: React.FC<ImageViewerItemProps>;

package/dist/component/ImageViewer/Item.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PhotoView } from 'react-photo-view';
+export var ImageViewerItem = function ImageViewerItem(_ref) {
+  var src = _ref.src,
+    children = _ref.children,
+    render = _ref.render,
+    overlay = _ref.overlay,
+    width = _ref.width,
+    height = _ref.height,
+    _ref$triggers = _ref.triggers,
+    triggers = _ref$triggers === void 0 ? ['onClick'] : _ref$triggers;
+  return /*#__PURE__*/React.createElement(PhotoView, {
+    src: src,
+    render: render,
+    overlay: overlay,
+    width: width,
+    height: height,
+    triggers: triggers
+  }, children);
+};

package/dist/component/ImageViewer/Provider.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ImageViewerProviderProps } from './types';
+export declare const ImageViewerProvider: React.FC<ImageViewerProviderProps>;

package/dist/component/ImageViewer/Provider.js

@@ -0,0 +1,204 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { PhotoProvider } from 'react-photo-view';
+import { ImageViewerContext } from "./context";
+import { ImageViewerItem } from "./Item";
+import { customStyles } from "./styles";
+import { CustomToolbar } from "./Toolbar";
+export var ImageViewerProvider = function ImageViewerProvider(_ref) {
+  var children = _ref.children,
+    _ref$speed = _ref.speed,
+    speed = _ref$speed === void 0 ? 500 : _ref$speed,
+    _ref$maskOpacity = _ref.maskOpacity,
+    maskOpacity = _ref$maskOpacity === void 0 ? 0.3 : _ref$maskOpacity,
+    _onVisibleChange = _ref.onVisibleChange,
+    _onIndexChange = _ref.onIndexChange,
+    _ref$loop = _ref.loop,
+    loop = _ref$loop === void 0 ? 3 : _ref$loop,
+    photoClosable = _ref.photoClosable,
+    _ref$maskClosable = _ref.maskClosable,
+    maskClosable = _ref$maskClosable === void 0 ? true : _ref$maskClosable,
+    _ref$pullClosable = _ref.pullClosable,
+    pullClosable = _ref$pullClosable === void 0 ? true : _ref$pullClosable,
+    className = _ref.className,
+    maskClassName = _ref.maskClassName,
+    photoWrapClassName = _ref.photoWrapClassName,
+    photoClassName = _ref.photoClassName,
+    loadingElement = _ref.loadingElement,
+    brokenElement = _ref.brokenElement,
+    portalContainer = _ref.portalContainer;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentSrc = _useState2[0],
+    setCurrentSrc = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    visible = _useState4[0],
+    setVisible = _useState4[1];
+  var _useState5 = useState(1),
+    _useState6 = _slicedToArray(_useState5, 2),
+    scale = _useState6[0],
+    setScale = _useState6[1];
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    rotate = _useState8[0],
+    setRotate = _useState8[1];
+  var _useState9 = useState(null),
+    _useState10 = _slicedToArray(_useState9, 2),
+    onScale = _useState10[0],
+    setOnScale = _useState10[1];
+  var _useState11 = useState(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    onRotate = _useState12[0],
+    setOnRotate = _useState12[1];
+  var _useState13 = useState(null),
+    _useState14 = _slicedToArray(_useState13, 2),
+    onClose = _useState14[0],
+    setOnClose = _useState14[1];
+  var imageSrcsRef = useRef([]);
+  var overlayStateRef = useRef({
+    scale: 1,
+    rotate: 0,
+    visible: false,
+    onScale: null,
+    onRotate: null,
+    onClose: null,
+    index: undefined
+  });
+  var callbacksRef = useRef({
+    onScale: null,
+    onRotate: null,
+    onClose: null
+  });
+  useEffect(function () {
+    if (typeof document !== 'undefined' && !document.getElementById('image-viewer-custom-styles')) {
+      var styleElement = document.createElement('style');
+      styleElement.id = 'image-viewer-custom-styles';
+      styleElement.textContent = customStyles;
+      document.head.appendChild(styleElement);
+    }
+  }, []);
+  useLayoutEffect(function () {
+    var state = overlayStateRef.current;
+    setScale(state.scale);
+    setRotate(state.rotate);
+    setVisible(state.visible);
+    callbacksRef.current.onScale = state.onScale;
+    callbacksRef.current.onRotate = state.onRotate;
+    callbacksRef.current.onClose = state.onClose;
+    setOnScale(function () {
+      return state.onScale;
+    });
+    setOnRotate(function () {
+      return state.onRotate;
+    });
+    setOnClose(function () {
+      return state.onClose;
+    });
+    if (state.visible && state.index !== undefined) {
+      var src = imageSrcsRef.current[state.index];
+      if (src) {
+        setCurrentSrc(src);
+      }
+    }
+  });
+  useEffect(function () {
+    var srcs = [];
+    React.Children.forEach(children, function (child) {
+      if ( /*#__PURE__*/React.isValidElement(child) && child.type === ImageViewerItem) {
+        var src = child.props.src;
+        if (src) {
+          srcs.push(src);
+        }
+      }
+    });
+    imageSrcsRef.current = srcs;
+  }, [children]);
+  var contextValue = {
+    setCurrentSrc: setCurrentSrc,
+    visible: visible,
+    setVisible: setVisible,
+    scale: scale,
+    setScale: setScale,
+    rotate: rotate,
+    setRotate: setRotate,
+    getScale: function getScale() {
+      return overlayStateRef.current.scale;
+    },
+    getRotate: function getRotate() {
+      return overlayStateRef.current.rotate;
+    },
+    onScale: callbacksRef.current.onScale,
+    setOnScale: setOnScale,
+    onRotate: callbacksRef.current.onRotate,
+    setOnRotate: setOnRotate,
+    onClose: callbacksRef.current.onClose,
+    setOnClose: setOnClose
+  };
+  var handleSpeed = typeof speed === 'function' ? speed : function () {
+    return typeof speed === 'number' ? speed : 500;
+  };
+  return /*#__PURE__*/React.createElement(ImageViewerContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(PhotoProvider, {
+    bannerVisible: false,
+    speed: handleSpeed,
+    maskOpacity: maskOpacity,
+    loop: loop,
+    photoClosable: photoClosable,
+    maskClosable: maskClosable,
+    pullClosable: pullClosable,
+    className: className,
+    maskClassName: maskClassName,
+    photoWrapClassName: photoWrapClassName,
+    photoClassName: photoClassName,
+    loadingElement: loadingElement,
+    brokenElement: brokenElement,
+    portalContainer: portalContainer,
+    overlayRender: function overlayRender(_ref2) {
+      var overlayOnScale = _ref2.onScale,
+        overlayScale = _ref2.scale,
+        overlayRotate = _ref2.rotate,
+        overlayOnRotate = _ref2.onRotate,
+        overlayOnClose = _ref2.onClose,
+        index = _ref2.index,
+        overlayVisible = _ref2.visible;
+      overlayStateRef.current = {
+        scale: overlayScale,
+        rotate: overlayRotate,
+        visible: overlayVisible,
+        onScale: overlayOnScale,
+        onRotate: overlayOnRotate,
+        onClose: overlayOnClose,
+        index: index
+      };
+      return null;
+    },
+    onVisibleChange: function onVisibleChange(visible, index) {
+      setVisible(visible);
+      if (visible && index !== undefined) {
+        var src = imageSrcsRef.current[index];
+        if (src) {
+          setCurrentSrc(src);
+        }
+      }
+      _onVisibleChange === null || _onVisibleChange === void 0 || _onVisibleChange(visible, index);
+    },
+    onIndexChange: function onIndexChange(index) {
+      if (index !== undefined) {
+        var src = imageSrcsRef.current[index];
+        if (src) {
+          setCurrentSrc(src);
+        }
+      }
+      _onIndexChange === null || _onIndexChange === void 0 || _onIndexChange(index);
+    }
+  }, children), /*#__PURE__*/React.createElement(CustomToolbar, {
+    currentSrc: currentSrc
+  }));
+};

package/dist/component/ImageViewer/Toolbar.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface CustomToolbarProps {
+    currentSrc?: string;
+}
+export declare const CustomToolbar: React.FC<CustomToolbarProps>;
+export {};

package/dist/component/ImageViewer/Toolbar.js

@@ -0,0 +1,289 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Box, IconButton, Stack, Tooltip } from '@mui/material';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { AnticlockwiseLineIcon, ClockwiseLineIcon, CloseCircleFillIcon, Download2LineIcon, FullscreenExitLineIcon, FullscreenLineIcon, ResetLeftFillIcon } from "../Icons";
+import { ImageViewerContext } from "./context";
+export var CustomToolbar = function CustomToolbar(_ref) {
+  var currentSrc = _ref.currentSrc;
+  var _useContext = useContext(ImageViewerContext),
+    visible = _useContext.visible,
+    scale = _useContext.scale,
+    rotate = _useContext.rotate,
+    getScale = _useContext.getScale,
+    getRotate = _useContext.getRotate,
+    onScale = _useContext.onScale,
+    onRotate = _useContext.onRotate,
+    onClose = _useContext.onClose;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFullscreen = _useState2[0],
+    setIsFullscreen = _useState2[1];
+  useEffect(function () {
+    var handleFullscreenChange = function handleFullscreenChange() {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    return function () {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    };
+  }, []);
+  var handleDownload = useCallback(function () {
+    if (currentSrc) {
+      var link = document.createElement('a');
+      link.href = currentSrc;
+      link.download = currentSrc.split('/').pop() || 'image';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+  }, [currentSrc]);
+  var handleFullscreen = useCallback(function () {
+    if (!document.fullscreenElement) {
+      var _document$documentEle, _document$documentEle2;
+      (_document$documentEle = (_document$documentEle2 = document.documentElement).requestFullscreen) === null || _document$documentEle === void 0 || _document$documentEle.call(_document$documentEle2);
+    } else {
+      var _document$exitFullscr, _document;
+      (_document$exitFullscr = (_document = document).exitFullscreen) === null || _document$exitFullscr === void 0 || _document$exitFullscr.call(_document);
+    }
+  }, []);
+  var handleReset = useCallback(function () {
+    if (onScale) onScale(1);
+    if (onRotate) onRotate(0);
+  }, [onScale, onRotate]);
+  if (!visible) {
+    return null;
+  }
+  var toolbarContent = /*#__PURE__*/React.createElement(Box, {
+    className: "PhotoView-Slider__toolbar-custom",
+    sx: {
+      position: 'fixed',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: '16px 24px',
+      zIndex: 10000,
+      pointerEvents: 'none',
+      '& > *': {
+        pointerEvents: 'auto'
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    spacing: 1,
+    alignItems: "center",
+    sx: {
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      borderRadius: '8px',
+      padding: '8px 12px',
+      backdropFilter: 'blur(10px)'
+    }
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: "\u653E\u5927",
+    placement: "top"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    onClick: function onClick() {
+      if (onScale) {
+        var currentScale = getScale();
+        onScale(Math.min(currentScale + 0.5, 5));
+      }
+    },
+    sx: {
+      color: 'white',
+      '&:hover': {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)'
+      }
+    },
+    size: "small"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 768 768",
+    fill: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M384 640.5q105 0 180.75-75.75t75.75-180.75-75.75-180.75-180.75-75.75-180.75 75.75-75.75 180.75 75.75 180.75 180.75 75.75zM384 64.5q132 0 225.75 93.75t93.75 225.75-93.75 225.75-225.75 93.75-225.75-93.75-93.75-225.75 93.75-225.75 225.75-93.75zM415.5 223.5v129h129v63h-129v129h-63v-129h-129v-63h129v-129h63z"
+  })))), /*#__PURE__*/React.createElement(Tooltip, {
+    title: "\u7F29\u5C0F",
+    placement: "top"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    onClick: function onClick() {
+      if (onScale) {
+        var currentScale = getScale();
+        onScale(Math.max(currentScale - 0.5, 0.5));
+      }
+    },
+    sx: {
+      color: 'white',
+      '&:hover': {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)'
+      }
+    },
+    size: "small"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 768 768",
+    fill: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M384 640.5q105 0 180.75-75.75t75.75-180.75-75.75-180.75-180.75-75.75-180.75 75.75-75.75 180.75 75.75 180.75 180.75 75.75zM384 64.5q132 0 225.75 93.75t93.75 225.75-93.75 225.75-225.75 93.75-225.75-93.75-93.75-225.75 93.75-225.75 225.75-93.75zM223.5 352.5h321v63h-321v-63z"
+  })))), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      width: '1px',
+      height: '24px',
+      backgroundColor: 'rgba(255, 255, 255, 0.3)',
+      mx: 0.5
+    }
+  }), /*#__PURE__*/React.createElement(Tooltip, {
+    title: "\u9006\u65F6\u9488\u65CB\u8F6C",
+    placement: "top"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    onClick: function onClick() {
+      if (onRotate) {
+        var currentRotate = getRotate();
+        onRotate(currentRotate - 90);
+      }
+    },
+    sx: {
+      color: 'white',
+      '&:hover': {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)'
+      }
+    },
+    size: "small"
+  }, /*#__PURE__*/React.createElement(AnticlockwiseLineIcon, {
+    sx: {
+      fontSize: '20px'
+    }
+  }))), /*#__PURE__*/React.createElement(Tooltip, {
+    title: "\u987A\u65F6\u9488\u65CB\u8F6C",
+    placement: "top"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    onClick: function onClick() {
+      if (onRotate) {
+        var currentRotate = getRotate();
+        onRotate(currentRotate + 90);
+      }
+    },
+    sx: {
+      color: 'white',
+      '&:hover': {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)'
+      }
+    },
+    size: "small"
+  }, /*#__PURE__*/React.createElement(ClockwiseLineIcon, {
+    sx: {
+      fontSize: '20px'
+    }
+  }))), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      width: '1px',
+      height: '24px',
+      backgroundColor: 'rgba(255, 255, 255, 0.3)',
+      mx: 0.5
+    }
+  }), /*#__PURE__*/React.createElement(Tooltip, {
+    title: "\u91CD\u7F6E",
+    placement: "top"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    onClick: handleReset,
+    sx: {
+      color: 'white',
+      '&:hover': {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)'
+      }
+    },
+    size: "small"
+  }, /*#__PURE__*/React.createElement(ResetLeftFillIcon, {
+    sx: {
+      fontSize: '20px'
+    }
+  }))), currentSrc && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      width: '1px',
+      height: '24px',
+      backgroundColor: 'rgba(255, 255, 255, 0.3)',
+      mx: 0.5
+    }
+  }), /*#__PURE__*/React.createElement(Tooltip, {
+    title: "\u4E0B\u8F7D",
+    placement: "top"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    onClick: handleDownload,
+    sx: {
+      color: 'white',
+      '&:hover': {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)'
+      }
+    },
+    size: "small"
+  }, /*#__PURE__*/React.createElement(Download2LineIcon, {
+    sx: {
+      fontSize: '20px'
+    }
+  })))), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      width: '1px',
+      height: '24px',
+      backgroundColor: 'rgba(255, 255, 255, 0.3)',
+      mx: 0.5
+    }
+  }), /*#__PURE__*/React.createElement(Tooltip, {
+    title: isFullscreen ? '退出全屏' : '全屏',
+    placement: "top"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    onClick: handleFullscreen,
+    sx: {
+      color: 'white',
+      '&:hover': {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)'
+      }
+    },
+    size: "small"
+  }, isFullscreen ? /*#__PURE__*/React.createElement(FullscreenExitLineIcon, {
+    sx: {
+      fontSize: '20px'
+    }
+  }) : /*#__PURE__*/React.createElement(FullscreenLineIcon, {
+    sx: {
+      fontSize: '20px'
+    }
+  }))), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      width: '1px',
+      height: '24px',
+      backgroundColor: 'rgba(255, 255, 255, 0.3)',
+      mx: 0.5
+    }
+  }), /*#__PURE__*/React.createElement(Tooltip, {
+    title: "\u5173\u95ED",
+    placement: "top"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    onClick: function onClick() {
+      return onClose && onClose();
+    },
+    sx: {
+      color: 'white',
+      '&:hover': {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)'
+      }
+    },
+    size: "small"
+  }, /*#__PURE__*/React.createElement(CloseCircleFillIcon, {
+    sx: {
+      fontSize: '20px'
+    }
+  })))));
+  if (typeof document !== 'undefined') {
+    return /*#__PURE__*/createPortal(toolbarContent, document.body);
+  }
+  return toolbarContent;
+};

package/dist/component/ImageViewer/context.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ImageViewerContextType } from './types';
+export declare const ImageViewerContext: React.Context<ImageViewerContextType>;

package/dist/component/ImageViewer/context.js

@@ -0,0 +1,22 @@
+import React from 'react';
+export var ImageViewerContext = /*#__PURE__*/React.createContext({
+  setCurrentSrc: function setCurrentSrc() {},
+  visible: false,
+  setVisible: function setVisible() {},
+  scale: 1,
+  setScale: function setScale() {},
+  rotate: 0,
+  setRotate: function setRotate() {},
+  getScale: function getScale() {
+    return 1;
+  },
+  getRotate: function getRotate() {
+    return 0;
+  },
+  onScale: null,
+  setOnScale: function setOnScale() {},
+  onRotate: null,
+  setOnRotate: function setOnRotate() {},
+  onClose: null,
+  setOnClose: function setOnClose() {}
+});

package/dist/component/ImageViewer/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import 'react-photo-view/dist/react-photo-view.css';
+import { ImageViewerItem } from './Item';
+import { ImageViewerProvider } from './Provider';
+export type { ImageViewerItemProps, ImageViewerProviderProps } from './types';
+export { ImageViewerItem, ImageViewerProvider };
+declare const _default: {
+    Provider: import("react").FC<import("./types").ImageViewerProviderProps>;
+    Item: import("react").FC<import("./types").ImageViewerItemProps>;
+};
+export default _default;

package/dist/component/ImageViewer/index.js

@@ -0,0 +1,8 @@
+import 'react-photo-view/dist/react-photo-view.css';
+import { ImageViewerItem } from "./Item";
+import { ImageViewerProvider } from "./Provider";
+export { ImageViewerItem, ImageViewerProvider };
+export default {
+  Provider: ImageViewerProvider,
+  Item: ImageViewerItem
+};

package/dist/component/ImageViewer/styles.d.ts

@@ -0,0 +1 @@
+export declare const customStyles = "\n  .PhotoView-Slider__toolbar {\n    display: none !important;\n  }\n  \n  .PhotoView-Slider__banner {\n    display: none !important;\n  }\n  \n  .PhotoView-Slider__toolbar-custom {\n    position: fixed !important;\n    bottom: 0 !important;\n    top: auto !important;\n    left: 0 !important;\n    right: 0 !important;\n    z-index: 10000 !important;\n    transform: none !important;\n  }\n";

package/dist/component/ImageViewer/styles.js

@@ -0,0 +1 @@
+export var customStyles = "\n  .PhotoView-Slider__toolbar {\n    display: none !important;\n  }\n  \n  .PhotoView-Slider__banner {\n    display: none !important;\n  }\n  \n  .PhotoView-Slider__toolbar-custom {\n    position: fixed !important;\n    bottom: 0 !important;\n    top: auto !important;\n    left: 0 !important;\n    right: 0 !important;\n    z-index: 10000 !important;\n    transform: none !important;\n  }\n";

package/dist/component/ImageViewer/types.d.ts

@@ -0,0 +1,51 @@
+import React, { ReactNode } from 'react';
+export interface ImageViewerProviderProps {
+    children: ReactNode;
+    speed?: number | ((type: number) => number);
+    maskOpacity?: number | null;
+    onVisibleChange?: (visible: boolean, index: number) => void;
+    onIndexChange?: (index: number) => void;
+    loop?: boolean | number;
+    photoClosable?: boolean;
+    maskClosable?: boolean;
+    pullClosable?: boolean;
+    className?: string;
+    maskClassName?: string;
+    photoWrapClassName?: string;
+    photoClassName?: string;
+    loadingElement?: JSX.Element;
+    brokenElement?: JSX.Element | ((photoProps: {
+        src: string;
+    }) => JSX.Element);
+    portalContainer?: HTMLElement;
+}
+export interface ImageViewerItemProps {
+    src: string;
+    children?: ReactNode;
+    render?: (props: {
+        attrs: Partial<React.HTMLAttributes<HTMLElement>>;
+        scale: number;
+        rotate: number;
+    }) => ReactNode;
+    overlay?: ReactNode;
+    width?: number;
+    height?: number;
+    triggers?: Array<'onClick' | 'onDoubleClick'>;
+}
+export interface ImageViewerContextType {
+    setCurrentSrc: (src: string) => void;
+    visible: boolean;
+    setVisible: (visible: boolean) => void;
+    scale: number;
+    setScale: (scale: number) => void;
+    rotate: number;
+    setRotate: (rotate: number) => void;
+    getScale: () => number;
+    getRotate: () => number;
+    onScale: ((scale: number) => void) | null;
+    setOnScale: (fn: ((scale: number) => void) | null) => void;
+    onRotate: ((rotate: number) => void) | null;
+    setOnRotate: (fn: ((rotate: number) => void) | null) => void;
+    onClose: (() => void) | null;
+    setOnClose: (fn: (() => void) | null) => void;
+}

package/dist/component/ImageViewer/types.js

@@ -0,0 +1 @@
+export {};

package/dist/extension/component/Image/Readonly.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import 'react-photo-view/dist/react-photo-view.css';
 import { ImageAttributes } from ".";
 interface ReadonlyImageProps {
     attrs: ImageAttributes;

package/dist/extension/component/Image/Readonly.js

@@ -1,8 +1,7 @@
 import { Box } from "@mui/material";
 import { NodeViewWrapper } from "@tiptap/react";
 import React from "react";
-import { PhotoView } from "react-photo-view";
-import 'react-photo-view/dist/react-photo-view.css';
+import { ImageViewerItem } from "../../../component/ImageViewer";
 var ReadonlyImage = function ReadonlyImage(_ref) {
   var attrs = _ref.attrs;
   return /*#__PURE__*/React.createElement(NodeViewWrapper, {
@@ -13,7 +12,7 @@ var ReadonlyImage = function ReadonlyImage(_ref) {
       position: 'relative',
       display: 'inline-block'
     }
-  }, /*#__PURE__*/React.createElement(PhotoView, {
+  }, /*#__PURE__*/React.createElement(ImageViewerItem, {
     src: attrs.src
   }, /*#__PURE__*/React.createElement("img", {
     src: attrs.src,

package/dist/extension/component/Image/index.d.ts

@@ -1,7 +1,6 @@
 import { EditorFnProps } from "../../../type";
 import { NodeViewProps } from "@tiptap/react";
 import React from "react";
-import 'react-photo-view/dist/react-photo-view.css';
 export interface ImageAttributes {
     src: string;
     title?: string;

package/dist/extension/component/Image/index.js

@@ -14,9 +14,8 @@ import { ToolbarItem } from "../../../component/Toolbar";
 import { alpha, Box, Button, Divider, Stack, TextField, useTheme } from "@mui/material";
 import { NodeViewWrapper } from "@tiptap/react";
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { PhotoView } from "react-photo-view";
-import 'react-photo-view/dist/react-photo-view.css';
 import { HoverPopover } from "../../../component/HoverPopover";
+import { ImageViewerItem } from "../../../component/ImageViewer";
 import CropImage from "./Crop";
 import InsertImage from "./Insert";
 import ReadonlyImage from "./Readonly";
@@ -410,7 +409,7 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
     onMouseLeave: function onMouseLeave() {
       return setIsHovering(false);
     }
-  }, /*#__PURE__*/React.createElement(PhotoView, {
+  }, /*#__PURE__*/React.createElement(ImageViewerItem, {
     src: attrs.src
   }, /*#__PURE__*/React.createElement("img", {
     ref: imageRef,

package/dist/extension/component/TableExtendButton/index.js

@@ -144,8 +144,8 @@ export var TableExtendRowColumnButton = function TableExtendRowColumnButton(_ref
     }
   }, /*#__PURE__*/React.createElement(AddLineIcon, {
     sx: {
-      width: '1rem',
-      height: '1rem',
+      width: '0.75rem',
+      height: '0.75rem',
       flexShrink: 0,
       color: 'var(--mui-palette-text-disabled)'
     }

package/dist/hook/index.js

@@ -10,7 +10,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import { getExtensions } from "../extension";
 import { migrateMathStrings } from '@tiptap/extension-mathematics';
 import { useEditor } from '@tiptap/react';
-import { renderToMarkdown } from '@tiptap/static-renderer/pm/markdown';
 var useTiptap = function useTiptap(_ref) {
   var exclude = _ref.exclude,
     extensionsProps = _ref.extensions,
@@ -119,13 +118,7 @@ var useTiptap = function useTiptap(_ref) {
     },
     getMarkdown: function getMarkdown() {
       if (!editor) return '';
-      if (contentType === 'markdown') {
-        return editor.getMarkdown();
-      }
-      return renderToMarkdown({
-        extensions: editor.extensionManager.extensions,
-        content: editor.getJSON()
-      });
+      return editor.getMarkdown();
     },
     getText: function getText() {
       return (editor === null || editor === void 0 ? void 0 : editor.getText()) || '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctzhian/tiptap",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "description": "基于 Tiptap 二次开发的编辑器组件",
   "main": "dist/index.js",
   "module": "dist/index.js",