@opentiny/fluent-editor/lib/modules/custom-image/blot-formatter.cjs.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.

"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 Quill = require("quill");
const merge = require("../../utils/merge.cjs.js");
const image = require("./image.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$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.quill = quill;
    this.options = merge.merge({}, options.default, options$1, { arrayMerge: dontMerge });
    if (options$1.allowInvalidUrl !== void 0) {
      this.options.allowInvalidUrl = options$1.allowInvalidUrl;
    }
    image.CustomImage.setOptions(this.options.allowInvalidUrl);
    this.currentSpec = null;
    this.actions = [];
    this.overlay = document.createElement("div");
    this.overlay.classList.add(this.options.overlay.className);
    if (this.options.overlay.style) {
      Object.assign(this.overlay.style, this.options.overlay.style);
    }
    document.execCommand("enableObjectResizing", false, "false");
    this.quill.root.addEventListener("click", this.onClick);
    this.specs = this.options.specs.map((SpecClass) => new SpecClass(this));
    this.specs.forEach((spec) => spec.init());
  }
  static register() {
    Quill.register({
      "formats/image": image.CustomImage,
      "modules/image-spec": customImageSpec.CustomImageSpec
    }, true);
  }
  show(spec) {
    this.currentSpec = spec;
    this.currentSpec.setSelection();
    this.setUserSelect("none");
    this.quill.root.parentNode.appendChild(this.overlay);
    this.repositionOverlay();
    this.createActions(spec);
    const imageDom = spec.getTargetElement();
    const win = window;
    const MutationObserver = win.MutationObserver || win.WebKitMutationObserver || win.MozMutationObserver;
    const element = imageDom.parentNode;
    this.observer = new MutationObserver((mutationList) => {
      for (const mutation of mutationList) {
        const target = mutation.target;
        const image2 = target.querySelector("img");
        if (image2) {
          this.repositionOverlay();
        }
      }
    });
    this.observer.observe(element, {
      attributes: true,
      attributeFilter: ["class"],
      attributeOldValue: true,
      subtree: true
    });
  }
  hide() {
    if (!this.currentSpec) {
      return;
    }
    const imgDom = this.currentSpec.getTargetElement();
    if (imgDom) {
      imgDom.classList.remove("current-select-img");
    }
    this.currentSpec.onHide();
    this.currentSpec = null;
    this.quill.root.parentNode.removeChild(this.overlay);
    this.overlay.style.setProperty("display", "none");
    this.setUserSelect("");
    this.destroyActions();
  }
  update() {
    this.repositionOverlay();
    this.actions.forEach((action) => action.onUpdate());
  }
  createActions(spec) {
    this.actions = spec.getActions().map((ActionClass) => {
      const action = new ActionClass(this);
      action.onCreate();
      return action;
    });
  }
  destroyActions() {
    this.actions.forEach((action) => action.onDestroy());
    this.actions = [];
  }
  repositionOverlay() {
    if (!this.currentSpec) {
      return;
    }
    const overlayTarget = this.currentSpec.getOverlayElement();
    if (!overlayTarget) {
      return;
    }
    const parent = this.quill.root.parentElement;
    const specRect = overlayTarget.getBoundingClientRect();
    const parentRect = parent.getBoundingClientRect();
    Object.assign(this.overlay.style, {
      display: "block",
      left: `${specRect.left - parentRect.left - 1 + parent.scrollLeft}px`,
      top: `${specRect.top - parentRect.top + parent.scrollTop}px`,
      width: `${Math.min(specRect.width, parentRect.width)}px`,
      height: `${Math.min(specRect.height, parentRect.height)}px`
    });
  }
  setUserSelect(value) {
    const props = [
      "userSelect",
      "mozUserSelect",
      "webkitUserSelect",
      "msUserSelect"
    ];
    props.forEach((prop) => {
      this.quill.root.style.setProperty(prop, value);
      if (document.documentElement) {
        document.documentElement.style.setProperty(prop, value);
      }
    });
  }
}
exports.BlotFormatter = BlotFormatter;
//# sourceMappingURL=blot-formatter.cjs.js.map