@opentiny/fluent-editor/es/modules/custom-image/image.es.js

A rich text editor based on Quill 2.0, which extends rich modules and formats on the basis of Quill. It's powerful and out-of-the-box.

import Quill from "quill";
import { sanitize, isNullOrUndefined } from "../../config/editor.utils.es.js";
const Embed = Quill.imports["blots/embed"];
const Inline = Quill.imports["blots/inline"];
const ATTRIBUTES = ["alt", "height", "width", "image-id"];
const _CustomImage = class _CustomImage extends Embed {
  static create(value) {
    const node = super.create(value);
    const url = typeof value === "string" ? value : value.src;
    if (url) {
      const imgURL = this.sanitize(url);
      if (!(imgURL == null ? void 0 : imgURL.startsWith("data:image"))) {
        node.dataset.src = imgURL;
      }
      node.setAttribute("src", imgURL);
    }
    node.setAttribute("data-image-id", `img${_CustomImage.ID_SEED++}`);
    node.setAttribute("devui-editorx-image", true);
    node.style.verticalAlign = "baseline";
    return node;
  }
  static formats(domNode) {
    return ATTRIBUTES.reduce((formats, attribute) => {
      if (domNode.hasAttribute(attribute)) {
        formats[attribute] = domNode.getAttribute(attribute);
      }
      return formats;
    }, {});
  }
  static match(url) {
    return /\.(jpe?g|gif|png)$/.test(url) || /^data:image\/.+;base64/.test(url);
  }
  static register() {
    if (/Firefox/i.test(navigator.userAgent)) {
      setTimeout(() => {
        document.execCommand("enableObjectResizing", false, false);
      }, 1);
    }
  }
  static sanitize(url) {
    return sanitize(url, ["http", "https", "data"]) ? url : "//:0";
  }
  static value(domNode) {
    const formats = {};
    const imageSrc = domNode.getAttribute("src");
    formats.src = this.sanitize(imageSrc);
    formats.hasExisted = domNode.getAttribute("devui-editorx-image");
    formats.imageId = domNode.dataset.imageId;
    return formats;
  }
  format(name, value) {
    if (ATTRIBUTES.includes(name)) {
      if (value) {
        this.domNode.setAttribute(name, value);
      } else {
        this.domNode.removeAttribute(name);
      }
    } else {
      super.format(name, value);
    }
  }
  unWrap() {
    this.parent.replaceWith(this);
  }
  wrap(name, value) {
    const wrapper = typeof name === "string" ? this.scroll.create(name, value) : name;
    if (!isNullOrUndefined(this.parent)) {
      this.parent.insertBefore(wrapper, this.next || void 0);
    }
    if (typeof wrapper.appendChild !== "function") {
      throw new TypeError(`Cannot wrap ${name}`);
    }
    wrapper.appendChild(this);
    return wrapper;
  }
};
_CustomImage.ID_SEED = 0;
let CustomImage = _CustomImage;
CustomImage.blotName = "image";
CustomImage.tagName = "IMG";
class CustomImageContainer extends Inline {
  constructor(scroll, domNode) {
    super(scroll, domNode);
    domNode.setAttribute("contenteditable", false);
  }
}
CustomImageContainer.blotName = "image-container";
CustomImageContainer.className = "ql-image-container";
CustomImageContainer.tagName = "DIV";
CustomImageContainer.allowedChildren = [CustomImage];
export {
  CustomImageContainer as ImageContainerBlot,
  CustomImage as default
};
//# sourceMappingURL=image.es.js.map