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

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 Quill from 'quill'\r\nimport { isNullOrUndefined, sanitize } from '../../config/editor.utils'\r\n\r\nconst Embed = Quill.imports['blots/embed']\r\nconst Inline = Quill.imports['blots/inline']\r\n\r\nconst ATTRIBUTES = ['alt', 'height', 'width', 'image-id']\r\n\r\n// @dynamic\r\nclass CustomImage extends Embed {\r\n  static ID_SEED = 0\r\n  static blotName: string\r\n  static tagName: string\r\n  domNode: any\r\n  parent: any\r\n  scroll: any\r\n  next: any\r\n  static create(value) {\r\n    const node = super.create(value)\r\n    const url = typeof value === 'string' ? value : value.src\r\n    if (url) {\r\n      const imgURL = this.sanitize(url)\r\n      if (!imgURL?.startsWith('data:image')) {\r\n        node.dataset.src = imgURL\r\n      }\r\n      node.setAttribute('src', imgURL)\r\n    }\r\n    node.setAttribute('data-image-id', `img${CustomImage.ID_SEED++}`)\r\n    node.setAttribute('devui-editorx-image', true)\r\n    node.style.verticalAlign = 'baseline'\r\n    return node\r\n  }\r\n\r\n  static formats(domNode) {\r\n    return ATTRIBUTES.reduce((formats, attribute) => {\r\n      if (domNode.hasAttribute(attribute)) {\r\n        formats[attribute] = domNode.getAttribute(attribute)\r\n      }\r\n      return formats\r\n    }, {})\r\n  }\r\n\r\n  static match(url) {\r\n    return /\\.(jpe?g|gif|png)$/.test(url) || /^data:image\\/.+;base64/.test(url)\r\n  }\r\n\r\n  static register() {\r\n    if (/Firefox/i.test(navigator.userAgent)) {\r\n      setTimeout(() => {\r\n        // Disable image resizing in Firefox\r\n        document.execCommand('enableObjectResizing', false, false)\r\n      }, 1)\r\n    }\r\n  }\r\n\r\n  static sanitize(url) {\r\n    return sanitize(url, ['http', 'https', 'data']) ? url : '//:0'\r\n  }\r\n\r\n  static value(domNode) {\r\n    const formats: any = {}\r\n    const imageSrc = domNode.getAttribute('src')\r\n    formats.src = this.sanitize(imageSrc)\r\n    formats.hasExisted = domNode.getAttribute('devui-editorx-image')\r\n    formats.imageId = domNode.dataset.imageId\r\n    return formats\r\n  }\r\n\r\n  format(name, value) {\r\n    if (ATTRIBUTES.includes(name)) {\r\n      if (value) {\r\n        this.domNode.setAttribute(name, value)\r\n      }\r\n      else {\r\n        this.domNode.removeAttribute(name)\r\n      }\r\n    }\r\n    else {\r\n      super.format(name, value)\r\n    }\r\n  }\r\n\r\n  unWrap() {\r\n    this.parent.replaceWith(this)\r\n  }\r\n\r\n  wrap(name, value) {\r\n    const wrapper = typeof name === 'string' ? this.scroll.create(name, value) : name\r\n    if (!isNullOrUndefined(this.parent)) {\r\n      this.parent.insertBefore(wrapper, this.next || undefined)\r\n    }\r\n    if (typeof wrapper.appendChild !== 'function') {\r\n      throw new TypeError(`Cannot wrap ${name}`)\r\n    }\r\n    wrapper.appendChild(this)\r\n    return wrapper\r\n  }\r\n}\r\nCustomImage.blotName = 'image'\r\nCustomImage.tagName = 'IMG'\r\n\r\n// @dynamic\r\nclass CustomImageContainer extends Inline {\r\n  static tagName: string\r\n  static className: string\r\n  static blotName: string\r\n  static allowedChildren: typeof CustomImage[]\r\n  constructor(scroll, domNode) {\r\n    super(scroll, domNode)\r\n    domNode.setAttribute('contenteditable', false)\r\n  }\r\n}\r\nCustomImageContainer.blotName = 'image-container'\r\nCustomImageContainer.className = 'ql-image-container'\r\nCustomImageContainer.tagName = 'DIV'\r\n\r\nCustomImageContainer.allowedChildren = [CustomImage]\r\nexport { CustomImage as default, CustomImageContainer as ImageContainerBlot }\r\n"],"names":["sanitize","isNullOrUndefined"],"mappings":";;;;AAGA,MAAM,QAAQ,MAAM,QAAQ,aAAa;AACzC,MAAM,SAAS,MAAM,QAAQ,cAAc;AAE3C,MAAM,aAAa,CAAC,OAAO,UAAU,SAAS,UAAU;AAGxD,MAAM,eAAN,MAAM,qBAAoB,MAAM;AAAA,EAQ9B,OAAO,OAAO,OAAO;AACb,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,IAAI;AAC7C,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,KAAK;AAAA,SACxD,CAAC;AAAA,IAAA;AAAA,EACN;AAAA,EAGF,OAAO,SAAS,KAAK;AACZ,WAAAA,aAAA,SAAS,KAAK,CAAC,QAAQ,SAAS,MAAM,CAAC,IAAI,MAAM;AAAA,EAAA;AAAA,EAG1D,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;AAGtB,MAAM,6BAA6B,OAAO;AAAA,EAKxC,YAAY,QAAQ,SAAS;AAC3B,UAAM,QAAQ,OAAO;AACb,YAAA,aAAa,mBAAmB,KAAK;AAAA,EAAA;AAEjD;AACA,qBAAqB,WAAW;AAChC,qBAAqB,YAAY;AACjC,qBAAqB,UAAU;AAE/B,qBAAqB,kBAAkB,CAAC,WAAW;;;"}
+{"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":";;;;;;;;;;AAOA,MAAM,QAAQ,MAAM,OAAO,aAAa;AACxC,MAAM,aAAa,CAAC,OAAO,UAAU,SAAS,UAAU;AAQjD,MAAM,eAAN,MAAM,qBAAoB,MAAM;AAAA,EAKrC,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;AAChE,SAAK,MAAM,gBAAgB;AACvB,QAAAA,GAAAA,SAAS,KAAK,GAAG;AACnB,UAAI,MAAM,SAASC,oBAAiB,iBAAA,MAAM,KAAK,GAAG;AAC3C,aAAA,aAAaC,gCAAY,MAAM,KAAK;AACxBD,4BAAAA,iBAAA,MAAM,KAAK,EAAE,IAAI;AAAA,MAAA;AAEpC,UAAI,MAAM,OAAO;AACf,aAAK,aAAa,SAAS,OAAO,MAAM,KAAK,CAAC;AAAA,MAAA;AAEhD,UAAI,MAAM,QAAQ;AAChB,aAAK,aAAa,UAAU,OAAO,MAAM,MAAM,CAAC;AAAA,MAAA;AAAA,IAClD;AAEK,WAAA;AAAA,EAAA;AAAA,EAGT,OAAO,QAAQ,SAAsB;AACnC,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,KAAa;AACxB,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,KAAa;AACpB,WAAAE,aAAA,SAAS,KAAK,CAAC,QAAQ,SAAS,QAAQ,MAAM,CAAC,IAAI,MAAM;AAAA,EAAA;AAAA,EAGlE,OAAO,MAAM,SAAsB;AACjC,UAAM,UAAe,CAAC;AAChB,UAAA,WAAW,QAAQ,aAAa,KAAK;AACnC,YAAA,MAAM,KAAK,SAAS,QAAQ;AAC5B,YAAA,UAAU,QAAQ,QAAQ;AAC9B,QAAA,QAAQ,QAAQ,OAAO;AACjB,cAAA,QAAQ,QAAQ,QAAQ;AAAA,IAAA;AAE9B,QAAA,QAAQ,aAAa,OAAO,GAAG;AACzB,cAAA,QAAQ,QAAQ,aAAa,OAAO;AAAA,IAAA;AAE1C,QAAA,QAAQ,aAAa,QAAQ,GAAG;AAC1B,cAAA,SAAS,QAAQ,aAAa,QAAQ;AAAA,IAAA;AAEzC,WAAA;AAAA,EAAA;AAAA,EAGT,OAAO,MAAc,OAAY;AAC3B,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,IAAiB;AAAA,EAAA;AAAA,EAK3C,KAAK,MAAqC,OAAa;AAC/C,UAAA,UAAW,OAAO,SAAS,WAAW,KAAK,OAAO,OAAO,MAAM,KAAK,IAAI;AAC9E,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;AAzGE,cADW,cACJ,YAAW;AAClB,cAFW,cAEJ,WAAU;AACjB,cAHW,cAGJ,WAAU;AAHZ,IAAM,cAAN;;"}

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;;"}

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const blotSpec = require("./blot-spec.cjs.js");
+const customImageSpec = require("./custom-image-spec.cjs.js");
+const imageSpec = require("./image-spec.cjs.js");
+exports.BlotSpec = blotSpec.BlotSpec;
+exports.CustomImageSpec = customImageSpec.CustomImageSpec;
+exports.ImageSpec = imageSpec.ImageSpec;
+//# sourceMappingURL=index.cjs.js.map

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

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

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

@@ -1,209 +1,78 @@
 "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_config = require("../config/editor.config.cjs.js");
-const editor_utils = require("../config/editor.utils.cjs.js");
-const Uploader = Quill.imports["modules/uploader"];
+const is = require("../utils/is.cjs.js");
+const Uploader = Quill.import("modules/uploader");
 const Delta = Quill.import("delta");
-class CustomUploader extends Uploader {
-  constructor() {
-    super(...arguments);
-    this.isAllowedFileSize = (maxSize, file) => {
-      if (editor_utils.isNullOrUndefined(maxSize)) {
-        return true;
-      }
-      return file.size <= maxSize;
-    };
-    this.isAllowedFileType = (accept, file) => {
-      if (accept) {
-        const baseMimeType = file.type.replace(/\/.*$/, "");
-        const acceptArr = typeof accept === "string" ? accept.split(",") : accept;
-        return acceptArr.some((type) => {
-          const validType = type.trim();
-          if (validType.startsWith(".")) {
-            return file.name.toLowerCase().includes(validType.toLowerCase(), file.name.toLowerCase().length - validType.toLowerCase().length);
-          } else if (/\/\*$/.test(validType)) {
-            return baseMimeType === validType.replace(/\/.*$/, "");
-          }
-          return file.type === validType;
-        });
-      }
-      return true;
-    };
+class FileUploader extends Uploader {
+  constructor(quill, options) {
+    super(quill, options);
+    this.quill = quill;
+    this.options = this.resolveOptions(options);
   }
-  upload(range, files, isFile) {
-    const uploads = [];
-    const fileFlags = [];
-    const rejectFlags = {
-      file: false,
-      image: false
-    };
-    const uploadOption = this.quill.options.uploadOption;
-    const acceptObj = uploadOption && {
-      image: uploadOption.imageAccept,
-      file: uploadOption.fileAccept
-    } || {};
-    Array.from(files).forEach((file) => {
-      var _a, _b;
-      if (file) {
-        const fileFlag = typeof isFile === "boolean" ? isFile : !/^image\/[-\w.]+$/.test(file.type);
-        const fileType = fileFlag ? "file" : "image";
-        const accept = acceptObj[fileType] || this.options[fileType];
-        if (this.isAllowedFileType(accept, file) && this.isAllowedFileSize(uploadOption == null ? void 0 : uploadOption.maxSize, file)) {
-          uploads.push(file);
-          fileFlags.push(fileFlag);
-          (_a = uploadOption == null ? void 0 : uploadOption.success) == null ? void 0 : _a.call(uploadOption, file);
-        } else {
-          rejectFlags[fileType] = true;
-          (_b = uploadOption == null ? void 0 : uploadOption.fail) == null ? void 0 : _b.call(uploadOption, file);
-        }
+  resolveOptions(options = {}) {
+    return Object.assign({
+      mimetypes: ["*"],
+      maxSize: Number.POSITIVE_INFINITY,
+      handler(range, files) {
+        return files.map((file) => URL.createObjectURL(file));
+      },
+      success() {
+      },
+      fail() {
       }
-    });
-    this.options.handler.call(this, range, uploads, fileFlags, rejectFlags);
+    }, options);
   }
-  // 处理上传文件
-  handleUploadFile(range, files, _hasRejectedFile) {
-    var _a;
-    if ((_a = this.quill.options.uploadOption) == null ? void 0 : _a.fileUpload) {
-      const initialRange = range;
-      files.forEach((file) => {
-        var _a2;
-        const result = {
-          file,
-          callback: (res) => {
-            if (!res) {
-              return;
-            }
-            this.insertFileToEditor(initialRange, file, {
-              code: 0,
-              data: {
-                title: file.name,
-                size: file.size,
-                src: res.fileUrl
-              }
-            });
-            initialRange.index += 1;
-          },
-          editor: this.quill
-        };
-        (_a2 = this.quill.options.uploadOption) == null ? void 0 : _a2.fileUpload(result);
-      });
-    } else {
-      files.forEach((file) => {
-        const fileUrl = URL.createObjectURL(file);
-        const initialRange = range;
-        this.insertFileToEditor(initialRange, file, {
-          code: 0,
-          data: {
-            title: file.name,
-            size: file.size,
-            src: file.src ?? fileUrl
-          }
-        });
-        initialRange.index += 1;
-      });
-    }
+  validateFile(file) {
+    return this.options.mimetypes.some((type) => (file.type || "text/plain").match(type.replaceAll("*", ".*"))) && file.size < this.options.maxSize;
   }
-  // 将文件插入编辑器
-  insertFileToEditor(range, file, { code, message, data }) {
-    if (code === 0) {
-      const oldContent = new Delta().retain(range.index).delete(range.length);
-      const videoFlag = this.uploadOption && this.uploadOption.isVideoPlay && /^video\/[-\w.]+$/.test(file.type);
-      const insertObj = videoFlag ? { video: data } : { file: data };
-      const currentContent = new Delta([{ insert: insertObj }]);
-      const newContent = oldContent.concat(currentContent);
-      this.quill.updateContents(newContent, Quill.sources.USER);
-      this.quill.setSelection(range.index + 1);
-    } else {
-      console.error("error message:", message);
-    }
+  async getFileUrls(files, range) {
+    const uploads = files.filter((file) => this.validateFile(file));
+    return this.options.handler.call(this, range, uploads);
   }
-  // 将图片插入编辑器
-  insertImageToEditor(range, { code, message, data }) {
-    if (code === 0) {
-      const { imageId, imageUrl } = data;
-      const oldContent = new Delta().retain(range.index).delete(range.length);
-      const currentContent = new Delta([
-        {
-          insert: { image: imageUrl },
-          attributes: { "image-id": imageId }
-        }
-      ]);
-      const newContent = oldContent.concat(currentContent);
-      this.quill.updateContents(newContent, Quill.sources.USER);
-      this.quill.setSelection(range.index + 1);
-    } else {
-      console.error("error message:", message);
+  async upload(range, files) {
+    const uploads = [];
+    const fails = [];
+    for (const file of Array.from(files)) {
+      if (this.validateFile(file)) {
+        uploads.push(file);
+      } else {
+        fails.push(file);
+      }
     }
-  }
-  // 处理上传图片
-  handleUploadImage(range, { file, files }, hasRejectedImage) {
-    var _a, _b;
-    if ((_a = this.quill.options.uploadOption) == null ? void 0 : _a.imageUpload) {
-      const imageEnableMultiUpload = this.quill.uploader.options.enableMultiUpload === true || ((_b = this.quill.uploader.options.enableMultiUpload) == null ? void 0 : _b.image);
-      files.forEach((file2) => {
-        var _a2;
-        const initialRange = range;
-        const result = {
-          file: file2,
-          data: { files: [file2] },
-          hasRejectedImage,
-          callback: (res) => {
-            if (!res) {
-              return;
-            }
-            if (imageEnableMultiUpload && Array.isArray(res)) {
-              res.forEach((value) => {
-                this.insertImageToEditor(initialRange, value);
-                initialRange.index += 1;
-              });
-            } else {
-              this.insertImageToEditor(initialRange, res);
-              initialRange.index += 1;
-            }
-          },
-          editor: this.quill
-        };
-        if (imageEnableMultiUpload) {
-          result.data = { files };
+    const result = await this.options.handler.call(this, range, uploads);
+    const updateDelta = result.reduce((delta, url, i) => {
+      if (is.isString(url)) {
+        const type = uploads[i].type;
+        if (type.startsWith("image/")) {
+          delta.insert({ image: url });
+        } else if (type.startsWith("video/")) {
+          delta.insert({ video: { src: url } });
+        } else {
+          delta.insert({ file: { size: uploads[i].size, title: uploads[i].name, src: url } });
         }
-        (_a2 = this.quill.options.uploadOption) == null ? void 0 : _a2.imageUpload(result);
-      });
-    } else {
-      const promises = files.map((fileItem) => {
-        return new Promise((resolve) => {
-          const reader = new FileReader();
-          reader.onload = (e) => {
-            resolve(e.target.result);
-          };
-          reader.readAsDataURL(fileItem);
-        });
-      });
-      Promise.all(promises).then((images) => {
-        const update = images.reduce((delta, image) => {
-          return delta.insert({ image });
-        }, new Delta().retain(range.index).delete(range.length));
-        this.quill.updateContents(update, Quill.sources.USER);
-        this.quill.setSelection(range.index + images.length, Quill.sources.SILENT);
-      });
-    }
-  }
-}
-CustomUploader.DEFAULTS = {
-  file: editor_config.FILE_UPLOADER_MIME_TYPES,
-  image: editor_config.IMAGE_UPLOADER_MIME_TYPES,
-  enableMultiUpload: false,
-  handler(range, files, fileFlags, rejectFlags) {
-    const fileArr = [];
-    const imgArr = [];
-    files.forEach((file, index) => fileFlags[index] ? fileArr.push(file) : imgArr.push(file));
-    if (this.quill.options.modules.file && (fileArr.length || rejectFlags.file)) {
-      this.handleUploadFile(range, fileArr, rejectFlags.file);
+      } else {
+        delta.insert("\n");
+      }
+      return delta;
+    }, new Delta().retain(range.index).delete(range.length));
+    this.quill.updateContents(updateDelta, Quill.sources.USER);
+    this.quill.setSelection(range.index + result.length, Quill.sources.SILENT);
+    for (const file of fails) {
+      this.options.fail.call(this, file, range);
     }
-    if (imgArr.length || rejectFlags.image) {
-      this.handleUploadImage(range, { file: imgArr[0], files: imgArr }, rejectFlags.image);
+    for (const [i, res] of result.entries()) {
+      if (is.isString(res)) {
+        this.options.success.call(this, files[i], { index: range.index + i, length: 0 });
+      } else {
+        this.options.fail.call(this, files[i], { index: range.index + i, length: 0 });
+      }
     }
   }
-};
-exports.default = CustomUploader;
+}
+__publicField(FileUploader, "DEFAULTS", {});
+exports.FileUploader = FileUploader;
 //# sourceMappingURL=custom-uploader.cjs.js.map