reactjs-tiptap-editor 1.0.14 → 1.0.16

package/lib/Image-BZEFuS0P.js

@@ -0,0 +1,925 @@
+import { h as Ie, m as xe, k as we } from "./clsx-DSzxBzvL.js";
+import { a as ee, c as Ae } from "./throttle-D040PfWL.js";
+import { jsx as o, jsxs as b, Fragment as P } from "react/jsx-runtime";
+import * as te from "react";
+import X, { useState as _, useMemo as H, useCallback as F, useEffect as Q, useRef as de } from "react";
+import { I as ie, i as ae, j as Se, u as ue } from "./index-C07N8gA1.js";
+import { i as ne, c as ve } from "./isNumber-ClwLypY2.js";
+import { A as Ee } from "./toggle-DEerYRil.js";
+import "./index-DoiuU6VA.js";
+import "./theme.js";
+import { D as me, a as fe, b as he, c as ge, d as Me } from "./dialog-CJvpoeMm.js";
+import _e from "react-image-crop";
+import { B } from "./button-Bwn6gUuS.js";
+import { d as pe, c as Ce, u as Le, a as Ne } from "./useButtonProps-CtZCbMQu.js";
+import { d as Oe, r as Re } from "./file-BLas99n7.js";
+import { I as Y } from "./Icon-C0TJMAOm.js";
+import { a as De } from "./store-BsJz5QRC.js";
+import { l as ze, E as ke } from "./events.constant-do95b767.js";
+import { T as Ue, a as Fe, b as re, c as se } from "./tabs-CBDjOLl_.js";
+import { C as Pe } from "./checkbox-B_rpz5Xq.js";
+import { L as le } from "./label-Cjrzc5H2.js";
+import { I as oe } from "./input-B1egKb-t.js";
+const He = 1, Be = 1e6;
+let q = 0;
+function je() {
+  return q = (q + 1) % Number.MAX_SAFE_INTEGER, q.toString();
+}
+const Z = /* @__PURE__ */ new Map();
+function ce(e) {
+  if (Z.has(e))
+    return;
+  const t = setTimeout(() => {
+    Z.delete(e), j({
+      type: "REMOVE_TOAST",
+      toastId: e
+    });
+  }, Be);
+  Z.set(e, t);
+}
+function Xe(e, t) {
+  switch (t.type) {
+    case "ADD_TOAST":
+      return {
+        ...e,
+        toasts: [t.toast, ...e.toasts].slice(0, He)
+      };
+    case "UPDATE_TOAST":
+      return {
+        ...e,
+        toasts: e.toasts.map(
+          (i) => i.id === t.toast.id ? { ...i, ...t.toast } : i
+        )
+      };
+    case "DISMISS_TOAST": {
+      const { toastId: i } = t;
+      return i ? ce(i) : e.toasts.forEach((n) => {
+        ce(n.id);
+      }), {
+        ...e,
+        toasts: e.toasts.map(
+          (n) => n.id === i || i === void 0 ? {
+            ...n,
+            open: !1
+          } : n
+        )
+      };
+    }
+    case "REMOVE_TOAST":
+      return t.toastId === void 0 ? {
+        ...e,
+        toasts: []
+      } : {
+        ...e,
+        toasts: e.toasts.filter((i) => i.id !== t.toastId)
+      };
+  }
+}
+const G = [];
+let V = { toasts: [] };
+function j(e) {
+  V = Xe(V, e), G.forEach((t) => {
+    t(V);
+  });
+}
+function $e({ ...e }) {
+  const t = je(), i = (c) => j({
+    type: "UPDATE_TOAST",
+    toast: { ...c, id: t }
+  }), n = () => j({ type: "DISMISS_TOAST", toastId: t });
+  return j({
+    type: "ADD_TOAST",
+    toast: {
+      ...e,
+      id: t,
+      open: !0,
+      onOpenChange: (c) => {
+        c || n();
+      }
+    }
+  }), {
+    id: t,
+    dismiss: n,
+    update: i
+  };
+}
+function be() {
+  const [e, t] = te.useState(V);
+  return te.useEffect(() => (G.push(t), () => {
+    const i = G.indexOf(t);
+    i > -1 && G.splice(i, 1);
+  }), [e]), {
+    ...e,
+    toast: $e,
+    dismiss: (i) => j({ type: "DISMISS_TOAST", toastId: i })
+  };
+}
+const $ = {
+  TOP_LEFT: "tl",
+  TOP_RIGHT: "tr",
+  BOTTOM_LEFT: "bl",
+  BOTTOM_RIGHT: "br"
+};
+function Ye(e) {
+  var U, u, C;
+  const [t, i] = _({
+    width: ie,
+    height: ie
+  }), [n, c] = _({
+    width: 0,
+    height: 0
+  }), [m] = _([
+    $.TOP_LEFT,
+    $.TOP_RIGHT,
+    $.BOTTOM_LEFT,
+    $.BOTTOM_RIGHT
+  ]), [g, w] = _(!1), [f, T] = _({
+    x: 0,
+    y: 0,
+    w: 0,
+    h: 0,
+    dir: ""
+  }), { align: v, inline: A } = (U = e == null ? void 0 : e.node) == null ? void 0 : U.attrs, N = A && (v === "left" || v === "right"), L = H(() => {
+    var K;
+    const { src: r, alt: y, width: a, height: s, flipX: h, flipY: l } = (K = e == null ? void 0 : e.node) == null ? void 0 : K.attrs, I = ne(a) ? `${a}px` : a, x = ne(s) ? `${s}px` : s, W = [];
+    h && W.push("rotateX(180deg)"), l && W.push("rotateY(180deg)");
+    const ye = W.join(" ");
+    return {
+      src: r || void 0,
+      alt: y || void 0,
+      style: {
+        width: I || void 0,
+        height: x || void 0,
+        transform: ye || "none",
+        ...N ? { float: v } : {}
+      }
+    };
+  }, [(u = e == null ? void 0 : e.node) == null ? void 0 : u.attrs]), D = H(() => {
+    const {
+      style: { width: r }
+    } = L;
+    return { width: r === "100%" ? r : void 0 };
+  }, [L]);
+  function R(r) {
+    c({
+      width: r.target.width,
+      height: r.target.height
+    });
+  }
+  function M() {
+    const { editor: r, getPos: y } = e;
+    r.commands.setNodeSelection(y());
+  }
+  const E = F(
+    ee(() => {
+      const { editor: r } = e, { width: y } = getComputedStyle(r.view.dom);
+      i((a) => ({
+        ...a,
+        width: Number.parseInt(y, 10)
+      }));
+    }, ae),
+    [e == null ? void 0 : e.editor]
+  );
+  function O(r, y) {
+    r.preventDefault(), r.stopPropagation();
+    const a = n.width, s = n.height, h = a / s;
+    let l = Number(e.node.attrs.width), I = Number(e.node.attrs.height);
+    const x = t.width;
+    l && !I ? (l = l > x ? x : l, I = Math.round(l / h)) : I && !l ? (l = Math.round(I * h), l = l > x ? x : l) : !l && !I ? (l = a > x ? x : a, I = Math.round(l / h)) : l = l > x ? x : l, w(!0), T({
+      x: r.clientX,
+      y: r.clientY,
+      w: l,
+      h: I,
+      dir: y
+    });
+  }
+  const S = F(
+    ee((r) => {
+      if (r.preventDefault(), r.stopPropagation(), !g)
+        return;
+      const { x: y, w: a, dir: s } = f, h = (r.clientX - y) * (/l/.test(s) ? -1 : 1), l = ve(a + h, Se, t.width);
+      e.updateAttributes({
+        width: l,
+        height: null
+      });
+    }, ae),
+    [g, f, t, e.updateAttributes]
+  ), p = F(
+    (r) => {
+      r.preventDefault(), r.stopPropagation(), g && (T({
+        x: 0,
+        y: 0,
+        w: 0,
+        h: 0,
+        dir: ""
+      }), w(!1), M());
+    },
+    [g, M]
+  ), d = F(() => {
+    document == null || document.addEventListener("mousemove", S, !0), document == null || document.addEventListener("mouseup", p, !0);
+  }, [S, p]), z = F(() => {
+    document == null || document.removeEventListener("mousemove", S, !0), document == null || document.removeEventListener("mouseup", p, !0);
+  }, [S, p]);
+  Q(() => (g ? d() : z(), () => {
+    z();
+  }), [g, d, z]);
+  const k = H(() => new ResizeObserver(() => E()), [E]);
+  return Q(() => (k.observe(e.editor.view.dom), () => {
+    k.disconnect();
+  }), [e.editor.view.dom, k]), /* @__PURE__ */ o(
+    Ie,
+    {
+      as: A ? "span" : "div",
+      className: "image-view",
+      style: {
+        float: N ? v : void 0,
+        margin: N ? v === "left" ? "1em 1em 1em 0" : "1em 0 1em 1em" : void 0,
+        display: A ? "inline" : "block",
+        textAlign: N ? void 0 : v,
+        width: ((C = L.style) == null ? void 0 : C.width) ?? "auto",
+        ...N ? {} : D
+      },
+      children: /* @__PURE__ */ b(
+        "div",
+        {
+          "data-drag-handle": !0,
+          draggable: "true",
+          style: D,
+          className: `image-view__body ${e != null && e.selected ? "image-view__body--focused" : ""} ${g ? "image-view__body--resizing" : ""}`,
+          children: [
+            /* @__PURE__ */ o(
+              "img",
+              {
+                alt: L.alt,
+                className: "image-view__body__image block",
+                height: "auto",
+                onClick: M,
+                onLoad: R,
+                src: L.src,
+                style: L.style
+              }
+            ),
+            (e == null ? void 0 : e.editor.view.editable) && ((e == null ? void 0 : e.selected) || g) && /* @__PURE__ */ o("div", { className: "image-resizer", children: m == null ? void 0 : m.map((r) => /* @__PURE__ */ o(
+              "span",
+              {
+                className: `image-resizer__handler image-resizer__handler--${r}`,
+                onMouseDown: (y) => O(y, r)
+              },
+              `image-dir-${r}`
+            )) })
+          ]
+        }
+      )
+    }
+  );
+}
+function Ge(e, t) {
+  const i = e.type, n = e.name.toLowerCase(), c = n.split(".").pop();
+  if (!c) return !1;
+  const g = i || {
+    heif: "image/heif",
+    heic: "image/heic",
+    dng: "image/x-adobe-dng",
+    cr2: "image/x-canon-cr2",
+    nef: "image/x-nikon-nef",
+    arw: "image/x-sony-arw",
+    raf: "image/x-fuji-raf",
+    orf: "image/x-olympus-orf"
+  }[c];
+  return t.some((w) => {
+    if (w.startsWith("."))
+      return n.endsWith(w);
+    if (w.endsWith("/*")) {
+      const f = w.split("/")[0];
+      return g == null ? void 0 : g.startsWith(f + "/");
+    }
+    return g === w;
+  });
+}
+function Te(e, t) {
+  const { acceptMimes: i, maxSize: n, t: c, toast: m } = t, g = [];
+  return (Array.isArray(e) ? e : Object.values(e)).forEach((f) => {
+    if (!Ge(f, i)) {
+      t.onError ? t.onError({
+        type: "type",
+        message: c("editor.upload.fileTypeNotSupported", { fileName: f.name }),
+        file: f
+      }) : m({
+        variant: "default",
+        title: c("editor.upload.fileTypeNotSupported", { fileName: f.name })
+      });
+      return;
+    }
+    if (f.size > n) {
+      const T = (n / 1024 / 1024).toFixed(2);
+      t.onError ? t.onError({
+        type: "size",
+        message: c("editor.upload.fileSizeTooBig", { fileName: f.name, size: T }),
+        file: f
+      }) : m({
+        variant: "default",
+        title: c("editor.upload.fileSizeTooBig", { fileName: f.name, size: T })
+      });
+      return;
+    }
+    g.push(f);
+  }), g;
+}
+function Ve({ editor: e, imageInline: t, onClose: i, disabled: n, alt: c }) {
+  var r, y;
+  const { t: m } = ue(), { toast: g } = be(), [w, f] = _(!1), [T, v] = _(!1), A = X.useRef(null), [N, L] = X.useState(), [D, R] = X.useState(""), M = de(null), [E, O] = _({
+    src: "",
+    file: null
+  }), S = pe(J.name), p = H(() => (S == null ? void 0 : S.options) ?? {}, [S]);
+  function d(a) {
+    if (A.current && a.width && a.height) {
+      const s = z(A.current, a);
+      R(s);
+    }
+  }
+  function z(a, s) {
+    const h = document.createElement("canvas"), l = a.naturalWidth / a.width, I = a.naturalHeight / a.height;
+    h.width = s.width * l, h.height = s.height * I;
+    const x = h.getContext("2d");
+    return x && (x.imageSmoothingEnabled = !1, x.drawImage(
+      a,
+      s.x * l,
+      s.y * I,
+      s.width * l,
+      s.height * I,
+      0,
+      0,
+      s.width * l,
+      s.height * I
+    )), h.toDataURL("image/png", 1);
+  }
+  const k = X.useCallback(async () => {
+    var a;
+    if (!T) {
+      v(!0);
+      try {
+        const s = Oe(D, ((a = E == null ? void 0 : E.file) == null ? void 0 : a.name) || "image.png");
+        let h = "";
+        p.upload ? h = await p.upload(s) : h = URL.createObjectURL(s), e.chain().focus().setImageInline({ src: h, inline: t, alt: c }).run(), f(!1), O({
+          src: "",
+          file: null
+        }), C(), i();
+      } catch (s) {
+        console.error("Error cropping image", s);
+      } finally {
+        v(!1);
+      }
+    }
+  }, [D, e, t, T, i, (r = E == null ? void 0 : E.file) == null ? void 0 : r.name, p]);
+  function U(a) {
+    var s;
+    a.preventDefault(), (s = M.current) == null || s.click();
+  }
+  const u = async (a) => {
+    var x;
+    const s = (x = a == null ? void 0 : a.target) == null ? void 0 : x.files;
+    if (!e || e.isDestroyed || s.length === 0) {
+      a.target.value = "";
+      return;
+    }
+    const h = Te(s, {
+      acceptMimes: p == null ? void 0 : p.acceptMimes,
+      maxSize: p == null ? void 0 : p.maxSize,
+      t: m,
+      toast: g,
+      onError: p.onError
+    });
+    if (h.length <= 0) {
+      a.target.value = "";
+      return;
+    }
+    const l = h[0], I = await Re(l);
+    f(!0), O({
+      src: I.src,
+      file: l
+    });
+  }, C = () => {
+    M.current && (M.current.value = "");
+  };
+  return /* @__PURE__ */ b(P, { children: [
+    /* @__PURE__ */ o(
+      B,
+      {
+        className: "richtext-mt-1 richtext-w-full",
+        disabled: n,
+        onClick: U,
+        size: "sm",
+        children: m("editor.image.dialog.tab.uploadCrop")
+      }
+    ),
+    /* @__PURE__ */ b(
+      me,
+      {
+        open: w,
+        onOpenChange: (a) => {
+          f(a), a || (O({ src: "", file: null }), C());
+        },
+        children: [
+          /* @__PURE__ */ o(fe, {}),
+          /* @__PURE__ */ b(he, { children: [
+            /* @__PURE__ */ o(ge, { children: m("editor.image.dialog.tab.uploadCrop") }),
+            /* @__PURE__ */ o("div", { children: E.src && /* @__PURE__ */ o(
+              _e,
+              {
+                className: "richtext-w-full",
+                crop: N,
+                onChange: (a) => L(a),
+                onComplete: (a) => d(a),
+                children: /* @__PURE__ */ o(
+                  "img",
+                  {
+                    alt: "Crop me",
+                    ref: A,
+                    src: E.src
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ b(Me, { children: [
+              /* @__PURE__ */ b(
+                B,
+                {
+                  disabled: T,
+                  onClick: () => {
+                    f(!1), O({
+                      src: "",
+                      file: null
+                    }), C();
+                  },
+                  children: [
+                    m("editor.imageUpload.cancel"),
+                    /* @__PURE__ */ o(
+                      Y,
+                      {
+                        className: "richtext-ml-1",
+                        name: "Trash2"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ o(
+                B,
+                {
+                  className: "richtext-w-fit",
+                  disabled: T || !N,
+                  onClick: k,
+                  children: T ? /* @__PURE__ */ b(P, { children: [
+                    m("editor.imageUpload.uploading"),
+                    /* @__PURE__ */ o(
+                      Y,
+                      {
+                        className: "richtext-ml-1 richtext-animate-spin",
+                        name: "Loader"
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ b(P, { children: [
+                    m("editor.imageUpload.crop"),
+                    /* @__PURE__ */ o(
+                      Y,
+                      {
+                        className: "richtext-ml-1",
+                        name: "Crop"
+                      }
+                    )
+                  ] })
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ o(
+      "input",
+      {
+        accept: ((y = p == null ? void 0 : p.acceptMimes) == null ? void 0 : y.join(",")) || "image/*",
+        multiple: !1,
+        onChange: u,
+        ref: M,
+        style: { display: "none" },
+        type: "file"
+      }
+    )
+  ] });
+}
+function bt() {
+  const { t: e } = ue(), { toast: t } = be(), i = Ce(), n = Le(J.name), {
+    icon: c,
+    tooltip: m
+  } = (n == null ? void 0 : n.componentProps) ?? {}, { editorDisabled: g } = Ne(), [w, f] = _(!1), [T, v] = _(!1), A = pe(J.name), N = (u) => {
+    f(u.detail);
+  }, [L, D] = _(""), [R, M] = _(""), E = de(null), O = (A == null ? void 0 : A.options.defaultInline) || !1, [S, p] = _(O), d = H(() => A == null ? void 0 : A.options, [A]);
+  Q(() => {
+    const u = ze(ke.UPLOAD_IMAGE(i.id), N);
+    return () => {
+      u();
+    };
+  }, []);
+  async function z(u) {
+    var y;
+    const C = (y = u == null ? void 0 : u.target) == null ? void 0 : y.files;
+    if (!i || i.isDestroyed || C.length === 0 || T) {
+      u.target.value = "";
+      return;
+    }
+    const r = Te(C, {
+      acceptMimes: d == null ? void 0 : d.acceptMimes,
+      maxSize: d == null ? void 0 : d.maxSize,
+      t: e,
+      toast: t,
+      onError: d.onError
+    });
+    if (r.length <= 0) {
+      u.target.value = "";
+      return;
+    }
+    v(!0);
+    try {
+      if (d != null && d.multiple) {
+        const a = r.map(async (h) => {
+          let l = "";
+          return d.upload ? l = await d.upload(h) : l = URL.createObjectURL(h), l;
+        });
+        (await Promise.all(a)).forEach((h) => {
+          i.chain().focus().setImageInline({ src: h, inline: S, alt: R }).run();
+        });
+      } else {
+        const a = r[0];
+        let s = "";
+        d.upload ? s = await d.upload(a) : s = URL.createObjectURL(a), i.chain().focus().setImageInline({ src: s, inline: S, alt: R }).run();
+      }
+      f(!1), M(""), p(O);
+    } catch (a) {
+      console.error("Error uploading image", a), d.onError ? d.onError({
+        type: "upload",
+        message: e("editor.upload.error")
+      }) : t({
+        variant: "destructive",
+        title: e("editor.upload.error")
+      });
+    } finally {
+      v(!1), u.target.value = "";
+    }
+  }
+  function k(u) {
+    u.preventDefault(), u.stopPropagation(), i.chain().focus().setImageInline({ src: L, inline: S, alt: R }).run(), f(!1), p(O), D(""), M("");
+  }
+  function U(u) {
+    var C;
+    u.preventDefault(), (C = E.current) == null || C.click();
+  }
+  return n ? /* @__PURE__ */ b(
+    me,
+    {
+      onOpenChange: f,
+      open: w,
+      children: [
+        /* @__PURE__ */ o(
+          fe,
+          {
+            asChild: !0,
+            children: /* @__PURE__ */ o(
+              Ee,
+              {
+                disabled: g,
+                icon: c,
+                tooltip: m,
+                action: () => {
+                  g || f(!0);
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ b(he, { children: [
+          /* @__PURE__ */ o(ge, { children: e("editor.image.dialog.title") }),
+          /* @__PURE__ */ b(
+            Ue,
+            {
+              activationMode: "manual",
+              defaultValue: d.resourceImage === "both" || d.resourceImage === "upload" ? "upload" : "link",
+              children: [
+                d.resourceImage === "both" && /* @__PURE__ */ b(Fe, { className: "richtext-grid richtext-w-full richtext-grid-cols-2", children: [
+                  /* @__PURE__ */ o(re, { value: "upload", children: e("editor.image.dialog.tab.upload") }),
+                  /* @__PURE__ */ o(re, { value: "link", children: e("editor.image.dialog.tab.url") })
+                ] }),
+                /* @__PURE__ */ b("div", { className: "richtext-my-[10px] richtext-flex richtext-items-center richtext-gap-[4px]", children: [
+                  /* @__PURE__ */ o(
+                    Pe,
+                    {
+                      checked: S,
+                      onCheckedChange: (u) => {
+                        p(u);
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ o(le, { children: e("editor.link.dialog.inline") })
+                ] }),
+                d.enableAlt && /* @__PURE__ */ b("div", { className: "richtext-my-[10px] ", children: [
+                  /* @__PURE__ */ o(le, { className: "mb-[6px]", children: e("editor.imageUpload.alt") }),
+                  /* @__PURE__ */ o(
+                    oe,
+                    {
+                      onChange: (u) => M(u.target.value),
+                      required: !0,
+                      type: "text",
+                      value: R
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ b(se, { value: "upload", children: [
+                  /* @__PURE__ */ b("div", { className: "richtext-flex richtext-items-center richtext-gap-[10px]", children: [
+                    /* @__PURE__ */ o(
+                      B,
+                      {
+                        className: "richtext-mt-1 richtext-w-full",
+                        disabled: T,
+                        onClick: U,
+                        size: "sm",
+                        children: T ? /* @__PURE__ */ b(P, { children: [
+                          e("editor.imageUpload.uploading"),
+                          /* @__PURE__ */ o(
+                            Y,
+                            {
+                              className: "richtext-ml-1 richtext-animate-spin",
+                              name: "Loader"
+                            }
+                          )
+                        ] }) : e("editor.image.dialog.tab.upload")
+                      }
+                    ),
+                    /* @__PURE__ */ o(
+                      Ve,
+                      {
+                        alt: R,
+                        disabled: T,
+                        editor: i,
+                        imageInline: S,
+                        onClose: () => {
+                          De.setOpen(i.id, !1), M("");
+                        }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ o(
+                    "input",
+                    {
+                      accept: d.acceptMimes.join(",") || "image/*",
+                      multiple: d.multiple,
+                      onChange: z,
+                      ref: E,
+                      style: { display: "none" },
+                      type: "file"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ o(se, { value: "link", children: /* @__PURE__ */ o("form", { onSubmit: k, children: /* @__PURE__ */ b("div", { className: "richtext-flex richtext-items-center richtext-gap-2", children: [
+                  /* @__PURE__ */ o(
+                    oe,
+                    {
+                      autoFocus: !0,
+                      onChange: (u) => D(u.target.value),
+                      placeholder: e("editor.image.dialog.placeholder"),
+                      required: !0,
+                      type: "url",
+                      value: L
+                    }
+                  ),
+                  /* @__PURE__ */ o(B, { type: "submit", children: e("editor.image.dialog.button.apply") })
+                ] }) }) })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  ) : /* @__PURE__ */ o(P, {});
+}
+const We = {
+  acceptMimes: ["image/jpeg", "image/gif", "image/png", "image/jpg"],
+  maxSize: 1024 * 1024 * 5,
+  // 5MB
+  multiple: !0,
+  resourceImage: "both",
+  defaultInline: !1,
+  enableAlt: !0
+}, J = /* @__PURE__ */ Ae.extend({
+  group: "inline",
+  inline: !0,
+  defining: !0,
+  draggable: !0,
+  selectable: !0,
+  addOptions() {
+    var e;
+    return {
+      ...We,
+      ...(e = this.parent) == null ? void 0 : e.call(this),
+      upload: () => Promise.reject("Image Upload Function"),
+      button: ({
+        editor: t,
+        extension: i,
+        t: n
+      }) => {
+        var c, m;
+        return {
+          componentProps: {
+            action: () => !0,
+            upload: i.options.upload,
+            /* If setImage is not available(when Image Component is not imported), the button is disabled */
+            disabled: !((m = (c = t.can()).setImage) != null && m.call(c, {})),
+            icon: "ImageUp",
+            tooltip: n("editor.image.tooltip")
+          }
+        };
+      }
+    };
+  },
+  addAttributes() {
+    var e;
+    return {
+      ...(e = this.parent) == null ? void 0 : e.call(this),
+      flipX: {
+        default: !1
+      },
+      flipY: {
+        default: !1
+      },
+      width: {
+        default: null,
+        parseHTML: (t) => {
+          const i = t.style.width || t.getAttribute("width") || null;
+          return i ? Number.parseInt(i, 10) : null;
+        },
+        renderHTML: (t) => ({
+          width: t.width
+        })
+      },
+      align: {
+        default: "center",
+        parseHTML: (t) => t.getAttribute("align"),
+        renderHTML: (t) => ({
+          align: t.align
+        })
+      },
+      inline: {
+        default: !1,
+        parseHTML: (t) => !!t.getAttribute("inline"),
+        renderHTML: (t) => ({
+          inline: t.inline
+        })
+      },
+      alt: {
+        default: "",
+        parseHTML: (t) => t.getAttribute("alt"),
+        renderHTML: (t) => ({
+          alt: t.alt
+        })
+      }
+    };
+  },
+  addNodeView() {
+    return we(Ye);
+  },
+  addCommands() {
+    var e;
+    return {
+      ...(e = this.parent) == null ? void 0 : e.call(this),
+      setImageInline: (t) => ({ commands: i }) => i.insertContent({
+        type: this.name,
+        attrs: {
+          ...t,
+          inline: t.inline ?? this.options.defaultInline
+        }
+      }),
+      updateImage: (t) => ({ commands: i }) => i.updateAttributes(this.name, t),
+      setAlignImage: (t) => ({ commands: i }) => i.updateAttributes(this.name, { align: t })
+    };
+  },
+  renderHTML({ HTMLAttributes: e }) {
+    const { flipX: t, flipY: i, align: n, inline: c } = e, m = c && (n === "left" || n === "right"), g = t || i ? `transform: rotateX(${t ? "180" : "0"}deg) rotateY(${i ? "180" : "0"}deg);` : "", w = m ? "" : `text-align: ${n};`, v = `${m ? `float: ${n};` : ""}${m ? n === "left" ? "margin: 1em 1em 1em 0;" : "margin: 1em 0 1em 1em;" : ""}${g}`;
+    return [
+      c ? "span" : "div",
+      {
+        style: w,
+        class: "image"
+      },
+      [
+        "img",
+        xe(
+          {
+            height: "auto",
+            style: v
+          },
+          this.options.HTMLAttributes,
+          e
+        )
+      ]
+    ];
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "span.image img",
+        getAttrs: (e) => {
+          var m;
+          const t = e == null ? void 0 : e.parentElement, i = e == null ? void 0 : e.getAttribute("width"), n = (e == null ? void 0 : e.getAttribute("flipx")) || !1, c = (e == null ? void 0 : e.getAttribute("flipy")) || !1;
+          return {
+            src: e == null ? void 0 : e.getAttribute("src"),
+            alt: e == null ? void 0 : e.getAttribute("alt"),
+            caption: e == null ? void 0 : e.getAttribute("caption"),
+            width: i ? Number.parseInt(i, 10) : null,
+            align: (e == null ? void 0 : e.getAttribute("align")) || ((m = t == null ? void 0 : t.style) == null ? void 0 : m.textAlign) || null,
+            inline: (e == null ? void 0 : e.getAttribute("inline")) || !1,
+            flipX: n === "true",
+            flipY: c === "true"
+          };
+        }
+      },
+      {
+        tag: "div[class=image]",
+        getAttrs: (e) => {
+          const t = e.querySelector("img"), i = t == null ? void 0 : t.getAttribute("width"), n = (t == null ? void 0 : t.getAttribute("flipx")) || !1, c = (t == null ? void 0 : t.getAttribute("flipy")) || !1;
+          return {
+            src: t == null ? void 0 : t.getAttribute("src"),
+            alt: t == null ? void 0 : t.getAttribute("alt"),
+            caption: t == null ? void 0 : t.getAttribute("caption"),
+            width: i ? Number.parseInt(i, 10) : null,
+            align: (t == null ? void 0 : t.getAttribute("align")) || e.style.textAlign || null,
+            inline: (t == null ? void 0 : t.getAttribute("inline")) || !1,
+            flipX: n === "true",
+            flipY: c === "true"
+          };
+        }
+      },
+      {
+        tag: 'img[src]:not([src^="data:"])'
+      }
+    ];
+  }
+  // addProseMirrorPlugins() {
+  //   const validateFile = (file: File): boolean => {
+  //     // @ts-expect-error
+  //     if (!this.options.acceptMimes.includes(file.type)) {
+  //       // toast({ description: t.value('editor.imageUpload.fileTypeNotSupported'), duration: 2000 });
+  //       return false;
+  //     }
+  //     // @ts-expect-error
+  //     if (file.size > this.options.maxSize) {
+  //       // toast({
+  //       //   description: `${t.value('editor.imageUpload.fileSizeTooBig')} ${formatFileSize(
+  //       //     this.options.maxSize,
+  //       //   )}.`,
+  //       //   duration: 2000,
+  //       // });
+  //       return false;
+  //     }
+  //     return true;
+  //   };
+  //   const uploadFn = createImageUpload({
+  //     validateFn: validateFile,
+  //     onUpload: this.options.upload as any,
+  //     // postUpload: this.options.postUpload,
+  //     defaultInline: this.options.defaultInline,
+  //   });
+  //   return [
+  //     UploadImagesPlugin(),
+  //     new Plugin({
+  //       key: new PluginKey(`richtextCustomPlugin${this.name}`),
+  //       props: {
+  //         handlePaste: (view, event) => {
+  //           const hasFiles =
+  //               event.clipboardData &&
+  //               event.clipboardData.files &&
+  //               event.clipboardData.files?.length;
+  //           if (!hasFiles) {
+  //             return;
+  //           }
+  //           const items = [...(event.clipboardData.files || [])];
+  //           if (items.some(x => x.type === 'text/html')) {
+  //             return false;
+  //           }
+  //           return handleImagePaste(view, event, uploadFn);
+  //         },
+  //         handleDrop: (view, event, _, moved) => {
+  //           if (!(event instanceof DragEvent) || !event.dataTransfer) {
+  //             return false;
+  //           }
+  //           handleImageDrop(view, event, moved, uploadFn);
+  //           return false;
+  //         },
+  //       },
+  //     }),
+  //   ];
+  // },
+});
+export {
+  J as I,
+  bt as R,
+  be as u
+};