@remarkablejames/editor 0.0.5 → 0.0.7

package/lib/ImageCropper-DrSdjo9x.js

@@ -0,0 +1,979 @@
+import { jsx as n, jsxs as v, Fragment as W } from "react/jsx-runtime";
+import X, { useState as k, useMemo as P, useCallback as j, useEffect as Z, useRef as le } from "react";
+import pe from "react-image-crop";
+import { B } from "./button-090-I3tp.js";
+import { D as se, a as oe, b as ce, c as de, d as be } from "./dialog-bDkDW-C_.js";
+import { h as J, m as ye, k as ve } from "./clsx-m_C5j3RU.js";
+import { a as K, c as xe } from "./throttle-CRNq0z-O.js";
+import { I as Q, i as ee, j as Ie, u as ue } from "./index-BGd2HiwP.js";
+import { i as te, c as we } from "./isNumber-WaBzl_0s.js";
+import { A as Te } from "./toggle-CaSwYCk4.js";
+import { f as Ae, u as Ce, c as Le, i as me } from "./useButtonProps-D-ruygH7.js";
+import { d as Me, r as ke } from "./file-jDdkhyj7.js";
+import { I as G } from "./Icon-BvGyfX2j.js";
+import { u as he } from "./use-toast-CEOqhXfx.js";
+import { T as Se, a as Ne, b as ie, c as ne } from "./tabs-D1J1iB7B.js";
+import { C as Ee } from "./checkbox-DiXWHAI0.js";
+import { L as ae } from "./label-ClsOg9Hr.js";
+import { I as re } from "./input-C_J-pfTx.js";
+const $ = {
+  TOP_LEFT: "tl",
+  TOP_RIGHT: "tr",
+  BOTTOM_LEFT: "bl",
+  BOTTOM_RIGHT: "br"
+};
+function _e({
+  src: e,
+  style: t
+}) {
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      style: {
+        position: "relative",
+        display: "inline-block",
+        overflow: "hidden",
+        borderRadius: 8,
+        background: "hsl(var(--muted, 220 14% 96%))",
+        minHeight: 120,
+        minWidth: 180,
+        ...t
+      },
+      children: [
+        e && /* @__PURE__ */ n(
+          "img",
+          {
+            src: e,
+            alt: "",
+            "aria-hidden": !0,
+            style: {
+              display: "block",
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              filter: "blur(20px) saturate(0.5)",
+              transform: "scale(1.1)",
+              opacity: 0.5
+            }
+          }
+        ),
+        /* @__PURE__ */ n(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              background: "linear-gradient(110deg, transparent 30%, hsl(var(--muted-foreground, 220 9% 46%) / 0.08) 50%, transparent 70%)",
+              animation: "richtext-skeleton-shimmer 1.8s ease-in-out infinite"
+            }
+          }
+        ),
+        /* @__PURE__ */ v(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 8,
+              pointerEvents: "none"
+            },
+            children: [
+              /* @__PURE__ */ n(
+                "svg",
+                {
+                  width: "28",
+                  height: "28",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  style: {
+                    color: "hsl(var(--muted-foreground, 220 9% 46%))",
+                    animation: "richtext-skeleton-spin 1s linear infinite"
+                  },
+                  children: /* @__PURE__ */ n("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+                }
+              ),
+              /* @__PURE__ */ n(
+                "span",
+                {
+                  style: {
+                    fontSize: 12,
+                    fontWeight: 500,
+                    color: "hsl(var(--muted-foreground, 220 9% 46%))",
+                    userSelect: "none"
+                  },
+                  children: "Uploading…"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ n("style", { children: `
+        @keyframes richtext-skeleton-shimmer {
+          0% { transform: translateX(-100%); }
+          100% { transform: translateX(100%); }
+        }
+        @keyframes richtext-skeleton-spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      ` })
+      ]
+    }
+  );
+}
+function ze(e) {
+  var O, R, F, U;
+  const [t, s] = k({
+    width: Q,
+    height: Q
+  }), [a, r] = k({
+    width: 0,
+    height: 0
+  }), [d] = k([
+    $.TOP_LEFT,
+    $.TOP_RIGHT,
+    $.BOTTOM_LEFT,
+    $.BOTTOM_RIGHT
+  ]), [o, I] = k(!1), [c, p] = k({
+    x: 0,
+    y: 0,
+    w: 0,
+    h: 0,
+    dir: ""
+  }), { align: x, inline: w, uploading: M } = (O = e == null ? void 0 : e.node) == null ? void 0 : O.attrs, h = w && (x === "left" || x === "right"), f = P(() => {
+    var q;
+    const { src: i, alt: l, width: b, height: A, flipX: L, flipY: m } = (q = e == null ? void 0 : e.node) == null ? void 0 : q.attrs, _ = te(b) ? `${b}px` : b, z = te(A) ? `${A}px` : A, Y = [];
+    L && Y.push("rotateX(180deg)"), m && Y.push("rotateY(180deg)");
+    const ge = Y.join(" ");
+    return {
+      src: i || void 0,
+      alt: l || void 0,
+      style: {
+        width: _ || void 0,
+        height: z || void 0,
+        transform: ge || "none",
+        ...h ? { float: x } : {}
+      }
+    };
+  }, [(R = e == null ? void 0 : e.node) == null ? void 0 : R.attrs]), C = P(() => {
+    const {
+      style: { width: i }
+    } = f;
+    return { width: i === "100%" ? i : void 0 };
+  }, [f]);
+  function S(i) {
+    r({
+      width: i.target.width,
+      height: i.target.height
+    });
+  }
+  function T() {
+    const { editor: i, getPos: l } = e;
+    i.commands.setNodeSelection(l());
+  }
+  const u = j(
+    K(() => {
+      const { editor: i } = e, { width: l } = getComputedStyle(i.view.dom);
+      s((b) => ({
+        ...b,
+        width: Number.parseInt(l, 10)
+      }));
+    }, ee),
+    [e == null ? void 0 : e.editor]
+  );
+  function H(i, l) {
+    i.preventDefault(), i.stopPropagation();
+    const b = a.width, A = a.height, L = b / A;
+    let m = Number(e.node.attrs.width), _ = Number(e.node.attrs.height);
+    const z = t.width;
+    m && !_ ? (m = m > z ? z : m, _ = Math.round(m / L)) : _ && !m ? (m = Math.round(_ * L), m = m > z ? z : m) : !m && !_ ? (m = b > z ? z : b, _ = Math.round(m / L)) : m = m > z ? z : m, I(!0), p({
+      x: i.clientX,
+      y: i.clientY,
+      w: m,
+      h: _,
+      dir: l
+    });
+  }
+  const y = j(
+    K((i) => {
+      if (i.preventDefault(), i.stopPropagation(), !o)
+        return;
+      const { x: l, w: b, dir: A } = c, L = (i.clientX - l) * (/l/.test(A) ? -1 : 1), m = we(b + L, Ie, t.width);
+      e.updateAttributes({
+        width: m,
+        height: null
+      });
+    }, ee),
+    [o, c, t, e.updateAttributes]
+  ), D = j(
+    (i) => {
+      i.preventDefault(), i.stopPropagation(), o && (p({
+        x: 0,
+        y: 0,
+        w: 0,
+        h: 0,
+        dir: ""
+      }), I(!1), T());
+    },
+    [o, T]
+  ), g = j(() => {
+    document == null || document.addEventListener("mousemove", y, !0), document == null || document.addEventListener("mouseup", D, !0);
+  }, [y, D]), N = j(() => {
+    document == null || document.removeEventListener("mousemove", y, !0), document == null || document.removeEventListener("mouseup", D, !0);
+  }, [y, D]);
+  Z(() => (o ? g() : N(), () => {
+    N();
+  }), [o, g, N]);
+  const E = P(() => new ResizeObserver(() => u()), [u]);
+  return Z(() => (E.observe(e.editor.view.dom), () => {
+    E.disconnect();
+  }), [e.editor.view.dom, E]), M ? /* @__PURE__ */ n(
+    J,
+    {
+      as: w ? "span" : "div",
+      className: "image-view",
+      style: {
+        float: h ? x : void 0,
+        margin: h ? x === "left" ? "1em 1em 1em 0" : "1em 0 1em 1em" : void 0,
+        display: w ? "inline" : "block",
+        textAlign: h ? void 0 : x,
+        width: ((F = f.style) == null ? void 0 : F.width) ?? "auto",
+        ...h ? {} : C
+      },
+      children: /* @__PURE__ */ n("div", { style: C, className: "image-view__body", children: /* @__PURE__ */ n(_e, { src: f.src, style: f.style }) })
+    }
+  ) : /* @__PURE__ */ n(
+    J,
+    {
+      as: w ? "span" : "div",
+      className: "image-view",
+      style: {
+        float: h ? x : void 0,
+        margin: h ? x === "left" ? "1em 1em 1em 0" : "1em 0 1em 1em" : void 0,
+        display: w ? "inline" : "block",
+        textAlign: h ? void 0 : x,
+        width: ((U = f.style) == null ? void 0 : U.width) ?? "auto",
+        ...h ? {} : C
+      },
+      children: /* @__PURE__ */ v(
+        "div",
+        {
+          "data-drag-handle": !0,
+          draggable: "true",
+          style: C,
+          className: `image-view__body ${e != null && e.selected ? "image-view__body--focused" : ""} ${o ? "image-view__body--resizing" : ""}`,
+          children: [
+            /* @__PURE__ */ n(
+              "img",
+              {
+                alt: f.alt,
+                className: "image-view__body__image block",
+                height: "auto",
+                onClick: T,
+                onLoad: S,
+                src: f.src,
+                style: f.style
+              }
+            ),
+            (e == null ? void 0 : e.editor.view.editable) && ((e == null ? void 0 : e.selected) || o) && /* @__PURE__ */ n("div", { className: "image-resizer", children: d == null ? void 0 : d.map((i) => /* @__PURE__ */ n(
+              "span",
+              {
+                className: `image-resizer__handler image-resizer__handler--${i}`,
+                onMouseDown: (l) => H(l, i)
+              },
+              `image-dir-${i}`
+            )) })
+          ]
+        }
+      )
+    }
+  );
+}
+function Re(e, t) {
+  const s = e.type, a = e.name.toLowerCase(), r = a.split(".").pop();
+  if (!r) return !1;
+  const o = s || {
+    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"
+  }[r];
+  return t.some((I) => {
+    if (I.startsWith("."))
+      return a.endsWith(I);
+    if (I.endsWith("/*")) {
+      const c = I.split("/")[0];
+      return o == null ? void 0 : o.startsWith(c + "/");
+    }
+    return o === I;
+  });
+}
+function fe(e, t) {
+  const { acceptMimes: s, maxSize: a, t: r, toast: d } = t, o = [];
+  return (Array.isArray(e) ? e : Object.values(e)).forEach((c) => {
+    if (!Re(c, s)) {
+      t.onError ? t.onError({
+        type: "type",
+        message: r("editor.upload.fileTypeNotSupported", {
+          fileName: c.name
+        }),
+        file: c
+      }) : d({
+        variant: "destructive",
+        title: r("editor.upload.fileTypeNotSupported", {
+          fileName: c.name
+        })
+      });
+      return;
+    }
+    if (c.size > a) {
+      const p = (a / 1024 / 1024).toFixed(2);
+      t.onError ? t.onError({
+        type: "size",
+        message: r("editor.upload.fileSizeTooBig", {
+          fileName: c.name,
+          size: p
+        }),
+        file: c
+      }) : d({
+        variant: "destructive",
+        title: r("editor.upload.fileSizeTooBig", {
+          fileName: c.name,
+          size: p
+        })
+      });
+      return;
+    }
+    o.push(c);
+  }), o;
+}
+function it() {
+  const { t: e } = ue(), { toast: t } = he(), s = Ae(), a = Ce(V.name), { icon: r, tooltip: d } = (a == null ? void 0 : a.componentProps) ?? {}, { editorDisabled: o } = Le(), [I, c] = k(!1), p = me(V.name), [x, w] = k(""), [M, h] = k(""), f = le(null), C = (p == null ? void 0 : p.options.defaultInline) || !1, [S, T] = k(C), u = P(() => p == null ? void 0 : p.options, [p]);
+  function H(g) {
+    var F;
+    const N = (F = g == null ? void 0 : g.target) == null ? void 0 : F.files;
+    if (!s || s.isDestroyed || N.length === 0) {
+      g.target.value = "";
+      return;
+    }
+    const E = fe(N, {
+      acceptMimes: u == null ? void 0 : u.acceptMimes,
+      maxSize: u == null ? void 0 : u.maxSize,
+      t: e,
+      toast: t,
+      onError: u.onError
+    });
+    if (E.length <= 0) {
+      g.target.value = "";
+      return;
+    }
+    c(!1);
+    const O = M, R = S;
+    if (h(""), T(C), u.upload) {
+      const U = u != null && u.multiple ? E : [E[0]];
+      for (const i of U)
+        s.chain().focus().insertImagePlaceholder({
+          file: i,
+          inline: R,
+          alt: O
+        }).run();
+    } else {
+      const U = u != null && u.multiple ? E : [E[0]];
+      for (const i of U) {
+        const l = URL.createObjectURL(i);
+        s.chain().focus().setImageInline({ src: l, inline: R, alt: O }).run();
+      }
+    }
+    g.target.value = "";
+  }
+  function y(g) {
+    g.preventDefault(), g.stopPropagation(), s.chain().focus().setImageInline({ src: x, inline: S, alt: M }).run(), c(!1), T(C), w(""), h("");
+  }
+  function D(g) {
+    var N;
+    g.preventDefault(), (N = f.current) == null || N.click();
+  }
+  return a ? /* @__PURE__ */ v(se, { onOpenChange: c, open: I, children: [
+    /* @__PURE__ */ n(oe, { asChild: !0, children: /* @__PURE__ */ n(
+      Te,
+      {
+        disabled: o,
+        icon: r,
+        tooltip: d,
+        action: () => {
+          o || c(!0);
+        }
+      }
+    ) }),
+    /* @__PURE__ */ v(ce, { children: [
+      /* @__PURE__ */ n(de, { children: e("editor.image.dialog.title") }),
+      /* @__PURE__ */ v(
+        Se,
+        {
+          activationMode: "manual",
+          defaultValue: u.resourceImage === "both" || u.resourceImage === "upload" ? "upload" : "link",
+          children: [
+            u.resourceImage === "both" && /* @__PURE__ */ v(Ne, { className: "richtext-grid richtext-w-full richtext-grid-cols-2", children: [
+              /* @__PURE__ */ n(ie, { value: "upload", children: e("editor.image.dialog.tab.upload") }),
+              /* @__PURE__ */ n(ie, { value: "link", children: e("editor.image.dialog.tab.url") })
+            ] }),
+            /* @__PURE__ */ v("div", { className: "richtext-my-[10px] richtext-flex richtext-items-center richtext-gap-[4px]", children: [
+              /* @__PURE__ */ n(
+                Ee,
+                {
+                  checked: S,
+                  onCheckedChange: (g) => {
+                    T(g);
+                  }
+                }
+              ),
+              /* @__PURE__ */ n(ae, { children: e("editor.link.dialog.inline") })
+            ] }),
+            u.enableAlt && /* @__PURE__ */ v("div", { className: "richtext-my-[10px]", children: [
+              /* @__PURE__ */ n(ae, { className: "mb-[6px]", children: e("editor.imageUpload.alt") }),
+              /* @__PURE__ */ n(
+                re,
+                {
+                  onChange: (g) => h(g.target.value),
+                  required: !0,
+                  type: "text",
+                  value: M
+                }
+              )
+            ] }),
+            /* @__PURE__ */ v(ne, { value: "upload", children: [
+              /* @__PURE__ */ v("div", { className: "richtext-flex richtext-items-center richtext-gap-[10px]", children: [
+                /* @__PURE__ */ n(
+                  B,
+                  {
+                    className: "richtext-mt-1 richtext-w-full",
+                    onClick: D,
+                    size: "sm",
+                    children: e("editor.image.dialog.tab.upload")
+                  }
+                ),
+                /* @__PURE__ */ n(
+                  He,
+                  {
+                    alt: M,
+                    disabled: !1,
+                    editor: s,
+                    imageInline: S,
+                    onClose: () => {
+                      h("");
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ n(
+                "input",
+                {
+                  accept: u.acceptMimes.join(",") || "image/*",
+                  multiple: u.multiple,
+                  onChange: H,
+                  ref: f,
+                  style: { display: "none" },
+                  type: "file"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ n(ne, { value: "link", children: /* @__PURE__ */ n("form", { onSubmit: y, children: /* @__PURE__ */ v("div", { className: "richtext-flex richtext-items-center richtext-gap-2", children: [
+              /* @__PURE__ */ n(
+                re,
+                {
+                  autoFocus: !0,
+                  onChange: (g) => w(g.target.value),
+                  placeholder: e("editor.image.dialog.placeholder"),
+                  required: !0,
+                  type: "url",
+                  value: x
+                }
+              ),
+              /* @__PURE__ */ n(B, { type: "submit", children: e("editor.image.dialog.button.apply") })
+            ] }) }) })
+          ]
+        }
+      )
+    ] })
+  ] }) : /* @__PURE__ */ n(W, {});
+}
+const Ue = {
+  acceptMimes: ["image/jpeg", "image/gif", "image/png", "image/jpg"],
+  maxSize: 1024 * 1024 * 5,
+  // 5MB
+  multiple: !0,
+  resourceImage: "both",
+  defaultInline: !1,
+  enableAlt: !0
+}, V = /* @__PURE__ */ xe.extend({
+  group: "inline",
+  inline: !0,
+  defining: !0,
+  draggable: !0,
+  selectable: !0,
+  addOptions() {
+    var e;
+    return {
+      ...Ue,
+      ...(e = this.parent) == null ? void 0 : e.call(this),
+      upload: () => Promise.reject("Image Upload Function"),
+      button: ({
+        editor: t,
+        extension: s,
+        t: a
+      }) => {
+        var r, d;
+        return {
+          componentProps: {
+            action: () => !0,
+            upload: s.options.upload,
+            /* If setImage is not available(when Image Component is not imported), the button is disabled */
+            disabled: !((d = (r = t.can()).setImage) != null && d.call(r, {})),
+            icon: "ImageUp",
+            tooltip: a("editor.image.tooltip")
+          }
+        };
+      }
+    };
+  },
+  addAttributes() {
+    var e;
+    return {
+      ...(e = this.parent) == null ? void 0 : e.call(this),
+      uploading: {
+        default: !1,
+        // Transient attribute — never written to or read from HTML
+        parseHTML: () => !1,
+        renderHTML: () => ({})
+      },
+      imageId: {
+        default: null,
+        parseHTML: (t) => t.getAttribute("data-image-id"),
+        renderHTML: (t) => t.imageId ? { "data-image-id": t.imageId } : {}
+      },
+      flipX: {
+        default: !1
+      },
+      flipY: {
+        default: !1
+      },
+      width: {
+        default: null,
+        parseHTML: (t) => {
+          const s = t.style.width || t.getAttribute("width") || null;
+          return s ? Number.parseInt(s, 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 ve(ze);
+  },
+  addCommands() {
+    var s;
+    const e = this.name, t = this.options;
+    return {
+      ...(s = this.parent) == null ? void 0 : s.call(this),
+      setImageInline: (a) => ({ commands: r }) => r.insertContent({
+        type: e,
+        attrs: {
+          ...a,
+          imageId: a.imageId ?? null,
+          inline: a.inline ?? t.defaultInline
+        }
+      }),
+      insertImagePlaceholder: ({
+        file: a,
+        inline: r,
+        alt: d
+      }) => ({ editor: o, commands: I }) => {
+        const c = URL.createObjectURL(a);
+        if (!I.insertContent({
+          type: e,
+          attrs: {
+            src: c,
+            alt: d ?? "",
+            inline: r ?? t.defaultInline,
+            uploading: !0,
+            imageId: null
+          }
+        })) return !1;
+        const x = t.upload;
+        return x && x(a).then((w) => {
+          const { doc: M } = o.state;
+          let h = null;
+          M.descendants((f, C) => {
+            if (f.type.name === e && f.attrs.uploading === !0 && f.attrs.src === c)
+              return h = C, !1;
+          }), h !== null && o.view.dispatch(
+            o.state.tr.setNodeMarkup(h, void 0, {
+              ...o.state.doc.nodeAt(h).attrs,
+              src: w.cdnUrl,
+              imageId: w.imageId,
+              uploading: !1
+            })
+          ), URL.revokeObjectURL(c);
+        }).catch((w) => {
+          console.error("Image upload failed", w);
+          const { doc: M } = o.state;
+          let h = null;
+          if (M.descendants((f, C) => {
+            if (f.type.name === e && f.attrs.uploading === !0 && f.attrs.src === c)
+              return h = C, !1;
+          }), h !== null) {
+            const f = o.state.doc.nodeAt(h);
+            f && o.view.dispatch(
+              o.state.tr.delete(
+                h,
+                h + f.nodeSize
+              )
+            );
+          }
+          URL.revokeObjectURL(c);
+        }), !0;
+      },
+      updateImage: (a) => ({ commands: r }) => r.updateAttributes(this.name, a),
+      setAlignImage: (a) => ({ commands: r }) => r.updateAttributes(this.name, { align: a })
+    };
+  },
+  renderHTML({ HTMLAttributes: e }) {
+    const { flipX: t, flipY: s, align: a, inline: r } = e, d = r && (a === "left" || a === "right"), o = t || s ? `transform: rotateX(${t ? "180" : "0"}deg) rotateY(${s ? "180" : "0"}deg);` : "", I = d ? "" : `text-align: ${a};`, x = `${d ? `float: ${a};` : ""}${d ? a === "left" ? "margin: 1em 1em 1em 0;" : "margin: 1em 0 1em 1em;" : ""}${o}`;
+    return [
+      r ? "span" : "div",
+      {
+        style: I,
+        class: "image"
+      },
+      [
+        "img",
+        ye(
+          {
+            height: "auto",
+            style: x
+          },
+          this.options.HTMLAttributes,
+          e
+        )
+      ]
+    ];
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "span.image img",
+        getAttrs: (e) => {
+          var d;
+          const t = e == null ? void 0 : e.parentElement, s = e == null ? void 0 : e.getAttribute("width"), a = (e == null ? void 0 : e.getAttribute("flipx")) || !1, r = (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: s ? Number.parseInt(s, 10) : null,
+            align: (e == null ? void 0 : e.getAttribute("align")) || ((d = t == null ? void 0 : t.style) == null ? void 0 : d.textAlign) || null,
+            inline: (e == null ? void 0 : e.getAttribute("inline")) || !1,
+            flipX: a === "true",
+            flipY: r === "true"
+          };
+        }
+      },
+      {
+        tag: "div[class=image]",
+        getAttrs: (e) => {
+          const t = e.querySelector("img"), s = t == null ? void 0 : t.getAttribute("width"), a = (t == null ? void 0 : t.getAttribute("flipx")) || !1, r = (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: s ? Number.parseInt(s, 10) : null,
+            align: (t == null ? void 0 : t.getAttribute("align")) || e.style.textAlign || null,
+            inline: (t == null ? void 0 : t.getAttribute("inline")) || !1,
+            flipX: a === "true",
+            flipY: r === "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;
+  //         },
+  //       },
+  //     }),
+  //   ];
+  // },
+});
+function He({
+  editor: e,
+  imageInline: t,
+  onClose: s,
+  disabled: a,
+  alt: r
+}) {
+  var F, U;
+  const { t: d } = ue(), { toast: o } = he(), [I, c] = k(!1), [p, x] = k(!1), w = X.useRef(null), [M, h] = X.useState(), [f, C] = X.useState(""), S = le(null), [T, u] = k({
+    src: "",
+    file: null
+  }), H = me(V.name), y = P(() => (H == null ? void 0 : H.options) ?? {}, [H]);
+  function D(i) {
+    if (w.current && i.width && i.height) {
+      const l = g(w.current, i);
+      C(l);
+    }
+  }
+  function g(i, l) {
+    const b = document.createElement("canvas"), A = i.naturalWidth / i.width, L = i.naturalHeight / i.height;
+    b.width = l.width * A, b.height = l.height * L;
+    const m = b.getContext("2d");
+    return m && (m.imageSmoothingEnabled = !1, m.drawImage(
+      i,
+      l.x * A,
+      l.y * L,
+      l.width * A,
+      l.height * L,
+      0,
+      0,
+      l.width * A,
+      l.height * L
+    )), b.toDataURL("image/png", 1);
+  }
+  const N = X.useCallback(() => {
+    var l;
+    if (p) return;
+    const i = Me(
+      f,
+      ((l = T == null ? void 0 : T.file) == null ? void 0 : l.name) || "image.png"
+    );
+    if (c(!1), u({
+      src: "",
+      file: null
+    }), R(), s(), y.upload)
+      e.chain().focus().insertImagePlaceholder({
+        file: i,
+        inline: t,
+        alt: r
+      }).run();
+    else {
+      const b = URL.createObjectURL(i);
+      e.chain().focus().setImageInline({ src: b, inline: t, alt: r }).run();
+    }
+  }, [
+    f,
+    e,
+    t,
+    p,
+    s,
+    (F = T == null ? void 0 : T.file) == null ? void 0 : F.name,
+    y,
+    r
+  ]);
+  function E(i) {
+    var l;
+    i.preventDefault(), (l = S.current) == null || l.click();
+  }
+  const O = async (i) => {
+    var m;
+    const l = (m = i == null ? void 0 : i.target) == null ? void 0 : m.files;
+    if (!e || e.isDestroyed || l.length === 0) {
+      i.target.value = "";
+      return;
+    }
+    const b = fe(l, {
+      acceptMimes: y == null ? void 0 : y.acceptMimes,
+      maxSize: y == null ? void 0 : y.maxSize,
+      t: d,
+      toast: o,
+      onError: y.onError
+    });
+    if (b.length <= 0) {
+      i.target.value = "";
+      return;
+    }
+    const A = b[0], L = await ke(A);
+    c(!0), u({
+      src: L.src,
+      file: A
+    });
+  }, R = () => {
+    S.current && (S.current.value = "");
+  };
+  return /* @__PURE__ */ v(W, { children: [
+    /* @__PURE__ */ n(
+      B,
+      {
+        className: "richtext-mt-1 richtext-w-full",
+        disabled: a,
+        onClick: E,
+        size: "sm",
+        children: d("editor.image.dialog.tab.uploadCrop")
+      }
+    ),
+    /* @__PURE__ */ v(
+      se,
+      {
+        open: I,
+        onOpenChange: (i) => {
+          c(i), i || (u({ src: "", file: null }), R());
+        },
+        children: [
+          /* @__PURE__ */ n(oe, {}),
+          /* @__PURE__ */ v(ce, { children: [
+            /* @__PURE__ */ n(de, { children: d("editor.image.dialog.tab.uploadCrop") }),
+            /* @__PURE__ */ n("div", { children: T.src && /* @__PURE__ */ n(
+              pe,
+              {
+                className: "richtext-w-full",
+                crop: M,
+                onChange: (i) => h(i),
+                onComplete: (i) => D(i),
+                children: /* @__PURE__ */ n("img", { alt: "Crop me", ref: w, src: T.src })
+              }
+            ) }),
+            /* @__PURE__ */ v(be, { children: [
+              /* @__PURE__ */ v(
+                B,
+                {
+                  disabled: p,
+                  onClick: () => {
+                    c(!1), u({
+                      src: "",
+                      file: null
+                    }), R();
+                  },
+                  children: [
+                    d("editor.imageUpload.cancel"),
+                    /* @__PURE__ */ n(G, { className: "richtext-ml-1", name: "Trash2" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ n(
+                B,
+                {
+                  className: "richtext-w-fit",
+                  disabled: p || !M,
+                  onClick: N,
+                  children: p ? /* @__PURE__ */ v(W, { children: [
+                    d("editor.imageUpload.uploading"),
+                    /* @__PURE__ */ n(
+                      G,
+                      {
+                        className: "richtext-ml-1 richtext-animate-spin",
+                        name: "Loader"
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ v(W, { children: [
+                    d("editor.imageUpload.crop"),
+                    /* @__PURE__ */ n(G, { className: "richtext-ml-1", name: "Crop" })
+                  ] })
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ n(
+      "input",
+      {
+        accept: ((U = y == null ? void 0 : y.acceptMimes) == null ? void 0 : U.join(",")) || "image/*",
+        multiple: !1,
+        onChange: O,
+        ref: S,
+        style: { display: "none" },
+        type: "file"
+      }
+    )
+  ] });
+}
+export {
+  V as I,
+  it as R,
+  He as a,
+  fe as v
+};