npm - @opentiny/fluent-editor - Versions diffs - 4.1.0-alpha.2 → 4.1.0-alpha.3 - Mend

@opentiny/fluent-editor 4.1.0-alpha.2 → 4.1.0-alpha.3

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.

Files changed (34) hide show

package/es/index.es.js CHANGED Viewed

@@ -29,6 +29,7 @@ import { CustomImage } from "./modules/custom-image/image.es.js";
 import { BlotSpec } from "./modules/custom-image/specs/blot-spec.es.js";
 import { CustomImageSpec } from "./modules/custom-image/specs/custom-image-spec.es.js";
 import { ImageSpec } from "./modules/custom-image/specs/image-spec.es.js";
+import { ImagePreviewModal, getImagePreviewModal } from "./modules/custom-image/preview/preview-modal.es.js";
 import { FileUploader } from "./modules/custom-uploader.es.js";
 import { DividerBlot } from "./modules/divider.es.js";
 import { EmojiModule } from "./modules/emoji.es.js";
@@ -84,6 +85,7 @@ export {
   FontStyle,
   I18N,
   IMAGE_UPLOADER_MIME_TYPES,
+  ImagePreviewModal,
   ImageSpec,
   ImageToolbar,
   ImageToolbarAction,
@@ -118,6 +120,7 @@ export {
   generateTableUpShortKeyMenu,
   generateToolbarTip,
   getEventComposedPath,
+  getImagePreviewModal,
   getListValue,
   hadProtocol,
   hexToRgbA,

package/es/index.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/es/modules/custom-image/actions/image-toolbar-buttons.es.js CHANGED Viewed

@@ -2,7 +2,9 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { isBoolean, isObject } from "../../../utils/is.es.js";
-import { COPY, DOWNLOAD, RIGHT_ALIGN, CENTER_ALIGN, LEFT_ALIGN } from "../options.es.js";
+import { PREVIEW, COPY, DOWNLOAD, RIGHT_ALIGN, CENTER_ALIGN, LEFT_ALIGN } from "../options.es.js";
+import "../preview/index.es.js";
+import { getImagePreviewModal } from "../preview/preview-modal.es.js";
 const ALIGN_ATTR = "data-align";
 function setAlignStyle(el, display, float, margin) {
   el.style.setProperty("display", display);
@@ -106,6 +108,17 @@ const defaultButtons = {
     apply: (el, toolbarButtons) => {
       alignmentHandler.copy(el, toolbarButtons);
     }
+  },
+  [PREVIEW]: {
+    name: PREVIEW,
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path class="ql-fill" d="M16 7c-4.96 0-9.23 3.13-11 7.5 1.77 4.37 6.04 7.5 11 7.5s9.23-3.13 11-7.5c-1.77-4.37-6.04-7.5-11-7.5zm0 12c-2.49 0-4.5-2.01-4.5-4.5S13.51 10 16 10s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5zm0-7c-1.38 0-2.5 1.12-2.5 2.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5-1.12-2.5-2.5-2.5z"/></svg>`,
+    apply: (el, toolbarButtons) => {
+      const imageSrc = el.getAttribute("src") || el.getAttribute("data-src");
+      if (imageSrc) {
+        const modal = getImagePreviewModal();
+        modal.show(imageSrc);
+      }
+    }
   }
 };
 class ImageToolbarButtons {

package/es/modules/custom-image/actions/image-toolbar-buttons.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"image-toolbar-buttons.es.js","sources":["../../../../../src/modules/custom-image/actions/image-toolbar-buttons.ts"],"sourcesContent":["import type { ToolbarButtonOptions, ToolButtonOption } from '../options'\r\nimport { isBoolean, isObject } from '../../../utils/is'\r\nimport { CENTER_ALIGN, COPY, DOWNLOAD, LEFT_ALIGN, RIGHT_ALIGN } from '../options'\r\n\r\nexport const ALIGN_ATTR = 'data-align'\r\n\r\nexport function setAlignStyle(el: HTMLElement, display: string \| null, float: string \| null, margin: string \| null) {\r\n el.style.setProperty('display', display)\r\n el.style.setProperty('float', float)\r\n el.style.setProperty('margin', margin)\r\n}\r\nexport const alignmentHandler = {\r\n left: (el: HTMLElement, toolbarButtons: ImageToolbarButtons) => {\r\n setAlignStyle(el, 'inline', 'left', '0 1em 1em 0')\r\n },\r\n center: (el: HTMLElement, toolbarButtons: ImageToolbarButtons) => {\r\n setAlignStyle(el, 'block', null, 'auto')\r\n },\r\n right: (el: HTMLElement, toolbarButtons: ImageToolbarButtons) => {\r\n setAlignStyle(el, 'inline', 'right', '0 0 1em 1em')\r\n },\r\n download: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n const imageName = el.dataset.title \|\| 'image'\r\n const url = el.src \|\| ''\r\n if (!url) return\r\n const a = document.createElement('a')\r\n a.href = url\r\n a.target = '_blank'\r\n a.download = imageName\r\n a.style.display = 'none'\r\n document.body.appendChild(a)\r\n a.click()\r\n a.parentNode.removeChild(a)\r\n },\r\n copy: async (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n if (!el.src) return\r\n const imageUrl = el.src\r\n try {\r\n const response = await fetch(imageUrl)\r\n if (!response.ok) {\r\n throw new Error('Copy image failed')\r\n }\r\n const blob = await response.blob()\r\n await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })])\r\n }\r\n catch (e) {\r\n throw new Error('Copy image failed')\r\n }\r\n },\r\n}\r\nconst defaultButtons: Record<string, ToolButtonOption> = {\r\n [LEFT_ALIGN]: {\r\n name: LEFT_ALIGN,\r\n icon: `\r\n <svg viewbox=\"0 0 18 18\">\r\n <line class=\"ql-stroke\" x1=\"3\" x2=\"15\" y1=\"9\" y2=\"9\"></line>\r\n <line class=\"ql-stroke\" x1=\"3\" x2=\"13\" y1=\"14\" y2=\"14\"></line>\r\n <line class=\"ql-stroke\" x1=\"3\" x2=\"9\" y1=\"4\" y2=\"4\"></line>\r\n </svg>\r\n `,\r\n isActive: el => el.getAttribute(ALIGN_ATTR) === 'left',\r\n apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n el.setAttribute(ALIGN_ATTR, 'left')\r\n alignmentHandler.left(el, toolbarButtons)\r\n },\r\n },\r\n [CENTER_ALIGN]: {\r\n name: CENTER_ALIGN,\r\n icon: `\r\n <svg viewbox=\"0 0 18 18\">\r\n <line class=\"ql-stroke\" x1=\"15\" x2=\"3\" y1=\"9\" y2=\"9\"></line>\r\n <line class=\"ql-stroke\" x1=\"14\" x2=\"4\" y1=\"14\" y2=\"14\"></line>\r\n <line class=\"ql-stroke\" x1=\"12\" x2=\"6\" y1=\"4\" y2=\"4\"></line>\r\n </svg>\r\n `,\r\n isActive: el => el.getAttribute(ALIGN_ATTR) === 'center',\r\n apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n el.setAttribute(ALIGN_ATTR, 'center')\r\n alignmentHandler.center(el, toolbarButtons)\r\n },\r\n },\r\n [RIGHT_ALIGN]: {\r\n name: RIGHT_ALIGN,\r\n icon: `\r\n <svg viewbox=\"0 0 18 18\">\r\n <line class=\"ql-stroke\" x1=\"15\" x2=\"3\" y1=\"9\" y2=\"9\"></line>\r\n <line class=\"ql-stroke\" x1=\"15\" x2=\"5\" y1=\"14\" y2=\"14\"></line>\r\n <line class=\"ql-stroke\" x1=\"15\" x2=\"9\" y1=\"4\" y2=\"4\"></line>\r\n </svg>\r\n `,\r\n isActive: el => el.getAttribute(ALIGN_ATTR) === 'right',\r\n apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n el.setAttribute(ALIGN_ATTR, 'right')\r\n alignmentHandler.right(el, toolbarButtons)\r\n },\r\n },\r\n [DOWNLOAD]: {\r\n name: DOWNLOAD,\r\n icon: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"><path class=\"ql-fill\" d=\"M26 24v4H6v-4H4v4a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2v-4zm0-10l-1.41-1.41L17 20.17V2h-2v18.17l-7.59-7.58L6 14l10 10z\"/></svg>`,\r\n apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n alignmentHandler.download(el, toolbarButtons)\r\n },\r\n },\r\n [COPY]: {\r\n name: COPY,\r\n icon: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"><path class=\"ql-fill\" d=\"M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2\"/><path class=\"ql-fill\" d=\"M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z\"/></svg>`,\r\n apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n alignmentHandler.copy(el, toolbarButtons)\r\n },\r\n },\r\n}\r\nexport class ImageToolbarButtons {\r\n buttons: Record<string, ToolButtonOption>\r\n\r\n constructor(options: ToolbarButtonOptions) {\r\n this.buttons = Object.entries(options.buttons).reduce((acc, [name, button]) => {\r\n if (isBoolean(button) && button && defaultButtons[name]) {\r\n acc[name] = defaultButtons[name]\r\n }\r\n else if (isObject(button)) {\r\n acc[button.name] = button\r\n }\r\n return acc\r\n }, {})\r\n }\r\n\r\n getItems(): ToolButtonOption[] {\r\n return Object.keys(this.buttons).map(k => this.buttons[k])\r\n }\r\n\r\n clear(el: HTMLElement): void {\r\n el.removeAttribute(ALIGN_ATTR)\r\n setAlignStyle(el, null, null, null)\r\n }\r\n}\r\n"],"names":[],"mappings":"~~;;;;;AAIO~~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"}
1	+ {"version":3,"file":"image-toolbar-buttons.es.js","sources":["../../../../../src/modules/custom-image/actions/image-toolbar-buttons.ts"],"sourcesContent":["import type { ToolbarButtonOptions, ToolButtonOption } from '../options'\r\nimport { isBoolean, isObject } from '../../../utils/is'\r\nimport { CENTER_ALIGN, COPY, DOWNLOAD, LEFT_ALIGN, PREVIEW, RIGHT_ALIGN } from '../options'\r\nimport { getImagePreviewModal } from '../preview'\r\n\r\nexport const ALIGN_ATTR = 'data-align'\r\n\r\nexport function setAlignStyle(el: HTMLElement, display: string \| null, float: string \| null, margin: string \| null) {\r\n el.style.setProperty('display', display)\r\n el.style.setProperty('float', float)\r\n el.style.setProperty('margin', margin)\r\n}\r\nexport const alignmentHandler = {\r\n left: (el: HTMLElement, toolbarButtons: ImageToolbarButtons) => {\r\n setAlignStyle(el, 'inline', 'left', '0 1em 1em 0')\r\n },\r\n center: (el: HTMLElement, toolbarButtons: ImageToolbarButtons) => {\r\n setAlignStyle(el, 'block', null, 'auto')\r\n },\r\n right: (el: HTMLElement, toolbarButtons: ImageToolbarButtons) => {\r\n setAlignStyle(el, 'inline', 'right', '0 0 1em 1em')\r\n },\r\n download: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n const imageName = el.dataset.title \|\| 'image'\r\n const url = el.src \|\| ''\r\n if (!url) return\r\n const a = document.createElement('a')\r\n a.href = url\r\n a.target = '_blank'\r\n a.download = imageName\r\n a.style.display = 'none'\r\n document.body.appendChild(a)\r\n a.click()\r\n a.parentNode.removeChild(a)\r\n },\r\n copy: async (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n if (!el.src) return\r\n const imageUrl = el.src\r\n try {\r\n const response = await fetch(imageUrl)\r\n if (!response.ok) {\r\n throw new Error('Copy image failed')\r\n }\r\n const blob = await response.blob()\r\n await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })])\r\n }\r\n catch (e) {\r\n throw new Error('Copy image failed')\r\n }\r\n },\r\n}\r\nconst defaultButtons: Record<string, ToolButtonOption> = {\r\n [LEFT_ALIGN]: {\r\n name: LEFT_ALIGN,\r\n icon: `\r\n <svg viewbox=\"0 0 18 18\">\r\n <line class=\"ql-stroke\" x1=\"3\" x2=\"15\" y1=\"9\" y2=\"9\"></line>\r\n <line class=\"ql-stroke\" x1=\"3\" x2=\"13\" y1=\"14\" y2=\"14\"></line>\r\n <line class=\"ql-stroke\" x1=\"3\" x2=\"9\" y1=\"4\" y2=\"4\"></line>\r\n </svg>\r\n `,\r\n isActive: el => el.getAttribute(ALIGN_ATTR) === 'left',\r\n apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n el.setAttribute(ALIGN_ATTR, 'left')\r\n alignmentHandler.left(el, toolbarButtons)\r\n },\r\n },\r\n [CENTER_ALIGN]: {\r\n name: CENTER_ALIGN,\r\n icon: `\r\n <svg viewbox=\"0 0 18 18\">\r\n <line class=\"ql-stroke\" x1=\"15\" x2=\"3\" y1=\"9\" y2=\"9\"></line>\r\n <line class=\"ql-stroke\" x1=\"14\" x2=\"4\" y1=\"14\" y2=\"14\"></line>\r\n <line class=\"ql-stroke\" x1=\"12\" x2=\"6\" y1=\"4\" y2=\"4\"></line>\r\n </svg>\r\n `,\r\n isActive: el => el.getAttribute(ALIGN_ATTR) === 'center',\r\n apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n el.setAttribute(ALIGN_ATTR, 'center')\r\n alignmentHandler.center(el, toolbarButtons)\r\n },\r\n },\r\n [RIGHT_ALIGN]: {\r\n name: RIGHT_ALIGN,\r\n icon: `\r\n <svg viewbox=\"0 0 18 18\">\r\n <line class=\"ql-stroke\" x1=\"15\" x2=\"3\" y1=\"9\" y2=\"9\"></line>\r\n <line class=\"ql-stroke\" x1=\"15\" x2=\"5\" y1=\"14\" y2=\"14\"></line>\r\n <line class=\"ql-stroke\" x1=\"15\" x2=\"9\" y1=\"4\" y2=\"4\"></line>\r\n </svg>\r\n `,\r\n isActive: el => el.getAttribute(ALIGN_ATTR) === 'right',\r\n apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n el.setAttribute(ALIGN_ATTR, 'right')\r\n alignmentHandler.right(el, toolbarButtons)\r\n },\r\n },\r\n [DOWNLOAD]: {\r\n name: DOWNLOAD,\r\n icon: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"><path class=\"ql-fill\" d=\"M26 24v4H6v-4H4v4a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2v-4zm0-10l-1.41-1.41L17 20.17V2h-2v18.17l-7.59-7.58L6 14l10 10z\"/></svg>`,\r\n apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n alignmentHandler.download(el, toolbarButtons)\r\n },\r\n },\r\n [COPY]: {\r\n name: COPY,\r\n icon: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"><path class=\"ql-fill\" d=\"M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2\"/><path class=\"ql-fill\" d=\"M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z\"/></svg>`,\r\n apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n alignmentHandler.copy(el, toolbarButtons)\r\n },\r\n },\r\n [PREVIEW]: {\r\n name: PREVIEW,\r\n icon: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"><path class=\"ql-fill\" d=\"M16 7c-4.96 0-9.23 3.13-11 7.5 1.77 4.37 6.04 7.5 11 7.5s9.23-3.13 11-7.5c-1.77-4.37-6.04-7.5-11-7.5zm0 12c-2.49 0-4.5-2.01-4.5-4.5S13.51 10 16 10s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5zm0-7c-1.38 0-2.5 1.12-2.5 2.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5-1.12-2.5-2.5-2.5z\"/></svg>`,\r\n apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n const imageSrc = el.getAttribute('src') \|\| el.getAttribute('data-src')\r\n if (imageSrc) {\r\n const modal = getImagePreviewModal()\r\n modal.show(imageSrc)\r\n }\r\n },\r\n },\r\n}\r\nexport class ImageToolbarButtons {\r\n buttons: Record<string, ToolButtonOption>\r\n\r\n constructor(options: ToolbarButtonOptions) {\r\n this.buttons = Object.entries(options.buttons).reduce((acc, [name, button]) => {\r\n if (isBoolean(button) && button && defaultButtons[name]) {\r\n acc[name] = defaultButtons[name]\r\n }\r\n else if (isObject(button)) {\r\n acc[button.name] = button\r\n }\r\n return acc\r\n }, {})\r\n }\r\n\r\n getItems(): ToolButtonOption[] {\r\n return Object.keys(this.buttons).map(k => this.buttons[k])\r\n }\r\n\r\n clear(el: HTMLElement): void {\r\n el.removeAttribute(ALIGN_ATTR)\r\n setAlignStyle(el, null, null, null)\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}

package/es/modules/custom-image/index.es.js CHANGED Viewed

@@ -2,6 +2,7 @@ import "./actions/index.es.js";
 import { BlotFormatter } from "./blot-formatter.es.js";
 import { CustomImage } from "./image.es.js";
 import "./specs/index.es.js";
+import "./preview/index.es.js";
 export {
   BlotFormatter,
   CustomImage

package/es/modules/custom-image/index.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;~~"}
1	+ {"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/es/modules/custom-image/options.es.js CHANGED Viewed

@@ -5,6 +5,7 @@ const CENTER_ALIGN = "align-center";
 const RIGHT_ALIGN = "align-right";
 const COPY = "copy";
 const DOWNLOAD = "download";
+const PREVIEW = "preview";
 const DefaultOptions = {
   // 默认情况下，`file://` 格式的本地文件路径在浏览器环境无法读取，因此会被转换成 `//:0`，但是在一些特殊的场景下（比如：Electron），需要获取到图片的原始路径，进行后续的上传处理
   // 注意：该选项一旦设置为 true，本地磁盘路径会暴露出去，这可能会带来安全风险，请确保你了解相关的安全隐患
@@ -61,7 +62,8 @@ const DefaultOptions = {
       [CENTER_ALIGN]: true,
       [RIGHT_ALIGN]: true,
       [COPY]: true,
-      [DOWNLOAD]: true
+      [DOWNLOAD]: true,
+      [PREVIEW]: true
     }
   },
   resize: {
@@ -82,6 +84,7 @@ export {
   COPY,
   DOWNLOAD,
   LEFT_ALIGN,
+  PREVIEW,
   RIGHT_ALIGN,
   DefaultOptions as default
 };

package/es/modules/custom-image/options.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"options.es.js","sources":["../../../../src/modules/custom-image/options.ts"],"sourcesContent":["import type { ImageToolbar, ImageToolbarButtons } from './actions'\nimport type { BlotSpec } from './specs'\nimport { ImageSpec } from './specs'\n\nexport interface OverlayOptions {\n // classname applied to the overlay element\n className: string\n // style applied to overlay element, or null to prevent styles\n style: Record<string, string>\n}\n\nexport interface ResizeOptions {\n // class name applied to the resize handles\n handleClassName: string\n // style applied to resize handles, or null to prevent styles\n handleStyle: Record<string, string>\n}\n\nexport interface ToolButtonOption {\n name: string\n icon: string\n isActive?: (el: HTMLElement) => boolean\n apply: (this: ImageToolbar, el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => void\n}\n\nexport interface ToolbarButtonOptions {\n buttons: Record<string, ToolButtonOption \| boolean>\n}\n\nexport interface ToolbarOptions extends ToolbarButtonOptions {\n // class name applied to the root toolbar element\n mainClassName: string\n // style applied to root toolbar element, or null to prevent styles\n mainStyle: Record<string, unknown>\n // class name applied to each button in the toolbar\n buttonClassName: string\n /* whether or not to add the selected style to the buttons.\n they'll always get the is-selected class */\n addButtonSelectStyle: boolean\n // style applied to buttons, or null to prevent styles\n buttonStyle: Record<string, unknown>\n // style applied to the svgs in the buttons\n svgStyle: Record<string, unknown>\n}\n\nexport interface BlotFormatterOptionsInput {\n specs: typeof BlotSpec[]\n overlay: Partial<OverlayOptions>\n resize: Partial<ResizeOptions>\n toolbar: Partial<ToolbarOptions>\n}\nexport interface BlotFormatterOptions {\n specs: typeof BlotSpec[]\n overlay: OverlayOptions\n resize: ResizeOptions\n toolbar: ToolbarOptions\n allowInvalidUrl: boolean\n}\n\nexport const LEFT_ALIGN = 'align-left'\nexport const CENTER_ALIGN = 'align-center'\nexport const RIGHT_ALIGN = 'align-right'\nexport const COPY = 'copy'\nexport const DOWNLOAD = 'download'\nconst DefaultOptions: BlotFormatterOptions = {\n // 默认情况下，`file://` 格式的本地文件路径在浏览器环境无法读取，因此会被转换成 `//:0`，但是在一些特殊的场景下（比如：Electron），需要获取到图片的原始路径，进行后续的上传处理\n // 注意：该选项一旦设置为 true，本地磁盘路径会暴露出去，这可能会带来安全风险，请确保你了解相关的安全隐患\n allowInvalidUrl: false,\n\n specs: [\n ImageSpec,\n ],\n overlay: {\n className: 'blot-formatter__overlay',\n style: {\n position: 'absolute',\n boxSizing: 'border-box',\n border: '1px dashed #444',\n },\n },\n toolbar: {\n mainClassName: 'blot-formatter__toolbar',\n mainStyle: {\n position: 'absolute',\n top: '-12px',\n right: '0',\n left: '0',\n height: '0',\n minWidth: '120px',\n font: '12px/1.0 Arial, Helvetica, sans-serif',\n textAlign: 'center',\n color: '#333',\n boxSizing: 'border-box',\n cursor: 'default',\n zIndex: '1',\n },\n buttonClassName: 'blot-formatter__toolbar-button',\n addButtonSelectStyle: true,\n buttonStyle: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '24px',\n height: '24px',\n background: 'white',\n border: '1px solid #999',\n verticalAlign: 'middle',\n cursor: 'pointer',\n },\n svgStyle: {\n display: 'inline-block',\n width: '16px',\n height: '16px',\n background: 'white',\n verticalAlign: 'middle',\n },\n buttons: {\n [LEFT_ALIGN]: true,\n [CENTER_ALIGN]: true,\n [RIGHT_ALIGN]: true,\n [COPY]: true,\n [DOWNLOAD]: true,\n },\n },\n resize: {\n handleClassName: 'blot-formatter__resize-handle',\n handleStyle: {\n position: 'absolute',\n height: '12px',\n width: '12px',\n backgroundColor: 'white',\n border: '1px solid #777',\n boxSizing: 'border-box',\n opacity: '0.80',\n },\n },\n}\n\nexport default DefaultOptions\n"],"names":[],"mappings":";;AA2DO,MAAM,aAAa;AACnB,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,OAAO;AACb,MAAM,WAAW;~~AACxB~~,MAAM,iBAAuC;AAAA;AAAA;AAAA,EAG3C,iBAAiB;AAAA,EAEjB,OAAO;AAAA,IACL;AAAA,EAAA;AAAA,EAEF,SAAS;AAAA,IACP,WAAW;AAAA,IACX,OAAO;AAAA,MACL,UAAU;AAAA,MACV,WAAW;AAAA,MACX,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,SAAS;AAAA,IACP,eAAe;AAAA,IACf,WAAW;AAAA,MACT,UAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAO;AAAA,MACP,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA,MACP,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,QAAQ;AAAA,IAAA;AAAA,IAEV,iBAAiB;AAAA,IACjB,sBAAsB;AAAA,IACtB,aAAa;AAAA,MACX,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,QAAQ;AAAA,IAAA;AAAA,IAEV,UAAU;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,eAAe;AAAA,IAAA;AAAA,IAEjB,SAAS;AAAA,MACP,CAAC,UAAU,GAAG;AAAA,MACd,CAAC,YAAY,GAAG;AAAA,MAChB,CAAC,WAAW,GAAG;AAAA,MACf,CAAC,IAAI,GAAG;AAAA,MACR,CAAC,QAAQ,GAAG;AAAA,IAAA;AAAA,~~EACd~~;AAAA,EAEF,QAAQ;AAAA,IACN,iBAAiB;AAAA,IACjB,aAAa;AAAA,MACX,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,iBAAiB;AAAA,MACjB,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;"}
1	+ {"version":3,"file":"options.es.js","sources":["../../../../src/modules/custom-image/options.ts"],"sourcesContent":["import type { ImageToolbar, ImageToolbarButtons } from './actions'\nimport type { BlotSpec } from './specs'\nimport { ImageSpec } from './specs'\n\nexport interface OverlayOptions {\n // classname applied to the overlay element\n className: string\n // style applied to overlay element, or null to prevent styles\n style: Record<string, string>\n}\n\nexport interface ResizeOptions {\n // class name applied to the resize handles\n handleClassName: string\n // style applied to resize handles, or null to prevent styles\n handleStyle: Record<string, string>\n}\n\nexport interface ToolButtonOption {\n name: string\n icon: string\n isActive?: (el: HTMLElement) => boolean\n apply: (this: ImageToolbar, el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => void\n}\n\nexport interface ToolbarButtonOptions {\n buttons: Record<string, ToolButtonOption \| boolean>\n}\n\nexport interface ToolbarOptions extends ToolbarButtonOptions {\n // class name applied to the root toolbar element\n mainClassName: string\n // style applied to root toolbar element, or null to prevent styles\n mainStyle: Record<string, unknown>\n // class name applied to each button in the toolbar\n buttonClassName: string\n /* whether or not to add the selected style to the buttons.\n they'll always get the is-selected class */\n addButtonSelectStyle: boolean\n // style applied to buttons, or null to prevent styles\n buttonStyle: Record<string, unknown>\n // style applied to the svgs in the buttons\n svgStyle: Record<string, unknown>\n}\n\nexport interface BlotFormatterOptionsInput {\n specs: typeof BlotSpec[]\n overlay: Partial<OverlayOptions>\n resize: Partial<ResizeOptions>\n toolbar: Partial<ToolbarOptions>\n}\nexport interface BlotFormatterOptions {\n specs: typeof BlotSpec[]\n overlay: OverlayOptions\n resize: ResizeOptions\n toolbar: ToolbarOptions\n allowInvalidUrl: boolean\n}\n\nexport const LEFT_ALIGN = 'align-left'\nexport const CENTER_ALIGN = 'align-center'\nexport const RIGHT_ALIGN = 'align-right'\nexport const COPY = 'copy'\nexport const DOWNLOAD = 'download'\nexport const PREVIEW = 'preview'\nconst DefaultOptions: BlotFormatterOptions = {\n // 默认情况下，`file://` 格式的本地文件路径在浏览器环境无法读取，因此会被转换成 `//:0`，但是在一些特殊的场景下（比如：Electron），需要获取到图片的原始路径，进行后续的上传处理\n // 注意：该选项一旦设置为 true，本地磁盘路径会暴露出去，这可能会带来安全风险，请确保你了解相关的安全隐患\n allowInvalidUrl: false,\n\n specs: [\n ImageSpec,\n ],\n overlay: {\n className: 'blot-formatter__overlay',\n style: {\n position: 'absolute',\n boxSizing: 'border-box',\n border: '1px dashed #444',\n },\n },\n toolbar: {\n mainClassName: 'blot-formatter__toolbar',\n mainStyle: {\n position: 'absolute',\n top: '-12px',\n right: '0',\n left: '0',\n height: '0',\n minWidth: '120px',\n font: '12px/1.0 Arial, Helvetica, sans-serif',\n textAlign: 'center',\n color: '#333',\n boxSizing: 'border-box',\n cursor: 'default',\n zIndex: '1',\n },\n buttonClassName: 'blot-formatter__toolbar-button',\n addButtonSelectStyle: true,\n buttonStyle: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '24px',\n height: '24px',\n background: 'white',\n border: '1px solid #999',\n verticalAlign: 'middle',\n cursor: 'pointer',\n },\n svgStyle: {\n display: 'inline-block',\n width: '16px',\n height: '16px',\n background: 'white',\n verticalAlign: 'middle',\n },\n buttons: {\n [LEFT_ALIGN]: true,\n [CENTER_ALIGN]: true,\n [RIGHT_ALIGN]: true,\n [COPY]: true,\n [DOWNLOAD]: true,\n [PREVIEW]: true,\n },\n },\n resize: {\n handleClassName: 'blot-formatter__resize-handle',\n handleStyle: {\n position: 'absolute',\n height: '12px',\n width: '12px',\n backgroundColor: 'white',\n border: '1px solid #777',\n boxSizing: 'border-box',\n opacity: '0.80',\n },\n },\n}\n\nexport default DefaultOptions\n"],"names":[],"mappings":";;AA2DO,MAAM,aAAa;AACnB,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,OAAO;AACb,MAAM,WAAW;AACjB,MAAM,UAAU;AACvB,MAAM,iBAAuC;AAAA;AAAA;AAAA,EAG3C,iBAAiB;AAAA,EAEjB,OAAO;AAAA,IACL;AAAA,EAAA;AAAA,EAEF,SAAS;AAAA,IACP,WAAW;AAAA,IACX,OAAO;AAAA,MACL,UAAU;AAAA,MACV,WAAW;AAAA,MACX,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,SAAS;AAAA,IACP,eAAe;AAAA,IACf,WAAW;AAAA,MACT,UAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAO;AAAA,MACP,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA,MACP,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,QAAQ;AAAA,IAAA;AAAA,IAEV,iBAAiB;AAAA,IACjB,sBAAsB;AAAA,IACtB,aAAa;AAAA,MACX,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,QAAQ;AAAA,IAAA;AAAA,IAEV,UAAU;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,eAAe;AAAA,IAAA;AAAA,IAEjB,SAAS;AAAA,MACP,CAAC,UAAU,GAAG;AAAA,MACd,CAAC,YAAY,GAAG;AAAA,MAChB,CAAC,WAAW,GAAG;AAAA,MACf,CAAC,IAAI,GAAG;AAAA,MACR,CAAC,QAAQ,GAAG;AAAA,MACZ,CAAC,OAAO,GAAG;AAAA,IAAA;AAAA,EACb;AAAA,EAEF,QAAQ;AAAA,IACN,iBAAiB;AAAA,IACjB,aAAa;AAAA,MACX,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,iBAAiB;AAAA,MACjB,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;"}

package/es/modules/custom-image/preview/index.es.js ADDED Viewed

@@ -0,0 +1,6 @@
+import { ImagePreviewModal, getImagePreviewModal } from "./preview-modal.es.js";
+export {
+  ImagePreviewModal,
+  getImagePreviewModal
+};
+//# sourceMappingURL=index.es.js.map

package/es/modules/custom-image/preview/index.es.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/es/modules/custom-image/preview/preview-modal.es.js ADDED Viewed

@@ -0,0 +1,230 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+class ImagePreviewModal {
+  constructor() {
+    __publicField(this, "modal", null);
+    __publicField(this, "overlay", null);
+    __publicField(this, "previewImage", null);
+    __publicField(this, "scaleTooltip", null);
+    __publicField(this, "currentScale", 1);
+    __publicField(this, "minScale", 0.5);
+    __publicField(this, "maxScale", 3);
+    __publicField(this, "scaleStep", 0.1);
+    __publicField(this, "tooltipHideTimer", null);
+    /**
+     * 处理鼠标滚轮事件 - 缩放图片
+     */
+    __publicField(this, "onMouseWheel", (event) => {
+      if (!this.modal || this.modal.style.display === "none") {
+        return;
+      }
+      event.preventDefault();
+      const delta = event.deltaY > 0 ? -this.scaleStep : this.scaleStep;
+      this.setScale(this.currentScale + delta);
+      this.showScaleTooltip();
+    });
+    this.initModal();
+  }
+  initModal() {
+    this.overlay = document.createElement("div");
+    this.overlay.className = "image-preview-overlay";
+    this.overlay.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.8);
+      display: none;
+      z-index: 9999;
+      cursor: pointer;
+    `;
+    this.modal = document.createElement("div");
+    this.modal.className = "image-preview-modal";
+    this.modal.style.cssText = `
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: transparent;
+      display: none;
+      z-index: 10000;
+      max-width: 90vw;
+      max-height: 90vh;
+      cursor: auto;
+    `;
+    this.previewImage = document.createElement("img");
+    this.previewImage.className = "image-preview-img";
+    this.previewImage.style.cssText = `
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+      border-radius: 4px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      transition: transform 0.2s ease-out;
+      cursor: grab;
+    `;
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "image-preview-close";
+    closeBtn.innerHTML = "×";
+    closeBtn.style.cssText = `
+      position: absolute;
+      top: -40px;
+      right: 0;
+      width: 40px;
+      height: 40px;
+      border: none;
+      background-color: transparent;
+      color: white;
+      font-size: 32px;
+      cursor: pointer;
+      z-index: 10001;
+      line-height: 1;
+      padding: 0;
+    `;
+    closeBtn.addEventListener("click", () => this.hide());
+    this.modal.appendChild(this.previewImage);
+    this.modal.appendChild(closeBtn);
+    this.scaleTooltip = document.createElement("div");
+    this.scaleTooltip.className = "image-preview-scale-tooltip";
+    this.scaleTooltip.style.cssText = `
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: rgba(0, 0, 0, 0.7);
+      color: white;
+      padding: 12px 20px;
+      border-radius: 6px;
+      font-size: 14px;
+      z-index: 10002;
+      display: none;
+      pointer-events: none;
+      white-space: nowrap;
+      font-weight: 500;
+    `;
+    document.body.appendChild(this.scaleTooltip);
+    this.overlay.addEventListener("click", () => this.hide());
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
+        this.hide();
+      }
+    });
+    document.addEventListener("wheel", (e) => this.onMouseWheel(e), { passive: false });
+    this.modal.addEventListener("click", (e) => {
+      e.stopPropagation();
+    });
+    document.body.appendChild(this.overlay);
+    document.body.appendChild(this.modal);
+  }
+  /**
+   * 设置缩放比例
+   */
+  setScale(scale) {
+    this.currentScale = Math.max(this.minScale, Math.min(scale, this.maxScale));
+    if (this.previewImage) {
+      this.previewImage.style.transform = `scale(${this.currentScale})`;
+    }
+  }
+  /**
+   * 显示缩放百分比提示
+   */
+  showScaleTooltip() {
+    if (!this.scaleTooltip) {
+      return;
+    }
+    if (this.tooltipHideTimer !== null) {
+      clearTimeout(this.tooltipHideTimer);
+    }
+    const percentage = Math.round(this.currentScale * 100);
+    this.scaleTooltip.textContent = `${percentage}%`;
+    this.scaleTooltip.style.display = "block";
+    this.tooltipHideTimer = window.setTimeout(() => {
+      if (this.scaleTooltip) {
+        this.scaleTooltip.style.display = "none";
+      }
+      this.tooltipHideTimer = null;
+    }, 1500);
+  }
+  /**
+   * 隐藏缩放提示
+   */
+  hideScaleTooltip() {
+    if (this.tooltipHideTimer !== null) {
+      clearTimeout(this.tooltipHideTimer);
+      this.tooltipHideTimer = null;
+    }
+    if (this.scaleTooltip) {
+      this.scaleTooltip.style.display = "none";
+    }
+  }
+  /**
+   * 重置缩放比例
+   */
+  resetScale() {
+    this.currentScale = 1;
+    if (this.previewImage) {
+      this.previewImage.style.transform = "scale(1)";
+    }
+    this.hideScaleTooltip();
+  }
+  /**
+   * 显示预览
+   * @param imageUrl 图片URL
+   */
+  show(imageUrl) {
+    if (!this.previewImage || !this.modal || !this.overlay) {
+      return;
+    }
+    this.resetScale();
+    this.previewImage.src = imageUrl;
+    this.modal.style.display = "flex";
+    this.modal.style.alignItems = "center";
+    this.modal.style.justifyContent = "center";
+    this.overlay.style.display = "block";
+    document.body.style.overflow = "hidden";
+  }
+  /**
+   * 隐藏预览
+   */
+  hide() {
+    if (this.modal && this.overlay) {
+      this.modal.style.display = "none";
+      this.overlay.style.display = "none";
+      document.body.style.overflow = "";
+      this.resetScale();
+    }
+  }
+  /**
+   * 销毁预览模态框
+   */
+  destroy() {
+    this.hideScaleTooltip();
+    if (this.overlay && this.overlay.parentNode) {
+      this.overlay.parentNode.removeChild(this.overlay);
+    }
+    if (this.modal && this.modal.parentNode) {
+      this.modal.parentNode.removeChild(this.modal);
+    }
+    if (this.scaleTooltip && this.scaleTooltip.parentNode) {
+      this.scaleTooltip.parentNode.removeChild(this.scaleTooltip);
+    }
+    this.modal = null;
+    this.overlay = null;
+    this.previewImage = null;
+    this.scaleTooltip = null;
+  }
+}
+let globalPreviewModal = null;
+function getImagePreviewModal() {
+  if (!globalPreviewModal) {
+    globalPreviewModal = new ImagePreviewModal();
+  }
+  return globalPreviewModal;
+}
+export {
+  ImagePreviewModal,
+  getImagePreviewModal
+};
+//# sourceMappingURL=preview-modal.es.js.map

package/es/modules/custom-image/preview/preview-modal.es.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"preview-modal.es.js","sources":["../../../../../src/modules/custom-image/preview/preview-modal.ts"],"sourcesContent":["/**\n * 图片预览模态框\n * 提供图片双击时的预览功能，包括遮罩层和全屏预览\n */\n\nexport class ImagePreviewModal {\n private modal: HTMLElement | null = null\n private overlay: HTMLElement | null = null\n private previewImage: HTMLImageElement | null = null\n private scaleTooltip: HTMLElement | null = null\n private currentScale: number = 1\n private minScale: number = 0.5\n private maxScale: number = 3\n private scaleStep: number = 0.1\n private tooltipHideTimer: number | null = null\n\n constructor() {\n this.initModal()\n }\n\n private initModal() {\n // 创建遮罩层\n this.overlay = document.createElement('div')\n this.overlay.className = 'image-preview-overlay'\n this.overlay.style.cssText = `\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.8);\n display: none;\n z-index: 9999;\n cursor: pointer;\n `\n\n // 创建预览容器\n this.modal = document.createElement('div')\n this.modal.className = 'image-preview-modal'\n this.modal.style.cssText = `\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: transparent;\n display: none;\n z-index: 10000;\n max-width: 90vw;\n max-height: 90vh;\n cursor: auto;\n `\n\n // 创建预览图片\n this.previewImage = document.createElement('img')\n this.previewImage.className = 'image-preview-img'\n this.previewImage.style.cssText = `\n max-width: 100%;\n max-height: 100%;\n object-fit: contain;\n border-radius: 4px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n transition: transform 0.2s ease-out;\n cursor: grab;\n `\n\n // 创建关闭按钮\n const closeBtn = document.createElement('button')\n closeBtn.className = 'image-preview-close'\n closeBtn.innerHTML = '×'\n closeBtn.style.cssText = `\n position: absolute;\n top: -40px;\n right: 0;\n width: 40px;\n height: 40px;\n border: none;\n background-color: transparent;\n color: white;\n font-size: 32px;\n cursor: pointer;\n z-index: 10001;\n line-height: 1;\n padding: 0;\n `\n closeBtn.addEventListener('click', () => this.hide())\n\n this.modal.appendChild(this.previewImage)\n this.modal.appendChild(closeBtn)\n\n // 创建缩放提示窗口\n this.scaleTooltip = document.createElement('div')\n this.scaleTooltip.className = 'image-preview-scale-tooltip'\n this.scaleTooltip.style.cssText = `\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: rgba(0, 0, 0, 0.7);\n color: white;\n padding: 12px 20px;\n border-radius: 6px;\n font-size: 14px;\n z-index: 10002;\n display: none;\n pointer-events: none;\n white-space: nowrap;\n font-weight: 500;\n `\n document.body.appendChild(this.scaleTooltip)\n\n // 绑定事件\n this.overlay.addEventListener('click', () => this.hide())\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape') {\n this.hide()\n }\n })\n\n // 绑定滚轮缩放事件\n document.addEventListener('wheel', (e) => this.onMouseWheel(e), { passive: false })\n\n // 阻止模态框内的点击事件冒泡到遮罩层\n this.modal.addEventListener('click', (e) => {\n e.stopPropagation()\n })\n\n document.body.appendChild(this.overlay)\n document.body.appendChild(this.modal)\n }\n\n /**\n * 处理鼠标滚轮事件 - 缩放图片\n */\n private onMouseWheel = (event: WheelEvent) => {\n // 只在预览打开时处理\n if (!this.modal || this.modal.style.display === 'none') {\n return\n }\n\n event.preventDefault()\n\n // 根据滚轮方向调整缩放比例\n const delta = event.deltaY > 0 ? -this.scaleStep : this.scaleStep\n this.setScale(this.currentScale + delta)\n\n // 显示缩放提示\n this.showScaleTooltip()\n }\n\n /**\n * 设置缩放比例\n */\n private setScale(scale: number) {\n // 限制缩放范围\n this.currentScale = Math.max(this.minScale, Math.min(scale, this.maxScale))\n\n if (this.previewImage) {\n this.previewImage.style.transform = `scale(${this.currentScale})`\n }\n }\n\n /**\n * 显示缩放百分比提示\n */\n private showScaleTooltip() {\n if (!this.scaleTooltip) {\n return\n }\n\n // 清除之前的隐藏计时器\n if (this.tooltipHideTimer !== null) {\n clearTimeout(this.tooltipHideTimer)\n }\n\n // 更新提示文本\n const percentage = Math.round(this.currentScale * 100)\n this.scaleTooltip.textContent = `${percentage}%`\n this.scaleTooltip.style.display = 'block'\n\n // 1.5秒后隐藏提示\n this.tooltipHideTimer = window.setTimeout(() => {\n if (this.scaleTooltip) {\n this.scaleTooltip.style.display = 'none'\n }\n this.tooltipHideTimer = null\n }, 1500)\n }\n\n /**\n * 隐藏缩放提示\n */\n private hideScaleTooltip() {\n if (this.tooltipHideTimer !== null) {\n clearTimeout(this.tooltipHideTimer)\n this.tooltipHideTimer = null\n }\n if (this.scaleTooltip) {\n this.scaleTooltip.style.display = 'none'\n }\n }\n\n /**\n * 重置缩放比例\n */\n private resetScale() {\n this.currentScale = 1\n if (this.previewImage) {\n this.previewImage.style.transform = 'scale(1)'\n }\n this.hideScaleTooltip()\n }\n\n /**\n * 显示预览\n * @param imageUrl 图片URL\n */\n show(imageUrl: string) {\n if (!this.previewImage || !this.modal || !this.overlay) {\n return\n }\n\n this.resetScale()\n this.previewImage.src = imageUrl\n this.modal.style.display = 'flex'\n this.modal.style.alignItems = 'center'\n this.modal.style.justifyContent = 'center'\n this.overlay.style.display = 'block'\n\n // 防止页面滚动\n document.body.style.overflow = 'hidden'\n }\n\n /**\n * 隐藏预览\n */\n hide() {\n if (this.modal && this.overlay) {\n this.modal.style.display = 'none'\n this.overlay.style.display = 'none'\n document.body.style.overflow = ''\n this.resetScale()\n }\n }\n\n /**\n * 销毁预览模态框\n */\n destroy() {\n this.hideScaleTooltip()\n if (this.overlay && this.overlay.parentNode) {\n this.overlay.parentNode.removeChild(this.overlay)\n }\n if (this.modal && this.modal.parentNode) {\n this.modal.parentNode.removeChild(this.modal)\n }\n if (this.scaleTooltip && this.scaleTooltip.parentNode) {\n this.scaleTooltip.parentNode.removeChild(this.scaleTooltip)\n }\n this.modal = null\n this.overlay = null\n this.previewImage = null\n this.scaleTooltip = null\n }\n}\n\n// 全局单例实例\nlet globalPreviewModal: ImagePreviewModal | null = null\n\n/**\n * 获取或创建全局预览模态框实例\n */\nexport function getImagePreviewModal(): ImagePreviewModal {\n if (!globalPreviewModal) {\n globalPreviewModal = new ImagePreviewModal()\n }\n return globalPreviewModal\n}\n"],"names":[],"mappings":"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"}

package/es/modules/custom-image/specs/custom-image-spec.es.js CHANGED Viewed

@@ -2,7 +2,9 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { isInside } from "../../../config/editor.utils.es.js";
+import "../preview/index.es.js";
 import { ImageSpec } from "./image-spec.es.js";
+import { getImagePreviewModal } from "../preview/preview-modal.es.js";
 class CustomImageSpec extends ImageSpec {
   constructor(formatter) {
     super(formatter);
@@ -38,6 +40,17 @@ class CustomImageSpec extends ImageSpec {
         quill.setSelection(index, len);
       }
     });
+    /**
+     * 处理图片双击事件 - 显示预览
+     */
+    __publicField(this, "onImageDoubleClick", (event) => {
+      const target = event.target;
+      const imageSrc = target.getAttribute("src") || target.getAttribute("data-image");
+      if (imageSrc) {
+        const modal = getImagePreviewModal();
+        modal.show(imageSrc);
+      }
+    });
     this.formatter = formatter;
     this.oldRootScrollTop = this.formatter.quill.root.scrollTop;
     this.editorElem = this.formatter.quill.container;
@@ -51,6 +64,7 @@ class CustomImageSpec extends ImageSpec {
   init() {
     this.editorElem.addEventListener("mouseover", this.imageMouseOver.bind(this));
     this.editorElem.addEventListener("mouseout", this.imageMouseout);
+    this.editorElem.addEventListener("dblclick", this.onImageDoubleClick.bind(this));
     super.init();
   }
   imageMouseOver(event) {

package/es/modules/custom-image/specs/custom-image-spec.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"custom-image-spec.es.js","sources":["../../../../../src/modules/custom-image/specs/custom-image-spec.ts"],"sourcesContent":["import type { BlotFormatter } from '../blot-formatter'\nimport { isInside } from '../../../config/editor.utils'\nimport { ImageSpec } from './image-spec'\n\nexport class CustomImageSpec extends ImageSpec {\n editorElem: HTMLElement \| undefined\n observer: any\n oldRootScrollTop: number\n\n constructor(formatter: BlotFormatter) {\n super(formatter)\n this.formatter = formatter\n this.oldRootScrollTop = this.formatter.quill.root.scrollTop\n this.editorElem = this.formatter.quill.container\n this.formatter.quill.root.addEventListener('scroll', this.handleQuillRootScroll.bind(this))\n }\n\n handleQuillRootScroll() {\n if (this.formatter.overlay) {\n this.formatter.overlay.style.marginTop = `${this.oldRootScrollTop - this.formatter.quill.root.scrollTop}px`\n }\n }\n\n init(): void {\n this.editorElem.addEventListener('mouseover', this.imageMouseOver.bind(this))\n this.editorElem.addEventListener('mouseout', this.imageMouseout)\n\n super.init()\n }\n\n imageMouseOver(event) {\n const target = event.target\n const isBlotFormatter = target?.classList?.contains('blot-formatter__overlay')\n if (target.nodeName === 'IMG' \|\| isBlotFormatter) {\n // this.addImagePreviewOverlay(event);\n }\n }\n\n imageMouseout = (event) => {\n if (event.target.nodeName === 'IMG'\n \|\| event.target.classList.contains('blot-formatter__overlay')) {\n const imgDom = event.target\n if (!isInside(event, imgDom)) {\n this.removeImagePreviewOverlay()\n }\n }\n }\n\n addImagePreviewOverlay(event) {\n const target = event.target\n const {\n left: imgLeft,\n width: imgWidth,\n } = target.getBoundingClientRect()\n // fix: 解决 ql-container 容器设置 calc(100vh - 180px) 这样的视窗相对单位时，滚动视窗导致图片相对视窗的 top 相应改变，从而导致图片预览按钮的位置显示错误\n const imgTop = target.getBoundingClientRect().top + this.formatter.quill.container.scrollTop\n\n const {\n left: editorLeft,\n top: editorTop,\n } = event.currentTarget.getBoundingClientRect()\n\n const imgRelativeLeft = imgLeft - editorLeft\n const imgRelativeTop = imgTop - editorTop\n\n const maxmizeWidth = 24\n const maxmizePadding = 15\n const previewLeft = imgRelativeLeft + imgWidth - maxmizeWidth - maxmizePadding\n const previewTop = imgRelativeTop + maxmizePadding\n\n const previewStyle = `\n left: ${previewLeft}px;\n top: ${previewTop}px;\n width: ${maxmizeWidth}px;\n `\n const imageSrc = target.src \|\| target.getAttribute('data-image')\n const imageId = target.getAttribute('data-image-id')\n\n const previewDom = event.currentTarget.querySelector('.image-preview__overlay')\n if (!previewDom) {\n event.currentTarget.insertAdjacentHTML('beforeend', `\n <div class=\"image-preview__overlay\" style=\"${previewStyle}\">\n <i class=\"icon-maxmize\" id=\"btn-image-preview\" data-image-id=\"${imageId}\"\n data-image=\"${imageSrc}\"></i>\n </div>\n `)\n }\n }\n\n removeImagePreviewOverlay() {\n const previewDom = this.editorElem.querySelector('.image-preview__overlay')\n if (previewDom) {\n previewDom.parentNode.removeChild(previewDom)\n }\n }\n\n onHide() {\n this.removeImagePreviewOverlay()\n super.onHide()\n }\n\n resetOverlayMarginTop() {\n if (this.formatter.overlay) {\n this.formatter.overlay.style.marginTop = '0px'\n }\n }\n\n onClick = (event: MouseEvent) => {\n const el = event.target\n const isReadonly = this.formatter.quill.options.readOnly\n if (!(el instanceof HTMLElement) \|\| el.tagName !== 'IMG' \|\| isReadonly) {\n return\n }\n\n this.img = el as HTMLImageElement\n this.oldRootScrollTop = this.formatter.quill.root.scrollTop\n this.resetOverlayMarginTop()\n this.formatter.show(this)\n\n // 通过图片dom获取图片选区用以复制，设置 current-select-img::selection 取消选区背景\n const imageDom = this.formatter.currentSpec?.getTargetElement()\n if (imageDom) {\n imageDom.classList.add('current-select-img')\n const quill = this.formatter.quill\n const imgBlot = quill.scroll.find(this.img)\n const index = quill.getIndex(imgBlot)\n const len = imgBlot.length()\n quill.setSelection(index, len)\n }\n }\n}\n"],"names":[],"mappings":"~~;;;;;AAIO~~,MAAM,wBAAwB,UAAU;AAAA,EAK7C,YAAY,WAA0B;AACpC,UAAM,SAAS;AALjB;AACA;AACA;~~AA+BA~~,yCAAgB,CAAC,UAAU;AACzB,UAAI,MAAM,OAAO,aAAa,SACzB,MAAM,OAAO,UAAU,SAAS,yBAAyB,GAAG;AAC/D,cAAM,SAAS,MAAM;AACrB,YAAI,CAAC,SAAS,OAAO,MAAM,GAAG;AAC5B,eAAK,0BAAA;AAAA,QACP;AAAA,MACF;AAAA,IACF;AA6DA,mCAAU,CAAC,UAAsB;;AAC/B,YAAM,KAAK,MAAM;AACjB,YAAM,aAAa,KAAK,UAAU,MAAM,QAAQ;AAChD,UAAI,EAAE,cAAc,gBAAgB,GAAG,YAAY,SAAS,YAAY;AACtE;AAAA,MACF;AAEA,WAAK,MAAM;AACX,WAAK,mBAAmB,KAAK,UAAU,MAAM,KAAK;AAClD,WAAK,sBAAA;AACL,WAAK,UAAU,KAAK,IAAI;AAGxB,YAAM,YAAW,UAAK,UAAU,gBAAf,mBAA4B;AAC7C,UAAI,UAAU;AACZ,iBAAS,UAAU,IAAI,oBAAoB;AAC3C,cAAM,QAAQ,KAAK,UAAU;AAC7B,cAAM,UAAU,MAAM,OAAO,KAAK,KAAK,GAAG;AAC1C,cAAM,QAAQ,MAAM,SAAS,OAAO;AACpC,cAAM,MAAM,QAAQ,OAAA;AACpB,cAAM,aAAa,OAAO,GAAG;AAAA,MAC/B;AAAA,IACF;~~AAtHE~~,SAAK,YAAY;AACjB,SAAK,mBAAmB,KAAK,UAAU,MAAM,KAAK;AAClD,SAAK,aAAa,KAAK,UAAU,MAAM;AACvC,SAAK,UAAU,MAAM,KAAK,iBAAiB,UAAU,KAAK,sBAAsB,KAAK,IAAI,CAAC;AAAA,EAC5F;AAAA,EAEA,wBAAwB;AACtB,QAAI,KAAK,UAAU,SAAS;AAC1B,WAAK,UAAU,QAAQ,MAAM,YAAY,GAAG,KAAK,mBAAmB,KAAK,UAAU,MAAM,KAAK,SAAS;AAAA,IACzG;AAAA,EACF;AAAA,EAEA,OAAa;AACX,SAAK,WAAW,iBAAiB,aAAa,KAAK,eAAe,KAAK,IAAI,CAAC;AAC5E,SAAK,WAAW,iBAAiB,YAAY,KAAK,aAAa;~~AAE~~/D,UAAM,KAAA;AAAA,EACR;AAAA,EAEA,eAAe,OAAO;;AACpB,UAAM,SAAS,MAAM;AACrB,UAAM,mBAAkB,sCAAQ,cAAR,mBAAmB,SAAS;AACpD,QAAI,OAAO,aAAa,SAAS,iBAAiB;AAAA,IAElD;AAAA,EACF;AAAA,EAYA,uBAAuB,OAAO;AAC5B,UAAM,SAAS,MAAM;AACrB,UAAM;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,IAAA,IACL,OAAO,sBAAA;AAEX,UAAM,SAAS,OAAO,wBAAwB,MAAM,KAAK,UAAU,MAAM,UAAU;AAEnF,UAAM;AAAA,MACJ,MAAM;AAAA,MACN,KAAK;AAAA,IAAA,IACH,MAAM,cAAc,sBAAA;AAExB,UAAM,kBAAkB,UAAU;AAClC,UAAM,iBAAiB,SAAS;AAEhC,UAAM,eAAe;AACrB,UAAM,iBAAiB;AACvB,UAAM,cAAc,kBAAkB,WAAW,eAAe;AAChE,UAAM,aAAa,iBAAiB;AAEpC,UAAM,eAAe;AAAA,gBACT,WAAW;AAAA,eACZ,UAAU;AAAA,iBACR,YAAY;AAAA;AAEzB,UAAM,WAAW,OAAO,OAAO,OAAO,aAAa,YAAY;AAC/D,UAAM,UAAU,OAAO,aAAa,eAAe;AAEnD,UAAM,aAAa,MAAM,cAAc,cAAc,yBAAyB;AAC9E,QAAI,CAAC,YAAY;AACf,YAAM,cAAc,mBAAmB,aAAa;AAAA,uDACH,YAAY;AAAA,4EACS,OAAO;AAAA,4BACvD,QAAQ;AAAA;AAAA,SAE3B;AAAA,IACL;AAAA,EACF;AAAA,EAEA,4BAA4B;AAC1B,UAAM,aAAa,KAAK,WAAW,cAAc,yBAAyB;AAC1E,QAAI,YAAY;AACd,iBAAW,WAAW,YAAY,UAAU;AAAA,IAC9C;AAAA,EACF;AAAA,EAEA,SAAS;AACP,SAAK,0BAAA;AACL,UAAM,OAAA;AAAA,EACR;AAAA,EAEA,wBAAwB;AACtB,QAAI,KAAK,UAAU,SAAS;AAC1B,WAAK,UAAU,QAAQ,MAAM,YAAY;AAAA,IAC3C;AAAA,EACF;~~AAyBF~~;"}
1	+ {"version":3,"file":"custom-image-spec.es.js","sources":["../../../../../src/modules/custom-image/specs/custom-image-spec.ts"],"sourcesContent":["import type { BlotFormatter } from '../blot-formatter'\nimport { isInside } from '../../../config/editor.utils'\nimport { getImagePreviewModal } from '../preview'\nimport { ImageSpec } from './image-spec'\n\nexport class CustomImageSpec extends ImageSpec {\n editorElem: HTMLElement \| undefined\n observer: any\n oldRootScrollTop: number\n\n constructor(formatter: BlotFormatter) {\n super(formatter)\n this.formatter = formatter\n this.oldRootScrollTop = this.formatter.quill.root.scrollTop\n this.editorElem = this.formatter.quill.container\n this.formatter.quill.root.addEventListener('scroll', this.handleQuillRootScroll.bind(this))\n }\n\n handleQuillRootScroll() {\n if (this.formatter.overlay) {\n this.formatter.overlay.style.marginTop = `${this.oldRootScrollTop - this.formatter.quill.root.scrollTop}px`\n }\n }\n\n init(): void {\n this.editorElem.addEventListener('mouseover', this.imageMouseOver.bind(this))\n this.editorElem.addEventListener('mouseout', this.imageMouseout)\n this.editorElem.addEventListener('dblclick', this.onImageDoubleClick.bind(this))\n\n super.init()\n }\n\n imageMouseOver(event) {\n const target = event.target\n const isBlotFormatter = target?.classList?.contains('blot-formatter__overlay')\n if (target.nodeName === 'IMG' \|\| isBlotFormatter) {\n // this.addImagePreviewOverlay(event);\n }\n }\n\n imageMouseout = (event) => {\n if (event.target.nodeName === 'IMG'\n \|\| event.target.classList.contains('blot-formatter__overlay')) {\n const imgDom = event.target\n if (!isInside(event, imgDom)) {\n this.removeImagePreviewOverlay()\n }\n }\n }\n\n addImagePreviewOverlay(event) {\n const target = event.target\n const {\n left: imgLeft,\n width: imgWidth,\n } = target.getBoundingClientRect()\n // fix: 解决 ql-container 容器设置 calc(100vh - 180px) 这样的视窗相对单位时，滚动视窗导致图片相对视窗的 top 相应改变，从而导致图片预览按钮的位置显示错误\n const imgTop = target.getBoundingClientRect().top + this.formatter.quill.container.scrollTop\n\n const {\n left: editorLeft,\n top: editorTop,\n } = event.currentTarget.getBoundingClientRect()\n\n const imgRelativeLeft = imgLeft - editorLeft\n const imgRelativeTop = imgTop - editorTop\n\n const maxmizeWidth = 24\n const maxmizePadding = 15\n const previewLeft = imgRelativeLeft + imgWidth - maxmizeWidth - maxmizePadding\n const previewTop = imgRelativeTop + maxmizePadding\n\n const previewStyle = `\n left: ${previewLeft}px;\n top: ${previewTop}px;\n width: ${maxmizeWidth}px;\n `\n const imageSrc = target.src \|\| target.getAttribute('data-image')\n const imageId = target.getAttribute('data-image-id')\n\n const previewDom = event.currentTarget.querySelector('.image-preview__overlay')\n if (!previewDom) {\n event.currentTarget.insertAdjacentHTML('beforeend', `\n <div class=\"image-preview__overlay\" style=\"${previewStyle}\">\n <i class=\"icon-maxmize\" id=\"btn-image-preview\" data-image-id=\"${imageId}\"\n data-image=\"${imageSrc}\"></i>\n </div>\n `)\n }\n }\n\n removeImagePreviewOverlay() {\n const previewDom = this.editorElem.querySelector('.image-preview__overlay')\n if (previewDom) {\n previewDom.parentNode.removeChild(previewDom)\n }\n }\n\n onHide() {\n this.removeImagePreviewOverlay()\n super.onHide()\n }\n\n resetOverlayMarginTop() {\n if (this.formatter.overlay) {\n this.formatter.overlay.style.marginTop = '0px'\n }\n }\n\n onClick = (event: MouseEvent) => {\n const el = event.target\n const isReadonly = this.formatter.quill.options.readOnly\n if (!(el instanceof HTMLElement) \|\| el.tagName !== 'IMG' \|\| isReadonly) {\n return\n }\n\n this.img = el as HTMLImageElement\n this.oldRootScrollTop = this.formatter.quill.root.scrollTop\n this.resetOverlayMarginTop()\n this.formatter.show(this)\n\n // 通过图片dom获取图片选区用以复制，设置 current-select-img::selection 取消选区背景\n const imageDom = this.formatter.currentSpec?.getTargetElement()\n if (imageDom) {\n imageDom.classList.add('current-select-img')\n const quill = this.formatter.quill\n const imgBlot = quill.scroll.find(this.img)\n const index = quill.getIndex(imgBlot)\n const len = imgBlot.length()\n quill.setSelection(index, len)\n }\n }\n\n /*\n 处理图片双击事件 - 显示预览\n */\n onImageDoubleClick = (event: MouseEvent) => {\n const target = event.target\n const imageSrc = target.getAttribute('src') \|\| target.getAttribute('data-image')\n\n if (imageSrc) {\n const modal = getImagePreviewModal()\n modal.show(imageSrc)\n }\n }\n}\n"],"names":[],"mappings":"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"}

package/lib/index.cjs.js CHANGED Viewed

@@ -31,6 +31,7 @@ const image = require("./modules/custom-image/image.cjs.js");
 const blotSpec = require("./modules/custom-image/specs/blot-spec.cjs.js");
 const customImageSpec = require("./modules/custom-image/specs/custom-image-spec.cjs.js");
 const imageSpec = require("./modules/custom-image/specs/image-spec.cjs.js");
+const previewModal = require("./modules/custom-image/preview/preview-modal.cjs.js");
 const customUploader = require("./modules/custom-uploader.cjs.js");
 const divider = require("./modules/divider.cjs.js");
 const emoji$1 = require("./modules/emoji.cjs.js");
@@ -132,6 +133,8 @@ exports.CustomImage = image.CustomImage;
 exports.BlotSpec = blotSpec.BlotSpec;
 exports.CustomImageSpec = customImageSpec.CustomImageSpec;
 exports.ImageSpec = imageSpec.ImageSpec;
+exports.ImagePreviewModal = previewModal.ImagePreviewModal;
+exports.getImagePreviewModal = previewModal.getImagePreviewModal;
 exports.FileUploader = customUploader.FileUploader;
 exports.DividerBlot = divider.DividerBlot;
 exports.EmojiModule = emoji$1.EmojiModule;

package/lib/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/modules/custom-image/actions/image-toolbar-buttons.cjs.js CHANGED Viewed

@@ -5,6 +5,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const is = require("../../../utils/is.cjs.js");
 const options = require("../options.cjs.js");
+require("../preview/index.cjs.js");
+const previewModal = require("../preview/preview-modal.cjs.js");
 const ALIGN_ATTR = "data-align";
 function setAlignStyle(el, display, float, margin) {
   el.style.setProperty("display", display);
@@ -108,6 +110,17 @@ const defaultButtons = {
     apply: (el, toolbarButtons) => {
       alignmentHandler.copy(el, toolbarButtons);
     }
+  },
+  [options.PREVIEW]: {
+    name: options.PREVIEW,
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path class="ql-fill" d="M16 7c-4.96 0-9.23 3.13-11 7.5 1.77 4.37 6.04 7.5 11 7.5s9.23-3.13 11-7.5c-1.77-4.37-6.04-7.5-11-7.5zm0 12c-2.49 0-4.5-2.01-4.5-4.5S13.51 10 16 10s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5zm0-7c-1.38 0-2.5 1.12-2.5 2.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5-1.12-2.5-2.5-2.5z"/></svg>`,
+    apply: (el, toolbarButtons) => {
+      const imageSrc = el.getAttribute("src") || el.getAttribute("data-src");
+      if (imageSrc) {
+        const modal = previewModal.getImagePreviewModal();
+        modal.show(imageSrc);
+      }
+    }
   }
 };
 class ImageToolbarButtons {

package/lib/modules/custom-image/actions/image-toolbar-buttons.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"image-toolbar-buttons.cjs.js","sources":["../../../../../src/modules/custom-image/actions/image-toolbar-buttons.ts"],"sourcesContent":["import type { ToolbarButtonOptions, ToolButtonOption } from '../options'\r\nimport { isBoolean, isObject } from '../../../utils/is'\r\nimport { CENTER_ALIGN, COPY, DOWNLOAD, LEFT_ALIGN, RIGHT_ALIGN } from '../options'\r\n\r\nexport const ALIGN_ATTR = 'data-align'\r\n\r\nexport function setAlignStyle(el: HTMLElement, display: string \| null, float: string \| null, margin: string \| null) {\r\n el.style.setProperty('display', display)\r\n el.style.setProperty('float', float)\r\n el.style.setProperty('margin', margin)\r\n}\r\nexport const alignmentHandler = {\r\n left: (el: HTMLElement, toolbarButtons: ImageToolbarButtons) => {\r\n setAlignStyle(el, 'inline', 'left', '0 1em 1em 0')\r\n },\r\n center: (el: HTMLElement, toolbarButtons: ImageToolbarButtons) => {\r\n setAlignStyle(el, 'block', null, 'auto')\r\n },\r\n right: (el: HTMLElement, toolbarButtons: ImageToolbarButtons) => {\r\n setAlignStyle(el, 'inline', 'right', '0 0 1em 1em')\r\n },\r\n download: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n const imageName = el.dataset.title \|\| 'image'\r\n const url = el.src \|\| ''\r\n if (!url) return\r\n const a = document.createElement('a')\r\n a.href = url\r\n a.target = '_blank'\r\n a.download = imageName\r\n a.style.display = 'none'\r\n document.body.appendChild(a)\r\n a.click()\r\n a.parentNode.removeChild(a)\r\n },\r\n copy: async (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n if (!el.src) return\r\n const imageUrl = el.src\r\n try {\r\n const response = await fetch(imageUrl)\r\n if (!response.ok) {\r\n throw new Error('Copy image failed')\r\n }\r\n const blob = await response.blob()\r\n await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })])\r\n }\r\n catch (e) {\r\n throw new Error('Copy image failed')\r\n }\r\n },\r\n}\r\nconst defaultButtons: Record<string, ToolButtonOption> = {\r\n [LEFT_ALIGN]: {\r\n name: LEFT_ALIGN,\r\n icon: `\r\n <svg viewbox=\"0 0 18 18\">\r\n <line class=\"ql-stroke\" x1=\"3\" x2=\"15\" y1=\"9\" y2=\"9\"></line>\r\n <line class=\"ql-stroke\" x1=\"3\" x2=\"13\" y1=\"14\" y2=\"14\"></line>\r\n <line class=\"ql-stroke\" x1=\"3\" x2=\"9\" y1=\"4\" y2=\"4\"></line>\r\n </svg>\r\n `,\r\n isActive: el => el.getAttribute(ALIGN_ATTR) === 'left',\r\n apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n el.setAttribute(ALIGN_ATTR, 'left')\r\n alignmentHandler.left(el, toolbarButtons)\r\n },\r\n },\r\n [CENTER_ALIGN]: {\r\n name: CENTER_ALIGN,\r\n icon: `\r\n <svg viewbox=\"0 0 18 18\">\r\n <line class=\"ql-stroke\" x1=\"15\" x2=\"3\" y1=\"9\" y2=\"9\"></line>\r\n <line class=\"ql-stroke\" x1=\"14\" x2=\"4\" y1=\"14\" y2=\"14\"></line>\r\n <line class=\"ql-stroke\" x1=\"12\" x2=\"6\" y1=\"4\" y2=\"4\"></line>\r\n </svg>\r\n `,\r\n isActive: el => el.getAttribute(ALIGN_ATTR) === 'center',\r\n apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n el.setAttribute(ALIGN_ATTR, 'center')\r\n alignmentHandler.center(el, toolbarButtons)\r\n },\r\n },\r\n [RIGHT_ALIGN]: {\r\n name: RIGHT_ALIGN,\r\n icon: `\r\n <svg viewbox=\"0 0 18 18\">\r\n <line class=\"ql-stroke\" x1=\"15\" x2=\"3\" y1=\"9\" y2=\"9\"></line>\r\n <line class=\"ql-stroke\" x1=\"15\" x2=\"5\" y1=\"14\" y2=\"14\"></line>\r\n <line class=\"ql-stroke\" x1=\"15\" x2=\"9\" y1=\"4\" y2=\"4\"></line>\r\n </svg>\r\n `,\r\n isActive: el => el.getAttribute(ALIGN_ATTR) === 'right',\r\n apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n el.setAttribute(ALIGN_ATTR, 'right')\r\n alignmentHandler.right(el, toolbarButtons)\r\n },\r\n },\r\n [DOWNLOAD]: {\r\n name: DOWNLOAD,\r\n icon: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"><path class=\"ql-fill\" d=\"M26 24v4H6v-4H4v4a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2v-4zm0-10l-1.41-1.41L17 20.17V2h-2v18.17l-7.59-7.58L6 14l10 10z\"/></svg>`,\r\n apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n alignmentHandler.download(el, toolbarButtons)\r\n },\r\n },\r\n [COPY]: {\r\n name: COPY,\r\n icon: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"><path class=\"ql-fill\" d=\"M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2\"/><path class=\"ql-fill\" d=\"M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z\"/></svg>`,\r\n apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n alignmentHandler.copy(el, toolbarButtons)\r\n },\r\n },\r\n}\r\nexport class ImageToolbarButtons {\r\n buttons: Record<string, ToolButtonOption>\r\n\r\n constructor(options: ToolbarButtonOptions) {\r\n this.buttons = Object.entries(options.buttons).reduce((acc, [name, button]) => {\r\n if (isBoolean(button) && button && defaultButtons[name]) {\r\n acc[name] = defaultButtons[name]\r\n }\r\n else if (isObject(button)) {\r\n acc[button.name] = button\r\n }\r\n return acc\r\n }, {})\r\n }\r\n\r\n getItems(): ToolButtonOption[] {\r\n return Object.keys(this.buttons).map(k => this.buttons[k])\r\n }\r\n\r\n clear(el: HTMLElement): void {\r\n el.removeAttribute(ALIGN_ATTR)\r\n setAlignStyle(el, null, null, null)\r\n }\r\n}\r\n"],"names":["LEFT_ALIGN","CENTER_ALIGN","RIGHT_ALIGN","DOWNLOAD","COPY","options","isBoolean","isObject"],"mappings":"~~;;;;;;;AAIO~~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"}
1	+ {"version":3,"file":"image-toolbar-buttons.cjs.js","sources":["../../../../../src/modules/custom-image/actions/image-toolbar-buttons.ts"],"sourcesContent":["import type { ToolbarButtonOptions, ToolButtonOption } from '../options'\r\nimport { isBoolean, isObject } from '../../../utils/is'\r\nimport { CENTER_ALIGN, COPY, DOWNLOAD, LEFT_ALIGN, PREVIEW, RIGHT_ALIGN } from '../options'\r\nimport { getImagePreviewModal } from '../preview'\r\n\r\nexport const ALIGN_ATTR = 'data-align'\r\n\r\nexport function setAlignStyle(el: HTMLElement, display: string \| null, float: string \| null, margin: string \| null) {\r\n el.style.setProperty('display', display)\r\n el.style.setProperty('float', float)\r\n el.style.setProperty('margin', margin)\r\n}\r\nexport const alignmentHandler = {\r\n left: (el: HTMLElement, toolbarButtons: ImageToolbarButtons) => {\r\n setAlignStyle(el, 'inline', 'left', '0 1em 1em 0')\r\n },\r\n center: (el: HTMLElement, toolbarButtons: ImageToolbarButtons) => {\r\n setAlignStyle(el, 'block', null, 'auto')\r\n },\r\n right: (el: HTMLElement, toolbarButtons: ImageToolbarButtons) => {\r\n setAlignStyle(el, 'inline', 'right', '0 0 1em 1em')\r\n },\r\n download: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n const imageName = el.dataset.title \|\| 'image'\r\n const url = el.src \|\| ''\r\n if (!url) return\r\n const a = document.createElement('a')\r\n a.href = url\r\n a.target = '_blank'\r\n a.download = imageName\r\n a.style.display = 'none'\r\n document.body.appendChild(a)\r\n a.click()\r\n a.parentNode.removeChild(a)\r\n },\r\n copy: async (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n if (!el.src) return\r\n const imageUrl = el.src\r\n try {\r\n const response = await fetch(imageUrl)\r\n if (!response.ok) {\r\n throw new Error('Copy image failed')\r\n }\r\n const blob = await response.blob()\r\n await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })])\r\n }\r\n catch (e) {\r\n throw new Error('Copy image failed')\r\n }\r\n },\r\n}\r\nconst defaultButtons: Record<string, ToolButtonOption> = {\r\n [LEFT_ALIGN]: {\r\n name: LEFT_ALIGN,\r\n icon: `\r\n <svg viewbox=\"0 0 18 18\">\r\n <line class=\"ql-stroke\" x1=\"3\" x2=\"15\" y1=\"9\" y2=\"9\"></line>\r\n <line class=\"ql-stroke\" x1=\"3\" x2=\"13\" y1=\"14\" y2=\"14\"></line>\r\n <line class=\"ql-stroke\" x1=\"3\" x2=\"9\" y1=\"4\" y2=\"4\"></line>\r\n </svg>\r\n `,\r\n isActive: el => el.getAttribute(ALIGN_ATTR) === 'left',\r\n apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n el.setAttribute(ALIGN_ATTR, 'left')\r\n alignmentHandler.left(el, toolbarButtons)\r\n },\r\n },\r\n [CENTER_ALIGN]: {\r\n name: CENTER_ALIGN,\r\n icon: `\r\n <svg viewbox=\"0 0 18 18\">\r\n <line class=\"ql-stroke\" x1=\"15\" x2=\"3\" y1=\"9\" y2=\"9\"></line>\r\n <line class=\"ql-stroke\" x1=\"14\" x2=\"4\" y1=\"14\" y2=\"14\"></line>\r\n <line class=\"ql-stroke\" x1=\"12\" x2=\"6\" y1=\"4\" y2=\"4\"></line>\r\n </svg>\r\n `,\r\n isActive: el => el.getAttribute(ALIGN_ATTR) === 'center',\r\n apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n el.setAttribute(ALIGN_ATTR, 'center')\r\n alignmentHandler.center(el, toolbarButtons)\r\n },\r\n },\r\n [RIGHT_ALIGN]: {\r\n name: RIGHT_ALIGN,\r\n icon: `\r\n <svg viewbox=\"0 0 18 18\">\r\n <line class=\"ql-stroke\" x1=\"15\" x2=\"3\" y1=\"9\" y2=\"9\"></line>\r\n <line class=\"ql-stroke\" x1=\"15\" x2=\"5\" y1=\"14\" y2=\"14\"></line>\r\n <line class=\"ql-stroke\" x1=\"15\" x2=\"9\" y1=\"4\" y2=\"4\"></line>\r\n </svg>\r\n `,\r\n isActive: el => el.getAttribute(ALIGN_ATTR) === 'right',\r\n apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n el.setAttribute(ALIGN_ATTR, 'right')\r\n alignmentHandler.right(el, toolbarButtons)\r\n },\r\n },\r\n [DOWNLOAD]: {\r\n name: DOWNLOAD,\r\n icon: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"><path class=\"ql-fill\" d=\"M26 24v4H6v-4H4v4a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2v-4zm0-10l-1.41-1.41L17 20.17V2h-2v18.17l-7.59-7.58L6 14l10 10z\"/></svg>`,\r\n apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n alignmentHandler.download(el, toolbarButtons)\r\n },\r\n },\r\n [COPY]: {\r\n name: COPY,\r\n icon: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"><path class=\"ql-fill\" d=\"M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2\"/><path class=\"ql-fill\" d=\"M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z\"/></svg>`,\r\n apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n alignmentHandler.copy(el, toolbarButtons)\r\n },\r\n },\r\n [PREVIEW]: {\r\n name: PREVIEW,\r\n icon: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"><path class=\"ql-fill\" d=\"M16 7c-4.96 0-9.23 3.13-11 7.5 1.77 4.37 6.04 7.5 11 7.5s9.23-3.13 11-7.5c-1.77-4.37-6.04-7.5-11-7.5zm0 12c-2.49 0-4.5-2.01-4.5-4.5S13.51 10 16 10s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5zm0-7c-1.38 0-2.5 1.12-2.5 2.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5-1.12-2.5-2.5-2.5z\"/></svg>`,\r\n apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {\r\n const imageSrc = el.getAttribute('src') \|\| el.getAttribute('data-src')\r\n if (imageSrc) {\r\n const modal = getImagePreviewModal()\r\n modal.show(imageSrc)\r\n }\r\n },\r\n },\r\n}\r\nexport class ImageToolbarButtons {\r\n buttons: Record<string, ToolButtonOption>\r\n\r\n constructor(options: ToolbarButtonOptions) {\r\n this.buttons = Object.entries(options.buttons).reduce((acc, [name, button]) => {\r\n if (isBoolean(button) && button && defaultButtons[name]) {\r\n acc[name] = defaultButtons[name]\r\n }\r\n else if (isObject(button)) {\r\n acc[button.name] = button\r\n }\r\n return acc\r\n }, {})\r\n }\r\n\r\n getItems(): ToolButtonOption[] {\r\n return Object.keys(this.buttons).map(k => this.buttons[k])\r\n }\r\n\r\n clear(el: HTMLElement): void {\r\n el.removeAttribute(ALIGN_ATTR)\r\n setAlignStyle(el, null, null, null)\r\n }\r\n}\r\n"],"names":["LEFT_ALIGN","CENTER_ALIGN","RIGHT_ALIGN","DOWNLOAD","COPY","PREVIEW","getImagePreviewModal","options","isBoolean","isObject"],"mappings":"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"}

package/lib/modules/custom-image/index.cjs.js CHANGED Viewed

@@ -4,6 +4,7 @@ require("./actions/index.cjs.js");
 const blotFormatter = require("./blot-formatter.cjs.js");
 const image = require("./image.cjs.js");
 require("./specs/index.cjs.js");
+require("./preview/index.cjs.js");
 exports.BlotFormatter = blotFormatter.BlotFormatter;
 exports.CustomImage = image.CustomImage;
 //# sourceMappingURL=index.cjs.js.map

package/lib/modules/custom-image/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;~~"}
1	+ {"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/lib/modules/custom-image/options.cjs.js CHANGED Viewed

@@ -7,6 +7,7 @@ const CENTER_ALIGN = "align-center";
 const RIGHT_ALIGN = "align-right";
 const COPY = "copy";
 const DOWNLOAD = "download";
+const PREVIEW = "preview";
 const DefaultOptions = {
   // 默认情况下，`file://` 格式的本地文件路径在浏览器环境无法读取，因此会被转换成 `//:0`，但是在一些特殊的场景下（比如：Electron），需要获取到图片的原始路径，进行后续的上传处理
   // 注意：该选项一旦设置为 true，本地磁盘路径会暴露出去，这可能会带来安全风险，请确保你了解相关的安全隐患
@@ -63,7 +64,8 @@ const DefaultOptions = {
       [CENTER_ALIGN]: true,
       [RIGHT_ALIGN]: true,
       [COPY]: true,
-      [DOWNLOAD]: true
+      [DOWNLOAD]: true,
+      [PREVIEW]: true
     }
   },
   resize: {
@@ -83,6 +85,7 @@ exports.CENTER_ALIGN = CENTER_ALIGN;
 exports.COPY = COPY;
 exports.DOWNLOAD = DOWNLOAD;
 exports.LEFT_ALIGN = LEFT_ALIGN;
+exports.PREVIEW = PREVIEW;
 exports.RIGHT_ALIGN = RIGHT_ALIGN;
 exports.default = DefaultOptions;
 //# sourceMappingURL=options.cjs.js.map

package/lib/modules/custom-image/options.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"options.cjs.js","sources":["../../../../src/modules/custom-image/options.ts"],"sourcesContent":["import type { ImageToolbar, ImageToolbarButtons } from './actions'\nimport type { BlotSpec } from './specs'\nimport { ImageSpec } from './specs'\n\nexport interface OverlayOptions {\n // classname applied to the overlay element\n className: string\n // style applied to overlay element, or null to prevent styles\n style: Record<string, string>\n}\n\nexport interface ResizeOptions {\n // class name applied to the resize handles\n handleClassName: string\n // style applied to resize handles, or null to prevent styles\n handleStyle: Record<string, string>\n}\n\nexport interface ToolButtonOption {\n name: string\n icon: string\n isActive?: (el: HTMLElement) => boolean\n apply: (this: ImageToolbar, el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => void\n}\n\nexport interface ToolbarButtonOptions {\n buttons: Record<string, ToolButtonOption \| boolean>\n}\n\nexport interface ToolbarOptions extends ToolbarButtonOptions {\n // class name applied to the root toolbar element\n mainClassName: string\n // style applied to root toolbar element, or null to prevent styles\n mainStyle: Record<string, unknown>\n // class name applied to each button in the toolbar\n buttonClassName: string\n /* whether or not to add the selected style to the buttons.\n they'll always get the is-selected class */\n addButtonSelectStyle: boolean\n // style applied to buttons, or null to prevent styles\n buttonStyle: Record<string, unknown>\n // style applied to the svgs in the buttons\n svgStyle: Record<string, unknown>\n}\n\nexport interface BlotFormatterOptionsInput {\n specs: typeof BlotSpec[]\n overlay: Partial<OverlayOptions>\n resize: Partial<ResizeOptions>\n toolbar: Partial<ToolbarOptions>\n}\nexport interface BlotFormatterOptions {\n specs: typeof BlotSpec[]\n overlay: OverlayOptions\n resize: ResizeOptions\n toolbar: ToolbarOptions\n allowInvalidUrl: boolean\n}\n\nexport const LEFT_ALIGN = 'align-left'\nexport const CENTER_ALIGN = 'align-center'\nexport const RIGHT_ALIGN = 'align-right'\nexport const COPY = 'copy'\nexport const DOWNLOAD = 'download'\nconst DefaultOptions: BlotFormatterOptions = {\n // 默认情况下，`file://` 格式的本地文件路径在浏览器环境无法读取，因此会被转换成 `//:0`，但是在一些特殊的场景下（比如：Electron），需要获取到图片的原始路径，进行后续的上传处理\n // 注意：该选项一旦设置为 true，本地磁盘路径会暴露出去，这可能会带来安全风险，请确保你了解相关的安全隐患\n allowInvalidUrl: false,\n\n specs: [\n ImageSpec,\n ],\n overlay: {\n className: 'blot-formatter__overlay',\n style: {\n position: 'absolute',\n boxSizing: 'border-box',\n border: '1px dashed #444',\n },\n },\n toolbar: {\n mainClassName: 'blot-formatter__toolbar',\n mainStyle: {\n position: 'absolute',\n top: '-12px',\n right: '0',\n left: '0',\n height: '0',\n minWidth: '120px',\n font: '12px/1.0 Arial, Helvetica, sans-serif',\n textAlign: 'center',\n color: '#333',\n boxSizing: 'border-box',\n cursor: 'default',\n zIndex: '1',\n },\n buttonClassName: 'blot-formatter__toolbar-button',\n addButtonSelectStyle: true,\n buttonStyle: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '24px',\n height: '24px',\n background: 'white',\n border: '1px solid #999',\n verticalAlign: 'middle',\n cursor: 'pointer',\n },\n svgStyle: {\n display: 'inline-block',\n width: '16px',\n height: '16px',\n background: 'white',\n verticalAlign: 'middle',\n },\n buttons: {\n [LEFT_ALIGN]: true,\n [CENTER_ALIGN]: true,\n [RIGHT_ALIGN]: true,\n [COPY]: true,\n [DOWNLOAD]: true,\n },\n },\n resize: {\n handleClassName: 'blot-formatter__resize-handle',\n handleStyle: {\n position: 'absolute',\n height: '12px',\n width: '12px',\n backgroundColor: 'white',\n border: '1px solid #777',\n boxSizing: 'border-box',\n opacity: '0.80',\n },\n },\n}\n\nexport default DefaultOptions\n"],"names":["ImageSpec"],"mappings":";;;;AA2DO,MAAM,aAAa;AACnB,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,OAAO;AACb,MAAM,WAAW;~~AACxB~~,MAAM,iBAAuC;AAAA;AAAA;AAAA,EAG3C,iBAAiB;AAAA,EAEjB,OAAO;AAAA,IACLA,UAAAA;AAAAA,EAAA;AAAA,EAEF,SAAS;AAAA,IACP,WAAW;AAAA,IACX,OAAO;AAAA,MACL,UAAU;AAAA,MACV,WAAW;AAAA,MACX,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,SAAS;AAAA,IACP,eAAe;AAAA,IACf,WAAW;AAAA,MACT,UAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAO;AAAA,MACP,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA,MACP,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,QAAQ;AAAA,IAAA;AAAA,IAEV,iBAAiB;AAAA,IACjB,sBAAsB;AAAA,IACtB,aAAa;AAAA,MACX,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,QAAQ;AAAA,IAAA;AAAA,IAEV,UAAU;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,eAAe;AAAA,IAAA;AAAA,IAEjB,SAAS;AAAA,MACP,CAAC,UAAU,GAAG;AAAA,MACd,CAAC,YAAY,GAAG;AAAA,MAChB,CAAC,WAAW,GAAG;AAAA,MACf,CAAC,IAAI,GAAG;AAAA,MACR,CAAC,QAAQ,GAAG;AAAA,IAAA;AAAA,~~EACd~~;AAAA,EAEF,QAAQ;AAAA,IACN,iBAAiB;AAAA,IACjB,aAAa;AAAA,MACX,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,iBAAiB;AAAA,MACjB,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ~~;;;;;;;~~"}
1	+ {"version":3,"file":"options.cjs.js","sources":["../../../../src/modules/custom-image/options.ts"],"sourcesContent":["import type { ImageToolbar, ImageToolbarButtons } from './actions'\nimport type { BlotSpec } from './specs'\nimport { ImageSpec } from './specs'\n\nexport interface OverlayOptions {\n // classname applied to the overlay element\n className: string\n // style applied to overlay element, or null to prevent styles\n style: Record<string, string>\n}\n\nexport interface ResizeOptions {\n // class name applied to the resize handles\n handleClassName: string\n // style applied to resize handles, or null to prevent styles\n handleStyle: Record<string, string>\n}\n\nexport interface ToolButtonOption {\n name: string\n icon: string\n isActive?: (el: HTMLElement) => boolean\n apply: (this: ImageToolbar, el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => void\n}\n\nexport interface ToolbarButtonOptions {\n buttons: Record<string, ToolButtonOption \| boolean>\n}\n\nexport interface ToolbarOptions extends ToolbarButtonOptions {\n // class name applied to the root toolbar element\n mainClassName: string\n // style applied to root toolbar element, or null to prevent styles\n mainStyle: Record<string, unknown>\n // class name applied to each button in the toolbar\n buttonClassName: string\n /* whether or not to add the selected style to the buttons.\n they'll always get the is-selected class */\n addButtonSelectStyle: boolean\n // style applied to buttons, or null to prevent styles\n buttonStyle: Record<string, unknown>\n // style applied to the svgs in the buttons\n svgStyle: Record<string, unknown>\n}\n\nexport interface BlotFormatterOptionsInput {\n specs: typeof BlotSpec[]\n overlay: Partial<OverlayOptions>\n resize: Partial<ResizeOptions>\n toolbar: Partial<ToolbarOptions>\n}\nexport interface BlotFormatterOptions {\n specs: typeof BlotSpec[]\n overlay: OverlayOptions\n resize: ResizeOptions\n toolbar: ToolbarOptions\n allowInvalidUrl: boolean\n}\n\nexport const LEFT_ALIGN = 'align-left'\nexport const CENTER_ALIGN = 'align-center'\nexport const RIGHT_ALIGN = 'align-right'\nexport const COPY = 'copy'\nexport const DOWNLOAD = 'download'\nexport const PREVIEW = 'preview'\nconst DefaultOptions: BlotFormatterOptions = {\n // 默认情况下，`file://` 格式的本地文件路径在浏览器环境无法读取，因此会被转换成 `//:0`，但是在一些特殊的场景下（比如：Electron），需要获取到图片的原始路径，进行后续的上传处理\n // 注意：该选项一旦设置为 true，本地磁盘路径会暴露出去，这可能会带来安全风险，请确保你了解相关的安全隐患\n allowInvalidUrl: false,\n\n specs: [\n ImageSpec,\n ],\n overlay: {\n className: 'blot-formatter__overlay',\n style: {\n position: 'absolute',\n boxSizing: 'border-box',\n border: '1px dashed #444',\n },\n },\n toolbar: {\n mainClassName: 'blot-formatter__toolbar',\n mainStyle: {\n position: 'absolute',\n top: '-12px',\n right: '0',\n left: '0',\n height: '0',\n minWidth: '120px',\n font: '12px/1.0 Arial, Helvetica, sans-serif',\n textAlign: 'center',\n color: '#333',\n boxSizing: 'border-box',\n cursor: 'default',\n zIndex: '1',\n },\n buttonClassName: 'blot-formatter__toolbar-button',\n addButtonSelectStyle: true,\n buttonStyle: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '24px',\n height: '24px',\n background: 'white',\n border: '1px solid #999',\n verticalAlign: 'middle',\n cursor: 'pointer',\n },\n svgStyle: {\n display: 'inline-block',\n width: '16px',\n height: '16px',\n background: 'white',\n verticalAlign: 'middle',\n },\n buttons: {\n [LEFT_ALIGN]: true,\n [CENTER_ALIGN]: true,\n [RIGHT_ALIGN]: true,\n [COPY]: true,\n [DOWNLOAD]: true,\n [PREVIEW]: true,\n },\n },\n resize: {\n handleClassName: 'blot-formatter__resize-handle',\n handleStyle: {\n position: 'absolute',\n height: '12px',\n width: '12px',\n backgroundColor: 'white',\n border: '1px solid #777',\n boxSizing: 'border-box',\n opacity: '0.80',\n },\n },\n}\n\nexport default DefaultOptions\n"],"names":["ImageSpec"],"mappings":";;;;AA2DO,MAAM,aAAa;AACnB,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,OAAO;AACb,MAAM,WAAW;AACjB,MAAM,UAAU;AACvB,MAAM,iBAAuC;AAAA;AAAA;AAAA,EAG3C,iBAAiB;AAAA,EAEjB,OAAO;AAAA,IACLA,UAAAA;AAAAA,EAAA;AAAA,EAEF,SAAS;AAAA,IACP,WAAW;AAAA,IACX,OAAO;AAAA,MACL,UAAU;AAAA,MACV,WAAW;AAAA,MACX,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,SAAS;AAAA,IACP,eAAe;AAAA,IACf,WAAW;AAAA,MACT,UAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAO;AAAA,MACP,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA,MACP,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,QAAQ;AAAA,IAAA;AAAA,IAEV,iBAAiB;AAAA,IACjB,sBAAsB;AAAA,IACtB,aAAa;AAAA,MACX,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,QAAQ;AAAA,IAAA;AAAA,IAEV,UAAU;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,eAAe;AAAA,IAAA;AAAA,IAEjB,SAAS;AAAA,MACP,CAAC,UAAU,GAAG;AAAA,MACd,CAAC,YAAY,GAAG;AAAA,MAChB,CAAC,WAAW,GAAG;AAAA,MACf,CAAC,IAAI,GAAG;AAAA,MACR,CAAC,QAAQ,GAAG;AAAA,MACZ,CAAC,OAAO,GAAG;AAAA,IAAA;AAAA,EACb;AAAA,EAEF,QAAQ;AAAA,IACN,iBAAiB;AAAA,IACjB,aAAa;AAAA,MACX,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,iBAAiB;AAAA,MACjB,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;;;;;;;;"}

package/lib/modules/custom-image/preview/index.cjs.js ADDED Viewed

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const previewModal = require("./preview-modal.cjs.js");
+exports.ImagePreviewModal = previewModal.ImagePreviewModal;
+exports.getImagePreviewModal = previewModal.getImagePreviewModal;
+//# sourceMappingURL=index.cjs.js.map

package/lib/modules/custom-image/preview/index.cjs.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/lib/modules/custom-image/preview/preview-modal.cjs.js ADDED Viewed

@@ -0,0 +1,230 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+class ImagePreviewModal {
+  constructor() {
+    __publicField(this, "modal", null);
+    __publicField(this, "overlay", null);
+    __publicField(this, "previewImage", null);
+    __publicField(this, "scaleTooltip", null);
+    __publicField(this, "currentScale", 1);
+    __publicField(this, "minScale", 0.5);
+    __publicField(this, "maxScale", 3);
+    __publicField(this, "scaleStep", 0.1);
+    __publicField(this, "tooltipHideTimer", null);
+    /**
+     * 处理鼠标滚轮事件 - 缩放图片
+     */
+    __publicField(this, "onMouseWheel", (event) => {
+      if (!this.modal || this.modal.style.display === "none") {
+        return;
+      }
+      event.preventDefault();
+      const delta = event.deltaY > 0 ? -this.scaleStep : this.scaleStep;
+      this.setScale(this.currentScale + delta);
+      this.showScaleTooltip();
+    });
+    this.initModal();
+  }
+  initModal() {
+    this.overlay = document.createElement("div");
+    this.overlay.className = "image-preview-overlay";
+    this.overlay.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.8);
+      display: none;
+      z-index: 9999;
+      cursor: pointer;
+    `;
+    this.modal = document.createElement("div");
+    this.modal.className = "image-preview-modal";
+    this.modal.style.cssText = `
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: transparent;
+      display: none;
+      z-index: 10000;
+      max-width: 90vw;
+      max-height: 90vh;
+      cursor: auto;
+    `;
+    this.previewImage = document.createElement("img");
+    this.previewImage.className = "image-preview-img";
+    this.previewImage.style.cssText = `
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+      border-radius: 4px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      transition: transform 0.2s ease-out;
+      cursor: grab;
+    `;
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "image-preview-close";
+    closeBtn.innerHTML = "×";
+    closeBtn.style.cssText = `
+      position: absolute;
+      top: -40px;
+      right: 0;
+      width: 40px;
+      height: 40px;
+      border: none;
+      background-color: transparent;
+      color: white;
+      font-size: 32px;
+      cursor: pointer;
+      z-index: 10001;
+      line-height: 1;
+      padding: 0;
+    `;
+    closeBtn.addEventListener("click", () => this.hide());
+    this.modal.appendChild(this.previewImage);
+    this.modal.appendChild(closeBtn);
+    this.scaleTooltip = document.createElement("div");
+    this.scaleTooltip.className = "image-preview-scale-tooltip";
+    this.scaleTooltip.style.cssText = `
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: rgba(0, 0, 0, 0.7);
+      color: white;
+      padding: 12px 20px;
+      border-radius: 6px;
+      font-size: 14px;
+      z-index: 10002;
+      display: none;
+      pointer-events: none;
+      white-space: nowrap;
+      font-weight: 500;
+    `;
+    document.body.appendChild(this.scaleTooltip);
+    this.overlay.addEventListener("click", () => this.hide());
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
+        this.hide();
+      }
+    });
+    document.addEventListener("wheel", (e) => this.onMouseWheel(e), { passive: false });
+    this.modal.addEventListener("click", (e) => {
+      e.stopPropagation();
+    });
+    document.body.appendChild(this.overlay);
+    document.body.appendChild(this.modal);
+  }
+  /**
+   * 设置缩放比例
+   */
+  setScale(scale) {
+    this.currentScale = Math.max(this.minScale, Math.min(scale, this.maxScale));
+    if (this.previewImage) {
+      this.previewImage.style.transform = `scale(${this.currentScale})`;
+    }
+  }
+  /**
+   * 显示缩放百分比提示
+   */
+  showScaleTooltip() {
+    if (!this.scaleTooltip) {
+      return;
+    }
+    if (this.tooltipHideTimer !== null) {
+      clearTimeout(this.tooltipHideTimer);
+    }
+    const percentage = Math.round(this.currentScale * 100);
+    this.scaleTooltip.textContent = `${percentage}%`;
+    this.scaleTooltip.style.display = "block";
+    this.tooltipHideTimer = window.setTimeout(() => {
+      if (this.scaleTooltip) {
+        this.scaleTooltip.style.display = "none";
+      }
+      this.tooltipHideTimer = null;
+    }, 1500);
+  }
+  /**
+   * 隐藏缩放提示
+   */
+  hideScaleTooltip() {
+    if (this.tooltipHideTimer !== null) {
+      clearTimeout(this.tooltipHideTimer);
+      this.tooltipHideTimer = null;
+    }
+    if (this.scaleTooltip) {
+      this.scaleTooltip.style.display = "none";
+    }
+  }
+  /**
+   * 重置缩放比例
+   */
+  resetScale() {
+    this.currentScale = 1;
+    if (this.previewImage) {
+      this.previewImage.style.transform = "scale(1)";
+    }
+    this.hideScaleTooltip();
+  }
+  /**
+   * 显示预览
+   * @param imageUrl 图片URL
+   */
+  show(imageUrl) {
+    if (!this.previewImage || !this.modal || !this.overlay) {
+      return;
+    }
+    this.resetScale();
+    this.previewImage.src = imageUrl;
+    this.modal.style.display = "flex";
+    this.modal.style.alignItems = "center";
+    this.modal.style.justifyContent = "center";
+    this.overlay.style.display = "block";
+    document.body.style.overflow = "hidden";
+  }
+  /**
+   * 隐藏预览
+   */
+  hide() {
+    if (this.modal && this.overlay) {
+      this.modal.style.display = "none";
+      this.overlay.style.display = "none";
+      document.body.style.overflow = "";
+      this.resetScale();
+    }
+  }
+  /**
+   * 销毁预览模态框
+   */
+  destroy() {
+    this.hideScaleTooltip();
+    if (this.overlay && this.overlay.parentNode) {
+      this.overlay.parentNode.removeChild(this.overlay);
+    }
+    if (this.modal && this.modal.parentNode) {
+      this.modal.parentNode.removeChild(this.modal);
+    }
+    if (this.scaleTooltip && this.scaleTooltip.parentNode) {
+      this.scaleTooltip.parentNode.removeChild(this.scaleTooltip);
+    }
+    this.modal = null;
+    this.overlay = null;
+    this.previewImage = null;
+    this.scaleTooltip = null;
+  }
+}
+let globalPreviewModal = null;
+function getImagePreviewModal() {
+  if (!globalPreviewModal) {
+    globalPreviewModal = new ImagePreviewModal();
+  }
+  return globalPreviewModal;
+}
+exports.ImagePreviewModal = ImagePreviewModal;
+exports.getImagePreviewModal = getImagePreviewModal;
+//# sourceMappingURL=preview-modal.cjs.js.map

package/lib/modules/custom-image/preview/preview-modal.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"preview-modal.cjs.js","sources":["../../../../../src/modules/custom-image/preview/preview-modal.ts"],"sourcesContent":["/**\n * 图片预览模态框\n * 提供图片双击时的预览功能，包括遮罩层和全屏预览\n */\n\nexport class ImagePreviewModal {\n private modal: HTMLElement | null = null\n private overlay: HTMLElement | null = null\n private previewImage: HTMLImageElement | null = null\n private scaleTooltip: HTMLElement | null = null\n private currentScale: number = 1\n private minScale: number = 0.5\n private maxScale: number = 3\n private scaleStep: number = 0.1\n private tooltipHideTimer: number | null = null\n\n constructor() {\n this.initModal()\n }\n\n private initModal() {\n // 创建遮罩层\n this.overlay = document.createElement('div')\n this.overlay.className = 'image-preview-overlay'\n this.overlay.style.cssText = `\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.8);\n display: none;\n z-index: 9999;\n cursor: pointer;\n `\n\n // 创建预览容器\n this.modal = document.createElement('div')\n this.modal.className = 'image-preview-modal'\n this.modal.style.cssText = `\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: transparent;\n display: none;\n z-index: 10000;\n max-width: 90vw;\n max-height: 90vh;\n cursor: auto;\n `\n\n // 创建预览图片\n this.previewImage = document.createElement('img')\n this.previewImage.className = 'image-preview-img'\n this.previewImage.style.cssText = `\n max-width: 100%;\n max-height: 100%;\n object-fit: contain;\n border-radius: 4px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n transition: transform 0.2s ease-out;\n cursor: grab;\n `\n\n // 创建关闭按钮\n const closeBtn = document.createElement('button')\n closeBtn.className = 'image-preview-close'\n closeBtn.innerHTML = '×'\n closeBtn.style.cssText = `\n position: absolute;\n top: -40px;\n right: 0;\n width: 40px;\n height: 40px;\n border: none;\n background-color: transparent;\n color: white;\n font-size: 32px;\n cursor: pointer;\n z-index: 10001;\n line-height: 1;\n padding: 0;\n `\n closeBtn.addEventListener('click', () => this.hide())\n\n this.modal.appendChild(this.previewImage)\n this.modal.appendChild(closeBtn)\n\n // 创建缩放提示窗口\n this.scaleTooltip = document.createElement('div')\n this.scaleTooltip.className = 'image-preview-scale-tooltip'\n this.scaleTooltip.style.cssText = `\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: rgba(0, 0, 0, 0.7);\n color: white;\n padding: 12px 20px;\n border-radius: 6px;\n font-size: 14px;\n z-index: 10002;\n display: none;\n pointer-events: none;\n white-space: nowrap;\n font-weight: 500;\n `\n document.body.appendChild(this.scaleTooltip)\n\n // 绑定事件\n this.overlay.addEventListener('click', () => this.hide())\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape') {\n this.hide()\n }\n })\n\n // 绑定滚轮缩放事件\n document.addEventListener('wheel', (e) => this.onMouseWheel(e), { passive: false })\n\n // 阻止模态框内的点击事件冒泡到遮罩层\n this.modal.addEventListener('click', (e) => {\n e.stopPropagation()\n })\n\n document.body.appendChild(this.overlay)\n document.body.appendChild(this.modal)\n }\n\n /**\n * 处理鼠标滚轮事件 - 缩放图片\n */\n private onMouseWheel = (event: WheelEvent) => {\n // 只在预览打开时处理\n if (!this.modal || this.modal.style.display === 'none') {\n return\n }\n\n event.preventDefault()\n\n // 根据滚轮方向调整缩放比例\n const delta = event.deltaY > 0 ? -this.scaleStep : this.scaleStep\n this.setScale(this.currentScale + delta)\n\n // 显示缩放提示\n this.showScaleTooltip()\n }\n\n /**\n * 设置缩放比例\n */\n private setScale(scale: number) {\n // 限制缩放范围\n this.currentScale = Math.max(this.minScale, Math.min(scale, this.maxScale))\n\n if (this.previewImage) {\n this.previewImage.style.transform = `scale(${this.currentScale})`\n }\n }\n\n /**\n * 显示缩放百分比提示\n */\n private showScaleTooltip() {\n if (!this.scaleTooltip) {\n return\n }\n\n // 清除之前的隐藏计时器\n if (this.tooltipHideTimer !== null) {\n clearTimeout(this.tooltipHideTimer)\n }\n\n // 更新提示文本\n const percentage = Math.round(this.currentScale * 100)\n this.scaleTooltip.textContent = `${percentage}%`\n this.scaleTooltip.style.display = 'block'\n\n // 1.5秒后隐藏提示\n this.tooltipHideTimer = window.setTimeout(() => {\n if (this.scaleTooltip) {\n this.scaleTooltip.style.display = 'none'\n }\n this.tooltipHideTimer = null\n }, 1500)\n }\n\n /**\n * 隐藏缩放提示\n */\n private hideScaleTooltip() {\n if (this.tooltipHideTimer !== null) {\n clearTimeout(this.tooltipHideTimer)\n this.tooltipHideTimer = null\n }\n if (this.scaleTooltip) {\n this.scaleTooltip.style.display = 'none'\n }\n }\n\n /**\n * 重置缩放比例\n */\n private resetScale() {\n this.currentScale = 1\n if (this.previewImage) {\n this.previewImage.style.transform = 'scale(1)'\n }\n this.hideScaleTooltip()\n }\n\n /**\n * 显示预览\n * @param imageUrl 图片URL\n */\n show(imageUrl: string) {\n if (!this.previewImage || !this.modal || !this.overlay) {\n return\n }\n\n this.resetScale()\n this.previewImage.src = imageUrl\n this.modal.style.display = 'flex'\n this.modal.style.alignItems = 'center'\n this.modal.style.justifyContent = 'center'\n this.overlay.style.display = 'block'\n\n // 防止页面滚动\n document.body.style.overflow = 'hidden'\n }\n\n /**\n * 隐藏预览\n */\n hide() {\n if (this.modal && this.overlay) {\n this.modal.style.display = 'none'\n this.overlay.style.display = 'none'\n document.body.style.overflow = ''\n this.resetScale()\n }\n }\n\n /**\n * 销毁预览模态框\n */\n destroy() {\n this.hideScaleTooltip()\n if (this.overlay && this.overlay.parentNode) {\n this.overlay.parentNode.removeChild(this.overlay)\n }\n if (this.modal && this.modal.parentNode) {\n this.modal.parentNode.removeChild(this.modal)\n }\n if (this.scaleTooltip && this.scaleTooltip.parentNode) {\n this.scaleTooltip.parentNode.removeChild(this.scaleTooltip)\n }\n this.modal = null\n this.overlay = null\n this.previewImage = null\n this.scaleTooltip = null\n }\n}\n\n// 全局单例实例\nlet globalPreviewModal: ImagePreviewModal | null = null\n\n/**\n * 获取或创建全局预览模态框实例\n */\nexport function getImagePreviewModal(): ImagePreviewModal {\n if (!globalPreviewModal) {\n globalPreviewModal = new ImagePreviewModal()\n }\n return globalPreviewModal\n}\n"],"names":[],"mappings":"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"}

package/lib/modules/custom-image/specs/custom-image-spec.cjs.js CHANGED Viewed

@@ -4,7 +4,9 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const editor_utils = require("../../../config/editor.utils.cjs.js");
+require("../preview/index.cjs.js");
 const imageSpec = require("./image-spec.cjs.js");
+const previewModal = require("../preview/preview-modal.cjs.js");
 class CustomImageSpec extends imageSpec.ImageSpec {
   constructor(formatter) {
     super(formatter);
@@ -40,6 +42,17 @@ class CustomImageSpec extends imageSpec.ImageSpec {
         quill.setSelection(index, len);
       }
     });
+    /**
+     * 处理图片双击事件 - 显示预览
+     */
+    __publicField(this, "onImageDoubleClick", (event) => {
+      const target = event.target;
+      const imageSrc = target.getAttribute("src") || target.getAttribute("data-image");
+      if (imageSrc) {
+        const modal = previewModal.getImagePreviewModal();
+        modal.show(imageSrc);
+      }
+    });
     this.formatter = formatter;
     this.oldRootScrollTop = this.formatter.quill.root.scrollTop;
     this.editorElem = this.formatter.quill.container;
@@ -53,6 +66,7 @@ class CustomImageSpec extends imageSpec.ImageSpec {
   init() {
     this.editorElem.addEventListener("mouseover", this.imageMouseOver.bind(this));
     this.editorElem.addEventListener("mouseout", this.imageMouseout);
+    this.editorElem.addEventListener("dblclick", this.onImageDoubleClick.bind(this));
     super.init();
   }
   imageMouseOver(event) {

package/lib/modules/custom-image/specs/custom-image-spec.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"custom-image-spec.cjs.js","sources":["../../../../../src/modules/custom-image/specs/custom-image-spec.ts"],"sourcesContent":["import type { BlotFormatter } from '../blot-formatter'\nimport { isInside } from '../../../config/editor.utils'\nimport { ImageSpec } from './image-spec'\n\nexport class CustomImageSpec extends ImageSpec {\n editorElem: HTMLElement \| undefined\n observer: any\n oldRootScrollTop: number\n\n constructor(formatter: BlotFormatter) {\n super(formatter)\n this.formatter = formatter\n this.oldRootScrollTop = this.formatter.quill.root.scrollTop\n this.editorElem = this.formatter.quill.container\n this.formatter.quill.root.addEventListener('scroll', this.handleQuillRootScroll.bind(this))\n }\n\n handleQuillRootScroll() {\n if (this.formatter.overlay) {\n this.formatter.overlay.style.marginTop = `${this.oldRootScrollTop - this.formatter.quill.root.scrollTop}px`\n }\n }\n\n init(): void {\n this.editorElem.addEventListener('mouseover', this.imageMouseOver.bind(this))\n this.editorElem.addEventListener('mouseout', this.imageMouseout)\n\n super.init()\n }\n\n imageMouseOver(event) {\n const target = event.target\n const isBlotFormatter = target?.classList?.contains('blot-formatter__overlay')\n if (target.nodeName === 'IMG' \|\| isBlotFormatter) {\n // this.addImagePreviewOverlay(event);\n }\n }\n\n imageMouseout = (event) => {\n if (event.target.nodeName === 'IMG'\n \|\| event.target.classList.contains('blot-formatter__overlay')) {\n const imgDom = event.target\n if (!isInside(event, imgDom)) {\n this.removeImagePreviewOverlay()\n }\n }\n }\n\n addImagePreviewOverlay(event) {\n const target = event.target\n const {\n left: imgLeft,\n width: imgWidth,\n } = target.getBoundingClientRect()\n // fix: 解决 ql-container 容器设置 calc(100vh - 180px) 这样的视窗相对单位时，滚动视窗导致图片相对视窗的 top 相应改变，从而导致图片预览按钮的位置显示错误\n const imgTop = target.getBoundingClientRect().top + this.formatter.quill.container.scrollTop\n\n const {\n left: editorLeft,\n top: editorTop,\n } = event.currentTarget.getBoundingClientRect()\n\n const imgRelativeLeft = imgLeft - editorLeft\n const imgRelativeTop = imgTop - editorTop\n\n const maxmizeWidth = 24\n const maxmizePadding = 15\n const previewLeft = imgRelativeLeft + imgWidth - maxmizeWidth - maxmizePadding\n const previewTop = imgRelativeTop + maxmizePadding\n\n const previewStyle = `\n left: ${previewLeft}px;\n top: ${previewTop}px;\n width: ${maxmizeWidth}px;\n `\n const imageSrc = target.src \|\| target.getAttribute('data-image')\n const imageId = target.getAttribute('data-image-id')\n\n const previewDom = event.currentTarget.querySelector('.image-preview__overlay')\n if (!previewDom) {\n event.currentTarget.insertAdjacentHTML('beforeend', `\n <div class=\"image-preview__overlay\" style=\"${previewStyle}\">\n <i class=\"icon-maxmize\" id=\"btn-image-preview\" data-image-id=\"${imageId}\"\n data-image=\"${imageSrc}\"></i>\n </div>\n `)\n }\n }\n\n removeImagePreviewOverlay() {\n const previewDom = this.editorElem.querySelector('.image-preview__overlay')\n if (previewDom) {\n previewDom.parentNode.removeChild(previewDom)\n }\n }\n\n onHide() {\n this.removeImagePreviewOverlay()\n super.onHide()\n }\n\n resetOverlayMarginTop() {\n if (this.formatter.overlay) {\n this.formatter.overlay.style.marginTop = '0px'\n }\n }\n\n onClick = (event: MouseEvent) => {\n const el = event.target\n const isReadonly = this.formatter.quill.options.readOnly\n if (!(el instanceof HTMLElement) \|\| el.tagName !== 'IMG' \|\| isReadonly) {\n return\n }\n\n this.img = el as HTMLImageElement\n this.oldRootScrollTop = this.formatter.quill.root.scrollTop\n this.resetOverlayMarginTop()\n this.formatter.show(this)\n\n // 通过图片dom获取图片选区用以复制，设置 current-select-img::selection 取消选区背景\n const imageDom = this.formatter.currentSpec?.getTargetElement()\n if (imageDom) {\n imageDom.classList.add('current-select-img')\n const quill = this.formatter.quill\n const imgBlot = quill.scroll.find(this.img)\n const index = quill.getIndex(imgBlot)\n const len = imgBlot.length()\n quill.setSelection(index, len)\n }\n }\n}\n"],"names":["ImageSpec","isInside"],"mappings":"~~;;;;;;;AAIO~~,MAAM,wBAAwBA,UAAAA,UAAU;AAAA,EAK7C,YAAY,WAA0B;AACpC,UAAM,SAAS;AALjB;AACA;AACA;~~AA+BA~~,yCAAgB,CAAC,UAAU;AACzB,UAAI,MAAM,OAAO,aAAa,SACzB,MAAM,OAAO,UAAU,SAAS,yBAAyB,GAAG;AAC/D,cAAM,SAAS,MAAM;AACrB,YAAI,CAACC,aAAAA,SAAS,OAAO,MAAM,GAAG;AAC5B,eAAK,0BAAA;AAAA,QACP;AAAA,MACF;AAAA,IACF;AA6DA,mCAAU,CAAC,UAAsB;;AAC/B,YAAM,KAAK,MAAM;AACjB,YAAM,aAAa,KAAK,UAAU,MAAM,QAAQ;AAChD,UAAI,EAAE,cAAc,gBAAgB,GAAG,YAAY,SAAS,YAAY;AACtE;AAAA,MACF;AAEA,WAAK,MAAM;AACX,WAAK,mBAAmB,KAAK,UAAU,MAAM,KAAK;AAClD,WAAK,sBAAA;AACL,WAAK,UAAU,KAAK,IAAI;AAGxB,YAAM,YAAW,UAAK,UAAU,gBAAf,mBAA4B;AAC7C,UAAI,UAAU;AACZ,iBAAS,UAAU,IAAI,oBAAoB;AAC3C,cAAM,QAAQ,KAAK,UAAU;AAC7B,cAAM,UAAU,MAAM,OAAO,KAAK,KAAK,GAAG;AAC1C,cAAM,QAAQ,MAAM,SAAS,OAAO;AACpC,cAAM,MAAM,QAAQ,OAAA;AACpB,cAAM,aAAa,OAAO,GAAG;AAAA,MAC/B;AAAA,IACF;~~AAtHE~~,SAAK,YAAY;AACjB,SAAK,mBAAmB,KAAK,UAAU,MAAM,KAAK;AAClD,SAAK,aAAa,KAAK,UAAU,MAAM;AACvC,SAAK,UAAU,MAAM,KAAK,iBAAiB,UAAU,KAAK,sBAAsB,KAAK,IAAI,CAAC;AAAA,EAC5F;AAAA,EAEA,wBAAwB;AACtB,QAAI,KAAK,UAAU,SAAS;AAC1B,WAAK,UAAU,QAAQ,MAAM,YAAY,GAAG,KAAK,mBAAmB,KAAK,UAAU,MAAM,KAAK,SAAS;AAAA,IACzG;AAAA,EACF;AAAA,EAEA,OAAa;AACX,SAAK,WAAW,iBAAiB,aAAa,KAAK,eAAe,KAAK,IAAI,CAAC;AAC5E,SAAK,WAAW,iBAAiB,YAAY,KAAK,aAAa;~~AAE~~/D,UAAM,KAAA;AAAA,EACR;AAAA,EAEA,eAAe,OAAO;;AACpB,UAAM,SAAS,MAAM;AACrB,UAAM,mBAAkB,sCAAQ,cAAR,mBAAmB,SAAS;AACpD,QAAI,OAAO,aAAa,SAAS,iBAAiB;AAAA,IAElD;AAAA,EACF;AAAA,EAYA,uBAAuB,OAAO;AAC5B,UAAM,SAAS,MAAM;AACrB,UAAM;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,IAAA,IACL,OAAO,sBAAA;AAEX,UAAM,SAAS,OAAO,wBAAwB,MAAM,KAAK,UAAU,MAAM,UAAU;AAEnF,UAAM;AAAA,MACJ,MAAM;AAAA,MACN,KAAK;AAAA,IAAA,IACH,MAAM,cAAc,sBAAA;AAExB,UAAM,kBAAkB,UAAU;AAClC,UAAM,iBAAiB,SAAS;AAEhC,UAAM,eAAe;AACrB,UAAM,iBAAiB;AACvB,UAAM,cAAc,kBAAkB,WAAW,eAAe;AAChE,UAAM,aAAa,iBAAiB;AAEpC,UAAM,eAAe;AAAA,gBACT,WAAW;AAAA,eACZ,UAAU;AAAA,iBACR,YAAY;AAAA;AAEzB,UAAM,WAAW,OAAO,OAAO,OAAO,aAAa,YAAY;AAC/D,UAAM,UAAU,OAAO,aAAa,eAAe;AAEnD,UAAM,aAAa,MAAM,cAAc,cAAc,yBAAyB;AAC9E,QAAI,CAAC,YAAY;AACf,YAAM,cAAc,mBAAmB,aAAa;AAAA,uDACH,YAAY;AAAA,4EACS,OAAO;AAAA,4BACvD,QAAQ;AAAA;AAAA,SAE3B;AAAA,IACL;AAAA,EACF;AAAA,EAEA,4BAA4B;AAC1B,UAAM,aAAa,KAAK,WAAW,cAAc,yBAAyB;AAC1E,QAAI,YAAY;AACd,iBAAW,WAAW,YAAY,UAAU;AAAA,IAC9C;AAAA,EACF;AAAA,EAEA,SAAS;AACP,SAAK,0BAAA;AACL,UAAM,OAAA;AAAA,EACR;AAAA,EAEA,wBAAwB;AACtB,QAAI,KAAK,UAAU,SAAS;AAC1B,WAAK,UAAU,QAAQ,MAAM,YAAY;AAAA,IAC3C;AAAA,EACF;~~AAyBF~~;;"}
1	+ {"version":3,"file":"custom-image-spec.cjs.js","sources":["../../../../../src/modules/custom-image/specs/custom-image-spec.ts"],"sourcesContent":["import type { BlotFormatter } from '../blot-formatter'\nimport { isInside } from '../../../config/editor.utils'\nimport { getImagePreviewModal } from '../preview'\nimport { ImageSpec } from './image-spec'\n\nexport class CustomImageSpec extends ImageSpec {\n editorElem: HTMLElement \| undefined\n observer: any\n oldRootScrollTop: number\n\n constructor(formatter: BlotFormatter) {\n super(formatter)\n this.formatter = formatter\n this.oldRootScrollTop = this.formatter.quill.root.scrollTop\n this.editorElem = this.formatter.quill.container\n this.formatter.quill.root.addEventListener('scroll', this.handleQuillRootScroll.bind(this))\n }\n\n handleQuillRootScroll() {\n if (this.formatter.overlay) {\n this.formatter.overlay.style.marginTop = `${this.oldRootScrollTop - this.formatter.quill.root.scrollTop}px`\n }\n }\n\n init(): void {\n this.editorElem.addEventListener('mouseover', this.imageMouseOver.bind(this))\n this.editorElem.addEventListener('mouseout', this.imageMouseout)\n this.editorElem.addEventListener('dblclick', this.onImageDoubleClick.bind(this))\n\n super.init()\n }\n\n imageMouseOver(event) {\n const target = event.target\n const isBlotFormatter = target?.classList?.contains('blot-formatter__overlay')\n if (target.nodeName === 'IMG' \|\| isBlotFormatter) {\n // this.addImagePreviewOverlay(event);\n }\n }\n\n imageMouseout = (event) => {\n if (event.target.nodeName === 'IMG'\n \|\| event.target.classList.contains('blot-formatter__overlay')) {\n const imgDom = event.target\n if (!isInside(event, imgDom)) {\n this.removeImagePreviewOverlay()\n }\n }\n }\n\n addImagePreviewOverlay(event) {\n const target = event.target\n const {\n left: imgLeft,\n width: imgWidth,\n } = target.getBoundingClientRect()\n // fix: 解决 ql-container 容器设置 calc(100vh - 180px) 这样的视窗相对单位时，滚动视窗导致图片相对视窗的 top 相应改变，从而导致图片预览按钮的位置显示错误\n const imgTop = target.getBoundingClientRect().top + this.formatter.quill.container.scrollTop\n\n const {\n left: editorLeft,\n top: editorTop,\n } = event.currentTarget.getBoundingClientRect()\n\n const imgRelativeLeft = imgLeft - editorLeft\n const imgRelativeTop = imgTop - editorTop\n\n const maxmizeWidth = 24\n const maxmizePadding = 15\n const previewLeft = imgRelativeLeft + imgWidth - maxmizeWidth - maxmizePadding\n const previewTop = imgRelativeTop + maxmizePadding\n\n const previewStyle = `\n left: ${previewLeft}px;\n top: ${previewTop}px;\n width: ${maxmizeWidth}px;\n `\n const imageSrc = target.src \|\| target.getAttribute('data-image')\n const imageId = target.getAttribute('data-image-id')\n\n const previewDom = event.currentTarget.querySelector('.image-preview__overlay')\n if (!previewDom) {\n event.currentTarget.insertAdjacentHTML('beforeend', `\n <div class=\"image-preview__overlay\" style=\"${previewStyle}\">\n <i class=\"icon-maxmize\" id=\"btn-image-preview\" data-image-id=\"${imageId}\"\n data-image=\"${imageSrc}\"></i>\n </div>\n `)\n }\n }\n\n removeImagePreviewOverlay() {\n const previewDom = this.editorElem.querySelector('.image-preview__overlay')\n if (previewDom) {\n previewDom.parentNode.removeChild(previewDom)\n }\n }\n\n onHide() {\n this.removeImagePreviewOverlay()\n super.onHide()\n }\n\n resetOverlayMarginTop() {\n if (this.formatter.overlay) {\n this.formatter.overlay.style.marginTop = '0px'\n }\n }\n\n onClick = (event: MouseEvent) => {\n const el = event.target\n const isReadonly = this.formatter.quill.options.readOnly\n if (!(el instanceof HTMLElement) \|\| el.tagName !== 'IMG' \|\| isReadonly) {\n return\n }\n\n this.img = el as HTMLImageElement\n this.oldRootScrollTop = this.formatter.quill.root.scrollTop\n this.resetOverlayMarginTop()\n this.formatter.show(this)\n\n // 通过图片dom获取图片选区用以复制，设置 current-select-img::selection 取消选区背景\n const imageDom = this.formatter.currentSpec?.getTargetElement()\n if (imageDom) {\n imageDom.classList.add('current-select-img')\n const quill = this.formatter.quill\n const imgBlot = quill.scroll.find(this.img)\n const index = quill.getIndex(imgBlot)\n const len = imgBlot.length()\n quill.setSelection(index, len)\n }\n }\n\n /*\n 处理图片双击事件 - 显示预览\n */\n onImageDoubleClick = (event: MouseEvent) => {\n const target = event.target\n const imageSrc = target.getAttribute('src') \|\| target.getAttribute('data-image')\n\n if (imageSrc) {\n const modal = getImagePreviewModal()\n modal.show(imageSrc)\n }\n }\n}\n"],"names":["ImageSpec","isInside","getImagePreviewModal"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/fluent-editor",
   "type": "module",
-  "version": "4.1.0-alpha.2",
+  "version": "4.1.0-alpha.3",
   "description": "A rich text editor based on Quill 2.0, which extends rich modules and formats on the basis of Quill. It's powerful and out-of-the-box.",
   "author": "OpenTiny Team",
   "license": "MIT",

package/types/modules/custom-image/index.d.ts CHANGED Viewed

@@ -2,3 +2,4 @@ export * from './actions';
 export * from './blot-formatter';
 export * from './image';
 export * from './specs';
+export * from './preview';

package/types/modules/custom-image/options.d.ts CHANGED Viewed

@@ -43,5 +43,6 @@ export declare const CENTER_ALIGN = "align-center";
 export declare const RIGHT_ALIGN = "align-right";
 export declare const COPY = "copy";
 export declare const DOWNLOAD = "download";
+export declare const PREVIEW = "preview";
 declare const DefaultOptions: BlotFormatterOptions;
 export default DefaultOptions;

package/types/modules/custom-image/preview/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './preview-modal';

package/types/modules/custom-image/preview/preview-modal.d.ts ADDED Viewed

@@ -0,0 +1,54 @@
+/**
+ * 图片预览模态框
+ * 提供图片双击时的预览功能，包括遮罩层和全屏预览
+ */
+export declare class ImagePreviewModal {
+    private modal;
+    private overlay;
+    private previewImage;
+    private scaleTooltip;
+    private currentScale;
+    private minScale;
+    private maxScale;
+    private scaleStep;
+    private tooltipHideTimer;
+    constructor();
+    private initModal;
+    /**
+     * 处理鼠标滚轮事件 - 缩放图片
+     */
+    private onMouseWheel;
+    /**
+     * 设置缩放比例
+     */
+    private setScale;
+    /**
+     * 显示缩放百分比提示
+     */
+    private showScaleTooltip;
+    /**
+     * 隐藏缩放提示
+     */
+    private hideScaleTooltip;
+    /**
+     * 重置缩放比例
+     */
+    private resetScale;
+    /**
+     * 显示预览
+     * @param imageUrl 图片URL
+     */
+    show(imageUrl: string): void;
+    /**
+     * 隐藏预览
+     */
+    hide(): void;
+    /**
+     * 销毁预览模态框
+     */
+    destroy(): void;
+}
+/**
+ * 获取或创建全局预览模态框实例
+ */
+export declare function getImagePreviewModal(): ImagePreviewModal;

package/types/modules/custom-image/specs/custom-image-spec.d.ts CHANGED Viewed

@@ -14,4 +14,8 @@ export declare class CustomImageSpec extends ImageSpec {
     onHide(): void;
     resetOverlayMarginTop(): void;
     onClick: (event: MouseEvent) => void;
+    /**
+     * 处理图片双击事件 - 显示预览
+     */
+    onImageDoubleClick: (event: MouseEvent) => void;
 }