@opentiny/fluent-editor 4.0.0-alpha.0 → 4.0.0-alpha.2

package/es/modules/custom-image/image.es.js

@@ -1,7 +1,12 @@
+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 Quill from "quill";
 import { sanitize, isNullOrUndefined } from "../../config/editor.utils.es.js";
-const Embed = Quill.imports["blots/embed"];
-const Inline = Quill.imports["blots/inline"];
+import { isObject } from "../../utils/is.es.js";
+import "./actions/index.es.js";
+import { alignmentHandler, ALIGN_ATTR } from "./actions/image-toolbar-buttons.es.js";
+const Embed = Quill.import("blots/embed");
 const ATTRIBUTES = ["alt", "height", "width", "image-id"];
 const _CustomImage = class _CustomImage extends Embed {
   static create(value) {
@@ -15,8 +20,19 @@ const _CustomImage = class _CustomImage extends Embed {
       node.setAttribute("src", imgURL);
     }
     node.setAttribute("data-image-id", `img${_CustomImage.ID_SEED++}`);
-    node.setAttribute("devui-editorx-image", true);
     node.style.verticalAlign = "baseline";
+    if (isObject(value)) {
+      if (value.align && alignmentHandler[value.align]) {
+        node.setAttribute(ALIGN_ATTR, value.align);
+        alignmentHandler[value.align](node);
+      }
+      if (value.width) {
+        node.setAttribute("width", String(value.width));
+      }
+      if (value.height) {
+        node.setAttribute("height", String(value.height));
+      }
+    }
     return node;
   }
   static formats(domNode) {
@@ -33,19 +49,27 @@ const _CustomImage = class _CustomImage extends Embed {
   static register() {
     if (/Firefox/i.test(navigator.userAgent)) {
       setTimeout(() => {
-        document.execCommand("enableObjectResizing", false, false);
+        document.execCommand("enableObjectResizing", false, "false");
       }, 1);
     }
   }
   static sanitize(url) {
-    return sanitize(url, ["http", "https", "data"]) ? url : "//:0";
+    return sanitize(url, ["http", "https", "blob", "data"]) ? url : "//:0";
   }
   static value(domNode) {
     const formats = {};
     const imageSrc = domNode.getAttribute("src");
     formats.src = this.sanitize(imageSrc);
-    formats.hasExisted = domNode.getAttribute("devui-editorx-image");
     formats.imageId = domNode.dataset.imageId;
+    if (domNode.dataset.align) {
+      formats.align = domNode.dataset.align;
+    }
+    if (domNode.hasAttribute("width")) {
+      formats.width = domNode.getAttribute("width");
+    }
+    if (domNode.hasAttribute("height")) {
+      formats.height = domNode.getAttribute("height");
+    }
     return formats;
   }
   format(name, value) {
@@ -74,22 +98,11 @@ const _CustomImage = class _CustomImage extends Embed {
     return wrapper;
   }
 };
-_CustomImage.ID_SEED = 0;
+__publicField(_CustomImage, "blotName", "image");
+__publicField(_CustomImage, "tagName", "IMG");
+__publicField(_CustomImage, "ID_SEED", 0);
 let CustomImage = _CustomImage;
-CustomImage.blotName = "image";
-CustomImage.tagName = "IMG";
-class CustomImageContainer extends Inline {
-  constructor(scroll, domNode) {
-    super(scroll, domNode);
-    domNode.setAttribute("contenteditable", false);
-  }
-}
-CustomImageContainer.blotName = "image-container";
-CustomImageContainer.className = "ql-image-container";
-CustomImageContainer.tagName = "DIV";
-CustomImageContainer.allowedChildren = [CustomImage];
 export {
-  CustomImageContainer as ImageContainerBlot,
-  CustomImage as default
+  CustomImage
 };
 //# sourceMappingURL=image.es.js.map

package/es/modules/custom-image/image.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.es.js","sources":["../../../../src/modules/custom-image/image.ts"],"sourcesContent":["import Quill from 'quill'\r\nimport { isNullOrUndefined, sanitize } from '../../config/editor.utils'\r\n\r\nconst Embed = Quill.imports['blots/embed']\r\nconst Inline = Quill.imports['blots/inline']\r\n\r\nconst ATTRIBUTES = ['alt', 'height', 'width', 'image-id']\r\n\r\n// @dynamic\r\nclass CustomImage extends Embed {\r\n  static ID_SEED = 0\r\n  static blotName: string\r\n  static tagName: string\r\n  domNode: any\r\n  parent: any\r\n  scroll: any\r\n  next: any\r\n  static create(value) {\r\n    const node = super.create(value)\r\n    const url = typeof value === 'string' ? value : value.src\r\n    if (url) {\r\n      const imgURL = this.sanitize(url)\r\n      if (!imgURL?.startsWith('data:image')) {\r\n        node.dataset.src = imgURL\r\n      }\r\n      node.setAttribute('src', imgURL)\r\n    }\r\n    node.setAttribute('data-image-id', `img${CustomImage.ID_SEED++}`)\r\n    node.setAttribute('devui-editorx-image', true)\r\n    node.style.verticalAlign = 'baseline'\r\n    return node\r\n  }\r\n\r\n  static formats(domNode) {\r\n    return ATTRIBUTES.reduce((formats, attribute) => {\r\n      if (domNode.hasAttribute(attribute)) {\r\n        formats[attribute] = domNode.getAttribute(attribute)\r\n      }\r\n      return formats\r\n    }, {})\r\n  }\r\n\r\n  static match(url) {\r\n    return /\\.(jpe?g|gif|png)$/.test(url) || /^data:image\\/.+;base64/.test(url)\r\n  }\r\n\r\n  static register() {\r\n    if (/Firefox/i.test(navigator.userAgent)) {\r\n      setTimeout(() => {\r\n        // Disable image resizing in Firefox\r\n        document.execCommand('enableObjectResizing', false, false)\r\n      }, 1)\r\n    }\r\n  }\r\n\r\n  static sanitize(url) {\r\n    return sanitize(url, ['http', 'https', 'data']) ? url : '//:0'\r\n  }\r\n\r\n  static value(domNode) {\r\n    const formats: any = {}\r\n    const imageSrc = domNode.getAttribute('src')\r\n    formats.src = this.sanitize(imageSrc)\r\n    formats.hasExisted = domNode.getAttribute('devui-editorx-image')\r\n    formats.imageId = domNode.dataset.imageId\r\n    return formats\r\n  }\r\n\r\n  format(name, value) {\r\n    if (ATTRIBUTES.includes(name)) {\r\n      if (value) {\r\n        this.domNode.setAttribute(name, value)\r\n      }\r\n      else {\r\n        this.domNode.removeAttribute(name)\r\n      }\r\n    }\r\n    else {\r\n      super.format(name, value)\r\n    }\r\n  }\r\n\r\n  unWrap() {\r\n    this.parent.replaceWith(this)\r\n  }\r\n\r\n  wrap(name, value) {\r\n    const wrapper = typeof name === 'string' ? this.scroll.create(name, value) : name\r\n    if (!isNullOrUndefined(this.parent)) {\r\n      this.parent.insertBefore(wrapper, this.next || undefined)\r\n    }\r\n    if (typeof wrapper.appendChild !== 'function') {\r\n      throw new TypeError(`Cannot wrap ${name}`)\r\n    }\r\n    wrapper.appendChild(this)\r\n    return wrapper\r\n  }\r\n}\r\nCustomImage.blotName = 'image'\r\nCustomImage.tagName = 'IMG'\r\n\r\n// @dynamic\r\nclass CustomImageContainer extends Inline {\r\n  static tagName: string\r\n  static className: string\r\n  static blotName: string\r\n  static allowedChildren: typeof CustomImage[]\r\n  constructor(scroll, domNode) {\r\n    super(scroll, domNode)\r\n    domNode.setAttribute('contenteditable', false)\r\n  }\r\n}\r\nCustomImageContainer.blotName = 'image-container'\r\nCustomImageContainer.className = 'ql-image-container'\r\nCustomImageContainer.tagName = 'DIV'\r\n\r\nCustomImageContainer.allowedChildren = [CustomImage]\r\nexport { CustomImage as default, CustomImageContainer as ImageContainerBlot }\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"image.es.js","sources":["../../../../src/modules/custom-image/image.ts"],"sourcesContent":["import type { Parchment as TypeParchment } from 'quill'\r\nimport type TypeEmbed from 'quill/blots/embed'\r\nimport Quill from 'quill'\r\nimport { isNullOrUndefined, sanitize } from '../../config/editor.utils'\r\nimport { isObject } from '../../utils/is'\r\nimport { ALIGN_ATTR, alignmentHandler } from './actions'\r\n\r\nconst Embed = Quill.import('blots/embed') as typeof TypeEmbed\r\nconst ATTRIBUTES = ['alt', 'height', 'width', 'image-id']\r\n\r\nexport type ImageValue = string | {\r\n  src: string\r\n  align?: string\r\n  height?: number\r\n  width?: number\r\n}\r\nexport class CustomImage extends Embed {\r\n  static blotName = 'image'\r\n  static tagName = 'IMG'\r\n  static ID_SEED = 0\r\n  declare domNode: HTMLElement\r\n  static create(value: ImageValue) {\r\n    const node = super.create(value) as HTMLElement\r\n    const url = typeof value === 'string' ? value : value.src\r\n    if (url) {\r\n      const imgURL = this.sanitize(url)\r\n      if (!imgURL?.startsWith('data:image')) {\r\n        node.dataset.src = imgURL\r\n      }\r\n      node.setAttribute('src', imgURL)\r\n    }\r\n    node.setAttribute('data-image-id', `img${CustomImage.ID_SEED++}`)\r\n    node.style.verticalAlign = 'baseline'\r\n    if (isObject(value)) {\r\n      if (value.align && alignmentHandler[value.align]) {\r\n        node.setAttribute(ALIGN_ATTR, value.align)\r\n        alignmentHandler[value.align](node)\r\n      }\r\n      if (value.width) {\r\n        node.setAttribute('width', String(value.width))\r\n      }\r\n      if (value.height) {\r\n        node.setAttribute('height', String(value.height))\r\n      }\r\n    }\r\n    return node\r\n  }\r\n\r\n  static formats(domNode: HTMLElement) {\r\n    return ATTRIBUTES.reduce((formats, attribute) => {\r\n      if (domNode.hasAttribute(attribute)) {\r\n        formats[attribute] = domNode.getAttribute(attribute)\r\n      }\r\n      return formats\r\n    }, {})\r\n  }\r\n\r\n  static match(url: string) {\r\n    return /\\.(jpe?g|gif|png)$/.test(url) || /^data:image\\/.+;base64/.test(url)\r\n  }\r\n\r\n  static register() {\r\n    if (/Firefox/i.test(navigator.userAgent)) {\r\n      setTimeout(() => {\r\n        // Disable image resizing in Firefox\r\n        document.execCommand('enableObjectResizing', false, 'false')\r\n      }, 1)\r\n    }\r\n  }\r\n\r\n  static sanitize(url: string) {\r\n    return sanitize(url, ['http', 'https', 'blob', 'data']) ? url : '//:0'\r\n  }\r\n\r\n  static value(domNode: HTMLElement) {\r\n    const formats: any = {}\r\n    const imageSrc = domNode.getAttribute('src')\r\n    formats.src = this.sanitize(imageSrc)\r\n    formats.imageId = domNode.dataset.imageId\r\n    if (domNode.dataset.align) {\r\n      formats.align = domNode.dataset.align\r\n    }\r\n    if (domNode.hasAttribute('width')) {\r\n      formats.width = domNode.getAttribute('width')\r\n    }\r\n    if (domNode.hasAttribute('height')) {\r\n      formats.height = domNode.getAttribute('height')\r\n    }\r\n    return formats\r\n  }\r\n\r\n  format(name: string, value: any) {\r\n    if (ATTRIBUTES.includes(name)) {\r\n      if (value) {\r\n        this.domNode.setAttribute(name, value)\r\n      }\r\n      else {\r\n        this.domNode.removeAttribute(name)\r\n      }\r\n    }\r\n    else {\r\n      super.format(name, value)\r\n    }\r\n  }\r\n\r\n  unWrap() {\r\n    this.parent.replaceWith(this as TypeEmbed)\r\n  }\r\n\r\n  wrap(name: string, value?: any): TypeParchment.Parent\r\n  wrap(wrapper: TypeParchment.Parent): TypeParchment.Parent\r\n  wrap(name: string | TypeParchment.Parent, value?: any) {\r\n    const wrapper = (typeof name === 'string' ? this.scroll.create(name, value) : name) as TypeParchment.Parent\r\n    if (!isNullOrUndefined(this.parent)) {\r\n      this.parent.insertBefore(wrapper, this.next || undefined)\r\n    }\r\n    if (typeof wrapper.appendChild !== 'function') {\r\n      throw new TypeError(`Cannot wrap ${name}`)\r\n    }\r\n    wrapper.appendChild(this)\r\n    return wrapper\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+import "./actions/index.es.js";
+import { BlotFormatter } from "./blot-formatter.es.js";
+import { CustomImage } from "./image.es.js";
+import "./specs/index.es.js";
+export {
+  BlotFormatter,
+  CustomImage
+};
+//# sourceMappingURL=index.es.js.map

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

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

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

@@ -0,0 +1,85 @@
+import "./specs/index.es.js";
+import { ImageSpec } from "./specs/image-spec.es.js";
+const LEFT_ALIGN = "align-left";
+const CENTER_ALIGN = "align-center";
+const RIGHT_ALIGN = "align-right";
+const COPY = "copy";
+const DOWNLOAD = "download";
+const DefaultOptions = {
+  specs: [
+    ImageSpec
+  ],
+  overlay: {
+    className: "blot-formatter__overlay",
+    style: {
+      position: "absolute",
+      boxSizing: "border-box",
+      border: "1px dashed #444"
+    }
+  },
+  toolbar: {
+    mainClassName: "blot-formatter__toolbar",
+    mainStyle: {
+      position: "absolute",
+      top: "-12px",
+      right: "0",
+      left: "0",
+      height: "0",
+      minWidth: "120px",
+      font: "12px/1.0 Arial, Helvetica, sans-serif",
+      textAlign: "center",
+      color: "#333",
+      boxSizing: "border-box",
+      cursor: "default",
+      zIndex: "1"
+    },
+    buttonClassName: "blot-formatter__toolbar-button",
+    addButtonSelectStyle: true,
+    buttonStyle: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "24px",
+      height: "24px",
+      background: "white",
+      border: "1px solid #999",
+      verticalAlign: "middle",
+      cursor: "pointer"
+    },
+    svgStyle: {
+      display: "inline-block",
+      width: "16px",
+      height: "16px",
+      background: "white",
+      verticalAlign: "middle"
+    },
+    buttons: {
+      [LEFT_ALIGN]: true,
+      [CENTER_ALIGN]: true,
+      [RIGHT_ALIGN]: true,
+      [COPY]: true,
+      [DOWNLOAD]: true
+    }
+  },
+  resize: {
+    handleClassName: "blot-formatter__resize-handle",
+    handleStyle: {
+      position: "absolute",
+      height: "12px",
+      width: "12px",
+      backgroundColor: "white",
+      border: "1px solid #777",
+      boxSizing: "border-box",
+      opacity: "0.80"
+    }
+  }
+};
+export {
+  CENTER_ALIGN,
+  COPY,
+  DOWNLOAD,
+  LEFT_ALIGN,
+  RIGHT_ALIGN,
+  DefaultOptions as default
+};
+//# sourceMappingURL=options.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"options.es.js","sources":["../../../../src/modules/custom-image/options.ts"],"sourcesContent":["import type { ImageToolbar, ImageToolbarButtons } from './actions'\r\nimport type { BlotSpec } from './specs'\r\nimport { ImageSpec } from './specs'\r\n\r\nexport interface OverlayOptions {\r\n  // classname applied to the overlay element\r\n  className: string\r\n  // style applied to overlay element, or null to prevent styles\r\n  style: Record<string, string>\r\n}\r\n\r\nexport interface ResizeOptions {\r\n  // class name applied to the resize handles\r\n  handleClassName: string\r\n  // style applied to resize handles, or null to prevent styles\r\n  handleStyle: Record<string, string>\r\n}\r\n\r\nexport interface ToolButtonOption {\r\n  name: string\r\n  icon: string\r\n  isActive?: (el: HTMLElement) => boolean\r\n  apply: (this: ImageToolbar, el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => void\r\n}\r\n\r\nexport interface ToolbarButtonOptions {\r\n  buttons: Record<string, ToolButtonOption | boolean>\r\n}\r\n\r\nexport interface ToolbarOptions extends ToolbarButtonOptions {\r\n  // class name applied to the root toolbar element\r\n  mainClassName: string\r\n  // style applied to root toolbar element, or null to prevent styles\r\n  mainStyle: Record<string, unknown>\r\n  // class name applied to each button in the toolbar\r\n  buttonClassName: string\r\n  /* whether or not to add the selected style to the buttons.\r\n    they'll always get the is-selected class */\r\n  addButtonSelectStyle: boolean\r\n  // style applied to buttons, or null to prevent styles\r\n  buttonStyle: Record<string, unknown>\r\n  // style applied to the svgs in the buttons\r\n  svgStyle: Record<string, unknown>\r\n}\r\n\r\nexport interface BlotFormatterOptionsInput {\r\n  specs: typeof BlotSpec[]\r\n  overlay: Partial<OverlayOptions>\r\n  resize: Partial<ResizeOptions>\r\n  toolbar: Partial<ToolbarOptions>\r\n}\r\nexport interface BlotFormatterOptions {\r\n  specs: typeof BlotSpec[]\r\n  overlay: OverlayOptions\r\n  resize: ResizeOptions\r\n  toolbar: ToolbarOptions\r\n}\r\n\r\nexport const LEFT_ALIGN = 'align-left'\r\nexport const CENTER_ALIGN = 'align-center'\r\nexport const RIGHT_ALIGN = 'align-right'\r\nexport const COPY = 'copy'\r\nexport const DOWNLOAD = 'download'\r\nconst DefaultOptions: BlotFormatterOptions = {\r\n  specs: [\r\n    ImageSpec,\r\n  ],\r\n  overlay: {\r\n    className: 'blot-formatter__overlay',\r\n    style: {\r\n      position: 'absolute',\r\n      boxSizing: 'border-box',\r\n      border: '1px dashed #444',\r\n    },\r\n  },\r\n  toolbar: {\r\n    mainClassName: 'blot-formatter__toolbar',\r\n    mainStyle: {\r\n      position: 'absolute',\r\n      top: '-12px',\r\n      right: '0',\r\n      left: '0',\r\n      height: '0',\r\n      minWidth: '120px',\r\n      font: '12px/1.0 Arial, Helvetica, sans-serif',\r\n      textAlign: 'center',\r\n      color: '#333',\r\n      boxSizing: 'border-box',\r\n      cursor: 'default',\r\n      zIndex: '1',\r\n    },\r\n    buttonClassName: 'blot-formatter__toolbar-button',\r\n    addButtonSelectStyle: true,\r\n    buttonStyle: {\r\n      display: 'inline-flex',\r\n      alignItems: 'center',\r\n      justifyContent: 'center',\r\n      width: '24px',\r\n      height: '24px',\r\n      background: 'white',\r\n      border: '1px solid #999',\r\n      verticalAlign: 'middle',\r\n      cursor: 'pointer',\r\n    },\r\n    svgStyle: {\r\n      display: 'inline-block',\r\n      width: '16px',\r\n      height: '16px',\r\n      background: 'white',\r\n      verticalAlign: 'middle',\r\n    },\r\n    buttons: {\r\n      [LEFT_ALIGN]: true,\r\n      [CENTER_ALIGN]: true,\r\n      [RIGHT_ALIGN]: true,\r\n      [COPY]: true,\r\n      [DOWNLOAD]: true,\r\n    },\r\n  },\r\n  resize: {\r\n    handleClassName: 'blot-formatter__resize-handle',\r\n    handleStyle: {\r\n      position: 'absolute',\r\n      height: '12px',\r\n      width: '12px',\r\n      backgroundColor: 'white',\r\n      border: '1px solid #777',\r\n      boxSizing: 'border-box',\r\n      opacity: '0.80',\r\n    },\r\n  },\r\n}\r\n\r\nexport default DefaultOptions\r\n"],"names":[],"mappings":";;AA0DO,MAAM,aAAa;AACnB,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,OAAO;AACb,MAAM,WAAW;AACxB,MAAM,iBAAuC;AAAA,EAC3C,OAAO;AAAA,IACL;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,WAAW;AAAA,IACX,OAAO;AAAA,MACL,UAAU;AAAA,MACV,WAAW;AAAA,MACX,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,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,IACV;AAAA,IACA,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,IACV;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,eAAe;AAAA,IACjB;AAAA,IACA,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,EAEhB;AAAA,EACA,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/specs/blot-spec.es.js

@@ -0,0 +1,33 @@
+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 "../actions/index.es.js";
+import { ImageToolbarAction } from "../actions/toolbar-action.es.js";
+import { CustomResizeAction } from "../actions/custom-resize-action.es.js";
+import { DeleteAction } from "../actions/delete-action.es.js";
+class BlotSpec {
+  constructor(formatter) {
+    __publicField(this, "formatter");
+    this.formatter = formatter;
+  }
+  init() {
+  }
+  getActions() {
+    return [ImageToolbarAction, CustomResizeAction, DeleteAction];
+  }
+  getTargetElement() {
+    return null;
+  }
+  getOverlayElement() {
+    return this.getTargetElement();
+  }
+  setSelection() {
+    this.formatter.quill.setSelection(null);
+  }
+  onHide() {
+  }
+}
+export {
+  BlotSpec
+};
+//# sourceMappingURL=blot-spec.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"blot-spec.es.js","sources":["../../../../../src/modules/custom-image/specs/blot-spec.ts"],"sourcesContent":["import type { BlotFormatter } from '../blot-formatter'\r\nimport { CustomResizeAction, DeleteAction, ImageToolbarAction } from '../actions'\r\n\r\nexport class BlotSpec {\r\n  formatter: BlotFormatter\r\n\r\n  constructor(formatter: BlotFormatter) {\r\n    this.formatter = formatter\r\n  }\r\n\r\n  init(): void {}\r\n\r\n  getActions() {\r\n    return [ImageToolbarAction, CustomResizeAction, DeleteAction]\r\n  }\r\n\r\n  getTargetElement(): HTMLElement | null {\r\n    return null\r\n  }\r\n\r\n  getOverlayElement() {\r\n    return this.getTargetElement()\r\n  }\r\n\r\n  setSelection(): void {\r\n    this.formatter.quill.setSelection(null)\r\n  }\r\n\r\n  onHide() {}\r\n}\r\n"],"names":[],"mappings":";;;;;;;AAGO,MAAM,SAAS;AAAA,EAGpB,YAAY,WAA0B;AAFtC;AAGE,SAAK,YAAY;AAAA,EAAA;AAAA,EAGnB,OAAa;AAAA,EAAA;AAAA,EAEb,aAAa;AACJ,WAAA,CAAC,oBAAoB,oBAAoB,YAAY;AAAA,EAAA;AAAA,EAG9D,mBAAuC;AAC9B,WAAA;AAAA,EAAA;AAAA,EAGT,oBAAoB;AAClB,WAAO,KAAK,iBAAiB;AAAA,EAAA;AAAA,EAG/B,eAAqB;AACd,SAAA,UAAU,MAAM,aAAa,IAAI;AAAA,EAAA;AAAA,EAGxC,SAAS;AAAA,EAAA;AACX;"}

package/es/modules/custom-image/specs/{CustomImageSpec.es.js → custom-image-spec.es.js}

@@ -1,19 +1,23 @@
+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 CustomResizeAction from "../actions/CustomResizeAction.es.js";
-import DeleteAction from "../actions/DeleteAction.es.js";
-import ImageSpec from "./ImageSpec.es.js";
+import { ImageSpec } from "./image-spec.es.js";
 class CustomImageSpec extends ImageSpec {
   constructor(formatter) {
     super(formatter);
-    this.imageMouseout = (event) => {
+    __publicField(this, "editorElem");
+    __publicField(this, "observer");
+    __publicField(this, "oldRootScrollTop");
+    __publicField(this, "imageMouseout", (event) => {
       if (event.target.nodeName === "IMG" || event.target.classList.contains("blot-formatter__overlay")) {
         const imgDom = event.target;
         if (!isInside(event, imgDom)) {
           this.removeImagePreviewOverlay();
         }
       }
-    };
-    this.onClick = (event) => {
+    });
+    __publicField(this, "onClick", (event) => {
       var _a;
       const el = event.target;
       const isReadonly = this.formatter.quill.options.readOnly;
@@ -33,13 +37,11 @@ class CustomImageSpec extends ImageSpec {
         const len = imgBlot.length();
         quill.setSelection(index, len);
       }
-    };
+    });
     this.formatter = formatter;
     this.oldRootScrollTop = this.formatter.quill.root.scrollTop;
     this.editorElem = this.formatter.quill.container;
-    if (this.formatter.quill.root === this.formatter.quill.scrollingContainer) {
-      this.formatter.quill.root.addEventListener("scroll", this.handleQuillRootScroll.bind(this));
-    }
+    this.formatter.quill.root.addEventListener("scroll", this.handleQuillRootScroll.bind(this));
   }
   handleQuillRootScroll() {
     if (this.formatter.overlay) {
@@ -51,9 +53,6 @@ class CustomImageSpec extends ImageSpec {
     this.editorElem.addEventListener("mouseout", this.imageMouseout);
     super.init();
   }
-  getActions() {
-    return [DeleteAction, CustomResizeAction];
-  }
   imageMouseOver(event) {
     var _a;
     const target = event.target;
@@ -114,4 +113,4 @@ class CustomImageSpec extends ImageSpec {
 export {
   CustomImageSpec
 };
-//# sourceMappingURL=CustomImageSpec.es.js.map
+//# sourceMappingURL=custom-image-spec.es.js.map

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

@@ -0,0 +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'\r\nimport { isInside } from '../../../config/editor.utils'\r\nimport { ImageSpec } from './image-spec'\r\n\r\nexport class CustomImageSpec extends ImageSpec {\r\n  editorElem: HTMLElement | undefined\r\n  observer: any\r\n  oldRootScrollTop: number\r\n\r\n  constructor(formatter: BlotFormatter) {\r\n    super(formatter)\r\n    this.formatter = formatter\r\n    this.oldRootScrollTop = this.formatter.quill.root.scrollTop\r\n    this.editorElem = this.formatter.quill.container\r\n    this.formatter.quill.root.addEventListener('scroll', this.handleQuillRootScroll.bind(this))\r\n  }\r\n\r\n  handleQuillRootScroll() {\r\n    if (this.formatter.overlay) {\r\n      this.formatter.overlay.style.marginTop = `${this.oldRootScrollTop - this.formatter.quill.root.scrollTop}px`\r\n    }\r\n  }\r\n\r\n  init(): void {\r\n    this.editorElem.addEventListener('mouseover', this.imageMouseOver.bind(this))\r\n    this.editorElem.addEventListener('mouseout', this.imageMouseout)\r\n\r\n    super.init()\r\n  }\r\n\r\n  imageMouseOver(event) {\r\n    const target = event.target\r\n    const isBlotFormatter = target?.classList?.contains('blot-formatter__overlay')\r\n    if (target.nodeName === 'IMG' || isBlotFormatter) {\r\n      // this.addImagePreviewOverlay(event);\r\n    }\r\n  }\r\n\r\n  imageMouseout = (event) => {\r\n    if (event.target.nodeName === 'IMG'\r\n      || event.target.classList.contains('blot-formatter__overlay')) {\r\n      const imgDom = event.target\r\n      if (!isInside(event, imgDom)) {\r\n        this.removeImagePreviewOverlay()\r\n      }\r\n    }\r\n  }\r\n\r\n  addImagePreviewOverlay(event) {\r\n    const target = event.target\r\n    const {\r\n      left: imgLeft,\r\n      width: imgWidth,\r\n    } = target.getBoundingClientRect()\r\n    // fix: 解决 ql-container 容器设置 calc(100vh - 180px) 这样的视窗相对单位时，滚动视窗导致图片相对视窗的 top 相应改变，从而导致图片预览按钮的位置显示错误\r\n    const imgTop = target.getBoundingClientRect().top + this.formatter.quill.container.scrollTop\r\n\r\n    const {\r\n      left: editorLeft,\r\n      top: editorTop,\r\n    } = event.currentTarget.getBoundingClientRect()\r\n\r\n    const imgRelativeLeft = imgLeft - editorLeft\r\n    const imgRelativeTop = imgTop - editorTop\r\n\r\n    const maxmizeWidth = 24\r\n    const maxmizePadding = 15\r\n    const previewLeft = imgRelativeLeft + imgWidth - maxmizeWidth - maxmizePadding\r\n    const previewTop = imgRelativeTop + maxmizePadding\r\n\r\n    const previewStyle = `\r\n        left: ${previewLeft}px;\r\n        top: ${previewTop}px;\r\n        width: ${maxmizeWidth}px;\r\n      `\r\n    const imageSrc = target.src || target.getAttribute('data-image')\r\n    const imageId = target.getAttribute('data-image-id')\r\n\r\n    const previewDom = event.currentTarget.querySelector('.image-preview__overlay')\r\n    if (!previewDom) {\r\n      event.currentTarget.insertAdjacentHTML('beforeend', `\r\n          <div class=\"image-preview__overlay\" style=\"${previewStyle}\">\r\n            <i class=\"icon-maxmize\" id=\"btn-image-preview\" data-image-id=\"${imageId}\"\r\n              data-image=\"${imageSrc}\"></i>\r\n          </div>\r\n        `)\r\n    }\r\n  }\r\n\r\n  removeImagePreviewOverlay() {\r\n    const previewDom = this.editorElem.querySelector('.image-preview__overlay')\r\n    if (previewDom) {\r\n      previewDom.parentNode.removeChild(previewDom)\r\n    }\r\n  }\r\n\r\n  onHide() {\r\n    this.removeImagePreviewOverlay()\r\n    super.onHide()\r\n  }\r\n\r\n  resetOverlayMarginTop() {\r\n    if (this.formatter.overlay) {\r\n      this.formatter.overlay.style.marginTop = '0px'\r\n    }\r\n  }\r\n\r\n  onClick = (event: MouseEvent) => {\r\n    const el = event.target\r\n    const isReadonly = this.formatter.quill.options.readOnly\r\n    if (!(el instanceof HTMLElement) || el.tagName !== 'IMG' || isReadonly) {\r\n      return\r\n    }\r\n\r\n    this.img = el as HTMLImageElement\r\n    this.oldRootScrollTop = this.formatter.quill.root.scrollTop\r\n    this.resetOverlayMarginTop()\r\n    this.formatter.show(this)\r\n\r\n    // 通过图片dom获取图片选区用以复制，设置 current-select-img::selection 取消选区背景\r\n    const imageDom = this.formatter.currentSpec?.getTargetElement()\r\n    if (imageDom) {\r\n      imageDom.classList.add('current-select-img')\r\n      const quill = this.formatter.quill\r\n      const imgBlot = quill.scroll.find(this.img)\r\n      const index = quill.getIndex(imgBlot)\r\n      const len = imgBlot.length()\r\n      quill.setSelection(index, len)\r\n    }\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,32 @@
+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 { BlotSpec } from "./blot-spec.es.js";
+class ImageSpec extends BlotSpec {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "img", null);
+    __publicField(this, "onClick", (event) => {
+      const el = event.target;
+      if (!(el instanceof HTMLElement) || el.tagName !== "IMG") {
+        return;
+      }
+      event.stopPropagation();
+      this.img = el;
+      this.formatter.show(this);
+    });
+  }
+  init() {
+    this.formatter.quill.root.addEventListener("click", this.onClick);
+  }
+  getTargetElement() {
+    return this.img;
+  }
+  onHide() {
+    this.img = null;
+  }
+}
+export {
+  ImageSpec
+};
+//# sourceMappingURL=image-spec.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image-spec.es.js","sources":["../../../../../src/modules/custom-image/specs/image-spec.ts"],"sourcesContent":["import { BlotSpec } from './blot-spec'\r\n\r\nexport class ImageSpec extends BlotSpec {\r\n  img: HTMLImageElement | null = null\r\n\r\n  init() {\r\n    this.formatter.quill.root.addEventListener('click', this.onClick)\r\n  }\r\n\r\n  getTargetElement() {\r\n    return this.img\r\n  }\r\n\r\n  onHide() {\r\n    this.img = null\r\n  }\r\n\r\n  onClick = (event: MouseEvent) => {\r\n    const el = event.target\r\n    if (!(el instanceof HTMLElement) || el.tagName !== 'IMG') {\r\n      return\r\n    }\r\n    event.stopPropagation()\r\n\r\n    this.img = el as HTMLImageElement\r\n    this.formatter.show(this)\r\n  }\r\n}\r\n"],"names":[],"mappings":";;;;AAEO,MAAM,kBAAkB,SAAS;AAAA,EAAjC;AAAA;AACL,+BAA+B;AAc/B,mCAAU,CAAC,UAAsB;AAC/B,YAAM,KAAK,MAAM;AACjB,UAAI,EAAE,cAAc,gBAAgB,GAAG,YAAY,OAAO;AACxD;AAAA,MAAA;AAEF,YAAM,gBAAgB;AAEtB,WAAK,MAAM;AACN,WAAA,UAAU,KAAK,IAAI;AAAA,IAC1B;AAAA;AAAA,EArBA,OAAO;AACL,SAAK,UAAU,MAAM,KAAK,iBAAiB,SAAS,KAAK,OAAO;AAAA,EAAA;AAAA,EAGlE,mBAAmB;AACjB,WAAO,KAAK;AAAA,EAAA;AAAA,EAGd,SAAS;AACP,SAAK,MAAM;AAAA,EAAA;AAaf;"}

package/es/modules/custom-image/specs/index.es.js

@@ -0,0 +1,9 @@
+import { BlotSpec } from "./blot-spec.es.js";
+import { CustomImageSpec } from "./custom-image-spec.es.js";
+import { ImageSpec } from "./image-spec.es.js";
+export {
+  BlotSpec,
+  CustomImageSpec,
+  ImageSpec
+};
+//# sourceMappingURL=index.es.js.map

package/es/modules/custom-image/specs/index.es.js.map

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