@remarkablejames/editor 0.0.1 → 0.0.2

package/lib/ImageCropper-DUzu_9-6.js

@@ -0,0 +1,896 @@
+import { jsx as o, jsxs as b, Fragment as H } from "react/jsx-runtime";
+import * as K from "react";
+import X, { useState as E, useMemo as P, useCallback as F, useEffect as ee, useRef as de } from "react";
+import ye from "react-image-crop";
+import { B } from "./button-CDIxPURh.js";
+import { D as ue, a as me, b as he, c as fe, d as xe } from "./dialog-QWWUWOGP.js";
+import { h as we, m as Ae, k as ve } from "./clsx-m_C5j3RU.js";
+import { a as te, c as Se } from "./throttle-CRNq0z-O.js";
+import { I as ie, i as ae, j as Ee, u as ge } from "./index-4Q5IhypJ.js";
+import { i as ne, c as Me } from "./isNumber-WaBzl_0s.js";
+import { A as _e } from "./toggle-DoJTBdvy.js";
+import { f as Ce, u as Le, c as Ne, i as pe } from "./useButtonProps-BE10eHkG.js";
+import { d as Oe, r as Re } from "./file-BLas99n7.js";
+import { I as Y } from "./Icon-CKM0tYbW.js";
+import { T as ze, a as De, b as re, c as se } from "./tabs-BeHxylKH.js";
+import { C as ke } from "./checkbox-7sfSdzy9.js";
+import { L as le } from "./label-DC37f2RQ.js";
+import { I as oe } from "./input-qvpuOf-3.js";
+const Ue = 1, Fe = 1e6;
+let q = 0;
+function He() {
+  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
+    });
+  }, Fe);
+  Z.set(e, t);
+}
+function Pe(e, t) {
+  switch (t.type) {
+    case "ADD_TOAST":
+      return {
+        ...e,
+        toasts: [t.toast, ...e.toasts].slice(0, Ue)
+      };
+    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((s) => {
+        ce(s.id);
+      }), {
+        ...e,
+        toasts: e.toasts.map(
+          (s) => s.id === i || i === void 0 ? {
+            ...s,
+            open: !1
+          } : s
+        )
+      };
+    }
+    case "REMOVE_TOAST":
+      return t.toastId === void 0 ? {
+        ...e,
+        toasts: []
+      } : {
+        ...e,
+        toasts: e.toasts.filter((i) => i.id !== t.toastId)
+      };
+  }
+}
+const W = [];
+let G = { toasts: [] };
+function j(e) {
+  G = Pe(G, e), W.forEach((t) => {
+    t(G);
+  });
+}
+function Be({ ...e }) {
+  const t = He(), i = (d) => j({
+    type: "UPDATE_TOAST",
+    toast: { ...d, id: t }
+  }), s = () => j({ type: "DISMISS_TOAST", toastId: t });
+  return j({
+    type: "ADD_TOAST",
+    toast: {
+      ...e,
+      id: t,
+      open: !0,
+      onOpenChange: (d) => {
+        d || s();
+      }
+    }
+  }), {
+    id: t,
+    dismiss: s,
+    update: i
+  };
+}
+function be() {
+  const [e, t] = K.useState(G);
+  return K.useEffect(() => (W.push(t), () => {
+    const i = W.indexOf(t);
+    i > -1 && W.splice(i, 1);
+  }), [e]), {
+    ...e,
+    toast: Be,
+    dismiss: (i) => j({ type: "DISMISS_TOAST", toastId: i })
+  };
+}
+const $ = {
+  TOP_LEFT: "tl",
+  TOP_RIGHT: "tr",
+  BOTTOM_LEFT: "bl",
+  BOTTOM_RIGHT: "br"
+};
+function je(e) {
+  var g, O, R;
+  const [t, i] = E({
+    width: ie,
+    height: ie
+  }), [s, d] = E({
+    width: 0,
+    height: 0
+  }), [m] = E([
+    $.TOP_LEFT,
+    $.TOP_RIGHT,
+    $.BOTTOM_LEFT,
+    $.BOTTOM_RIGHT
+  ]), [f, x] = E(!1), [h, I] = E({
+    x: 0,
+    y: 0,
+    w: 0,
+    h: 0,
+    dir: ""
+  }), { align: v, inline: w } = (g = e == null ? void 0 : e.node) == null ? void 0 : g.attrs, _ = w && (v === "left" || v === "right"), C = P(() => {
+    var J;
+    const { src: l, alt: p, width: a, height: r, flipX: u, flipY: c } = (J = e == null ? void 0 : e.node) == null ? void 0 : J.attrs, T = ne(a) ? `${a}px` : a, y = ne(r) ? `${r}px` : r, V = [];
+    u && V.push("rotateX(180deg)"), c && V.push("rotateY(180deg)");
+    const Te = V.join(" ");
+    return {
+      src: l || void 0,
+      alt: p || void 0,
+      style: {
+        width: T || void 0,
+        height: y || void 0,
+        transform: Te || "none",
+        ..._ ? { float: v } : {}
+      }
+    };
+  }, [(O = e == null ? void 0 : e.node) == null ? void 0 : O.attrs]), L = P(() => {
+    const {
+      style: { width: l }
+    } = C;
+    return { width: l === "100%" ? l : void 0 };
+  }, [C]);
+  function z(l) {
+    d({
+      width: l.target.width,
+      height: l.target.height
+    });
+  }
+  function N() {
+    const { editor: l, getPos: p } = e;
+    l.commands.setNodeSelection(p());
+  }
+  const A = F(
+    te(() => {
+      const { editor: l } = e, { width: p } = getComputedStyle(l.view.dom);
+      i((a) => ({
+        ...a,
+        width: Number.parseInt(p, 10)
+      }));
+    }, ae),
+    [e == null ? void 0 : e.editor]
+  );
+  function M(l, p) {
+    l.preventDefault(), l.stopPropagation();
+    const a = s.width, r = s.height, u = a / r;
+    let c = Number(e.node.attrs.width), T = Number(e.node.attrs.height);
+    const y = t.width;
+    c && !T ? (c = c > y ? y : c, T = Math.round(c / u)) : T && !c ? (c = Math.round(T * u), c = c > y ? y : c) : !c && !T ? (c = a > y ? y : a, T = Math.round(c / u)) : c = c > y ? y : c, x(!0), I({
+      x: l.clientX,
+      y: l.clientY,
+      w: c,
+      h: T,
+      dir: p
+    });
+  }
+  const S = F(
+    te((l) => {
+      if (l.preventDefault(), l.stopPropagation(), !f)
+        return;
+      const { x: p, w: a, dir: r } = h, u = (l.clientX - p) * (/l/.test(r) ? -1 : 1), c = Me(a + u, Ee, t.width);
+      e.updateAttributes({
+        width: c,
+        height: null
+      });
+    }, ae),
+    [f, h, t, e.updateAttributes]
+  ), n = F(
+    (l) => {
+      l.preventDefault(), l.stopPropagation(), f && (I({
+        x: 0,
+        y: 0,
+        w: 0,
+        h: 0,
+        dir: ""
+      }), x(!1), N());
+    },
+    [f, N]
+  ), U = F(() => {
+    document == null || document.addEventListener("mousemove", S, !0), document == null || document.addEventListener("mouseup", n, !0);
+  }, [S, n]), D = F(() => {
+    document == null || document.removeEventListener("mousemove", S, !0), document == null || document.removeEventListener("mouseup", n, !0);
+  }, [S, n]);
+  ee(() => (f ? U() : D(), () => {
+    D();
+  }), [f, U, D]);
+  const k = P(() => new ResizeObserver(() => A()), [A]);
+  return ee(() => (k.observe(e.editor.view.dom), () => {
+    k.disconnect();
+  }), [e.editor.view.dom, k]), /* @__PURE__ */ o(
+    we,
+    {
+      as: w ? "span" : "div",
+      className: "image-view",
+      style: {
+        float: _ ? v : void 0,
+        margin: _ ? v === "left" ? "1em 1em 1em 0" : "1em 0 1em 1em" : void 0,
+        display: w ? "inline" : "block",
+        textAlign: _ ? void 0 : v,
+        width: ((R = C.style) == null ? void 0 : R.width) ?? "auto",
+        ..._ ? {} : L
+      },
+      children: /* @__PURE__ */ b(
+        "div",
+        {
+          "data-drag-handle": !0,
+          draggable: "true",
+          style: L,
+          className: `image-view__body ${e != null && e.selected ? "image-view__body--focused" : ""} ${f ? "image-view__body--resizing" : ""}`,
+          children: [
+            /* @__PURE__ */ o(
+              "img",
+              {
+                alt: C.alt,
+                className: "image-view__body__image block",
+                height: "auto",
+                onClick: N,
+                onLoad: z,
+                src: C.src,
+                style: C.style
+              }
+            ),
+            (e == null ? void 0 : e.editor.view.editable) && ((e == null ? void 0 : e.selected) || f) && /* @__PURE__ */ o("div", { className: "image-resizer", children: m == null ? void 0 : m.map((l) => /* @__PURE__ */ o(
+              "span",
+              {
+                className: `image-resizer__handler image-resizer__handler--${l}`,
+                onMouseDown: (p) => M(p, l)
+              },
+              `image-dir-${l}`
+            )) })
+          ]
+        }
+      )
+    }
+  );
+}
+function Xe(e, t) {
+  const i = e.type, s = e.name.toLowerCase(), d = s.split(".").pop();
+  if (!d) return !1;
+  const f = 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"
+  }[d];
+  return t.some((x) => {
+    if (x.startsWith("."))
+      return s.endsWith(x);
+    if (x.endsWith("/*")) {
+      const h = x.split("/")[0];
+      return f == null ? void 0 : f.startsWith(h + "/");
+    }
+    return f === x;
+  });
+}
+function Ie(e, t) {
+  const { acceptMimes: i, maxSize: s, t: d, toast: m } = t, f = [];
+  return (Array.isArray(e) ? e : Object.values(e)).forEach((h) => {
+    if (!Xe(h, i)) {
+      t.onError ? t.onError({
+        type: "type",
+        message: d("editor.upload.fileTypeNotSupported", {
+          fileName: h.name
+        }),
+        file: h
+      }) : m({
+        variant: "destructive",
+        title: d("editor.upload.fileTypeNotSupported", {
+          fileName: h.name
+        })
+      });
+      return;
+    }
+    if (h.size > s) {
+      const I = (s / 1024 / 1024).toFixed(2);
+      t.onError ? t.onError({
+        type: "size",
+        message: d("editor.upload.fileSizeTooBig", {
+          fileName: h.name,
+          size: I
+        }),
+        file: h
+      }) : m({
+        variant: "destructive",
+        title: d("editor.upload.fileSizeTooBig", {
+          fileName: h.name,
+          size: I
+        })
+      });
+      return;
+    }
+    f.push(h);
+  }), f;
+}
+function dt() {
+  const { t: e } = ge(), { toast: t } = be(), i = Ce(), s = Le(Q.name), { icon: d, tooltip: m } = (s == null ? void 0 : s.componentProps) ?? {}, { editorDisabled: f } = Ne(), [x, h] = E(!1), [I, v] = E(!1), w = pe(Q.name), [_, C] = E(""), [L, z] = E(""), N = de(null), A = (w == null ? void 0 : w.options.defaultInline) || !1, [M, S] = E(A), n = P(() => w == null ? void 0 : w.options, [w]);
+  async function U(g) {
+    var l;
+    const O = (l = g == null ? void 0 : g.target) == null ? void 0 : l.files;
+    if (!i || i.isDestroyed || O.length === 0 || I) {
+      g.target.value = "";
+      return;
+    }
+    const R = Ie(O, {
+      acceptMimes: n == null ? void 0 : n.acceptMimes,
+      maxSize: n == null ? void 0 : n.maxSize,
+      t: e,
+      toast: t,
+      onError: n.onError
+    });
+    if (R.length <= 0) {
+      g.target.value = "";
+      return;
+    }
+    v(!0);
+    try {
+      if (n != null && n.multiple) {
+        const p = R.map(async (r) => {
+          if (n.upload) {
+            const u = await n.upload(r);
+            return { imageId: u.imageId, src: u.cdnUrl };
+          } else
+            return { imageId: void 0, src: URL.createObjectURL(r) };
+        });
+        (await Promise.all(p)).forEach(({ imageId: r, src: u }) => {
+          i.chain().focus().setImageInline({ imageId: r, src: u, inline: M, alt: L }).run();
+        });
+      } else {
+        const p = R[0];
+        let a, r = "";
+        if (n.upload) {
+          const u = await n.upload(p);
+          a = u.imageId, r = u.cdnUrl;
+        } else
+          r = URL.createObjectURL(p);
+        i.chain().focus().setImageInline({ imageId: a, src: r, inline: M, alt: L }).run();
+      }
+      h(!1), z(""), S(A);
+    } catch (p) {
+      console.error("Error uploading image", p), n.onError ? n.onError({
+        type: "upload",
+        message: e("editor.upload.error")
+      }) : t({
+        variant: "destructive",
+        title: e("editor.upload.error")
+      });
+    } finally {
+      v(!1), g.target.value = "";
+    }
+  }
+  function D(g) {
+    g.preventDefault(), g.stopPropagation(), i.chain().focus().setImageInline({ src: _, inline: M, alt: L }).run(), h(!1), S(A), C(""), z("");
+  }
+  function k(g) {
+    var O;
+    g.preventDefault(), (O = N.current) == null || O.click();
+  }
+  return s ? /* @__PURE__ */ b(ue, { onOpenChange: h, open: x, children: [
+    /* @__PURE__ */ o(me, { asChild: !0, children: /* @__PURE__ */ o(
+      _e,
+      {
+        disabled: f,
+        icon: d,
+        tooltip: m,
+        action: () => {
+          f || h(!0);
+        }
+      }
+    ) }),
+    /* @__PURE__ */ b(he, { children: [
+      /* @__PURE__ */ o(fe, { children: e("editor.image.dialog.title") }),
+      /* @__PURE__ */ b(
+        ze,
+        {
+          activationMode: "manual",
+          defaultValue: n.resourceImage === "both" || n.resourceImage === "upload" ? "upload" : "link",
+          children: [
+            n.resourceImage === "both" && /* @__PURE__ */ b(De, { 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(
+                ke,
+                {
+                  checked: M,
+                  onCheckedChange: (g) => {
+                    S(g);
+                  }
+                }
+              ),
+              /* @__PURE__ */ o(le, { children: e("editor.link.dialog.inline") })
+            ] }),
+            n.enableAlt && /* @__PURE__ */ b("div", { className: "richtext-my-[10px]", children: [
+              /* @__PURE__ */ o(le, { className: "mb-[6px]", children: e("editor.imageUpload.alt") }),
+              /* @__PURE__ */ o(
+                oe,
+                {
+                  onChange: (g) => z(g.target.value),
+                  required: !0,
+                  type: "text",
+                  value: L
+                }
+              )
+            ] }),
+            /* @__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: I,
+                    onClick: k,
+                    size: "sm",
+                    children: I ? /* @__PURE__ */ b(H, { 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(
+                  Ye,
+                  {
+                    alt: L,
+                    disabled: I,
+                    editor: i,
+                    imageInline: M,
+                    onClose: () => {
+                      z("");
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ o(
+                "input",
+                {
+                  accept: n.acceptMimes.join(",") || "image/*",
+                  multiple: n.multiple,
+                  onChange: U,
+                  ref: N,
+                  style: { display: "none" },
+                  type: "file"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ o(se, { value: "link", children: /* @__PURE__ */ o("form", { onSubmit: D, children: /* @__PURE__ */ b("div", { className: "richtext-flex richtext-items-center richtext-gap-2", children: [
+              /* @__PURE__ */ o(
+                oe,
+                {
+                  autoFocus: !0,
+                  onChange: (g) => C(g.target.value),
+                  placeholder: e("editor.image.dialog.placeholder"),
+                  required: !0,
+                  type: "url",
+                  value: _
+                }
+              ),
+              /* @__PURE__ */ o(B, { type: "submit", children: e("editor.image.dialog.button.apply") })
+            ] }) }) })
+          ]
+        }
+      )
+    ] })
+  ] }) : /* @__PURE__ */ o(H, {});
+}
+const $e = {
+  acceptMimes: ["image/jpeg", "image/gif", "image/png", "image/jpg"],
+  maxSize: 1024 * 1024 * 5,
+  // 5MB
+  multiple: !0,
+  resourceImage: "both",
+  defaultInline: !1,
+  enableAlt: !0
+}, Q = /* @__PURE__ */ Se.extend({
+  group: "inline",
+  inline: !0,
+  defining: !0,
+  draggable: !0,
+  selectable: !0,
+  addOptions() {
+    var e;
+    return {
+      ...$e,
+      ...(e = this.parent) == null ? void 0 : e.call(this),
+      upload: () => Promise.reject("Image Upload Function"),
+      button: ({
+        editor: t,
+        extension: i,
+        t: s
+      }) => {
+        var d, 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 = (d = t.can()).setImage) != null && m.call(d, {})),
+            icon: "ImageUp",
+            tooltip: s("editor.image.tooltip")
+          }
+        };
+      }
+    };
+  },
+  addAttributes() {
+    var e;
+    return {
+      ...(e = this.parent) == null ? void 0 : e.call(this),
+      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 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 ve(je);
+  },
+  addCommands() {
+    var e;
+    return {
+      ...(e = this.parent) == null ? void 0 : e.call(this),
+      setImageInline: (t) => ({ commands: i }) => i.insertContent({
+        type: this.name,
+        attrs: {
+          ...t,
+          imageId: t.imageId ?? null,
+          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: s, inline: d } = e, m = d && (s === "left" || s === "right"), f = t || i ? `transform: rotateX(${t ? "180" : "0"}deg) rotateY(${i ? "180" : "0"}deg);` : "", x = m ? "" : `text-align: ${s};`, v = `${m ? `float: ${s};` : ""}${m ? s === "left" ? "margin: 1em 1em 1em 0;" : "margin: 1em 0 1em 1em;" : ""}${f}`;
+    return [
+      d ? "span" : "div",
+      {
+        style: x,
+        class: "image"
+      },
+      [
+        "img",
+        Ae(
+          {
+            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"), s = (e == null ? void 0 : e.getAttribute("flipx")) || !1, d = (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: s === "true",
+            flipY: d === "true"
+          };
+        }
+      },
+      {
+        tag: "div[class=image]",
+        getAttrs: (e) => {
+          const t = e.querySelector("img"), i = t == null ? void 0 : t.getAttribute("width"), s = (t == null ? void 0 : t.getAttribute("flipx")) || !1, d = (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: s === "true",
+            flipY: d === "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 Ye({ editor: e, imageInline: t, onClose: i, disabled: s, alt: d }) {
+  var l, p;
+  const { t: m } = ge(), { toast: f } = be(), [x, h] = E(!1), [I, v] = E(!1), w = X.useRef(null), [_, C] = X.useState(), [L, z] = X.useState(""), N = de(null), [A, M] = E({
+    src: "",
+    file: null
+  }), S = pe(Q.name), n = P(() => (S == null ? void 0 : S.options) ?? {}, [S]);
+  function U(a) {
+    if (w.current && a.width && a.height) {
+      const r = D(w.current, a);
+      z(r);
+    }
+  }
+  function D(a, r) {
+    const u = document.createElement("canvas"), c = a.naturalWidth / a.width, T = a.naturalHeight / a.height;
+    u.width = r.width * c, u.height = r.height * T;
+    const y = u.getContext("2d");
+    return y && (y.imageSmoothingEnabled = !1, y.drawImage(
+      a,
+      r.x * c,
+      r.y * T,
+      r.width * c,
+      r.height * T,
+      0,
+      0,
+      r.width * c,
+      r.height * T
+    )), u.toDataURL("image/png", 1);
+  }
+  const k = X.useCallback(async () => {
+    var a;
+    if (!I) {
+      v(!0);
+      try {
+        const r = Oe(L, ((a = A == null ? void 0 : A.file) == null ? void 0 : a.name) || "image.png");
+        let u = "";
+        n.upload ? u = await n.upload(r) : u = URL.createObjectURL(r), e.chain().focus().setImageInline({ src: u, inline: t, alt: d }).run(), h(!1), M({
+          src: "",
+          file: null
+        }), R(), i();
+      } catch (r) {
+        console.error("Error cropping image", r);
+      } finally {
+        v(!1);
+      }
+    }
+  }, [
+    L,
+    e,
+    t,
+    I,
+    i,
+    (l = A == null ? void 0 : A.file) == null ? void 0 : l.name,
+    n
+  ]);
+  function g(a) {
+    var r;
+    a.preventDefault(), (r = N.current) == null || r.click();
+  }
+  const O = async (a) => {
+    var y;
+    const r = (y = a == null ? void 0 : a.target) == null ? void 0 : y.files;
+    if (!e || e.isDestroyed || r.length === 0) {
+      a.target.value = "";
+      return;
+    }
+    const u = Ie(r, {
+      acceptMimes: n == null ? void 0 : n.acceptMimes,
+      maxSize: n == null ? void 0 : n.maxSize,
+      t: m,
+      toast: f,
+      onError: n.onError
+    });
+    if (u.length <= 0) {
+      a.target.value = "";
+      return;
+    }
+    const c = u[0], T = await Re(c);
+    h(!0), M({
+      src: T.src,
+      file: c
+    });
+  }, R = () => {
+    N.current && (N.current.value = "");
+  };
+  return /* @__PURE__ */ b(H, { children: [
+    /* @__PURE__ */ o(
+      B,
+      {
+        className: "richtext-mt-1 richtext-w-full",
+        disabled: s,
+        onClick: g,
+        size: "sm",
+        children: m("editor.image.dialog.tab.uploadCrop")
+      }
+    ),
+    /* @__PURE__ */ b(
+      ue,
+      {
+        open: x,
+        onOpenChange: (a) => {
+          h(a), a || (M({ src: "", file: null }), R());
+        },
+        children: [
+          /* @__PURE__ */ o(me, {}),
+          /* @__PURE__ */ b(he, { children: [
+            /* @__PURE__ */ o(fe, { children: m("editor.image.dialog.tab.uploadCrop") }),
+            /* @__PURE__ */ o("div", { children: A.src && /* @__PURE__ */ o(
+              ye,
+              {
+                className: "richtext-w-full",
+                crop: _,
+                onChange: (a) => C(a),
+                onComplete: (a) => U(a),
+                children: /* @__PURE__ */ o("img", { alt: "Crop me", ref: w, src: A.src })
+              }
+            ) }),
+            /* @__PURE__ */ b(xe, { children: [
+              /* @__PURE__ */ b(
+                B,
+                {
+                  disabled: I,
+                  onClick: () => {
+                    h(!1), M({
+                      src: "",
+                      file: null
+                    }), R();
+                  },
+                  children: [
+                    m("editor.imageUpload.cancel"),
+                    /* @__PURE__ */ o(Y, { className: "richtext-ml-1", name: "Trash2" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ o(B, { className: "richtext-w-fit", disabled: I || !_, onClick: k, children: I ? /* @__PURE__ */ b(H, { children: [
+                m("editor.imageUpload.uploading"),
+                /* @__PURE__ */ o(Y, { className: "richtext-ml-1 richtext-animate-spin", name: "Loader" })
+              ] }) : /* @__PURE__ */ b(H, { children: [
+                m("editor.imageUpload.crop"),
+                /* @__PURE__ */ o(Y, { className: "richtext-ml-1", name: "Crop" })
+              ] }) })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ o(
+      "input",
+      {
+        accept: ((p = n == null ? void 0 : n.acceptMimes) == null ? void 0 : p.join(",")) || "image/*",
+        multiple: !1,
+        onChange: O,
+        ref: N,
+        style: { display: "none" },
+        type: "file"
+      }
+    )
+  ] });
+}
+export {
+  Q as I,
+  dt as R,
+  Ye as a,
+  be as u,
+  Ie as v
+};