@ctzhian/tiptap 2.1.4 → 2.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Editor/demo.js +1 -1
- package/dist/Editor/index.js +4 -43
- package/dist/EditorDiff/index.js +4 -43
- package/dist/component/ImageViewer/Item.d.ts +5 -0
- package/dist/component/ImageViewer/Item.js +43 -0
- package/dist/component/ImageViewer/Provider.d.ts +3 -0
- package/dist/component/ImageViewer/Provider.js +207 -0
- package/dist/component/ImageViewer/Toolbar.d.ts +2 -0
- package/dist/component/ImageViewer/Toolbar.js +266 -0
- package/dist/component/ImageViewer/context.d.ts +3 -0
- package/dist/component/ImageViewer/context.js +25 -0
- package/dist/component/ImageViewer/index.d.ts +13 -0
- package/dist/component/ImageViewer/index.js +8 -0
- package/dist/component/ImageViewer/styles.d.ts +1 -0
- package/dist/component/ImageViewer/styles.js +1 -0
- package/dist/component/ImageViewer/types.d.ts +40 -0
- package/dist/component/ImageViewer/types.js +1 -0
- package/dist/extension/component/Image/Readonly.d.ts +0 -1
- package/dist/extension/component/Image/Readonly.js +2 -3
- package/dist/extension/component/Image/index.d.ts +0 -1
- package/dist/extension/component/Image/index.js +3 -4
- package/dist/extension/component/TableExtendButton/index.js +2 -2
- package/package.json +1 -1
package/dist/Editor/demo.js
CHANGED
|
@@ -8,7 +8,7 @@ import React from 'react';
|
|
|
8
8
|
import "../index.css";
|
|
9
9
|
var EDITABLE = true;
|
|
10
10
|
var DEFAULT_CONTENT_TYPE = 'html';
|
|
11
|
-
var DEFAULT_HTML_CONTENT = "<p></p>\n<h6 id=\"4b8d8c4e-29dc-4674-928b-b9ded0e363ae\" data-toc-id=\"4b8d8c4e-29dc-4674-928b-b9ded0e363ae\"><span data-name=\"watch\" data-type=\"emoji\">\u231A</span> \u8868\u683C\u64CD\u4F5C</h6>\n<table><tbody><tr class=\"table-row\"><th class=\"table-header\" colspan=\"1\" rowspan=\"1\" colwidth=\"361\" data-background-color=\"\" data-text-align=\"center\" style=\"text-align: center;\"><p>\u94FE\u63A5</p></th><th class=\"table-header\" colspan=\"1\" rowspan=\"1\" data-background-color=\"\" data-text-align=\"center\" style=\"text-align: center;\"><p>\u590D\u6742\u6587\u672C</p></th><th class=\"table-header\" colspan=\"1\" rowspan=\"1\" data-background-color=\"\" data-text-align=\"center\" style=\"text-align: center;\"><p>\u56FE\u7247</p></th><th class=\"table-header\" colspan=\"1\" rowspan=\"1\" data-background-color=\"\" data-text-align=\"center\" style=\"text-align: center;\"><p>\u9644\u4EF6</p></th></tr><tr class=\"table-row\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"361\" data-background-color=\"\" data-text-align=\"center\" data-vertical-align=\"middle\" style=\"text-align: center; vertical-align: middle;\"><p><a target=\"_blank\" class=\"MuiBox-root css-1ivg9gg\" type=\"icon\" rel=\"noopener noreferrer\" title=\"\u70B9\u51FB\u6B64\u5904\u8DF3\u8F6C\" href=\"http://localhost:8000/components/editor\">\u70B9\u51FB\u6B64\u5904\u8DF3\u8F6C</a></p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"\" data-text-align=\"center\" data-vertical-align=\"middle\" style=\"text-align: center; vertical-align: middle;\"><p><code>\u77E5</code><span style=\"background-color: rgb(255, 204, 188); color: rgb(90, 141, 218);\">\u529B</span><span style=\"color: rgb(90, 141, 218);\">\u4F9B</span><sup>\u5386</sup><sub>\u53F2</sub><u>\u52A8</u><s>\u5927</s><span style=\"background-color: rgb(172, 84, 84);\">\u501F</span><mark>\u7B54</mark></p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"\" data-text-align=\"center\" data-vertical-align=\"middle\" style=\"text-align: center; vertical-align: middle;\"><p><img src=\"https://
|
|
11
|
+
var DEFAULT_HTML_CONTENT = "<p></p>\n<p><img src=\"https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg\" width=\"100\"></p>\n<p><img src=\"https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg\" width=\"100\"></p>\n<h6 id=\"4b8d8c4e-29dc-4674-928b-b9ded0e363ae\" data-toc-id=\"4b8d8c4e-29dc-4674-928b-b9ded0e363ae\"><span data-name=\"watch\" data-type=\"emoji\">\u231A</span> \u8868\u683C\u64CD\u4F5C</h6>\n<table><tbody><tr class=\"table-row\"><th class=\"table-header\" colspan=\"1\" rowspan=\"1\" colwidth=\"361\" data-background-color=\"\" data-text-align=\"center\" style=\"text-align: center;\"><p>\u94FE\u63A5</p></th><th class=\"table-header\" colspan=\"1\" rowspan=\"1\" data-background-color=\"\" data-text-align=\"center\" style=\"text-align: center;\"><p>\u590D\u6742\u6587\u672C</p></th><th class=\"table-header\" colspan=\"1\" rowspan=\"1\" data-background-color=\"\" data-text-align=\"center\" style=\"text-align: center;\"><p>\u56FE\u7247</p></th><th class=\"table-header\" colspan=\"1\" rowspan=\"1\" data-background-color=\"\" data-text-align=\"center\" style=\"text-align: center;\"><p>\u9644\u4EF6</p></th></tr><tr class=\"table-row\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"361\" data-background-color=\"\" data-text-align=\"center\" data-vertical-align=\"middle\" style=\"text-align: center; vertical-align: middle;\"><p><a target=\"_blank\" class=\"MuiBox-root css-1ivg9gg\" type=\"icon\" rel=\"noopener noreferrer\" title=\"\u70B9\u51FB\u6B64\u5904\u8DF3\u8F6C\" href=\"http://localhost:8000/components/editor\">\u70B9\u51FB\u6B64\u5904\u8DF3\u8F6C</a></p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"\" data-text-align=\"center\" data-vertical-align=\"middle\" style=\"text-align: center; vertical-align: middle;\"><p><code>\u77E5</code><span style=\"background-color: rgb(255, 204, 188); color: rgb(90, 141, 218);\">\u529B</span><span style=\"color: rgb(90, 141, 218);\">\u4F9B</span><sup>\u5386</sup><sub>\u53F2</sub><u>\u52A8</u><s>\u5927</s><span style=\"background-color: rgb(172, 84, 84);\">\u501F</span><mark>\u7B54</mark></p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"\" data-text-align=\"center\" data-vertical-align=\"middle\" style=\"text-align: center; vertical-align: middle;\"><p><img src=\"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg\" width=\"100\"></p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"\" data-text-align=\"center\" data-vertical-align=\"middle\" style=\"text-align: center; vertical-align: middle;\"><p><span data-tag=\"attachment\" url=\"\" title=\"\" size=\"0\" data-url=\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\" data-title=\"\u8C01\u662F\u6211\u4EEC\u7684\u654C\u4EBA.txt\" data-size=\"18.27 KB\"></span></p></td></tr><tr class=\"table-row\"><td colspan=\"1\" rowspan=\"1\" colwidth=\"361\" data-background-color=\"\" data-text-align=\"center\" style=\"text-align: center;\"><video src=\"https://media.w3.org/2010/05/sintel/trailer.mp4\" controls=\"true\" width=\"75%\"></video></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"\" data-text-align=\"center\" style=\"text-align: center;\"><p></p><audio src=\"http://vjs.zencdn.net/v/oceans.mp4\" controls=\"true\"></audio></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"\" data-text-align=\"center\" style=\"text-align: center;\"><p></p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"\" data-text-align=\"center\" style=\"text-align: center;\"><p></p></td></tr></tbody></table>\n<p><img src=\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\" width=\"100\"></p>\n<h6 id=\"a025f782-910f-4f17-9d0b-8f31f9cde175\" data-toc-id=\"a025f782-910f-4f17-9d0b-8f31f9cde175\"><span data-name=\"page_facing_up\" data-type=\"emoji\">\uD83D\uDCC4</span> \u6587\u672C\u5904\u7406</h6>\n<p>PandaWiki \u662F\u4E00\u6B3E AI \u5927\u6A21<code>\u578B\u9A71\u52A8\u7684\u5F00\u6E90\u77E5\u8BC6\u5E93\u642D</code>\u5EFA\u7CFB\u7EDF\uFF0CF<strong>AQ \u3001 \u535A\u5BA2\u7CFB\u7EDF \uFF0C\u501F\u52A9\u5927\u6A21\u578B\u7684\u529B\u91CF\u4E3A\u4F60\u63D0\u4F9B AI </strong>\u521B\u4F5C \u3001 AI \u95EE\u7B54 \u3001 AI \u641C\u7D22 \u7B49\u80FD\u529B\u3002\u501F<span style=\"color: rgb(90, 141, 218);\">\u52A9\u5927\u6A21\u578B\u7684</span><span style=\"background-color: rgb(255, 204, 188); color: rgb(90, 141, 218);\">\u529B\u91CF\u4E3A\u4F60\u63D0</span><span style=\"color: rgb(90, 141, 218);\">\u4F9B AI \u521B</span>\u4F5C\u80FD\u529B\u3002PandaWiki \u662F<u>\u4E00\u6B3E AI \u5927\u6A21\u578B\u9A71\u52A8\u7684\u5F00\u6E90\u77E5\u8BC6\u5E93\u642D\u5EFA\u7CFB\u7EDF\uFF0C\u5E2E</u>\u52A9\u4F60\u5FEB\u901F\u6784\u5EFA\u667A\u80FD\u5316\u7684 <s><u>\u4EA7\u54C1\u6587\u6863\u3001\u6280\u672F</u></s>\u6587\u6863\u3001FAQ \u3001<s> \u535A\u5BA2\u7CFB\u7EDF \uFF0C\u501F\u52A9\u5927\u6A21\u578B\u7684</s>\u529B\u91CF\u7CFB\u7EDF \uFF0C<span style=\"background-color: rgb(172, 84, 84);\">\u501F\u52A9\u5927\u6A21\u578B\u7684\u529B\u91CF\u4E3A\u4F60\u63D0\u4F9B AI \u521B\u4F5C \u3001 AI \u95EE</span>\u7B54 \u3001 AI \u641C\u7D22 \u7B49\u80FD\u529B\u3002\u7684\u529B\u91CF\u4E3A<mark>\u4F60\u63D0\u4F9B AI \u521B\u4F5C \u3001 AI \u95EE\u7B54 \u3001</mark> AI \u641C\u7D22\u3002</p>\n<a target=\"_blank\" type=\"block\" href=\"http://localhost:8000/components/editor\" title=\"\u770B\u98CE\u666F\">\u770B\u98CE\u666F</a>\n<h6>\uD83D\uDCCE \u9644\u4EF6</h6>\n<div data-tag=\"attachment\" url=\"\" title=\"\" size=\"0\" data-url=\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\" data-title=\"\u8C01\u662F\u6211\u4EEC\u7684\u654C\u4EBA\uFF1F\u8C01\u662F\u6211\u4EEC\u7684\u670B\u53CB\uFF1F\u8FD9\u4E2A\u95EE\u9898\u662F\u9769\u547D\u7684\u9996\u8981\u95EE\u9898\u3002\u4E2D\u56FD\u8FC7\u53BB\u4E00\u5207\u9769\u547D\u6597\u4E89\u6210.txt\" data-size=\"18.27 KB\"></div>\n<p>\u884C\u5185\u9644\u4EF6\uFF1A<span data-tag=\"attachment\" url=\"\" title=\"\" size=\"0\" data-url=\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\" data-title=\"font_4856251_qynqqohzdp.js\" data-size=\"412.34 KB\"></span><span data-tag=\"attachment\" url=\"\" title=\"\" size=\"0\" data-url=\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\" data-title=\"\u96F7\u6C60\u9879\u76EE\u8BBE\u8BA1\u65B9\u6848.docx\" data-size=\"635.74 KB\"></span></p>\n<div data-tag=\"attachment\" url=\"\" title=\"\" size=\"0\" data-url=\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\" data-title=\"b0f4a3e0-639f-4c09-ab33-ea9417939f87.tiff\" data-size=\"3.03 MB\"></div>\n<div data-tag=\"attachment\" url=\"\" title=\"\" size=\"0\" data-url=\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\" data-title=\"\u957F\u4EAD\u79D1\u6280\u516C\u53F8\u4ECB\u7ECDPPT-25.07.007_\u526F\u672C.pptx\" data-size=\"40.18 MB\"></div>\n<h6><span data-name=\"loudspeaker\" data-type=\"emoji\">\uD83D\uDCE2</span> \u97F3\u9891</h6>\n<audio src=\"http://vjs.zencdn.net/v/oceans.mp4\" controls=\"true\"></audio>\n<h6 id=\"1739ed5e-f03c-4c2f-b763-37505601c935\" data-toc-id=\"1739ed5e-f03c-4c2f-b763-37505601c935\"><span data-name=\"video_camera\" data-type=\"emoji\">\uD83D\uDCF9</span> \u89C6\u9891</h6>\n<video src=\"https://media.w3.org/2010/05/sintel/trailer.mp4\" controls=\"true\" width=\"400\" data-align=\"center\"></video>\n<h6 id=\"746ea233-0e30-44a6-849a-090202217299\" data-toc-id=\"746ea233-0e30-44a6-849a-090202217299\">\u26A0\uFE0F \u8B66\u544A\u5757</h6>\n<div data-id=\"alert_5ysakwbhvqv\" data-variant=\"warning\" data-type=\"icon\" data-node=\"alert\"><p>\u6B64\u65F6\u8FD9\u662F\u4E00\u4E2A\u8B66\u544A\u5757\u3002</p></div>\n<h6 id=\"ebb64062-9efb-4de8-887f-7f8b7f9e54ca\" data-toc-id=\"ebb64062-9efb-4de8-887f-7f8b7f9e54ca\"><span data-name=\"bar_chart\" data-type=\"emoji\">\uD83D\uDCCA</span> \u6D41\u7A0B\u56FE\u64CD\u4F5C</h6>\n<div data-type=\"flow\" data-code=\"mindmap\n root((mindmap))\n Origins\n Long history\n ::icon(fa fa-book)\n Popularisation\n British popular psychology author Tony Buzan\n Research\n On effectiveness<br/>and features\n On Automatic creation\n Uses\n Creative techniques\n Strategic planning\n Argument mapping\n Tools\n Pen and paper\n Mermaid\" data-width=\"246px\"></div>\n";
|
|
12
12
|
var DEFAULT_MARKDOWN_CONTENT = "###### :page_facing_up: \u6587\u672C\u5904\u7406\n\nPandaWiki \u662F\u4E00\u6B3E AI \u5927\u6A21`\u578B\u9A71\u52A8\u7684\u5F00\u6E90\u77E5\u8BC6\u5E93\u642D`\u5EFA\u7CFB\u7EDF\uFF0CF**AQ \u3001 \u535A\u5BA2\u7CFB\u7EDF \uFF0C\u501F\u52A9\u5927\u6A21\u578B\u7684\u529B\u91CF\u4E3A\u4F60\u63D0\u4F9B AI **\u521B\u4F5C \u3001 AI \u95EE\u7B54 \u3001 AI \u641C\u7D22 \u7B49\u80FD\u529B\u3002\u501F\u52A9\u5927\u6A21\u578B\u7684\u529B\u91CF\u4E3A\u4F60\u63D0\u4F9B AI \u521B\u4F5C\u80FD\u529B\u3002PandaWiki \u662F++\u4E00\u6B3E AI \u5927\u6A21\u578B\u9A71\u52A8\u7684\u5F00\u6E90\u77E5\u8BC6\u5E93\u642D\u5EFA\u7CFB\u7EDF\uFF0C\u5E2E++\u52A9\u4F60\u5FEB\u901F\u6784\u5EFA\u667A\u80FD\u5316\u7684 ++~~\u4EA7\u54C1\u6587\u6863\u3001\u6280\u672F~~++\u6587\u6863\u3001FAQ \u3001~~ \u535A\u5BA2\u7CFB\u7EDF \uFF0C\u501F\u52A9\u5927\u6A21\u578B\u7684~~\u529B\u91CF\u7CFB\u7EDF \uFF0C\u501F\u52A9\u5927\u6A21\u578B\u7684\u529B\u91CF\u4E3A\u4F60\u63D0\u4F9B AI \u521B\u4F5C \u3001 AI \u95EE\u7B54 \u3001 AI \u641C\u7D22 \u7B49\u80FD\u529B\u3002\u7684\u529B\u91CF\u4E3A==\u4F60\u63D0\u4F9B AI \u521B\u4F5C \u3001 AI \u95EE\u7B54 \u3001== AI \u641C\u7D22\u3002\n\n###### :video_camera: \u89C6\u9891\n\n<video src=\"https://media.w3.org/2010/05/sintel/trailer.mp4\" width=\"400\" controls ></video>\n\n###### \u26A0\uFE0F \u8B66\u544A\u5757\n\n:::alert {#alert_5ysakwbhvqv indent=\"0\" variant=\"warning\" type=\"icon\"}\n\n\u6B64\u65F6\u8FD9\u662F\u4E00\u4E2A\u8B66\u544A\u5757\u3002\n\n:::\n\n###### :bar_chart: \u6D41\u7A0B\u56FE\u64CD\u4F5C\n\n```mermaid\nmindmap\n root((mindmap))\n Origins\n Long history\n ::icon(fa fa-book)\n Popularisation\n British popular psychology author Tony Buzan\n Research\n On effectiveness<br/>and features\n On Automatic creation\n Uses\n Creative techniques\n Strategic planning\n Argument mapping\n Tools\n Pen and paper\n Mermaid\n```\n\n###### :watch: \u8868\u683C\u64CD\u4F5C\n\n\n| \u94FE\u63A5 | \u590D\u6742\u6587\u672C | \u56FE\u7247 | \u9644\u4EF6 |\n| ------------------------------------------------------------------------------------------- | --------------------------- | ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |\n| [\u70B9\u51FB\u6B64\u5904\u8DF3\u8F6C](http://localhost:8000/components/editor) | `\u77E5`\u529B\u4F9B^\u5386^~\u53F2~++\u52A8++~~\u5927~~\u501F==\u7B54== |  | <a href=\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\" target=\"_blank\" download=\"\u8C01\u662F\u6211\u4EEC\u7684\u654C\u4EBA.txt\">\u8C01\u662F\u6211\u4EEC\u7684\u654C\u4EBA.txt</a> |\n| <video src=\"https://media.w3.org/2010/05/sintel/trailer.mp4\" width=\"75%\" controls ></video> | \x1F | | |\n\n\n";
|
|
13
13
|
var Reader = function Reader() {
|
|
14
14
|
// @ts-ignore
|
package/dist/Editor/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import "core-js/modules/es.array.find-last.js";
|
|
2
2
|
import { EditorContent } from '@tiptap/react';
|
|
3
3
|
import React from 'react';
|
|
4
|
-
import { PhotoProvider } from 'react-photo-view';
|
|
5
4
|
import CustomBubbleMenu from "../component/CustomBubbleMenu";
|
|
6
5
|
import CustomDragHandle from "../component/CustomDragHandle";
|
|
6
|
+
import { ImageViewerProvider } from "../component/ImageViewer";
|
|
7
7
|
import { TableCellHandleMenu } from "../extension/component/TableCellHandleMenu";
|
|
8
8
|
import { TableExtendRowColumnButtons } from "../extension/component/TableExtendButton";
|
|
9
9
|
import { TableHandle } from "../extension/component/TableHandle";
|
|
@@ -16,48 +16,9 @@ var Editor = function Editor(_ref) {
|
|
|
16
16
|
menuInDragHandle = _ref.menuInDragHandle,
|
|
17
17
|
menuInBubbleMenu = _ref.menuInBubbleMenu,
|
|
18
18
|
onTip = _ref.onTip;
|
|
19
|
-
return /*#__PURE__*/React.createElement(
|
|
20
|
-
speed:
|
|
21
|
-
|
|
22
|
-
},
|
|
23
|
-
maskOpacity: 0.3,
|
|
24
|
-
toolbarRender: function toolbarRender(_ref2) {
|
|
25
|
-
var onScale = _ref2.onScale,
|
|
26
|
-
scale = _ref2.scale,
|
|
27
|
-
rotate = _ref2.rotate,
|
|
28
|
-
onRotate = _ref2.onRotate;
|
|
29
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {
|
|
30
|
-
width: "44",
|
|
31
|
-
height: "44",
|
|
32
|
-
viewBox: "0 0 768 768",
|
|
33
|
-
className: "PhotoView-Slider__toolbarIcon",
|
|
34
|
-
onClick: function onClick() {
|
|
35
|
-
return onScale(scale + 1);
|
|
36
|
-
}
|
|
37
|
-
}, /*#__PURE__*/React.createElement("path", {
|
|
38
|
-
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"
|
|
39
|
-
})), /*#__PURE__*/React.createElement("svg", {
|
|
40
|
-
width: "44",
|
|
41
|
-
height: "44",
|
|
42
|
-
viewBox: "0 0 768 768",
|
|
43
|
-
className: "PhotoView-Slider__toolbarIcon",
|
|
44
|
-
onClick: function onClick() {
|
|
45
|
-
return onScale(scale - 1);
|
|
46
|
-
}
|
|
47
|
-
}, /*#__PURE__*/React.createElement("path", {
|
|
48
|
-
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"
|
|
49
|
-
})), /*#__PURE__*/React.createElement("svg", {
|
|
50
|
-
width: "44",
|
|
51
|
-
height: "44",
|
|
52
|
-
viewBox: "0 0 768 768",
|
|
53
|
-
className: "PhotoView-Slider__toolbarIcon",
|
|
54
|
-
onClick: function onClick() {
|
|
55
|
-
return onRotate(rotate + 90);
|
|
56
|
-
}
|
|
57
|
-
}, /*#__PURE__*/React.createElement("path", {
|
|
58
|
-
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"
|
|
59
|
-
})));
|
|
60
|
-
}
|
|
19
|
+
return /*#__PURE__*/React.createElement(ImageViewerProvider, {
|
|
20
|
+
speed: 500,
|
|
21
|
+
maskOpacity: 0.3
|
|
61
22
|
}, /*#__PURE__*/React.createElement(CustomBubbleMenu, {
|
|
62
23
|
editor: editor,
|
|
63
24
|
more: menuInBubbleMenu
|
package/dist/EditorDiff/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import "core-js/modules/es.array.find-last.js";
|
|
2
2
|
import { EditorContent } from "@tiptap/react";
|
|
3
3
|
import React, { useEffect } from "react";
|
|
4
|
-
import {
|
|
4
|
+
import { ImageViewerProvider } from "../component/ImageViewer";
|
|
5
5
|
import useTiptap from "../hook";
|
|
6
6
|
|
|
7
7
|
// fix: https://github.com/ueberdosis/tiptap/issues/6785
|
|
@@ -22,48 +22,9 @@ var EditorDiff = function EditorDiff(_ref) {
|
|
|
22
22
|
(_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);
|
|
23
23
|
};
|
|
24
24
|
}, [oldHtml, newHtml, editorRef.editor]);
|
|
25
|
-
return /*#__PURE__*/React.createElement(
|
|
26
|
-
speed:
|
|
27
|
-
|
|
28
|
-
},
|
|
29
|
-
maskOpacity: 0.3,
|
|
30
|
-
toolbarRender: function toolbarRender(_ref2) {
|
|
31
|
-
var onScale = _ref2.onScale,
|
|
32
|
-
scale = _ref2.scale,
|
|
33
|
-
rotate = _ref2.rotate,
|
|
34
|
-
onRotate = _ref2.onRotate;
|
|
35
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {
|
|
36
|
-
width: "44",
|
|
37
|
-
height: "44",
|
|
38
|
-
viewBox: "0 0 768 768",
|
|
39
|
-
className: "PhotoView-Slider__toolbarIcon",
|
|
40
|
-
onClick: function onClick() {
|
|
41
|
-
return onScale(scale + 1);
|
|
42
|
-
}
|
|
43
|
-
}, /*#__PURE__*/React.createElement("path", {
|
|
44
|
-
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"
|
|
45
|
-
})), /*#__PURE__*/React.createElement("svg", {
|
|
46
|
-
width: "44",
|
|
47
|
-
height: "44",
|
|
48
|
-
viewBox: "0 0 768 768",
|
|
49
|
-
className: "PhotoView-Slider__toolbarIcon",
|
|
50
|
-
onClick: function onClick() {
|
|
51
|
-
return onScale(scale - 1);
|
|
52
|
-
}
|
|
53
|
-
}, /*#__PURE__*/React.createElement("path", {
|
|
54
|
-
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"
|
|
55
|
-
})), /*#__PURE__*/React.createElement("svg", {
|
|
56
|
-
width: "44",
|
|
57
|
-
height: "44",
|
|
58
|
-
viewBox: "0 0 768 768",
|
|
59
|
-
className: "PhotoView-Slider__toolbarIcon",
|
|
60
|
-
onClick: function onClick() {
|
|
61
|
-
return onRotate(rotate + 90);
|
|
62
|
-
}
|
|
63
|
-
}, /*#__PURE__*/React.createElement("path", {
|
|
64
|
-
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"
|
|
65
|
-
})));
|
|
66
|
-
}
|
|
25
|
+
return /*#__PURE__*/React.createElement(ImageViewerProvider, {
|
|
26
|
+
speed: 500,
|
|
27
|
+
maskOpacity: 0.3
|
|
67
28
|
}, /*#__PURE__*/React.createElement(EditorContent, {
|
|
68
29
|
editor: editorRef.editor
|
|
69
30
|
}));
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import React, { useContext } from 'react';
|
|
2
|
+
import { ImageViewerContext } from "./context";
|
|
3
|
+
export var ImageViewerItem = function ImageViewerItem(_ref) {
|
|
4
|
+
var src = _ref.src,
|
|
5
|
+
children = _ref.children,
|
|
6
|
+
_ref$triggers = _ref.triggers,
|
|
7
|
+
triggers = _ref$triggers === void 0 ? ['onClick'] : _ref$triggers,
|
|
8
|
+
onImageClick = _ref.onImageClick;
|
|
9
|
+
var context = useContext(ImageViewerContext);
|
|
10
|
+
var handleClick = function handleClick(e) {
|
|
11
|
+
// 如果在拖拽，不处理
|
|
12
|
+
if (e.defaultPrevented) {
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
if (triggers.includes('onClick')) {
|
|
16
|
+
var clickHandler = onImageClick || context.onImageClick;
|
|
17
|
+
if (clickHandler) {
|
|
18
|
+
e.stopPropagation();
|
|
19
|
+
clickHandler(src);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
// 直接克隆 children 并添加点击事件
|
|
25
|
+
if ( /*#__PURE__*/React.isValidElement(children)) {
|
|
26
|
+
var originalProps = children.props;
|
|
27
|
+
return /*#__PURE__*/React.cloneElement(children, {
|
|
28
|
+
onClick: function onClick(e) {
|
|
29
|
+
// 先调用原来的 onClick
|
|
30
|
+
if (originalProps.onClick) {
|
|
31
|
+
originalProps.onClick(e);
|
|
32
|
+
}
|
|
33
|
+
// 再调用我们的处理
|
|
34
|
+
if (!e.defaultPrevented) {
|
|
35
|
+
handleClick(e);
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
'data-image-viewer-item': true,
|
|
39
|
+
'data-src': src
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, children);
|
|
43
|
+
};
|
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
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."); }
|
|
3
|
+
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); }
|
|
4
|
+
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; }
|
|
5
|
+
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; } }
|
|
6
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
+
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
8
|
+
import { PhotoSlider } from 'react-photo-view';
|
|
9
|
+
import { ImageViewerContext } from "./context";
|
|
10
|
+
import { customStyles } from "./styles";
|
|
11
|
+
import { CustomToolbar } from "./Toolbar";
|
|
12
|
+
export var ImageViewerProvider = function ImageViewerProvider(_ref) {
|
|
13
|
+
var children = _ref.children,
|
|
14
|
+
_ref$speed = _ref.speed,
|
|
15
|
+
speed = _ref$speed === void 0 ? 500 : _ref$speed,
|
|
16
|
+
_ref$maskOpacity = _ref.maskOpacity,
|
|
17
|
+
maskOpacity = _ref$maskOpacity === void 0 ? 0.3 : _ref$maskOpacity,
|
|
18
|
+
onVisibleChange = _ref.onVisibleChange,
|
|
19
|
+
_onIndexChange = _ref.onIndexChange,
|
|
20
|
+
_ref$loop = _ref.loop,
|
|
21
|
+
loop = _ref$loop === void 0 ? 3 : _ref$loop,
|
|
22
|
+
photoClosable = _ref.photoClosable,
|
|
23
|
+
_ref$maskClosable = _ref.maskClosable,
|
|
24
|
+
maskClosable = _ref$maskClosable === void 0 ? true : _ref$maskClosable,
|
|
25
|
+
_ref$pullClosable = _ref.pullClosable,
|
|
26
|
+
pullClosable = _ref$pullClosable === void 0 ? true : _ref$pullClosable,
|
|
27
|
+
className = _ref.className,
|
|
28
|
+
maskClassName = _ref.maskClassName,
|
|
29
|
+
photoWrapClassName = _ref.photoWrapClassName,
|
|
30
|
+
photoClassName = _ref.photoClassName,
|
|
31
|
+
loadingElement = _ref.loadingElement,
|
|
32
|
+
brokenElement = _ref.brokenElement,
|
|
33
|
+
portalContainer = _ref.portalContainer;
|
|
34
|
+
var _useState = useState(''),
|
|
35
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
36
|
+
currentSrc = _useState2[0],
|
|
37
|
+
setCurrentSrc = _useState2[1];
|
|
38
|
+
var _useState3 = useState(false),
|
|
39
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
40
|
+
visible = _useState4[0],
|
|
41
|
+
setVisible = _useState4[1];
|
|
42
|
+
var _useState5 = useState(0),
|
|
43
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
44
|
+
viewIndex = _useState6[0],
|
|
45
|
+
setViewIndex = _useState6[1];
|
|
46
|
+
var _useState7 = useState(0),
|
|
47
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
48
|
+
totalImages = _useState8[0],
|
|
49
|
+
setTotalImages = _useState8[1];
|
|
50
|
+
var containerRef = useRef(null);
|
|
51
|
+
var overlayStateRef = useRef({
|
|
52
|
+
scale: 1,
|
|
53
|
+
rotate: 0,
|
|
54
|
+
onScale: null,
|
|
55
|
+
onRotate: null,
|
|
56
|
+
onClose: null
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
// 注入自定义样式
|
|
60
|
+
useEffect(function () {
|
|
61
|
+
if (typeof document !== 'undefined' && !document.getElementById('image-viewer-custom-styles')) {
|
|
62
|
+
var styleElement = document.createElement('style');
|
|
63
|
+
styleElement.id = 'image-viewer-custom-styles';
|
|
64
|
+
styleElement.textContent = customStyles;
|
|
65
|
+
document.head.appendChild(styleElement);
|
|
66
|
+
}
|
|
67
|
+
}, []);
|
|
68
|
+
|
|
69
|
+
// 从 DOM 中动态收集所有图片数据（按照 DOM 顺序）
|
|
70
|
+
var collectImagesFromDOM = useCallback(function () {
|
|
71
|
+
if (!containerRef.current) return [];
|
|
72
|
+
var items = containerRef.current.querySelectorAll('[data-image-viewer-item]');
|
|
73
|
+
var result = [];
|
|
74
|
+
items.forEach(function (item) {
|
|
75
|
+
var src = item.getAttribute('data-src');
|
|
76
|
+
if (src) {
|
|
77
|
+
result.push({
|
|
78
|
+
src: src,
|
|
79
|
+
key: src
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
return result;
|
|
84
|
+
}, []);
|
|
85
|
+
|
|
86
|
+
// 处理图片点击
|
|
87
|
+
var handleImageClick = useCallback(function (src) {
|
|
88
|
+
// 每次点击时动态从 DOM 收集图片列表
|
|
89
|
+
var images = collectImagesFromDOM();
|
|
90
|
+
var index = images.findIndex(function (img) {
|
|
91
|
+
return img.src === src;
|
|
92
|
+
});
|
|
93
|
+
if (index !== -1) {
|
|
94
|
+
setViewIndex(index);
|
|
95
|
+
setCurrentSrc(src);
|
|
96
|
+
setTotalImages(images.length);
|
|
97
|
+
setVisible(true);
|
|
98
|
+
onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(true, index);
|
|
99
|
+
}
|
|
100
|
+
}, [collectImagesFromDOM, onVisibleChange]);
|
|
101
|
+
|
|
102
|
+
// 上一张
|
|
103
|
+
var handlePrevImage = useCallback(function () {
|
|
104
|
+
var images = collectImagesFromDOM();
|
|
105
|
+
if (images.length === 0) return;
|
|
106
|
+
var newIndex = viewIndex > 0 ? viewIndex - 1 : images.length - 1;
|
|
107
|
+
setViewIndex(newIndex);
|
|
108
|
+
setCurrentSrc(images[newIndex].src);
|
|
109
|
+
_onIndexChange === null || _onIndexChange === void 0 || _onIndexChange(newIndex);
|
|
110
|
+
}, [viewIndex, collectImagesFromDOM, _onIndexChange]);
|
|
111
|
+
|
|
112
|
+
// 下一张
|
|
113
|
+
var handleNextImage = useCallback(function () {
|
|
114
|
+
var images = collectImagesFromDOM();
|
|
115
|
+
if (images.length === 0) return;
|
|
116
|
+
var newIndex = viewIndex < images.length - 1 ? viewIndex + 1 : 0;
|
|
117
|
+
setViewIndex(newIndex);
|
|
118
|
+
setCurrentSrc(images[newIndex].src);
|
|
119
|
+
_onIndexChange === null || _onIndexChange === void 0 || _onIndexChange(newIndex);
|
|
120
|
+
}, [viewIndex, collectImagesFromDOM, _onIndexChange]);
|
|
121
|
+
var contextValue = React.useMemo(function () {
|
|
122
|
+
return {
|
|
123
|
+
currentSrc: currentSrc,
|
|
124
|
+
visible: visible,
|
|
125
|
+
currentIndex: viewIndex,
|
|
126
|
+
totalImages: totalImages,
|
|
127
|
+
getScale: function getScale() {
|
|
128
|
+
return overlayStateRef.current.scale;
|
|
129
|
+
},
|
|
130
|
+
getRotate: function getRotate() {
|
|
131
|
+
return overlayStateRef.current.rotate;
|
|
132
|
+
},
|
|
133
|
+
getOnScale: function getOnScale() {
|
|
134
|
+
return overlayStateRef.current.onScale;
|
|
135
|
+
},
|
|
136
|
+
getOnRotate: function getOnRotate() {
|
|
137
|
+
return overlayStateRef.current.onRotate;
|
|
138
|
+
},
|
|
139
|
+
getOnClose: function getOnClose() {
|
|
140
|
+
return overlayStateRef.current.onClose;
|
|
141
|
+
},
|
|
142
|
+
onImageClick: handleImageClick,
|
|
143
|
+
onPrevImage: handlePrevImage,
|
|
144
|
+
onNextImage: handleNextImage
|
|
145
|
+
};
|
|
146
|
+
}, [currentSrc, visible, viewIndex, totalImages, handleImageClick, handlePrevImage, handleNextImage]);
|
|
147
|
+
var handleSpeed = typeof speed === 'function' ? speed : function () {
|
|
148
|
+
return speed;
|
|
149
|
+
};
|
|
150
|
+
|
|
151
|
+
// 当需要显示时，动态获取图片列表
|
|
152
|
+
var displayImages = React.useMemo(function () {
|
|
153
|
+
if (visible) {
|
|
154
|
+
return collectImagesFromDOM();
|
|
155
|
+
}
|
|
156
|
+
return [];
|
|
157
|
+
}, [visible, collectImagesFromDOM]);
|
|
158
|
+
return /*#__PURE__*/React.createElement(ImageViewerContext.Provider, {
|
|
159
|
+
value: contextValue
|
|
160
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
161
|
+
ref: containerRef
|
|
162
|
+
}, children), /*#__PURE__*/React.createElement(PhotoSlider, {
|
|
163
|
+
images: displayImages,
|
|
164
|
+
visible: visible,
|
|
165
|
+
index: viewIndex,
|
|
166
|
+
onClose: function onClose() {
|
|
167
|
+
setVisible(false);
|
|
168
|
+
onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(false, viewIndex);
|
|
169
|
+
},
|
|
170
|
+
onIndexChange: function onIndexChange(index) {
|
|
171
|
+
var _displayImages$index;
|
|
172
|
+
setViewIndex(index);
|
|
173
|
+
var src = (_displayImages$index = displayImages[index]) === null || _displayImages$index === void 0 ? void 0 : _displayImages$index.src;
|
|
174
|
+
if (src) setCurrentSrc(src);
|
|
175
|
+
_onIndexChange === null || _onIndexChange === void 0 || _onIndexChange(index);
|
|
176
|
+
},
|
|
177
|
+
bannerVisible: false,
|
|
178
|
+
speed: handleSpeed,
|
|
179
|
+
maskOpacity: maskOpacity,
|
|
180
|
+
loop: loop,
|
|
181
|
+
photoClosable: photoClosable,
|
|
182
|
+
maskClosable: maskClosable,
|
|
183
|
+
pullClosable: pullClosable,
|
|
184
|
+
className: className,
|
|
185
|
+
maskClassName: maskClassName,
|
|
186
|
+
photoWrapClassName: photoWrapClassName,
|
|
187
|
+
photoClassName: photoClassName,
|
|
188
|
+
loadingElement: loadingElement,
|
|
189
|
+
brokenElement: brokenElement,
|
|
190
|
+
portalContainer: portalContainer,
|
|
191
|
+
overlayRender: function overlayRender(_ref2) {
|
|
192
|
+
var onScale = _ref2.onScale,
|
|
193
|
+
scale = _ref2.scale,
|
|
194
|
+
rotate = _ref2.rotate,
|
|
195
|
+
onRotate = _ref2.onRotate,
|
|
196
|
+
onClose = _ref2.onClose;
|
|
197
|
+
overlayStateRef.current = {
|
|
198
|
+
scale: scale,
|
|
199
|
+
rotate: rotate,
|
|
200
|
+
onScale: onScale,
|
|
201
|
+
onRotate: onRotate,
|
|
202
|
+
onClose: onClose
|
|
203
|
+
};
|
|
204
|
+
return null;
|
|
205
|
+
}
|
|
206
|
+
}), /*#__PURE__*/React.createElement(CustomToolbar, null));
|
|
207
|
+
};
|
|
@@ -0,0 +1,266 @@
|
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
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."); }
|
|
3
|
+
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); }
|
|
4
|
+
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; }
|
|
5
|
+
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; } }
|
|
6
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
+
import { Box, IconButton, Stack, Tooltip } from '@mui/material';
|
|
8
|
+
import React, { useCallback, useContext, useEffect, useState } from 'react';
|
|
9
|
+
import { createPortal } from 'react-dom';
|
|
10
|
+
import { AnticlockwiseLineIcon, ClockwiseLineIcon, CloseCircleFillIcon, Download2LineIcon, FullscreenExitLineIcon, FullscreenLineIcon, ResetLeftFillIcon, SkipLeftIcon, SkipRightIcon } from "../Icons";
|
|
11
|
+
import { ImageViewerContext } from "./context";
|
|
12
|
+
var iconButtonSx = {
|
|
13
|
+
color: 'white',
|
|
14
|
+
'&:hover': {
|
|
15
|
+
backgroundColor: 'rgba(255, 255, 255, 0.1)'
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
var Divider = function Divider() {
|
|
19
|
+
return /*#__PURE__*/React.createElement(Box, {
|
|
20
|
+
sx: {
|
|
21
|
+
width: '1px',
|
|
22
|
+
height: '24px',
|
|
23
|
+
backgroundColor: 'rgba(255, 255, 255, 0.3)',
|
|
24
|
+
mx: 0.5
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
};
|
|
28
|
+
var ZoomInIcon = function ZoomInIcon() {
|
|
29
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
30
|
+
width: "20",
|
|
31
|
+
height: "20",
|
|
32
|
+
viewBox: "0 0 768 768",
|
|
33
|
+
fill: "currentColor"
|
|
34
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
35
|
+
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"
|
|
36
|
+
}));
|
|
37
|
+
};
|
|
38
|
+
var ZoomOutIcon = function ZoomOutIcon() {
|
|
39
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
40
|
+
width: "20",
|
|
41
|
+
height: "20",
|
|
42
|
+
viewBox: "0 0 768 768",
|
|
43
|
+
fill: "currentColor"
|
|
44
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
45
|
+
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"
|
|
46
|
+
}));
|
|
47
|
+
};
|
|
48
|
+
export var CustomToolbar = function CustomToolbar() {
|
|
49
|
+
var _useContext = useContext(ImageViewerContext),
|
|
50
|
+
visible = _useContext.visible,
|
|
51
|
+
currentSrc = _useContext.currentSrc,
|
|
52
|
+
currentIndex = _useContext.currentIndex,
|
|
53
|
+
totalImages = _useContext.totalImages,
|
|
54
|
+
getScale = _useContext.getScale,
|
|
55
|
+
getRotate = _useContext.getRotate,
|
|
56
|
+
getOnScale = _useContext.getOnScale,
|
|
57
|
+
getOnRotate = _useContext.getOnRotate,
|
|
58
|
+
getOnClose = _useContext.getOnClose,
|
|
59
|
+
onPrevImage = _useContext.onPrevImage,
|
|
60
|
+
onNextImage = _useContext.onNextImage;
|
|
61
|
+
var _useState = useState(false),
|
|
62
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
63
|
+
isFullscreen = _useState2[0],
|
|
64
|
+
setIsFullscreen = _useState2[1];
|
|
65
|
+
useEffect(function () {
|
|
66
|
+
var handleFullscreenChange = function handleFullscreenChange() {
|
|
67
|
+
setIsFullscreen(!!document.fullscreenElement);
|
|
68
|
+
};
|
|
69
|
+
document.addEventListener('fullscreenchange', handleFullscreenChange);
|
|
70
|
+
return function () {
|
|
71
|
+
document.removeEventListener('fullscreenchange', handleFullscreenChange);
|
|
72
|
+
};
|
|
73
|
+
}, []);
|
|
74
|
+
var handleDownload = useCallback(function () {
|
|
75
|
+
if (currentSrc) {
|
|
76
|
+
var link = document.createElement('a');
|
|
77
|
+
link.href = currentSrc;
|
|
78
|
+
link.download = currentSrc.split('/').pop() || 'image';
|
|
79
|
+
document.body.appendChild(link);
|
|
80
|
+
link.click();
|
|
81
|
+
document.body.removeChild(link);
|
|
82
|
+
}
|
|
83
|
+
}, [currentSrc]);
|
|
84
|
+
var handleFullscreen = useCallback(function () {
|
|
85
|
+
if (!document.fullscreenElement) {
|
|
86
|
+
var _document$documentEle, _document$documentEle2;
|
|
87
|
+
(_document$documentEle = (_document$documentEle2 = document.documentElement).requestFullscreen) === null || _document$documentEle === void 0 || _document$documentEle.call(_document$documentEle2);
|
|
88
|
+
} else {
|
|
89
|
+
var _document$exitFullscr, _document;
|
|
90
|
+
(_document$exitFullscr = (_document = document).exitFullscreen) === null || _document$exitFullscr === void 0 || _document$exitFullscr.call(_document);
|
|
91
|
+
}
|
|
92
|
+
}, []);
|
|
93
|
+
var handleZoom = useCallback(function (delta) {
|
|
94
|
+
var onScaleFn = getOnScale();
|
|
95
|
+
if (onScaleFn) {
|
|
96
|
+
var currentScale = getScale();
|
|
97
|
+
var newScale = Math.max(0.5, Math.min(5, currentScale + delta));
|
|
98
|
+
onScaleFn(newScale);
|
|
99
|
+
}
|
|
100
|
+
}, [getOnScale, getScale]);
|
|
101
|
+
var handleRotate = useCallback(function (delta) {
|
|
102
|
+
var onRotateFn = getOnRotate();
|
|
103
|
+
if (onRotateFn) {
|
|
104
|
+
var currentRotate = getRotate();
|
|
105
|
+
onRotateFn(currentRotate + delta);
|
|
106
|
+
}
|
|
107
|
+
}, [getOnRotate, getRotate]);
|
|
108
|
+
var handleReset = useCallback(function () {
|
|
109
|
+
var _getOnScale, _getOnRotate;
|
|
110
|
+
(_getOnScale = getOnScale()) === null || _getOnScale === void 0 || _getOnScale(1);
|
|
111
|
+
(_getOnRotate = getOnRotate()) === null || _getOnRotate === void 0 || _getOnRotate(0);
|
|
112
|
+
}, [getOnScale, getOnRotate]);
|
|
113
|
+
var handleClose = useCallback(function () {
|
|
114
|
+
var _getOnClose;
|
|
115
|
+
(_getOnClose = getOnClose()) === null || _getOnClose === void 0 || _getOnClose();
|
|
116
|
+
}, [getOnClose]);
|
|
117
|
+
if (!visible) return null;
|
|
118
|
+
var toolbarContent = /*#__PURE__*/React.createElement(Box, {
|
|
119
|
+
className: "PhotoView-Slider__toolbar-custom",
|
|
120
|
+
sx: {
|
|
121
|
+
position: 'fixed',
|
|
122
|
+
bottom: 0,
|
|
123
|
+
left: 0,
|
|
124
|
+
right: 0,
|
|
125
|
+
display: 'flex',
|
|
126
|
+
justifyContent: 'center',
|
|
127
|
+
alignItems: 'center',
|
|
128
|
+
padding: '16px 24px',
|
|
129
|
+
zIndex: 10000,
|
|
130
|
+
pointerEvents: 'none',
|
|
131
|
+
'& > *': {
|
|
132
|
+
pointerEvents: 'auto'
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
}, /*#__PURE__*/React.createElement(Stack, {
|
|
136
|
+
direction: "row",
|
|
137
|
+
spacing: 1,
|
|
138
|
+
alignItems: "center",
|
|
139
|
+
sx: {
|
|
140
|
+
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
141
|
+
borderRadius: '8px',
|
|
142
|
+
padding: '8px 12px',
|
|
143
|
+
backdropFilter: 'blur(10px)'
|
|
144
|
+
}
|
|
145
|
+
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
146
|
+
title: "\u4E0A\u4E00\u5F20",
|
|
147
|
+
placement: "top"
|
|
148
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
149
|
+
onClick: onPrevImage,
|
|
150
|
+
sx: iconButtonSx,
|
|
151
|
+
size: "small",
|
|
152
|
+
disabled: totalImages <= 1
|
|
153
|
+
}, /*#__PURE__*/React.createElement(SkipLeftIcon, {
|
|
154
|
+
sx: {
|
|
155
|
+
fontSize: '20px'
|
|
156
|
+
}
|
|
157
|
+
}))), /*#__PURE__*/React.createElement(Tooltip, {
|
|
158
|
+
title: "\u4E0B\u4E00\u5F20",
|
|
159
|
+
placement: "top"
|
|
160
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
161
|
+
onClick: onNextImage,
|
|
162
|
+
sx: iconButtonSx,
|
|
163
|
+
size: "small",
|
|
164
|
+
disabled: totalImages <= 1
|
|
165
|
+
}, /*#__PURE__*/React.createElement(SkipRightIcon, {
|
|
166
|
+
sx: {
|
|
167
|
+
fontSize: '20px'
|
|
168
|
+
}
|
|
169
|
+
}))), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Tooltip, {
|
|
170
|
+
title: "\u653E\u5927",
|
|
171
|
+
placement: "top"
|
|
172
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
173
|
+
onClick: function onClick() {
|
|
174
|
+
return handleZoom(0.5);
|
|
175
|
+
},
|
|
176
|
+
sx: iconButtonSx,
|
|
177
|
+
size: "small"
|
|
178
|
+
}, /*#__PURE__*/React.createElement(ZoomInIcon, null))), /*#__PURE__*/React.createElement(Tooltip, {
|
|
179
|
+
title: "\u7F29\u5C0F",
|
|
180
|
+
placement: "top"
|
|
181
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
182
|
+
onClick: function onClick() {
|
|
183
|
+
return handleZoom(-0.5);
|
|
184
|
+
},
|
|
185
|
+
sx: iconButtonSx,
|
|
186
|
+
size: "small"
|
|
187
|
+
}, /*#__PURE__*/React.createElement(ZoomOutIcon, null))), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Tooltip, {
|
|
188
|
+
title: "\u9006\u65F6\u9488\u65CB\u8F6C",
|
|
189
|
+
placement: "top"
|
|
190
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
191
|
+
onClick: function onClick() {
|
|
192
|
+
return handleRotate(-90);
|
|
193
|
+
},
|
|
194
|
+
sx: iconButtonSx,
|
|
195
|
+
size: "small"
|
|
196
|
+
}, /*#__PURE__*/React.createElement(AnticlockwiseLineIcon, {
|
|
197
|
+
sx: {
|
|
198
|
+
fontSize: '20px'
|
|
199
|
+
}
|
|
200
|
+
}))), /*#__PURE__*/React.createElement(Tooltip, {
|
|
201
|
+
title: "\u987A\u65F6\u9488\u65CB\u8F6C",
|
|
202
|
+
placement: "top"
|
|
203
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
204
|
+
onClick: function onClick() {
|
|
205
|
+
return handleRotate(90);
|
|
206
|
+
},
|
|
207
|
+
sx: iconButtonSx,
|
|
208
|
+
size: "small"
|
|
209
|
+
}, /*#__PURE__*/React.createElement(ClockwiseLineIcon, {
|
|
210
|
+
sx: {
|
|
211
|
+
fontSize: '20px'
|
|
212
|
+
}
|
|
213
|
+
}))), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Tooltip, {
|
|
214
|
+
title: "\u91CD\u7F6E",
|
|
215
|
+
placement: "top"
|
|
216
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
217
|
+
onClick: handleReset,
|
|
218
|
+
sx: iconButtonSx,
|
|
219
|
+
size: "small"
|
|
220
|
+
}, /*#__PURE__*/React.createElement(ResetLeftFillIcon, {
|
|
221
|
+
sx: {
|
|
222
|
+
fontSize: '20px'
|
|
223
|
+
}
|
|
224
|
+
}))), currentSrc && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Tooltip, {
|
|
225
|
+
title: "\u4E0B\u8F7D",
|
|
226
|
+
placement: "top"
|
|
227
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
228
|
+
onClick: handleDownload,
|
|
229
|
+
sx: iconButtonSx,
|
|
230
|
+
size: "small"
|
|
231
|
+
}, /*#__PURE__*/React.createElement(Download2LineIcon, {
|
|
232
|
+
sx: {
|
|
233
|
+
fontSize: '20px'
|
|
234
|
+
}
|
|
235
|
+
})))), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Tooltip, {
|
|
236
|
+
title: isFullscreen ? '退出全屏' : '全屏',
|
|
237
|
+
placement: "top"
|
|
238
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
239
|
+
onClick: handleFullscreen,
|
|
240
|
+
sx: iconButtonSx,
|
|
241
|
+
size: "small"
|
|
242
|
+
}, isFullscreen ? /*#__PURE__*/React.createElement(FullscreenExitLineIcon, {
|
|
243
|
+
sx: {
|
|
244
|
+
fontSize: '20px'
|
|
245
|
+
}
|
|
246
|
+
}) : /*#__PURE__*/React.createElement(FullscreenLineIcon, {
|
|
247
|
+
sx: {
|
|
248
|
+
fontSize: '20px'
|
|
249
|
+
}
|
|
250
|
+
}))), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Tooltip, {
|
|
251
|
+
title: "\u5173\u95ED",
|
|
252
|
+
placement: "top"
|
|
253
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
254
|
+
onClick: handleClose,
|
|
255
|
+
sx: iconButtonSx,
|
|
256
|
+
size: "small"
|
|
257
|
+
}, /*#__PURE__*/React.createElement(CloseCircleFillIcon, {
|
|
258
|
+
sx: {
|
|
259
|
+
fontSize: '20px'
|
|
260
|
+
}
|
|
261
|
+
})))));
|
|
262
|
+
if (typeof document !== 'undefined') {
|
|
263
|
+
return /*#__PURE__*/createPortal(toolbarContent, document.body);
|
|
264
|
+
}
|
|
265
|
+
return toolbarContent;
|
|
266
|
+
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export var ImageViewerContext = /*#__PURE__*/React.createContext({
|
|
3
|
+
currentSrc: '',
|
|
4
|
+
visible: false,
|
|
5
|
+
currentIndex: 0,
|
|
6
|
+
totalImages: 0,
|
|
7
|
+
getScale: function getScale() {
|
|
8
|
+
return 1;
|
|
9
|
+
},
|
|
10
|
+
getRotate: function getRotate() {
|
|
11
|
+
return 0;
|
|
12
|
+
},
|
|
13
|
+
getOnScale: function getOnScale() {
|
|
14
|
+
return null;
|
|
15
|
+
},
|
|
16
|
+
getOnRotate: function getOnRotate() {
|
|
17
|
+
return null;
|
|
18
|
+
},
|
|
19
|
+
getOnClose: function getOnClose() {
|
|
20
|
+
return null;
|
|
21
|
+
},
|
|
22
|
+
onImageClick: function onImageClick() {},
|
|
23
|
+
onPrevImage: function onPrevImage() {},
|
|
24
|
+
onNextImage: function onNextImage() {}
|
|
25
|
+
});
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import 'react-photo-view/dist/react-photo-view.css';
|
|
3
|
+
import { ImageViewerItem } from './Item';
|
|
4
|
+
import { ImageViewerProvider } from './Provider';
|
|
5
|
+
export type { ImageViewerItemProps, ImageViewerProviderProps } from './types';
|
|
6
|
+
export { ImageViewerItem, ImageViewerProvider };
|
|
7
|
+
declare const _default: {
|
|
8
|
+
Provider: import("react").FC<import("./types").ImageViewerProviderProps>;
|
|
9
|
+
Item: import("react").FC<import("./types").ImageViewerItemProps & {
|
|
10
|
+
onImageClick?: ((src: string) => void) | undefined;
|
|
11
|
+
}>;
|
|
12
|
+
};
|
|
13
|
+
export default _default;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import 'react-photo-view/dist/react-photo-view.css';
|
|
2
|
+
import { ImageViewerItem } from "./Item";
|
|
3
|
+
import { ImageViewerProvider } from "./Provider";
|
|
4
|
+
export { ImageViewerItem, ImageViewerProvider };
|
|
5
|
+
export default {
|
|
6
|
+
Provider: ImageViewerProvider,
|
|
7
|
+
Item: ImageViewerItem
|
|
8
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
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";
|
|
@@ -0,0 +1 @@
|
|
|
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";
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface ImageViewerProviderProps {
|
|
3
|
+
children: ReactNode;
|
|
4
|
+
speed?: number | ((type: number) => number);
|
|
5
|
+
maskOpacity?: number | null;
|
|
6
|
+
onVisibleChange?: (visible: boolean, index: number) => void;
|
|
7
|
+
onIndexChange?: (index: number) => void;
|
|
8
|
+
loop?: boolean | number;
|
|
9
|
+
photoClosable?: boolean;
|
|
10
|
+
maskClosable?: boolean;
|
|
11
|
+
pullClosable?: boolean;
|
|
12
|
+
className?: string;
|
|
13
|
+
maskClassName?: string;
|
|
14
|
+
photoWrapClassName?: string;
|
|
15
|
+
photoClassName?: string;
|
|
16
|
+
loadingElement?: JSX.Element;
|
|
17
|
+
brokenElement?: JSX.Element | ((photoProps: {
|
|
18
|
+
src: string;
|
|
19
|
+
}) => JSX.Element);
|
|
20
|
+
portalContainer?: HTMLElement;
|
|
21
|
+
}
|
|
22
|
+
export interface ImageViewerItemProps {
|
|
23
|
+
src: string;
|
|
24
|
+
children?: ReactNode;
|
|
25
|
+
triggers?: Array<'onClick' | 'onDoubleClick'>;
|
|
26
|
+
}
|
|
27
|
+
export interface ImageViewerContextType {
|
|
28
|
+
currentSrc: string;
|
|
29
|
+
visible: boolean;
|
|
30
|
+
currentIndex: number;
|
|
31
|
+
totalImages: number;
|
|
32
|
+
getScale: () => number;
|
|
33
|
+
getRotate: () => number;
|
|
34
|
+
getOnScale: () => ((scale: number) => void) | null;
|
|
35
|
+
getOnRotate: () => ((rotate: number) => void) | null;
|
|
36
|
+
getOnClose: () => (() => void) | null;
|
|
37
|
+
onImageClick: (src: string) => void;
|
|
38
|
+
onPrevImage: () => void;
|
|
39
|
+
onNextImage: () => void;
|
|
40
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { Box } from "@mui/material";
|
|
2
2
|
import { NodeViewWrapper } from "@tiptap/react";
|
|
3
3
|
import React from "react";
|
|
4
|
-
import {
|
|
5
|
-
import 'react-photo-view/dist/react-photo-view.css';
|
|
4
|
+
import { ImageViewerItem } from "../../../component/ImageViewer";
|
|
6
5
|
var ReadonlyImage = function ReadonlyImage(_ref) {
|
|
7
6
|
var attrs = _ref.attrs;
|
|
8
7
|
return /*#__PURE__*/React.createElement(NodeViewWrapper, {
|
|
@@ -13,7 +12,7 @@ var ReadonlyImage = function ReadonlyImage(_ref) {
|
|
|
13
12
|
position: 'relative',
|
|
14
13
|
display: 'inline-block'
|
|
15
14
|
}
|
|
16
|
-
}, /*#__PURE__*/React.createElement(
|
|
15
|
+
}, /*#__PURE__*/React.createElement(ImageViewerItem, {
|
|
17
16
|
src: attrs.src
|
|
18
17
|
}, /*#__PURE__*/React.createElement("img", {
|
|
19
18
|
src: attrs.src,
|
|
@@ -14,9 +14,8 @@ import { ToolbarItem } from "../../../component/Toolbar";
|
|
|
14
14
|
import { alpha, Box, Button, Divider, Stack, TextField, useTheme } from "@mui/material";
|
|
15
15
|
import { NodeViewWrapper } from "@tiptap/react";
|
|
16
16
|
import React, { useCallback, useEffect, useRef, useState } from "react";
|
|
17
|
-
import { PhotoView } from "react-photo-view";
|
|
18
|
-
import 'react-photo-view/dist/react-photo-view.css';
|
|
19
17
|
import { HoverPopover } from "../../../component/HoverPopover";
|
|
18
|
+
import { ImageViewerItem } from "../../../component/ImageViewer";
|
|
20
19
|
import CropImage from "./Crop";
|
|
21
20
|
import InsertImage from "./Insert";
|
|
22
21
|
import ReadonlyImage from "./Readonly";
|
|
@@ -182,7 +181,7 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
|
|
|
182
181
|
e.stopPropagation();
|
|
183
182
|
return;
|
|
184
183
|
}
|
|
185
|
-
//
|
|
184
|
+
// 事件会冒泡到 ImageViewerItem 处理
|
|
186
185
|
};
|
|
187
186
|
var handleMouseMove = useCallback(function (e) {
|
|
188
187
|
if (!isDragging || !dragCorner) return;
|
|
@@ -410,7 +409,7 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
|
|
|
410
409
|
onMouseLeave: function onMouseLeave() {
|
|
411
410
|
return setIsHovering(false);
|
|
412
411
|
}
|
|
413
|
-
}, /*#__PURE__*/React.createElement(
|
|
412
|
+
}, /*#__PURE__*/React.createElement(ImageViewerItem, {
|
|
414
413
|
src: attrs.src
|
|
415
414
|
}, /*#__PURE__*/React.createElement("img", {
|
|
416
415
|
ref: imageRef,
|
|
@@ -144,8 +144,8 @@ export var TableExtendRowColumnButton = function TableExtendRowColumnButton(_ref
|
|
|
144
144
|
}
|
|
145
145
|
}, /*#__PURE__*/React.createElement(AddLineIcon, {
|
|
146
146
|
sx: {
|
|
147
|
-
width: '
|
|
148
|
-
height: '
|
|
147
|
+
width: '0.75rem',
|
|
148
|
+
height: '0.75rem',
|
|
149
149
|
flexShrink: 0,
|
|
150
150
|
color: 'var(--mui-palette-text-disabled)'
|
|
151
151
|
}
|