@opentiny/fluent-editor 3.19.0 → 3.19.1-alpha.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlotFormatter.es.js","sources":["../../../src/custom-image/BlotFormatter.ts"],"sourcesContent":["import Quill from 'quill'\r\nimport Action from './actions/Action'\r\nimport ImageBlot, { ImageContainerBlot } from './image'\r\nimport DefaultOptions, { Options } from './Options'\r\nimport BlotSpec from './specs/BlotSpec'\r\nimport { CustomImageSpec } from './specs/CustomImageSpec'\r\nimport { merge as deepmerge } from 'lodash-es'\r\n\r\nconst dontMerge = (_destination: Array<any>, source: Array<any>) => source\r\n\r\n// @dynamic\r\nexport default class BlotFormatter {\r\n  quill: any\r\n  options: Options\r\n  currentSpec: BlotSpec\r\n  specs: BlotSpec[]\r\n  overlay: HTMLElement\r\n  actions: Action[]\r\n  observer: any\r\n\r\n  static register() {\r\n    Quill.register('formats/image', ImageBlot, true)\r\n    Quill.register('formats/image-container', ImageContainerBlot, true)\r\n    Quill.register('modules/image-spec', CustomImageSpec, true)\r\n  }\r\n\r\n  constructor(quill: any, options: any = {}) {\r\n    this.quill = quill\r\n    this.options = deepmerge(DefaultOptions, options, { arrayMerge: dontMerge })\r\n    this.currentSpec = null\r\n    this.actions = []\r\n    this.overlay = document.createElement('div')\r\n    this.overlay.classList.add(this.options.overlay.className)\r\n    if (this.options.overlay.style) {\r\n      Object.assign(this.overlay.style, this.options.overlay.style)\r\n    }\r\n\r\n    // disable native image resizing on firefox\r\n    document.execCommand('enableObjectResizing', false, 'false') // eslint-disable-next-line-line no-undef\r\n    this.quill.root.parentNode.style.position = this.quill.root.parentNode.style.position || 'relative'\r\n    this.quill.root.addEventListener('click', this.onClick)\r\n    this.specs = this.options.specs.map((SpecClass: any) => new SpecClass(this))\r\n    this.specs.forEach(spec => spec.init())\r\n  }\r\n\r\n  show(spec: BlotSpec) {\r\n    this.currentSpec = spec\r\n    this.currentSpec.setSelection()\r\n    this.setUserSelect('none')\r\n    this.quill.root.parentNode.appendChild(this.overlay)\r\n    this.repositionOverlay()\r\n    this.createActions(spec)\r\n\r\n    // fix: 图片对齐之后，虚线外框应该跟随移动\r\n    const imageDom = spec.getTargetElement()\r\n    const win: any = window\r\n    const MutationObserver = win.MutationObserver || win.WebKitMutationObserver || win.MozMutationObserver\r\n    const element = imageDom.parentNode\r\n    this.observer = new MutationObserver((mutationList) => {\r\n      for (const mutation of mutationList) {\r\n        const target = mutation.target\r\n        const image = target.querySelector('img')\r\n        if (image) {\r\n          this.repositionOverlay()\r\n        }\r\n      }\r\n    })\r\n    this.observer.observe(element, {\r\n      attributes: true,\r\n      attributeFilter: ['class'],\r\n      attributeOldValue: true,\r\n      subtree: true,\r\n    })\r\n    document.body.addEventListener('click', this.hideImageOverlay, true)\r\n  }\r\n\r\n  hide() {\r\n    if (!this.currentSpec) {\r\n      return\r\n    }\r\n\r\n    const imgDom = this.currentSpec.getTargetElement()\r\n    if (imgDom) {\r\n      imgDom.classList.remove('current-select-img')\r\n    }\r\n\r\n    this.currentSpec.onHide()\r\n    this.currentSpec = null\r\n    this.quill.root.parentNode.removeChild(this.overlay)\r\n    this.overlay.style.setProperty('display', 'none')\r\n    this.setUserSelect('')\r\n    this.destroyActions()\r\n  }\r\n\r\n  update() {\r\n    this.repositionOverlay()\r\n    this.actions.forEach(action => action.onUpdate())\r\n  }\r\n\r\n  createActions(spec: BlotSpec) {\r\n    this.actions = spec.getActions().map((ActionClass: any) => {\r\n      const action: Action = new ActionClass(this)\r\n      action.onCreate()\r\n      return action\r\n    })\r\n  }\r\n\r\n  destroyActions() {\r\n    this.actions.forEach((action: Action) => action.onDestroy())\r\n    this.actions = []\r\n  }\r\n\r\n  repositionOverlay() {\r\n    if (!this.currentSpec) {\r\n      return\r\n    }\r\n\r\n    const overlayTarget = this.currentSpec.getOverlayElement()\r\n    if (!overlayTarget) {\r\n      return\r\n    }\r\n\r\n    const parent: HTMLElement = this.quill.root.parentNode\r\n    const specRect = overlayTarget.getBoundingClientRect()\r\n    const parentRect = parent.getBoundingClientRect()\r\n\r\n    Object.assign(this.overlay.style, {\r\n      display: 'block',\r\n      left: `${specRect.left - parentRect.left - 1 + parent.scrollLeft}px`,\r\n      top: `${specRect.top - parentRect.top + parent.scrollTop}px`,\r\n      width: `${specRect.width}px`,\r\n      height: `${specRect.height}px`,\r\n    })\r\n  }\r\n\r\n  setUserSelect(value: string) {\r\n    const props: string[] = [\r\n      'userSelect',\r\n      'mozUserSelect',\r\n      'webkitUserSelect',\r\n      'msUserSelect',\r\n    ]\r\n\r\n    props.forEach((prop: string) => {\r\n      // set on contenteditable element and <html>\r\n      this.quill.root.style.setProperty(prop, value)\r\n      if (document.documentElement) {\r\n        document.documentElement.style.setProperty(prop, value)\r\n      }\r\n    })\r\n  }\r\n\r\n  onClick = () => {\r\n    this.hide()\r\n  }\r\n\r\n  hideImageOverlay = (event) => {\r\n    const target = event.target\r\n    const isBlotFormatter = target?.classList?.contains('blot-formatter__overlay')\r\n    // 点击图片操作框之外应该将其销毁\r\n    if (!isBlotFormatter) {\r\n      this.hide()\r\n    }\r\n    document.body.removeEventListener('click', this.hideImageOverlay)\r\n  }\r\n}\r\n"],"names":["deepmerge","ImageBlot","ImageContainerBlot"],"mappings":"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"}

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

@@ -0,0 +1,95 @@
+import ImageSpec from "./specs/ImageSpec.es.js";
+const DefaultOptions = {
+  specs: [
+    ImageSpec
+  ],
+  overlay: {
+    className: "blot-formatter__overlay",
+    style: {
+      position: "absolute",
+      boxSizing: "border-box",
+      border: "1px dashed #444"
+    }
+  },
+  align: {
+    attribute: "data-align",
+    aligner: {
+      applyStyle: true
+    },
+    icons: {
+      left: `
+        <svg viewbox="0 0 18 18">
+          <line class="ql-stroke" x1="3" x2="15" y1="9" y2="9"></line>
+          <line class="ql-stroke" x1="3" x2="13" y1="14" y2="14"></line>
+          <line class="ql-stroke" x1="3" x2="9" y1="4" y2="4"></line>
+        </svg>
+      `,
+      center: `
+        <svg viewbox="0 0 18 18">
+           <line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line>
+          <line class="ql-stroke" x1="14" x2="4" y1="14" y2="14"></line>
+          <line class="ql-stroke" x1="12" x2="6" y1="4" y2="4"></line>
+        </svg>
+      `,
+      right: `
+        <svg viewbox="0 0 18 18">
+          <line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line>
+          <line class="ql-stroke" x1="15" x2="5" y1="14" y2="14"></line>
+          <line class="ql-stroke" x1="15" x2="9" y1="4" y2="4"></line>
+        </svg>
+      `
+    },
+    toolbar: {
+      allowDeselect: true,
+      mainClassName: "blot-formatter__toolbar",
+      mainStyle: {
+        position: "absolute",
+        top: "-12px",
+        right: "0",
+        left: "0",
+        height: "0",
+        minWidth: "100px",
+        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-block",
+        width: "24px",
+        height: "24px",
+        background: "white",
+        border: "1px solid #999",
+        verticalAlign: "middle"
+      },
+      svgStyle: {
+        display: "inline-block",
+        width: "24px",
+        height: "24px",
+        background: "white",
+        border: "1px solid #999",
+        verticalAlign: "middle"
+      }
+    }
+  },
+  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 {
+  DefaultOptions as default
+};
+//# sourceMappingURL=Options.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Options.es.js","sources":["../../../src/custom-image/Options.ts"],"sourcesContent":["import ImageSpec from './specs/ImageSpec'\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 AlignOptions {\r\n  // the name of the attribute for an element that has its alignment changed\r\n  attribute: string\r\n  // the aligner does the actual alignment switch\r\n  aligner: {\r\n    // whether or not the aligner should handle the actual alignment properties\r\n    applyStyle: boolean\r\n  }\r\n  // icons used for alignment\r\n  icons: {\r\n    left: string\r\n    center: string\r\n    right: string\r\n  }\r\n  // the toolbar so users can change alignments\r\n  toolbar: {\r\n    // whether or not users can deselect an alignment. it's up to you to set the initial alignment\r\n    allowDeselect: boolean\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\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\r\n    // style applied to the svgs in the buttons\r\n    svgStyle\r\n  }\r\n}\r\n\r\nexport interface Options {\r\n  // the BlotSpecs supported\r\n  specs: any\r\n  overlay: OverlayOptions\r\n  align: AlignOptions\r\n  resize: ResizeOptions\r\n}\r\n\r\nconst DefaultOptions: Options = {\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  align: {\r\n    attribute: 'data-align',\r\n    aligner: {\r\n      applyStyle: true,\r\n    },\r\n    icons: {\r\n      left: `\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      center: `\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      right: `\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    },\r\n    toolbar: {\r\n      allowDeselect: true,\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: '100px',\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-block',\r\n        width: '24px',\r\n        height: '24px',\r\n        background: 'white',\r\n        border: '1px solid #999',\r\n        verticalAlign: 'middle',\r\n      },\r\n      svgStyle: {\r\n        display: 'inline-block',\r\n        width: '24px',\r\n        height: '24px',\r\n        background: 'white',\r\n        border: '1px solid #999',\r\n        verticalAlign: 'middle',\r\n      },\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":";AA0DA,MAAM,iBAA0B;AAAA,EAC9B,OAAO;AAAA,IACL;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,WAAW;AAAA,IACX,OAAO;AAAA,MACL,UAAU;AAAA,MACV,WAAW;AAAA,MACX,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,WAAW;AAAA,IACX,SAAS;AAAA,MACP,YAAY;AAAA,IACd;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAON,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOR,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOT;AAAA,IACA,SAAS;AAAA,MACP,eAAe;AAAA,MACf,eAAe;AAAA,MACf,WAAW;AAAA,QACT,UAAU;AAAA,QACV,KAAK;AAAA,QACL,OAAO;AAAA,QACP,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,MAAM;AAAA,QACN,WAAW;AAAA,QACX,OAAO;AAAA,QACP,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,QAAQ;AAAA,MACV;AAAA,MACA,iBAAiB;AAAA,MACjB,sBAAsB;AAAA,MACtB,aAAa;AAAA,QACX,SAAS;AAAA,QACT,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,eAAe;AAAA,MACjB;AAAA,MACA,UAAU;AAAA,QACR,SAAS;AAAA,QACT,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,EACF;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,IACX;AAAA,EACF;AACF;"}

package/es/custom-image/actions/Action.es.js

@@ -0,0 +1,15 @@
+class Action {
+  constructor(formatter) {
+    this.formatter = formatter;
+  }
+  onCreate() {
+  }
+  onDestroy() {
+  }
+  onUpdate() {
+  }
+}
+export {
+  Action as default
+};
+//# sourceMappingURL=Action.es.js.map

package/es/custom-image/actions/Action.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Action.es.js","sources":["../../../../src/custom-image/actions/Action.ts"],"sourcesContent":["export default class Action {\r\n  formatter\r\n\r\n  constructor(formatter) {\r\n    this.formatter = formatter\r\n  }\r\n\r\n  onCreate() {}\r\n\r\n  onDestroy() {}\r\n\r\n  onUpdate() {}\r\n}\r\n"],"names":[],"mappings":"AAAA,MAAqB,OAAO;AAAA,EAG1B,YAAY,WAAW;AACrB,SAAK,YAAY;AAAA,EACnB;AAAA,EAEA,WAAW;AAAA,EAAC;AAAA,EAEZ,YAAY;AAAA,EAAC;AAAA,EAEb,WAAW;AAAA,EAAC;AACd;"}

package/es/custom-image/actions/CustomResizeAction.es.js

@@ -0,0 +1,158 @@
+import Action from "./Action.es.js";
+const MIN_WIDTH = 40;
+const getElementStyle = (element) => element.currentStyle ? element.currentStyle : window.getComputedStyle(element, null);
+class CustomResizeAction extends Action {
+  constructor(formatter) {
+    super(formatter);
+    this.onMouseDown = (event) => {
+      if (!(event.target instanceof HTMLElement)) {
+        return;
+      }
+      this.dragHandle = event.target;
+      this.setCursor(this.dragHandle.style.cursor);
+      if (!this.formatter.currentSpec) {
+        return;
+      }
+      const target = this.formatter.currentSpec.getTargetElement();
+      if (!target) {
+        return;
+      }
+      event.preventDefault();
+      const rect = target.getBoundingClientRect();
+      this.dragStartX = event.clientX;
+      this.preDragWidth = rect.width;
+      this.targetRatio = rect.height / rect.width;
+      let root;
+      let rootStyle;
+      const tdWrap = this.findTd(target, 0);
+      if (tdWrap) {
+        root = tdWrap;
+        rootStyle = getElementStyle(tdWrap);
+      } else {
+        root = this.formatter.quill.root;
+        rootStyle = getElementStyle(root);
+      }
+      this.maxWidth = root.clientWidth - parseFloat(rootStyle.paddingRight) - parseFloat(rootStyle.paddingLeft);
+      document.addEventListener("mousemove", this.onDrag);
+      document.addEventListener("mouseup", this.onMouseUp);
+    };
+    this.findTd = (node, level) => {
+      if (level > 3) {
+        return null;
+      }
+      const tagName = node.tagName.toUpperCase();
+      if (tagName === "TD") {
+        return node;
+      } else {
+        const parentNode = node.parentElement;
+        if (parentNode) {
+          return this.findTd(parentNode, level += 1);
+        } else {
+          return null;
+        }
+      }
+    };
+    this.onDrag = (event) => {
+      if (!this.formatter.currentSpec) {
+        return;
+      }
+      const target = this.formatter.currentSpec.getTargetElement();
+      if (!target) {
+        return;
+      }
+      const deltaX = event.clientX - this.dragStartX;
+      let newWidth = 0;
+      if (this.dragHandle === this.topLeftHandle || this.dragHandle === this.bottomLeftHandle) {
+        newWidth = Math.round(this.preDragWidth - deltaX);
+      } else {
+        newWidth = Math.round(this.preDragWidth + deltaX);
+      }
+      let minWidth = this.minWidth;
+      if (this.maxWidth < minWidth) {
+        minWidth = this.maxWidth;
+      }
+      if (newWidth > this.maxWidth) {
+        newWidth = this.maxWidth;
+      } else if (newWidth < minWidth) {
+        newWidth = minWidth;
+      }
+      const newHeight = this.targetRatio * newWidth;
+      target.setAttribute("width", `${newWidth}`);
+      target.setAttribute("height", `${newHeight}`);
+      this.formatter.update();
+    };
+    this.onMouseUp = () => {
+      this.setCursor("");
+      document.removeEventListener("mousemove", this.onDrag);
+      document.removeEventListener("mouseup", this.onMouseUp);
+    };
+    this.topLeftHandle = this.createHandle("top-left", "nwse-resize");
+    this.topRightHandle = this.createHandle("top-right", "nesw-resize");
+    this.bottomRightHandle = this.createHandle("bottom-right", "nwse-resize");
+    this.bottomLeftHandle = this.createHandle("bottom-left", "nesw-resize");
+    this.dragHandle = null;
+    this.dragStartX = 0;
+    this.preDragWidth = 0;
+    this.targetRatio = 0;
+    this.maxWidth = 0;
+    this.minWidth = MIN_WIDTH;
+  }
+  onCreate() {
+    const target = this.formatter.currentSpec.getTargetElement();
+    this.formatter.overlay.setAttribute("data-image", target.src);
+    this.formatter.overlay.appendChild(this.topLeftHandle);
+    this.formatter.overlay.appendChild(this.topRightHandle);
+    this.formatter.overlay.appendChild(this.bottomRightHandle);
+    this.formatter.overlay.appendChild(this.bottomLeftHandle);
+    this.repositionHandles(this.formatter.options.resize.handleStyle);
+  }
+  onDestroy() {
+    this.setCursor("");
+    this.formatter.overlay.removeChild(this.topLeftHandle);
+    this.formatter.overlay.removeChild(this.topRightHandle);
+    this.formatter.overlay.removeChild(this.bottomRightHandle);
+    this.formatter.overlay.removeChild(this.bottomLeftHandle);
+  }
+  createHandle(position, cursor) {
+    const box = document.createElement("div");
+    box.classList.add(this.formatter.options.resize.handleClassName);
+    box.setAttribute("data-position", position);
+    box.style.cursor = cursor;
+    if (this.formatter.options.resize.handleStyle) {
+      Object.assign(box.style, this.formatter.options.resize.handleStyle);
+    }
+    box.addEventListener("mousedown", this.onMouseDown);
+    return box;
+  }
+  repositionHandles(handleStyle) {
+    let handleXOffset = "0px";
+    let handleYOffset = "0px";
+    if (handleStyle) {
+      if (handleStyle.width) {
+        handleXOffset = `${-parseFloat(handleStyle.width) / 2}px`;
+      }
+      if (handleStyle.height) {
+        handleYOffset = `${-parseFloat(handleStyle.height) / 2}px`;
+      }
+    }
+    Object.assign(this.topLeftHandle.style, { left: handleXOffset, top: handleYOffset });
+    Object.assign(this.topRightHandle.style, { right: handleXOffset, top: handleYOffset });
+    Object.assign(this.bottomRightHandle.style, { right: handleXOffset, bottom: handleYOffset });
+    Object.assign(this.bottomLeftHandle.style, { left: handleXOffset, bottom: handleYOffset });
+  }
+  setCursor(value) {
+    if (document.body) {
+      document.body.style.cursor = value;
+    }
+    if (this.formatter.currentSpec) {
+      const target = this.formatter.currentSpec.getOverlayElement();
+      if (target) {
+        target.style.cursor = value;
+      }
+    }
+  }
+}
+export {
+  CustomResizeAction as default
+};
+//# sourceMappingURL=CustomResizeAction.es.js.map

package/es/custom-image/actions/CustomResizeAction.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomResizeAction.es.js","sources":["../../../../src/custom-image/actions/CustomResizeAction.ts"],"sourcesContent":["import Action from './Action'\r\nconst MIN_WIDTH = 40\r\n\r\nconst getElementStyle = element => element.currentStyle\r\n  ? element.currentStyle\r\n  : window.getComputedStyle(element, null)\r\nexport default class CustomResizeAction extends Action {\r\n  topLeftHandle: HTMLElement\r\n  topRightHandle: HTMLElement\r\n  bottomRightHandle: HTMLElement\r\n  bottomLeftHandle: HTMLElement\r\n  dragHandle: HTMLElement\r\n  dragStartX: number\r\n  preDragWidth: number\r\n  targetRatio: number\r\n  maxWidth: number\r\n  minWidth: number\r\n\r\n  constructor(formatter) {\r\n    super(formatter)\r\n    this.topLeftHandle = this.createHandle('top-left', 'nwse-resize')\r\n    this.topRightHandle = this.createHandle('top-right', 'nesw-resize')\r\n    this.bottomRightHandle = this.createHandle('bottom-right', 'nwse-resize')\r\n    this.bottomLeftHandle = this.createHandle('bottom-left', 'nesw-resize')\r\n    this.dragHandle = null\r\n    this.dragStartX = 0\r\n    this.preDragWidth = 0\r\n    this.targetRatio = 0\r\n    this.maxWidth = 0\r\n    this.minWidth = MIN_WIDTH\r\n  }\r\n\r\n  onCreate() {\r\n    const target: any = this.formatter.currentSpec.getTargetElement()\r\n    this.formatter.overlay.setAttribute('data-image', target.src)\r\n    this.formatter.overlay.appendChild(this.topLeftHandle)\r\n    this.formatter.overlay.appendChild(this.topRightHandle)\r\n    this.formatter.overlay.appendChild(this.bottomRightHandle)\r\n    this.formatter.overlay.appendChild(this.bottomLeftHandle)\r\n    this.repositionHandles(this.formatter.options.resize.handleStyle)\r\n  }\r\n\r\n  onDestroy() {\r\n    this.setCursor('')\r\n    this.formatter.overlay.removeChild(this.topLeftHandle)\r\n    this.formatter.overlay.removeChild(this.topRightHandle)\r\n    this.formatter.overlay.removeChild(this.bottomRightHandle)\r\n    this.formatter.overlay.removeChild(this.bottomLeftHandle)\r\n  }\r\n\r\n  createHandle(position: string, cursor: string): HTMLElement {\r\n    const box = document.createElement('div')\r\n    box.classList.add(this.formatter.options.resize.handleClassName)\r\n    box.setAttribute('data-position', position)\r\n    box.style.cursor = cursor\r\n\r\n    if (this.formatter.options.resize.handleStyle) {\r\n      Object.assign(box.style, this.formatter.options.resize.handleStyle)\r\n    }\r\n\r\n    box.addEventListener('mousedown', this.onMouseDown)\r\n    return box\r\n  }\r\n\r\n  repositionHandles(handleStyle: any) {\r\n    let handleXOffset = '0px'\r\n    let handleYOffset = '0px'\r\n    if (handleStyle) {\r\n      if (handleStyle.width) {\r\n        handleXOffset = `${-parseFloat(handleStyle.width) / 2}px`\r\n      }\r\n      if (handleStyle.height) {\r\n        handleYOffset = `${-parseFloat(handleStyle.height) / 2}px`\r\n      }\r\n    }\r\n\r\n    Object.assign(this.topLeftHandle.style, { left: handleXOffset, top: handleYOffset })\r\n    Object.assign(this.topRightHandle.style, { right: handleXOffset, top: handleYOffset })\r\n    Object.assign(this.bottomRightHandle.style, { right: handleXOffset, bottom: handleYOffset })\r\n    Object.assign(this.bottomLeftHandle.style, { left: handleXOffset, bottom: handleYOffset })\r\n  }\r\n\r\n  setCursor(value: string) {\r\n    if (document.body) {\r\n      document.body.style.cursor = value\r\n    }\r\n\r\n    if (this.formatter.currentSpec) {\r\n      const target = this.formatter.currentSpec.getOverlayElement()\r\n      if (target) {\r\n        target.style.cursor = value\r\n      }\r\n    }\r\n  }\r\n\r\n  onMouseDown = (event: MouseEvent) => {\r\n    if (!(event.target instanceof HTMLElement)) {\r\n      return\r\n    }\r\n\r\n    this.dragHandle = event.target\r\n    this.setCursor(this.dragHandle.style.cursor)\r\n\r\n    if (!this.formatter.currentSpec) {\r\n      return\r\n    }\r\n\r\n    const target = this.formatter.currentSpec.getTargetElement()\r\n    if (!target) {\r\n      return\r\n    }\r\n    event.preventDefault()\r\n    const rect = target.getBoundingClientRect()\r\n\r\n    this.dragStartX = event.clientX\r\n    this.preDragWidth = rect.width\r\n    this.targetRatio = rect.height / rect.width\r\n\r\n    let root: HTMLElement\r\n    let rootStyle: any\r\n    const tdWrap = this.findTd(target, 0)\r\n    if (tdWrap) {\r\n      root = tdWrap\r\n      rootStyle = getElementStyle(tdWrap)\r\n    }\r\n    else {\r\n      root = this.formatter.quill.root\r\n      rootStyle = getElementStyle(root)\r\n    }\r\n    this.maxWidth = root.clientWidth\r\n    - parseFloat(rootStyle.paddingRight)\r\n    - parseFloat(rootStyle.paddingLeft)\r\n\r\n    document.addEventListener('mousemove', this.onDrag)\r\n    document.addEventListener('mouseup', this.onMouseUp)\r\n  }\r\n\r\n  findTd = (node: HTMLElement, level: number) => {\r\n    if (level > 3) {\r\n      return null\r\n    }\r\n\r\n    const tagName = node.tagName.toUpperCase()\r\n    if (tagName === 'TD') {\r\n      return node\r\n    }\r\n    else {\r\n      const parentNode = node.parentElement\r\n      if (parentNode) {\r\n        // eslint-disable-next-line no-return-assign\r\n        return (this.findTd(parentNode, level += 1))\r\n      }\r\n      else {\r\n        return null\r\n      }\r\n    }\r\n  }\r\n\r\n  onDrag = (event: MouseEvent) => {\r\n    if (!this.formatter.currentSpec) {\r\n      return\r\n    }\r\n\r\n    const target = this.formatter.currentSpec.getTargetElement()\r\n    if (!target) {\r\n      return\r\n    }\r\n\r\n    const deltaX = event.clientX - this.dragStartX\r\n    let newWidth = 0\r\n\r\n    if (this.dragHandle === this.topLeftHandle || this.dragHandle === this.bottomLeftHandle) {\r\n      newWidth = Math.round(this.preDragWidth - deltaX)\r\n    }\r\n    else {\r\n      newWidth = Math.round(this.preDragWidth + deltaX)\r\n    }\r\n\r\n    let minWidth = this.minWidth\r\n\r\n    if (this.maxWidth < minWidth) {\r\n      minWidth = this.maxWidth\r\n    }\r\n\r\n    if (newWidth > this.maxWidth) {\r\n      newWidth = this.maxWidth\r\n    }\r\n    else if (newWidth < minWidth) {\r\n      newWidth = minWidth\r\n    }\r\n\r\n    const newHeight = this.targetRatio * newWidth\r\n\r\n    target.setAttribute('width', `${newWidth}`)\r\n    target.setAttribute('height', `${newHeight}`)\r\n\r\n    this.formatter.update()\r\n  }\r\n\r\n  onMouseUp = () => {\r\n    this.setCursor('')\r\n    document.removeEventListener('mousemove', this.onDrag)\r\n    document.removeEventListener('mouseup', this.onMouseUp)\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

package/es/custom-image/actions/DeleteAction.es.js

@@ -0,0 +1,31 @@
+import Quill from "quill";
+import Action from "./Action.es.js";
+class DeleteAction extends Action {
+  constructor() {
+    super(...arguments);
+    this.onKeyUp = (event) => {
+      if (!this.formatter.currentSpec) {
+        return;
+      }
+      if (event.keyCode === 46 || event.keyCode === 8) {
+        const blot = Quill.find(this.formatter.currentSpec.getTargetElement());
+        if (blot) {
+          blot.deleteAt(0);
+        }
+        this.formatter.hide();
+      }
+    };
+  }
+  onCreate() {
+    document.addEventListener("keyup", this.onKeyUp, true);
+    this.formatter.quill.root.addEventListener("input", this.onKeyUp, true);
+  }
+  onDestroy() {
+    document.removeEventListener("keyup", this.onKeyUp);
+    this.formatter.quill.root.removeEventListener("input", this.onKeyUp);
+  }
+}
+export {
+  DeleteAction as default
+};
+//# sourceMappingURL=DeleteAction.es.js.map

package/es/custom-image/actions/DeleteAction.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeleteAction.es.js","sources":["../../../../src/custom-image/actions/DeleteAction.ts"],"sourcesContent":["import Quill from 'quill'\r\nimport Action from './Action'\r\n\r\nexport default class DeleteAction extends Action {\r\n  onCreate() {\r\n    document.addEventListener('keyup', this.onKeyUp, true)\r\n    this.formatter.quill.root.addEventListener('input', this.onKeyUp, true)\r\n  }\r\n\r\n  onDestroy() {\r\n    document.removeEventListener('keyup', this.onKeyUp)\r\n    this.formatter.quill.root.removeEventListener('input', this.onKeyUp)\r\n  }\r\n\r\n  onKeyUp = (event: any) => {\r\n    if (!this.formatter.currentSpec) {\r\n      return\r\n    }\r\n\r\n    // delete or backspace\r\n    if (event.keyCode === 46 || event.keyCode === 8) {\r\n      const blot = Quill.find(this.formatter.currentSpec.getTargetElement())\r\n      if (blot) {\r\n        blot.deleteAt(0)\r\n      }\r\n      this.formatter.hide()\r\n    }\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAGA,MAAqB,qBAAqB,OAAO;AAAA,EAAjD,cAAA;AAAA,UAAA,GAAA,SAAA;AAWE,SAAA,UAAU,CAAC,UAAe;AACpB,UAAA,CAAC,KAAK,UAAU,aAAa;AAC/B;AAAA,MACF;AAGA,UAAI,MAAM,YAAY,MAAM,MAAM,YAAY,GAAG;AAC/C,cAAM,OAAO,MAAM,KAAK,KAAK,UAAU,YAAY,kBAAkB;AACrE,YAAI,MAAM;AACR,eAAK,SAAS,CAAC;AAAA,QACjB;AACA,aAAK,UAAU;MACjB;AAAA,IAAA;AAAA,EACF;AAAA,EAvBA,WAAW;AACT,aAAS,iBAAiB,SAAS,KAAK,SAAS,IAAI;AACrD,SAAK,UAAU,MAAM,KAAK,iBAAiB,SAAS,KAAK,SAAS,IAAI;AAAA,EACxE;AAAA,EAEA,YAAY;AACD,aAAA,oBAAoB,SAAS,KAAK,OAAO;AAClD,SAAK,UAAU,MAAM,KAAK,oBAAoB,SAAS,KAAK,OAAO;AAAA,EACrE;AAgBF;"}

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

@@ -0,0 +1,95 @@
+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"];
+const ATTRIBUTES = ["alt", "height", "width", "image-id"];
+const _CustomImage = class _CustomImage extends Embed {
+  static create(value) {
+    const node = super.create(value);
+    const url = typeof value === "string" ? value : value.src;
+    if (url) {
+      const imgURL = this.sanitize(url);
+      if (!(imgURL == null ? void 0 : imgURL.startsWith("data:image"))) {
+        node.dataset.src = imgURL;
+      }
+      node.setAttribute("src", imgURL);
+    }
+    node.setAttribute("data-image-id", "img" + _CustomImage.ID_SEED++);
+    node.setAttribute("devui-editorx-image", true);
+    node.style.verticalAlign = "baseline";
+    return node;
+  }
+  static formats(domNode) {
+    return ATTRIBUTES.reduce((formats, attribute) => {
+      if (domNode.hasAttribute(attribute)) {
+        formats[attribute] = domNode.getAttribute(attribute);
+      }
+      return formats;
+    }, {});
+  }
+  static match(url) {
+    return /\.(jpe?g|gif|png)$/.test(url) || /^data:image\/.+;base64/.test(url);
+  }
+  static register() {
+    if (/Firefox/i.test(navigator.userAgent)) {
+      setTimeout(() => {
+        document.execCommand("enableObjectResizing", false, null);
+      }, 1);
+    }
+  }
+  static sanitize(url) {
+    return sanitize(url, ["http", "https", "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;
+    return formats;
+  }
+  format(name, value) {
+    if (ATTRIBUTES.indexOf(name) > -1) {
+      if (value) {
+        this.domNode.setAttribute(name, value);
+      } else {
+        this.domNode.removeAttribute(name);
+      }
+    } else {
+      super.format(name, value);
+    }
+  }
+  unWrap() {
+    this.parent.replaceWith(this);
+  }
+  wrap(name, value) {
+    const wrapper = typeof name === "string" ? this.scroll.create(name, value) : name;
+    if (!isNullOrUndefined(this.parent)) {
+      this.parent.insertBefore(wrapper, this.next || void 0);
+    }
+    if (typeof wrapper.appendChild !== "function") {
+      throw new Error(`Cannot wrap ${name}`);
+    }
+    wrapper.appendChild(this);
+    return wrapper;
+  }
+};
+_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
+};
+//# sourceMappingURL=image.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image.es.js","sources":["../../../src/custom-image/image.ts"],"sourcesContent":["import Quill from 'quill'\r\nimport { isNullOrUndefined, sanitize } from '../config/editor.utils'\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, null)\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.indexOf(name) > -1) {\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 Error(`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 { CustomImageContainer as ImageContainerBlot, CustomImage as default }\r\n"],"names":[],"mappings":"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"}

package/es/custom-image/specs/BlotSpec.es.js

@@ -0,0 +1,27 @@
+import CustomResizeAction from "../actions/CustomResizeAction.es.js";
+import DeleteAction from "../actions/DeleteAction.es.js";
+class BlotSpec {
+  constructor(formatter) {
+    this.formatter = formatter;
+  }
+  init() {
+  }
+  getActions() {
+    return [CustomResizeAction, DeleteAction];
+  }
+  getTargetElement() {
+    return null;
+  }
+  getOverlayElement() {
+    return this.getTargetElement();
+  }
+  setSelection() {
+    this.formatter.quill.setSelection(null);
+  }
+  onHide() {
+  }
+}
+export {
+  BlotSpec as default
+};
+//# sourceMappingURL=BlotSpec.es.js.map

package/es/custom-image/specs/BlotSpec.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlotSpec.es.js","sources":["../../../../src/custom-image/specs/BlotSpec.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\r\n\r\nimport ResizeAction from '../actions/CustomResizeAction'\r\nimport DeleteAction from '../actions/DeleteAction'\r\n\r\nexport default class BlotSpec {\r\n  formatter\r\n\r\n  constructor(formatter) {\r\n    this.formatter = formatter\r\n  }\r\n\r\n  init(): void {}\r\n\r\n  getActions() {\r\n    return [ResizeAction, DeleteAction]\r\n  }\r\n\r\n  getTargetElement() {\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":["ResizeAction"],"mappings":";;AAKA,MAAqB,SAAS;AAAA,EAG5B,YAAY,WAAW;AACrB,SAAK,YAAY;AAAA,EACnB;AAAA,EAEA,OAAa;AAAA,EAAC;AAAA,EAEd,aAAa;AACJ,WAAA,CAACA,oBAAc,YAAY;AAAA,EACpC;AAAA,EAEA,mBAAmB;AACV,WAAA;AAAA,EACT;AAAA,EAEA,oBAAoB;AAClB,WAAO,KAAK;EACd;AAAA,EAEA,eAAqB;AACd,SAAA,UAAU,MAAM,aAAa,IAAI;AAAA,EACxC;AAAA,EAEA,SAAS;AAAA,EAAC;AACZ;"}

package/es/custom-image/specs/CustomImageSpec.es.js

@@ -0,0 +1,117 @@
+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";
+class CustomImageSpec extends ImageSpec {
+  constructor(formatter) {
+    super(formatter);
+    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) => {
+      var _a;
+      const el = event.target;
+      const isReadonly = this.formatter.quill.options.readOnly;
+      if (!(el instanceof HTMLElement) || el.tagName !== "IMG" || isReadonly) {
+        return;
+      }
+      this.img = el;
+      this.oldRootScrollTop = this.formatter.quill.root.scrollTop;
+      this.resetOverlayMarginTop();
+      this.formatter.show(this);
+      const imageDom = (_a = this.formatter.currentSpec) == null ? void 0 : _a.getTargetElement();
+      if (imageDom) {
+        imageDom.classList.add("current-select-img");
+        const quill = this.formatter.quill;
+        const imgBlot = quill.scroll.find(this.img);
+        const index = quill.getIndex(imgBlot);
+        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));
+    }
+  }
+  handleQuillRootScroll() {
+    if (this.formatter.overlay) {
+      this.formatter.overlay.style.marginTop = `${this.oldRootScrollTop - this.formatter.quill.root.scrollTop}px`;
+    }
+  }
+  init() {
+    this.editorElem.addEventListener("mouseover", this.imageMouseOver.bind(this));
+    this.editorElem.addEventListener("mouseout", this.imageMouseout);
+    super.init();
+  }
+  getActions() {
+    return [DeleteAction, CustomResizeAction];
+  }
+  imageMouseOver(event) {
+    var _a;
+    const target = event.target;
+    const isBlotFormatter = (_a = target == null ? void 0 : target.classList) == null ? void 0 : _a.contains("blot-formatter__overlay");
+    if (target.nodeName === "IMG" || isBlotFormatter) {
+    }
+  }
+  addImagePreviewOverlay(event) {
+    const target = event.target;
+    const {
+      left: imgLeft,
+      width: imgWidth
+    } = target.getBoundingClientRect();
+    const imgTop = target.getBoundingClientRect().top + this.formatter.quill.container.scrollTop;
+    const {
+      left: editorLeft,
+      top: editorTop
+    } = event.currentTarget.getBoundingClientRect();
+    const imgRelativeLeft = imgLeft - editorLeft;
+    const imgRelativeTop = imgTop - editorTop;
+    const maxmizeWidth = 24;
+    const maxmizePadding = 15;
+    const previewLeft = imgRelativeLeft + imgWidth - maxmizeWidth - maxmizePadding;
+    const previewTop = imgRelativeTop + maxmizePadding;
+    const previewStyle = `
+        left: ${previewLeft}px;
+        top: ${previewTop}px;
+        width: ${maxmizeWidth}px;
+      `;
+    const imageSrc = target.src || target.getAttribute("data-image");
+    const imageId = target.getAttribute("data-image-id");
+    const previewDom = event.currentTarget.querySelector(".image-preview__overlay");
+    if (!previewDom) {
+      event.currentTarget.insertAdjacentHTML("beforeend", `
+          <div class="image-preview__overlay" style="${previewStyle}">
+            <i class="icon-maxmize" id="btn-image-preview" data-image-id="${imageId}"
+              data-image="${imageSrc}"></i>
+          </div>
+        `);
+    }
+  }
+  removeImagePreviewOverlay() {
+    const previewDom = this.editorElem.querySelector(".image-preview__overlay");
+    if (previewDom) {
+      previewDom.parentNode.removeChild(previewDom);
+    }
+  }
+  onHide() {
+    this.removeImagePreviewOverlay();
+    super.onHide();
+  }
+  resetOverlayMarginTop() {
+    if (this.formatter.overlay) {
+      this.formatter.overlay.style.marginTop = "0px";
+    }
+  }
+}
+export {
+  CustomImageSpec
+};
+//# sourceMappingURL=CustomImageSpec.es.js.map

package/es/custom-image/specs/CustomImageSpec.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomImageSpec.es.js","sources":["../../../../src/custom-image/specs/CustomImageSpec.ts"],"sourcesContent":["import { isInside } from '../../config/editor.utils'\r\nimport CustomResizeAction from '../actions/CustomResizeAction'\r\nimport DeleteAction from '../actions/DeleteAction'\r\nimport ImageSpec from './ImageSpec'\r\n\r\nexport class CustomImageSpec extends ImageSpec {\r\n  formatter\r\n  editorElem: HTMLElement | undefined\r\n  observer: any\r\n  oldRootScrollTop: any\r\n\r\n  constructor(formatter) {\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    if (this.formatter.quill.root === this.formatter.quill.scrollingContainer) {\r\n      this.formatter.quill.root.addEventListener('scroll', this.handleQuillRootScroll.bind(this))\r\n    }\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  getActions() {\r\n    return [DeleteAction, CustomResizeAction]\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\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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"}