@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.

var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
import Quill from "quill";
import { sanitize, isNullOrUndefined } from "../../config/editor.utils.es.js";
import { isObject } from "../../utils/is.es.js";
import "./actions/index.es.js";
import { alignmentHandler, ALIGN_ATTR } from "./actions/image-toolbar-buttons.es.js";
const Embed = Quill.import("blots/embed");
const ATTRIBUTES = ["alt", "height", "width", "image-id"];
const _CustomImage = class _CustomImage extends Embed {
  static setOptions(allowInvalidUrl) {
    this.allowInvalidUrl = allowInvalidUrl;
  }
  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.style.verticalAlign = "baseline";
    if (isObject(value)) {
      if (value.align && alignmentHandler[value.align]) {
        node.setAttribute(ALIGN_ATTR, value.align);
        alignmentHandler[value.align](node);
      }
      if (value.width) {
        node.setAttribute("width", String(value.width));
      }
      if (value.height) {
        node.setAttribute("height", String(value.height));
      }
    }
    return node;
  }
  static formats(domNode) {
    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) {
    if (sanitize(url, ["http", "https", "blob", "data"]) || this.allowInvalidUrl) {
      return url;
    }
    return "//:0";
  }
  static value(domNode) {
    const formats = {};
    const imageSrc = domNode.getAttribute("src");
    formats.src = this.sanitize(imageSrc);
    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) {
    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;
  }
};
__publicField(_CustomImage, "blotName", "image");
__publicField(_CustomImage, "tagName", "IMG");
__publicField(_CustomImage, "ID_SEED", 0);
__publicField(_CustomImage, "allowInvalidUrl", false);
let CustomImage = _CustomImage;
export {
  CustomImage
};
//# sourceMappingURL=image.es.js.map