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

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

@@ -0,0 +1,110 @@
+"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 ImageToolbar {
+  constructor() {
+    __publicField(this, "toolbar");
+    __publicField(this, "buttons");
+    this.toolbar = null;
+    this.buttons = [];
+  }
+  create(formatter, toolButton) {
+    const toolbar = document.createElement("div");
+    toolbar.classList.add(formatter.options.toolbar.mainClassName);
+    this.addToolbarStyle(formatter, toolbar);
+    this.addButtons(formatter, toolbar, toolButton);
+    this.toolbar = toolbar;
+    return this.toolbar;
+  }
+  destroy() {
+    this.toolbar = null;
+    this.buttons = [];
+  }
+  getElement() {
+    return this.toolbar;
+  }
+  addToolbarStyle(formatter, toolbar) {
+    if (formatter.options.toolbar.mainStyle) {
+      Object.assign(toolbar.style, formatter.options.toolbar.mainStyle);
+    }
+  }
+  addButtonStyle(button, index, formatter) {
+    if (formatter.options.toolbar.buttonStyle) {
+      Object.assign(button.style, formatter.options.toolbar.buttonStyle);
+      if (index > 0) {
+        button.style.borderLeftWidth = "0";
+      }
+    }
+    if (formatter.options.toolbar.svgStyle) {
+      Object.assign(button.children[0].style, formatter.options.toolbar.svgStyle);
+    }
+  }
+  addButtons(formatter, toolbar, toolButton) {
+    toolButton.getItems().forEach((tool, i) => {
+      const button = document.createElement("span");
+      button.classList.add(formatter.options.toolbar.buttonClassName);
+      button.innerHTML = tool.icon;
+      button.addEventListener("click", () => {
+        this.onButtonClick(button, formatter, tool, toolButton);
+      });
+      this.preselectButton(button, tool, formatter, toolButton);
+      this.addButtonStyle(button, i, formatter);
+      this.buttons.push(button);
+      toolbar.appendChild(button);
+    });
+  }
+  preselectButton(button, toolButtonOption, formatter, toolButton) {
+    if (!formatter.currentSpec) {
+      return;
+    }
+    const target = formatter.currentSpec.getTargetElement();
+    if (!target) {
+      return;
+    }
+    if (toolButtonOption.isActive && toolButtonOption.isActive(target)) {
+      this.selectButton(formatter, button);
+    }
+  }
+  onButtonClick(button, formatter, toolButtonOption, toolButton) {
+    if (!formatter.currentSpec) {
+      return;
+    }
+    const target = formatter.currentSpec.getTargetElement();
+    if (!target || target.tagName.toLowerCase() !== "img") {
+      return;
+    }
+    this.clickButton(button, target, formatter, toolButtonOption, toolButton);
+  }
+  clickButton(button, target, formatter, toolButtonOption, toolButton) {
+    if (!toolButtonOption.isActive) {
+      toolButtonOption.apply.call(this, target, toolButton);
+    } else {
+      this.buttons.forEach((b) => {
+        this.deselectButton(formatter, b);
+      });
+      if (toolButtonOption.isActive(target)) {
+        toolButton.clear(target);
+      } else {
+        this.selectButton(formatter, button);
+        toolButtonOption.apply.call(this, target, toolButton);
+      }
+    }
+    formatter.update();
+  }
+  selectButton(formatter, button) {
+    button.classList.add("is-selected");
+    if (formatter.options.toolbar.addButtonSelectStyle) {
+      button.style.setProperty("filter", "invert(20%)");
+    }
+  }
+  deselectButton(formatter, button) {
+    button.classList.remove("is-selected");
+    if (formatter.options.toolbar.addButtonSelectStyle) {
+      button.style.removeProperty("filter");
+    }
+  }
+}
+exports.ImageToolbar = ImageToolbar;
+//# sourceMappingURL=toolbar.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.cjs.js","sources":["../../../../../src/modules/custom-image/actions/toolbar.ts"],"sourcesContent":["import type { BlotFormatter } from '../blot-formatter'\r\nimport type { ToolButtonOption } from '../options'\r\nimport type { ImageToolbarButtons } from './image-toolbar-buttons'\r\n\r\nexport class ImageToolbar {\r\n  toolbar?: HTMLElement\r\n  buttons: HTMLElement[]\r\n\r\n  constructor() {\r\n    this.toolbar = null\r\n    this.buttons = []\r\n  }\r\n\r\n  create(formatter: BlotFormatter, toolButton: ImageToolbarButtons): HTMLElement {\r\n    const toolbar = document.createElement('div')\r\n    toolbar.classList.add(formatter.options.toolbar.mainClassName)\r\n    this.addToolbarStyle(formatter, toolbar)\r\n    this.addButtons(formatter, toolbar, toolButton)\r\n\r\n    this.toolbar = toolbar\r\n    return this.toolbar\r\n  }\r\n\r\n  destroy() {\r\n    this.toolbar = null\r\n    this.buttons = []\r\n  }\r\n\r\n  getElement() {\r\n    return this.toolbar\r\n  }\r\n\r\n  addToolbarStyle(formatter: BlotFormatter, toolbar: HTMLElement) {\r\n    if (formatter.options.toolbar.mainStyle) {\r\n      Object.assign(toolbar.style, formatter.options.toolbar.mainStyle)\r\n    }\r\n  }\r\n\r\n  addButtonStyle(button: HTMLElement, index: number, formatter: BlotFormatter) {\r\n    if (formatter.options.toolbar.buttonStyle) {\r\n      Object.assign(button.style, formatter.options.toolbar.buttonStyle)\r\n      if (index > 0) {\r\n        button.style.borderLeftWidth = '0'\r\n      }\r\n    }\r\n\r\n    if (formatter.options.toolbar.svgStyle) {\r\n      Object.assign((button.children[0] as HTMLElement).style, formatter.options.toolbar.svgStyle)\r\n    }\r\n  }\r\n\r\n  addButtons(formatter: BlotFormatter, toolbar: HTMLElement, toolButton: ImageToolbarButtons) {\r\n    toolButton.getItems().forEach((tool, i) => {\r\n      const button = document.createElement('span')\r\n      button.classList.add(formatter.options.toolbar.buttonClassName)\r\n      button.innerHTML = tool.icon\r\n      button.addEventListener('click', () => {\r\n        this.onButtonClick(button, formatter, tool, toolButton)\r\n      })\r\n      this.preselectButton(button, tool, formatter, toolButton)\r\n      this.addButtonStyle(button, i, formatter)\r\n      this.buttons.push(button)\r\n      toolbar.appendChild(button)\r\n    })\r\n  }\r\n\r\n  preselectButton(\r\n    button: HTMLElement,\r\n    toolButtonOption: ToolButtonOption,\r\n    formatter: BlotFormatter,\r\n    toolButton: ImageToolbarButtons,\r\n  ) {\r\n    if (!formatter.currentSpec) {\r\n      return\r\n    }\r\n\r\n    const target = formatter.currentSpec.getTargetElement()\r\n    if (!target) {\r\n      return\r\n    }\r\n\r\n    if (toolButtonOption.isActive && toolButtonOption.isActive(target)) {\r\n      this.selectButton(formatter, button)\r\n    }\r\n  }\r\n\r\n  onButtonClick(\r\n    button: HTMLElement,\r\n    formatter: BlotFormatter,\r\n    toolButtonOption: ToolButtonOption,\r\n    toolButton: ImageToolbarButtons,\r\n  ) {\r\n    if (!formatter.currentSpec) {\r\n      return\r\n    }\r\n\r\n    const target = formatter.currentSpec.getTargetElement()\r\n    if (!target || target.tagName.toLowerCase() !== 'img') {\r\n      return\r\n    }\r\n\r\n    this.clickButton(button, target as HTMLImageElement, formatter, toolButtonOption, toolButton)\r\n  }\r\n\r\n  clickButton(\r\n    button: HTMLElement,\r\n    target: HTMLImageElement,\r\n    formatter: BlotFormatter,\r\n    toolButtonOption: ToolButtonOption,\r\n    toolButton: ImageToolbarButtons,\r\n  ) {\r\n    if (!toolButtonOption.isActive) {\r\n      toolButtonOption.apply.call(this, target, toolButton)\r\n    }\r\n    else {\r\n      this.buttons.forEach((b) => {\r\n        this.deselectButton(formatter, b)\r\n      })\r\n\r\n      if (toolButtonOption.isActive(target)) {\r\n        toolButton.clear(target)\r\n      }\r\n      else {\r\n        this.selectButton(formatter, button)\r\n        toolButtonOption.apply.call(this, target, toolButton)\r\n      }\r\n    }\r\n\r\n    formatter.update()\r\n  }\r\n\r\n  selectButton(formatter: BlotFormatter, button: HTMLElement) {\r\n    button.classList.add('is-selected')\r\n    if (formatter.options.toolbar.addButtonSelectStyle) {\r\n      button.style.setProperty('filter', 'invert(20%)')\r\n    }\r\n  }\r\n\r\n  deselectButton(formatter: BlotFormatter, button: HTMLElement) {\r\n    button.classList.remove('is-selected')\r\n    if (formatter.options.toolbar.addButtonSelectStyle) {\r\n      button.style.removeProperty('filter')\r\n    }\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

package/lib/modules/custom-image/{BlotFormatter.cjs.js → blot-formatter.cjs.js}

@@ -1,54 +1,28 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+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" });
 const lodashEs = require("lodash-es");
 const Quill = require("quill");
 const image = require("./image.cjs.js");
-const imageBar = require("./image-bar.cjs.js");
-const Options = require("./Options.cjs.js");
-const CustomImageSpec = require("./specs/CustomImageSpec.cjs.js");
+const options = require("./options.cjs.js");
+require("./specs/index.cjs.js");
+const customImageSpec = require("./specs/custom-image-spec.cjs.js");
 const dontMerge = (_destination, source) => source;
 class BlotFormatter {
-  constructor(quill, options = {}) {
-    this.debounceTimer = null;
-    this.onClick = () => {
+  constructor(quill, options$1 = {}) {
+    __publicField(this, "options");
+    __publicField(this, "currentSpec");
+    __publicField(this, "specs");
+    __publicField(this, "overlay");
+    __publicField(this, "actions");
+    __publicField(this, "observer");
+    __publicField(this, "onClick", () => {
       this.hide();
-      this.hideImageBar();
-    };
-    this.onMouseOver = (event) => {
-      if (this.debounceTimer) {
-        clearTimeout(this.debounceTimer);
-      }
-      this.debounceTimer = window.setTimeout(() => {
-        if (event.target.tagName === "IMG") {
-          const target = event.target;
-          if (target) {
-            if (this.imageBar) {
-              this.imageBar.destroy();
-            }
-            this.imageBar = new imageBar.default(this.quill, target);
-          }
-        } else {
-          this.hideImageBar();
-        }
-      }, 150);
-    };
-    this.hideImageBar = () => {
-      if (this.imageBar) {
-        this.imageBar.destroy();
-        this.imageBar = null;
-      }
-    };
-    this.hideImageOverlay = (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 (!isBlotFormatter) {
-        this.hide();
-      }
-      document.body.removeEventListener("click", this.hideImageOverlay);
-    };
+    });
     this.quill = quill;
-    this.options = lodashEs.merge(Options.default, options, { arrayMerge: dontMerge });
+    this.options = lodashEs.merge({}, options.default, options$1, { arrayMerge: dontMerge });
     this.currentSpec = null;
     this.actions = [];
     this.overlay = document.createElement("div");
@@ -58,13 +32,14 @@ class BlotFormatter {
     }
     document.execCommand("enableObjectResizing", false, "false");
     this.quill.root.addEventListener("click", this.onClick);
-    this.quill.root.addEventListener("mouseover", (event) => this.onMouseOver(event));
     this.specs = this.options.specs.map((SpecClass) => new SpecClass(this));
     this.specs.forEach((spec) => spec.init());
   }
   static register() {
-    Quill.register("formats/image", image.default, true);
-    Quill.register("modules/image-spec", CustomImageSpec.CustomImageSpec, true);
+    Quill.register({
+      "formats/image": image.CustomImage,
+      "modules/image-spec": customImageSpec.CustomImageSpec
+    }, true);
   }
   show(spec) {
     this.currentSpec = spec;
@@ -92,7 +67,6 @@ class BlotFormatter {
       attributeOldValue: true,
       subtree: true
     });
-    document.body.addEventListener("click", this.hideImageOverlay, true);
   }
   hide() {
     if (!this.currentSpec) {
@@ -132,7 +106,7 @@ class BlotFormatter {
     if (!overlayTarget) {
       return;
     }
-    const parent = this.quill.root.parentNode;
+    const parent = this.quill.root.parentElement;
     const specRect = overlayTarget.getBoundingClientRect();
     const parentRect = parent.getBoundingClientRect();
     Object.assign(this.overlay.style, {
@@ -158,5 +132,5 @@ class BlotFormatter {
     });
   }
 }
-exports.default = BlotFormatter;
-//# sourceMappingURL=BlotFormatter.cjs.js.map
+exports.BlotFormatter = BlotFormatter;
+//# sourceMappingURL=blot-formatter.cjs.js.map

package/lib/modules/custom-image/blot-formatter.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"blot-formatter.cjs.js","sources":["../../../../src/modules/custom-image/blot-formatter.ts"],"sourcesContent":["import type FluentEditor from '../../core/fluent-editor'\r\nimport type { Action } from './actions'\r\nimport type { BlotFormatterOptions } from './options'\r\nimport type { BlotSpec } from './specs'\r\nimport { merge as deepmerge } from 'lodash-es'\r\nimport Quill from 'quill'\r\nimport { CustomImage } from './image'\r\nimport DefaultOptions from './options'\r\nimport { CustomImageSpec } from './specs'\r\n\r\nconst dontMerge = (_destination: Array<any>, source: Array<any>) => source\r\n\r\nexport class BlotFormatter {\r\n  options: BlotFormatterOptions\r\n  currentSpec: BlotSpec\r\n  specs: BlotSpec[]\r\n  overlay: HTMLElement\r\n  actions: Action[]\r\n  observer: MutationObserver\r\n\r\n  static register() {\r\n    Quill.register({\r\n      'formats/image': CustomImage,\r\n      'modules/image-spec': CustomImageSpec,\r\n    }, true)\r\n  }\r\n\r\n  constructor(public quill: FluentEditor, options: Partial<BlotFormatterOptions> = {}) {\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.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: typeof window.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 as HTMLElement\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  }\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 = this.quill.root.parentElement\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"],"names":["options","deepmerge","DefaultOptions","CustomImage","CustomImageSpec","image"],"mappings":"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"}

package/lib/modules/custom-image/image.cjs.js

@@ -1,7 +1,13 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+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" });
 const Quill = require("quill");
 const editor_utils = require("../../config/editor.utils.cjs.js");
+const is = require("../../utils/is.cjs.js");
+require("./actions/index.cjs.js");
+const imageToolbarButtons = require("./actions/image-toolbar-buttons.cjs.js");
 const Embed = Quill.import("blots/embed");
 const ATTRIBUTES = ["alt", "height", "width", "image-id"];
 const _CustomImage = class _CustomImage extends Embed {
@@ -16,8 +22,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 (is.isObject(value)) {
+      if (value.align && imageToolbarButtons.alignmentHandler[value.align]) {
+        node.setAttribute(imageToolbarButtons.ALIGN_ATTR, value.align);
+        imageToolbarButtons.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) {
@@ -45,8 +62,16 @@ const _CustomImage = class _CustomImage extends Embed {
     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) {
@@ -75,9 +100,9 @@ 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";
-exports.default = CustomImage;
+exports.CustomImage = CustomImage;
 //# sourceMappingURL=image.cjs.js.map

package/lib/modules/custom-image/image.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.cjs.js","sources":["../../../../src/modules/custom-image/image.ts"],"sourcesContent":["import type TypeEmbed from 'quill/blots/embed'\r\nimport Quill from 'quill'\r\nimport { isNullOrUndefined, sanitize } from '../../config/editor.utils'\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 | { src: string }\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: 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.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', 'blob', '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\nexport { CustomImage as default }\r\n"],"names":["sanitize","isNullOrUndefined"],"mappings":";;;;AAIA,MAAM,QAAQ,MAAM,OAAO,aAAa;AACxC,MAAM,aAAa,CAAC,OAAO,UAAU,SAAS,UAAU;AAGxD,MAAM,eAAN,MAAM,qBAAoB,MAAM;AAAA,EAQ9B,OAAO,OAAO,OAAmB;AACzB,UAAA,OAAO,MAAM,OAAO,KAAK;AAC/B,UAAM,MAAM,OAAO,UAAU,WAAW,QAAQ,MAAM;AACtD,QAAI,KAAK;AACD,YAAA,SAAS,KAAK,SAAS,GAAG;AAChC,UAAI,EAAC,iCAAQ,WAAW,gBAAe;AACrC,aAAK,QAAQ,MAAM;AAAA,MAAA;AAEhB,WAAA,aAAa,OAAO,MAAM;AAAA,IAAA;AAEjC,SAAK,aAAa,iBAAiB,MAAM,aAAY,SAAS,EAAE;AAC3D,SAAA,aAAa,uBAAuB,MAAM;AAC/C,SAAK,MAAM,gBAAgB;AACpB,WAAA;AAAA,EAAA;AAAA,EAGT,OAAO,QAAQ,SAAS;AACtB,WAAO,WAAW,OAAO,CAAC,SAAS,cAAc;AAC3C,UAAA,QAAQ,aAAa,SAAS,GAAG;AACnC,gBAAQ,SAAS,IAAI,QAAQ,aAAa,SAAS;AAAA,MAAA;AAE9C,aAAA;AAAA,IACT,GAAG,EAAE;AAAA,EAAA;AAAA,EAGP,OAAO,MAAM,KAAK;AAChB,WAAO,qBAAqB,KAAK,GAAG,KAAK,yBAAyB,KAAK,GAAG;AAAA,EAAA;AAAA,EAG5E,OAAO,WAAW;AAChB,QAAI,WAAW,KAAK,UAAU,SAAS,GAAG;AACxC,iBAAW,MAAM;AAEN,iBAAA,YAAY,wBAAwB,OAAO,OAAO;AAAA,SAC1D,CAAC;AAAA,IAAA;AAAA,EACN;AAAA,EAGF,OAAO,SAAS,KAAK;AACZ,WAAAA,aAAA,SAAS,KAAK,CAAC,QAAQ,SAAS,QAAQ,MAAM,CAAC,IAAI,MAAM;AAAA,EAAA;AAAA,EAGlE,OAAO,MAAM,SAAS;AACpB,UAAM,UAAe,CAAC;AAChB,UAAA,WAAW,QAAQ,aAAa,KAAK;AACnC,YAAA,MAAM,KAAK,SAAS,QAAQ;AAC5B,YAAA,aAAa,QAAQ,aAAa,qBAAqB;AACvD,YAAA,UAAU,QAAQ,QAAQ;AAC3B,WAAA;AAAA,EAAA;AAAA,EAGT,OAAO,MAAM,OAAO;AACd,QAAA,WAAW,SAAS,IAAI,GAAG;AAC7B,UAAI,OAAO;AACJ,aAAA,QAAQ,aAAa,MAAM,KAAK;AAAA,MAAA,OAElC;AACE,aAAA,QAAQ,gBAAgB,IAAI;AAAA,MAAA;AAAA,IACnC,OAEG;AACG,YAAA,OAAO,MAAM,KAAK;AAAA,IAAA;AAAA,EAC1B;AAAA,EAGF,SAAS;AACF,SAAA,OAAO,YAAY,IAAI;AAAA,EAAA;AAAA,EAG9B,KAAK,MAAM,OAAO;AACV,UAAA,UAAU,OAAO,SAAS,WAAW,KAAK,OAAO,OAAO,MAAM,KAAK,IAAI;AAC7E,QAAI,CAACC,aAAA,kBAAkB,KAAK,MAAM,GAAG;AACnC,WAAK,OAAO,aAAa,SAAS,KAAK,QAAQ,MAAS;AAAA,IAAA;AAEtD,QAAA,OAAO,QAAQ,gBAAgB,YAAY;AAC7C,YAAM,IAAI,UAAU,eAAe,IAAI,EAAE;AAAA,IAAA;AAE3C,YAAQ,YAAY,IAAI;AACjB,WAAA;AAAA,EAAA;AAEX;AAvFE,aAAO,UAAU;AADnB,IAAM,cAAN;AAyFA,YAAY,WAAW;AACvB,YAAY,UAAU;;"}
+{"version":3,"file":"image.cjs.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":["isObject","alignmentHandler","ALIGN_ATTR","sanitize","isNullOrUndefined"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("./actions/index.cjs.js");
+const blotFormatter = require("./blot-formatter.cjs.js");
+const image = require("./image.cjs.js");
+require("./specs/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

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

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

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+require("./specs/index.cjs.js");
+const imageSpec = require("./specs/image-spec.cjs.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.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"
+    }
+  }
+};
+exports.CENTER_ALIGN = CENTER_ALIGN;
+exports.COPY = COPY;
+exports.DOWNLOAD = DOWNLOAD;
+exports.LEFT_ALIGN = LEFT_ALIGN;
+exports.RIGHT_ALIGN = RIGHT_ALIGN;
+exports.default = DefaultOptions;
+//# sourceMappingURL=options.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"options.cjs.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":["ImageSpec"],"mappings":";;;;AA0DO,MAAM,aAAa;AACnB,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,OAAO;AACb,MAAM,WAAW;AACxB,MAAM,iBAAuC;AAAA,EAC3C,OAAO;AAAA,IACLA,UAAAA;AAAAA,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/lib/modules/custom-image/specs/blot-spec.cjs.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"blot-spec.cjs.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":["ImageToolbarAction","CustomResizeAction","DeleteAction"],"mappings":";;;;;;;;;AAGO,MAAM,SAAS;AAAA,EAGpB,YAAY,WAA0B;AAFtC;AAGE,SAAK,YAAY;AAAA,EAAA;AAAA,EAGnB,OAAa;AAAA,EAAA;AAAA,EAEb,aAAa;AACJ,WAAA,CAACA,cAAAA,oBAAoBC,mBAAA,oBAAoBC,yBAAY;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/lib/modules/custom-image/specs/{CustomImageSpec.cjs.js → custom-image-spec.cjs.js}

@@ -1,21 +1,25 @@
 "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" });
 const editor_utils = require("../../../config/editor.utils.cjs.js");
-const CustomResizeAction = require("../actions/CustomResizeAction.cjs.js");
-const DeleteAction = require("../actions/DeleteAction.cjs.js");
-const ImageSpec = require("./ImageSpec.cjs.js");
-class CustomImageSpec extends ImageSpec.default {
+const imageSpec = require("./image-spec.cjs.js");
+class CustomImageSpec extends imageSpec.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 (!editor_utils.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;
@@ -35,13 +39,11 @@ class CustomImageSpec extends ImageSpec.default {
         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) {
@@ -53,9 +55,6 @@ class CustomImageSpec extends ImageSpec.default {
     this.editorElem.addEventListener("mouseout", this.imageMouseout);
     super.init();
   }
-  getActions() {
-    return [DeleteAction.default, CustomResizeAction.default];
-  }
   imageMouseOver(event) {
     var _a;
     const target = event.target;
@@ -114,4 +113,4 @@ class CustomImageSpec extends ImageSpec.default {
   }
 }
 exports.CustomImageSpec = CustomImageSpec;
-//# sourceMappingURL=CustomImageSpec.cjs.js.map
+//# sourceMappingURL=custom-image-spec.cjs.js.map

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

@@ -0,0 +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'\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":["ImageSpec","isInside"],"mappings":"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"}

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

@@ -0,0 +1,32 @@
+"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" });
+const blotSpec = require("./blot-spec.cjs.js");
+class ImageSpec extends blotSpec.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;
+  }
+}
+exports.ImageSpec = ImageSpec;
+//# sourceMappingURL=image-spec.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image-spec.cjs.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":["BlotSpec"],"mappings":";;;;;;AAEO,MAAM,kBAAkBA,SAAAA,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;;"}