@ctzhian/tiptap 2.1.5 → 2.1.6

package/dist/Editor/demo.js

@@ -8,7 +8,7 @@ import React from 'react';
 import "../index.css";
 var EDITABLE = true;
 var DEFAULT_CONTENT_TYPE = 'html';
-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://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.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></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&lt;br/&gt;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";
+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&lt;br/&gt;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";
 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== | ![](https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg) | <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";
 var Reader = function Reader() {
   // @ts-ignore

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

@@ -1,3 +1,5 @@
 import React from 'react';
 import { ImageViewerItemProps } from './types';
-export declare const ImageViewerItem: React.FC<ImageViewerItemProps>;
+export declare const ImageViewerItem: React.FC<ImageViewerItemProps & {
+    onImageClick?: (src: string) => void;
+}>;

package/dist/component/ImageViewer/Item.js

@@ -1,20 +1,43 @@
-import React from 'react';
-import { PhotoView } from 'react-photo-view';
+import React, { useContext } from 'react';
+import { ImageViewerContext } from "./context";
 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);
+    triggers = _ref$triggers === void 0 ? ['onClick'] : _ref$triggers,
+    onImageClick = _ref.onImageClick;
+  var context = useContext(ImageViewerContext);
+  var handleClick = function handleClick(e) {
+    // 如果在拖拽，不处理
+    if (e.defaultPrevented) {
+      return;
+    }
+    if (triggers.includes('onClick')) {
+      var clickHandler = onImageClick || context.onImageClick;
+      if (clickHandler) {
+        e.stopPropagation();
+        clickHandler(src);
+      }
+    }
+  };
+
+  // 直接克隆 children 并添加点击事件
+  if ( /*#__PURE__*/React.isValidElement(children)) {
+    var originalProps = children.props;
+    return /*#__PURE__*/React.cloneElement(children, {
+      onClick: function onClick(e) {
+        // 先调用原来的 onClick
+        if (originalProps.onClick) {
+          originalProps.onClick(e);
+        }
+        // 再调用我们的处理
+        if (!e.defaultPrevented) {
+          handleClick(e);
+        }
+      },
+      'data-image-viewer-item': true,
+      'data-src': src
+    });
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 };

package/dist/component/ImageViewer/Provider.js

@@ -4,10 +4,9 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 React, { useCallback, useEffect, useRef, useState } from 'react';
+import { PhotoSlider } 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) {
@@ -16,7 +15,7 @@ export var ImageViewerProvider = function ImageViewerProvider(_ref) {
     speed = _ref$speed === void 0 ? 500 : _ref$speed,
     _ref$maskOpacity = _ref.maskOpacity,
     maskOpacity = _ref$maskOpacity === void 0 ? 0.3 : _ref$maskOpacity,
-    _onVisibleChange = _ref.onVisibleChange,
+    onVisibleChange = _ref.onVisibleChange,
     _onIndexChange = _ref.onIndexChange,
     _ref$loop = _ref.loop,
     loop = _ref$loop === void 0 ? 3 : _ref$loop,
@@ -40,41 +39,24 @@ export var ImageViewerProvider = function ImageViewerProvider(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     visible = _useState4[0],
     setVisible = _useState4[1];
-  var _useState5 = useState(1),
+  var _useState5 = useState(0),
     _useState6 = _slicedToArray(_useState5, 2),
-    scale = _useState6[0],
-    setScale = _useState6[1];
+    viewIndex = _useState6[0],
+    setViewIndex = _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([]);
+    totalImages = _useState8[0],
+    setTotalImages = _useState8[1];
+  var containerRef = useRef(null);
   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');
@@ -83,69 +65,115 @@ export var ImageViewerProvider = function ImageViewerProvider(_ref) {
       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];
+
+  // 从 DOM 中动态收集所有图片数据（按照 DOM 顺序）
+  var collectImagesFromDOM = useCallback(function () {
+    if (!containerRef.current) return [];
+    var items = containerRef.current.querySelectorAll('[data-image-viewer-item]');
+    var result = [];
+    items.forEach(function (item) {
+      var src = item.getAttribute('data-src');
       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);
-        }
+        result.push({
+          src: src,
+          key: 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
-  };
+    return result;
+  }, []);
+
+  // 处理图片点击
+  var handleImageClick = useCallback(function (src) {
+    // 每次点击时动态从 DOM 收集图片列表
+    var images = collectImagesFromDOM();
+    var index = images.findIndex(function (img) {
+      return img.src === src;
+    });
+    if (index !== -1) {
+      setViewIndex(index);
+      setCurrentSrc(src);
+      setTotalImages(images.length);
+      setVisible(true);
+      onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(true, index);
+    }
+  }, [collectImagesFromDOM, onVisibleChange]);
+
+  // 上一张
+  var handlePrevImage = useCallback(function () {
+    var images = collectImagesFromDOM();
+    if (images.length === 0) return;
+    var newIndex = viewIndex > 0 ? viewIndex - 1 : images.length - 1;
+    setViewIndex(newIndex);
+    setCurrentSrc(images[newIndex].src);
+    _onIndexChange === null || _onIndexChange === void 0 || _onIndexChange(newIndex);
+  }, [viewIndex, collectImagesFromDOM, _onIndexChange]);
+
+  // 下一张
+  var handleNextImage = useCallback(function () {
+    var images = collectImagesFromDOM();
+    if (images.length === 0) return;
+    var newIndex = viewIndex < images.length - 1 ? viewIndex + 1 : 0;
+    setViewIndex(newIndex);
+    setCurrentSrc(images[newIndex].src);
+    _onIndexChange === null || _onIndexChange === void 0 || _onIndexChange(newIndex);
+  }, [viewIndex, collectImagesFromDOM, _onIndexChange]);
+  var contextValue = React.useMemo(function () {
+    return {
+      currentSrc: currentSrc,
+      visible: visible,
+      currentIndex: viewIndex,
+      totalImages: totalImages,
+      getScale: function getScale() {
+        return overlayStateRef.current.scale;
+      },
+      getRotate: function getRotate() {
+        return overlayStateRef.current.rotate;
+      },
+      getOnScale: function getOnScale() {
+        return overlayStateRef.current.onScale;
+      },
+      getOnRotate: function getOnRotate() {
+        return overlayStateRef.current.onRotate;
+      },
+      getOnClose: function getOnClose() {
+        return overlayStateRef.current.onClose;
+      },
+      onImageClick: handleImageClick,
+      onPrevImage: handlePrevImage,
+      onNextImage: handleNextImage
+    };
+  }, [currentSrc, visible, viewIndex, totalImages, handleImageClick, handlePrevImage, handleNextImage]);
   var handleSpeed = typeof speed === 'function' ? speed : function () {
-    return typeof speed === 'number' ? speed : 500;
+    return speed;
   };
+
+  // 当需要显示时，动态获取图片列表
+  var displayImages = React.useMemo(function () {
+    if (visible) {
+      return collectImagesFromDOM();
+    }
+    return [];
+  }, [visible, collectImagesFromDOM]);
   return /*#__PURE__*/React.createElement(ImageViewerContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/React.createElement(PhotoProvider, {
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: containerRef
+  }, children), /*#__PURE__*/React.createElement(PhotoSlider, {
+    images: displayImages,
+    visible: visible,
+    index: viewIndex,
+    onClose: function onClose() {
+      setVisible(false);
+      onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(false, viewIndex);
+    },
+    onIndexChange: function onIndexChange(index) {
+      var _displayImages$index;
+      setViewIndex(index);
+      var src = (_displayImages$index = displayImages[index]) === null || _displayImages$index === void 0 ? void 0 : _displayImages$index.src;
+      if (src) setCurrentSrc(src);
+      _onIndexChange === null || _onIndexChange === void 0 || _onIndexChange(index);
+    },
     bannerVisible: false,
     speed: handleSpeed,
     maskOpacity: maskOpacity,
@@ -161,44 +189,19 @@ export var ImageViewerProvider = function ImageViewerProvider(_ref) {
     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;
+      var onScale = _ref2.onScale,
+        scale = _ref2.scale,
+        rotate = _ref2.rotate,
+        onRotate = _ref2.onRotate,
+        onClose = _ref2.onClose;
       overlayStateRef.current = {
-        scale: overlayScale,
-        rotate: overlayRotate,
-        visible: overlayVisible,
-        onScale: overlayOnScale,
-        onRotate: overlayOnRotate,
-        onClose: overlayOnClose,
-        index: index
+        scale: scale,
+        rotate: rotate,
+        onScale: onScale,
+        onRotate: onRotate,
+        onClose: onClose
       };
       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
-  }));
+  }), /*#__PURE__*/React.createElement(CustomToolbar, null));
 };

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

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

package/dist/component/ImageViewer/Toolbar.js

@@ -7,19 +7,57 @@ 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 { AnticlockwiseLineIcon, ClockwiseLineIcon, CloseCircleFillIcon, Download2LineIcon, FullscreenExitLineIcon, FullscreenLineIcon, ResetLeftFillIcon, SkipLeftIcon, SkipRightIcon } from "../Icons";
 import { ImageViewerContext } from "./context";
-export var CustomToolbar = function CustomToolbar(_ref) {
-  var currentSrc = _ref.currentSrc;
+var iconButtonSx = {
+  color: 'white',
+  '&:hover': {
+    backgroundColor: 'rgba(255, 255, 255, 0.1)'
+  }
+};
+var Divider = function Divider() {
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      width: '1px',
+      height: '24px',
+      backgroundColor: 'rgba(255, 255, 255, 0.3)',
+      mx: 0.5
+    }
+  });
+};
+var ZoomInIcon = function ZoomInIcon() {
+  return /*#__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"
+  }));
+};
+var ZoomOutIcon = function ZoomOutIcon() {
+  return /*#__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"
+  }));
+};
+export var CustomToolbar = function CustomToolbar() {
   var _useContext = useContext(ImageViewerContext),
     visible = _useContext.visible,
-    scale = _useContext.scale,
-    rotate = _useContext.rotate,
+    currentSrc = _useContext.currentSrc,
+    currentIndex = _useContext.currentIndex,
+    totalImages = _useContext.totalImages,
     getScale = _useContext.getScale,
     getRotate = _useContext.getRotate,
-    onScale = _useContext.onScale,
-    onRotate = _useContext.onRotate,
-    onClose = _useContext.onClose;
+    getOnScale = _useContext.getOnScale,
+    getOnRotate = _useContext.getOnRotate,
+    getOnClose = _useContext.getOnClose,
+    onPrevImage = _useContext.onPrevImage,
+    onNextImage = _useContext.onNextImage;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isFullscreen = _useState2[0],
@@ -52,13 +90,31 @@ export var CustomToolbar = function CustomToolbar(_ref) {
       (_document$exitFullscr = (_document = document).exitFullscreen) === null || _document$exitFullscr === void 0 || _document$exitFullscr.call(_document);
     }
   }, []);
+  var handleZoom = useCallback(function (delta) {
+    var onScaleFn = getOnScale();
+    if (onScaleFn) {
+      var currentScale = getScale();
+      var newScale = Math.max(0.5, Math.min(5, currentScale + delta));
+      onScaleFn(newScale);
+    }
+  }, [getOnScale, getScale]);
+  var handleRotate = useCallback(function (delta) {
+    var onRotateFn = getOnRotate();
+    if (onRotateFn) {
+      var currentRotate = getRotate();
+      onRotateFn(currentRotate + delta);
+    }
+  }, [getOnRotate, getRotate]);
   var handleReset = useCallback(function () {
-    if (onScale) onScale(1);
-    if (onRotate) onRotate(0);
-  }, [onScale, onRotate]);
-  if (!visible) {
-    return null;
-  }
+    var _getOnScale, _getOnRotate;
+    (_getOnScale = getOnScale()) === null || _getOnScale === void 0 || _getOnScale(1);
+    (_getOnRotate = getOnRotate()) === null || _getOnRotate === void 0 || _getOnRotate(0);
+  }, [getOnScale, getOnRotate]);
+  var handleClose = useCallback(function () {
+    var _getOnClose;
+    (_getOnClose = getOnClose()) === null || _getOnClose === void 0 || _getOnClose();
+  }, [getOnClose]);
+  if (!visible) return null;
   var toolbarContent = /*#__PURE__*/React.createElement(Box, {
     className: "PhotoView-Slider__toolbar-custom",
     sx: {
@@ -87,76 +143,55 @@ export var CustomToolbar = function CustomToolbar(_ref) {
       backdropFilter: 'blur(10px)'
     }
   }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: "\u4E0A\u4E00\u5F20",
+    placement: "top"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    onClick: onPrevImage,
+    sx: iconButtonSx,
+    size: "small",
+    disabled: totalImages <= 1
+  }, /*#__PURE__*/React.createElement(SkipLeftIcon, {
+    sx: {
+      fontSize: '20px'
+    }
+  }))), /*#__PURE__*/React.createElement(Tooltip, {
+    title: "\u4E0B\u4E00\u5F20",
+    placement: "top"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    onClick: onNextImage,
+    sx: iconButtonSx,
+    size: "small",
+    disabled: totalImages <= 1
+  }, /*#__PURE__*/React.createElement(SkipRightIcon, {
+    sx: {
+      fontSize: '20px'
+    }
+  }))), /*#__PURE__*/React.createElement(Divider, null), /*#__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)'
-      }
+      return handleZoom(0.5);
     },
+    sx: iconButtonSx,
     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, {
+  }, /*#__PURE__*/React.createElement(ZoomInIcon, null))), /*#__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)'
-      }
+      return handleZoom(-0.5);
     },
+    sx: iconButtonSx,
     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, {
+  }, /*#__PURE__*/React.createElement(ZoomOutIcon, null))), /*#__PURE__*/React.createElement(Divider, null), /*#__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)'
-      }
+      return handleRotate(-90);
     },
+    sx: iconButtonSx,
     size: "small"
   }, /*#__PURE__*/React.createElement(AnticlockwiseLineIcon, {
     sx: {
@@ -167,86 +202,42 @@ export var CustomToolbar = function CustomToolbar(_ref) {
     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)'
-      }
+      return handleRotate(90);
     },
+    sx: iconButtonSx,
     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, {
+  }))), /*#__PURE__*/React.createElement(Divider, null), /*#__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)'
-      }
-    },
+    sx: iconButtonSx,
     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, {
+  }))), currentSrc && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, null), /*#__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)'
-      }
-    },
+    sx: iconButtonSx,
     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, {
+  })))), /*#__PURE__*/React.createElement(Divider, null), /*#__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)'
-      }
-    },
+    sx: iconButtonSx,
     size: "small"
   }, isFullscreen ? /*#__PURE__*/React.createElement(FullscreenExitLineIcon, {
     sx: {
@@ -256,26 +247,12 @@ export var CustomToolbar = function CustomToolbar(_ref) {
     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, {
+  }))), /*#__PURE__*/React.createElement(Divider, null), /*#__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)'
-      }
-    },
+    onClick: handleClose,
+    sx: iconButtonSx,
     size: "small"
   }, /*#__PURE__*/React.createElement(CloseCircleFillIcon, {
     sx: {

package/dist/component/ImageViewer/context.js

@@ -1,22 +1,25 @@
 import React from 'react';
 export var ImageViewerContext = /*#__PURE__*/React.createContext({
-  setCurrentSrc: function setCurrentSrc() {},
+  currentSrc: '',
   visible: false,
-  setVisible: function setVisible() {},
-  scale: 1,
-  setScale: function setScale() {},
-  rotate: 0,
-  setRotate: function setRotate() {},
+  currentIndex: 0,
+  totalImages: 0,
   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() {}
+  getOnScale: function getOnScale() {
+    return null;
+  },
+  getOnRotate: function getOnRotate() {
+    return null;
+  },
+  getOnClose: function getOnClose() {
+    return null;
+  },
+  onImageClick: function onImageClick() {},
+  onPrevImage: function onPrevImage() {},
+  onNextImage: function onNextImage() {}
 });

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

@@ -6,6 +6,8 @@ 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>;
+    Item: import("react").FC<import("./types").ImageViewerItemProps & {
+        onImageClick?: ((src: string) => void) | undefined;
+    }>;
 };
 export default _default;

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 export interface ImageViewerProviderProps {
     children: ReactNode;
     speed?: number | ((type: number) => number);
@@ -22,30 +22,19 @@ export interface ImageViewerProviderProps {
 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;
+    currentSrc: string;
     visible: boolean;
-    setVisible: (visible: boolean) => void;
-    scale: number;
-    setScale: (scale: number) => void;
-    rotate: number;
-    setRotate: (rotate: number) => void;
+    currentIndex: number;
+    totalImages: number;
     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;
+    getOnScale: () => ((scale: number) => void) | null;
+    getOnRotate: () => ((rotate: number) => void) | null;
+    getOnClose: () => (() => void) | null;
+    onImageClick: (src: string) => void;
+    onPrevImage: () => void;
+    onNextImage: () => void;
 }

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

@@ -181,7 +181,7 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
       e.stopPropagation();
       return;
     }
-    // 允许 PhotoView 处理点击事件进行预览
+    // 事件会冒泡到 ImageViewerItem 处理
   };
   var handleMouseMove = useCallback(function (e) {
     if (!isDragging || !dragCorner) return;

package/package.json

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