magner/dist/image-block-DF9LXgRf.mjs

Universal admin panel magnetic to any backend

var n = Object.defineProperty;
var c = (r, t, e) => t in r ? n(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
var s = (r, t, e) => (c(r, typeof t != "symbol" ? t + "" : t, e), e);
class d {
  constructor({
    data: t,
    api: e,
    config: a,
    readOnly: i
  }) {
    s(this, "api");
    s(this, "config");
    s(this, "readOnly");
    s(this, "wrapper");
    s(this, "data");
    this.api = e, this.config = a || {}, this.data = {
      url: t.url || "",
      caption: t.caption || ""
    }, this.readOnly = i, this.wrapper = null;
  }
  render() {
    if (this.wrapper = document.createElement("div"), this.wrapper.classList.add("simple-image"), this.data && this.data.url)
      return this._createImage(this.data.url, this.data.caption), this.wrapper;
    const t = document.createElement("input");
    return t.classList.add("cdx-input"), t.placeholder = this.config.placeholder || "", t.addEventListener("paste", (e) => {
      var a;
      this._createImage(((a = e.clipboardData) == null ? void 0 : a.getData("text")) ?? "");
    }), this.wrapper.appendChild(t), this.wrapper;
  }
  _createImage(t, e) {
    const a = document.createElement("img"), i = document.createElement("div");
    a.src = t, i.classList.add("cdx-input"), i.contentEditable = "true", i.innerHTML = e ?? "", this.wrapper && (this.wrapper.innerHTML = "", this.wrapper.appendChild(a), this.wrapper.appendChild(i));
  }
  save(t) {
    const e = t.querySelector("img"), a = t.querySelector("[contenteditable]");
    return Object.assign(this.data, {
      url: e.src,
      caption: a.innerHTML ?? ""
    });
  }
  // eslint-disable-next-line class-methods-use-this
  validate(t) {
    return !!t.url.trim();
  }
  static get sanitize() {
    return {
      url: {},
      caption: {
        b: !0,
        a: {
          href: !0
        },
        i: !0
      }
    };
  }
  static get toolbox() {
    return {
      title: "Image",
      icon: `
        <svg width="17" height="15" viewBox="0 0 336 276" xmlns="http://www.w3.org/2000/svg">
          <path d="M291 150V79c0-19-15-34-34-34H79c-19 0-34 15-34 34v42l67-44 81 72 56-29 42 30zm0 52l-43-30-56 30-81-67-66 39v23c0 19 15 34 34 34h178c17 0 31-13 34-29zM79 0h178c44 0 79 35 79 79v118c0 44-35 79-79 79H79c-44 0-79-35-79-79V79C0 35 35 0 79 0z"/>
        </svg>`
    };
  }
  static get pasteConfig() {
    return {
      tags: ["IMG"],
      files: {
        mimeTypes: ["image/*"],
        extensions: ["gif", "jpg", "png"]
      },
      patterns: {
        image: /https?:\/\/\S+\.(gif|jpe?g|tiff|png)$/i
      }
    };
  }
  onPaste(t) {
    switch (t.type) {
      case "tag":
        this._createImage(t.detail.data.src);
        break;
      case "file":
        const e = new FileReader();
        e.onload = (a) => {
          var i;
          this._createImage(((i = a.target) == null ? void 0 : i.result) ?? "");
        }, e.readAsDataURL(t.detail.file);
        break;
      case "pattern":
        this._createImage(t.detail.data);
        break;
    }
  }
  static get isReadOnlySupported() {
    return !0;
  }
}
export {
  d as default
};