reactjs-tiptap-editor 0.4.1 → 1.0.0

package/lib/Image.js

@@ -1,7 +1,850 @@
-import "./index-kbO3iWqL.js";
-import { U as t, U as e } from "./RichTextEditor-DGcKEUGr.js";
-import "./dom-dataset-lYeH6gfI.js";
+import { m as pe } from "./index-DnWWK9F_.js";
+import { a as Z, c as xe } from "./throttle-CdwDrFpn.js";
+import { N as be, R as ye } from "./index-DzcKxutn.js";
+import { jsx as r, jsxs as x, Fragment as H } from "react/jsx-runtime";
+import * as we from "react";
+import j, { useState as M, useMemo as P, useCallback as F, useEffect as W, useRef as ne } from "react";
+import { I as J, m as K, n as Ie, u as le, k as ve, E as Te } from "./index-DYkucCoF.js";
+import { i as Q, c as Ae } from "./isNumber-fpLGS0AZ.js";
+import { A as Ce } from "./toggle-Cdp4IT2U.js";
+import { c as ee, a as Ne } from "./index-BPfVXs5_.js";
+import { I as $ } from "./Icon-jKs8Hr6p.js";
+import { D as oe, a as se, b as ce, c as de, d as Ee } from "./dialog-PtQivpHS.js";
+import Me from "react-image-crop";
+import { B } from "./button-DXMsXUEn.js";
+import { d as Le, r as Se } from "./file-BLas99n7.js";
+import { d as ue, u as _e, a as ke } from "./useButtonProps-BsEd4zYM.js";
+import { u as he } from "./use-toast-Crf7-q5H.js";
+import { a as Re } from "./store-DX599H5W.js";
+import { T as ze, a as Ue, b as te, c as ie } from "./tabs-B5mVSN1I.js";
+import * as G from "@radix-ui/react-checkbox";
+import { Check as De } from "lucide-react";
+import { L as ae } from "./label-CGdLYWv7.js";
+import { I as re } from "./input-wJ9PDEzZ.js";
+const me = we.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r(
+  G.Root,
+  {
+    ref: a,
+    className: ee(
+      "!richtext-peer !richtext-h-4 !richtext-w-4 !richtext-p-0 !richtext-shrink-0 !richtext-rounded-sm !richtext-border !richtext-border-primary !richtext-ring-offset-background focus-visible:!richtext-outline-none focus-visible:!richtext-ring-2 focus-visible:!richtext-ring-ring focus-visible:!richtext-ring-offset-2 disabled:!richtext-cursor-not-allowed disabled:!richtext-opacity-50 data-[state=checked]:!richtext-bg-primary data-[state=checked]:!richtext-text-primary-foreground",
+      e
+    ),
+    ...t,
+    children: /* @__PURE__ */ r(
+      G.Indicator,
+      {
+        className: ee("!richtext-flex !richtext-p-0 !richtext-items-center !richtext-justify-center !richtext-text-current"),
+        children: /* @__PURE__ */ r(De, { className: "!richtext-h-4 !richtext-w-4" })
+      }
+    )
+  }
+));
+me.displayName = G.Root.displayName;
+const X = {
+  TOP_LEFT: "tl",
+  TOP_RIGHT: "tr",
+  BOTTOM_LEFT: "bl",
+  BOTTOM_RIGHT: "br"
+};
+function Oe(e) {
+  var O, d, L;
+  const [t, a] = M({
+    width: J,
+    height: J
+  }), [s, f] = M({
+    width: 0,
+    height: 0
+  }), [u] = M([
+    X.TOP_LEFT,
+    X.TOP_RIGHT,
+    X.BOTTOM_LEFT,
+    X.BOTTOM_RIGHT
+  ]), [g, v] = M(!1), [h, b] = M({
+    x: 0,
+    y: 0,
+    w: 0,
+    h: 0,
+    dir: ""
+  }), { align: C, inline: T } = (O = e == null ? void 0 : e.node) == null ? void 0 : O.attrs, _ = T && (C === "left" || C === "right"), S = P(() => {
+    var q;
+    const { src: n, alt: y, width: i, height: l, flipX: m, flipY: o } = (q = e == null ? void 0 : e.node) == null ? void 0 : q.attrs, w = Q(i) ? `${i}px` : i, I = Q(l) ? `${l}px` : l, Y = [];
+    m && Y.push("rotateX(180deg)"), o && Y.push("rotateY(180deg)");
+    const ge = Y.join(" ");
+    return {
+      src: n || void 0,
+      alt: y || void 0,
+      style: {
+        width: w || void 0,
+        height: I || void 0,
+        transform: ge || "none",
+        ..._ ? { float: C } : {}
+      }
+    };
+  }, [(d = e == null ? void 0 : e.node) == null ? void 0 : d.attrs]), z = P(() => {
+    const {
+      style: { width: n }
+    } = S;
+    return { width: n === "100%" ? n : void 0 };
+  }, [S]);
+  function R(n) {
+    f({
+      width: n.target.width,
+      height: n.target.height
+    });
+  }
+  function E() {
+    const { editor: n, getPos: y } = e;
+    n.commands.setNodeSelection(y());
+  }
+  const N = F(
+    Z(() => {
+      const { editor: n } = e, { width: y } = getComputedStyle(n.view.dom);
+      a((i) => ({
+        ...i,
+        width: Number.parseInt(y, 10)
+      }));
+    }, K),
+    [e == null ? void 0 : e.editor]
+  );
+  function k(n, y) {
+    n.preventDefault(), n.stopPropagation();
+    const i = s.width, l = s.height, m = i / l;
+    let o = Number(e.node.attrs.width), w = Number(e.node.attrs.height);
+    const I = t.width;
+    o && !w ? (o = o > I ? I : o, w = Math.round(o / m)) : w && !o ? (o = Math.round(w * m), o = o > I ? I : o) : !o && !w ? (o = i > I ? I : i, w = Math.round(o / m)) : o = o > I ? I : o, v(!0), b({
+      x: n.clientX,
+      y: n.clientY,
+      w: o,
+      h: w,
+      dir: y
+    });
+  }
+  const A = F(
+    Z((n) => {
+      if (n.preventDefault(), n.stopPropagation(), !g)
+        return;
+      const { x: y, w: i, dir: l } = h, m = (n.clientX - y) * (/l/.test(l) ? -1 : 1), o = Ae(i + m, Ie, t.width);
+      e.updateAttributes({
+        width: o,
+        height: null
+      });
+    }, K),
+    [g, h, t, e.updateAttributes]
+  ), p = F(
+    (n) => {
+      n.preventDefault(), n.stopPropagation(), g && (b({
+        x: 0,
+        y: 0,
+        w: 0,
+        h: 0,
+        dir: ""
+      }), v(!1), E());
+    },
+    [g, E]
+  ), c = F(() => {
+    document == null || document.addEventListener("mousemove", A, !0), document == null || document.addEventListener("mouseup", p, !0);
+  }, [A, p]), U = F(() => {
+    document == null || document.removeEventListener("mousemove", A, !0), document == null || document.removeEventListener("mouseup", p, !0);
+  }, [A, p]);
+  W(() => (g ? c() : U(), () => {
+    U();
+  }), [g, c, U]);
+  const D = P(() => new ResizeObserver(() => N()), [N]);
+  return W(() => (D.observe(e.editor.view.dom), () => {
+    D.disconnect();
+  }), [e.editor.view.dom, D]), /* @__PURE__ */ r(
+    be,
+    {
+      as: T ? "span" : "div",
+      className: "image-view",
+      style: {
+        float: _ ? C : void 0,
+        margin: _ ? C === "left" ? "1em 1em 1em 0" : "1em 0 1em 1em" : void 0,
+        display: T ? "inline" : "block",
+        textAlign: _ ? void 0 : C,
+        width: ((L = S.style) == null ? void 0 : L.width) ?? "auto",
+        ..._ ? {} : z
+      },
+      children: /* @__PURE__ */ x(
+        "div",
+        {
+          "data-drag-handle": !0,
+          draggable: "true",
+          style: z,
+          className: `image-view__body ${e != null && e.selected ? "image-view__body--focused" : ""} ${g ? "image-view__body--resizing" : ""}`,
+          children: [
+            /* @__PURE__ */ r(
+              "img",
+              {
+                alt: S.alt,
+                className: "image-view__body__image block",
+                height: "auto",
+                onClick: E,
+                onLoad: R,
+                src: S.src,
+                style: S.style
+              }
+            ),
+            (e == null ? void 0 : e.editor.view.editable) && ((e == null ? void 0 : e.selected) || g) && /* @__PURE__ */ r("div", { className: "image-resizer", children: u == null ? void 0 : u.map((n) => /* @__PURE__ */ r(
+              "span",
+              {
+                className: `image-resizer__handler image-resizer__handler--${n}`,
+                onMouseDown: (y) => k(y, n)
+              },
+              `image-dir-${n}`
+            )) })
+          ]
+        }
+      )
+    }
+  );
+}
+function Fe(e, t) {
+  const a = e.type, s = e.name.toLowerCase(), f = s.split(".").pop();
+  if (!f) return !1;
+  const g = a || {
+    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"
+  }[f];
+  return t.some((v) => {
+    if (v.startsWith("."))
+      return s.endsWith(v);
+    if (v.endsWith("/*")) {
+      const h = v.split("/")[0];
+      return g == null ? void 0 : g.startsWith(h + "/");
+    }
+    return g === v;
+  });
+}
+function fe(e, t) {
+  const { acceptMimes: a, maxSize: s, t: f, toast: u } = t, g = [];
+  return (Array.isArray(e) ? e : Object.values(e)).forEach((h) => {
+    if (!Fe(h, a)) {
+      t.onError ? t.onError({
+        type: "type",
+        message: f("editor.upload.fileTypeNotSupported", { fileName: h.name }),
+        file: h
+      }) : u({
+        variant: "default",
+        title: f("editor.upload.fileTypeNotSupported", { fileName: h.name })
+      });
+      return;
+    }
+    if (h.size > s) {
+      const b = (s / 1024 / 1024).toFixed(2);
+      t.onError ? t.onError({
+        type: "size",
+        message: f("editor.upload.fileSizeTooBig", { fileName: h.name, size: b }),
+        file: h
+      }) : u({
+        variant: "default",
+        title: f("editor.upload.fileSizeTooBig", { fileName: h.name, size: b })
+      });
+      return;
+    }
+    g.push(h);
+  }), g;
+}
+function He({ editor: e, imageInline: t, onClose: a, disabled: s, alt: f }) {
+  var n, y;
+  const { t: u } = le(), { toast: g } = he(), [v, h] = M(!1), [b, C] = M(!1), T = j.useRef(null), [_, S] = j.useState(), [z, R] = j.useState(""), E = ne(null), [N, k] = M({
+    src: "",
+    file: null
+  }), A = ue(V.name), p = P(() => (A == null ? void 0 : A.options) ?? {}, [A]);
+  function c(i) {
+    if (T.current && i.width && i.height) {
+      const l = U(T.current, i);
+      R(l);
+    }
+  }
+  function U(i, l) {
+    const m = document.createElement("canvas"), o = i.naturalWidth / i.width, w = i.naturalHeight / i.height;
+    m.width = l.width * o, m.height = l.height * w;
+    const I = m.getContext("2d");
+    return I && (I.imageSmoothingEnabled = !1, I.drawImage(
+      i,
+      l.x * o,
+      l.y * w,
+      l.width * o,
+      l.height * w,
+      0,
+      0,
+      l.width * o,
+      l.height * w
+    )), m.toDataURL("image/png", 1);
+  }
+  const D = j.useCallback(async () => {
+    var i;
+    if (!b) {
+      C(!0);
+      try {
+        const l = Le(z, ((i = N == null ? void 0 : N.file) == null ? void 0 : i.name) || "image.png");
+        let m = "";
+        p.upload ? m = await p.upload(l) : m = URL.createObjectURL(l), e.chain().focus().setImageInline({ src: m, inline: t, alt: f }).run(), h(!1), k({
+          src: "",
+          file: null
+        }), L(), a();
+      } catch (l) {
+        console.log("Error cropping image", l);
+      } finally {
+        C(!1);
+      }
+    }
+  }, [z, e, t, b, a, (n = N == null ? void 0 : N.file) == null ? void 0 : n.name, p]);
+  function O(i) {
+    var l;
+    i.preventDefault(), (l = E.current) == null || l.click();
+  }
+  const d = async (i) => {
+    var I;
+    const l = (I = i == null ? void 0 : i.target) == null ? void 0 : I.files;
+    if (!e || e.isDestroyed || l.length === 0) {
+      i.target.value = "";
+      return;
+    }
+    const m = fe(l, {
+      acceptMimes: p == null ? void 0 : p.acceptMimes,
+      maxSize: p == null ? void 0 : p.maxSize,
+      t: u,
+      toast: g,
+      onError: p.onError
+    });
+    if (m.length <= 0) {
+      i.target.value = "";
+      return;
+    }
+    const o = m[0], w = await Se(o);
+    h(!0), k({
+      src: w.src,
+      file: o
+    });
+  }, L = () => {
+    E.current && (E.current.value = "");
+  };
+  return /* @__PURE__ */ x(H, { children: [
+    /* @__PURE__ */ r(
+      B,
+      {
+        className: "richtext-mt-1 richtext-w-full",
+        disabled: s,
+        onClick: O,
+        size: "sm",
+        children: u("editor.image.dialog.tab.uploadCrop")
+      }
+    ),
+    /* @__PURE__ */ x(
+      oe,
+      {
+        open: v,
+        onOpenChange: (i) => {
+          h(i), i || (k({ src: "", file: null }), L());
+        },
+        children: [
+          /* @__PURE__ */ r(se, {}),
+          /* @__PURE__ */ x(ce, { children: [
+            /* @__PURE__ */ r(de, { children: u("editor.image.dialog.tab.uploadCrop") }),
+            /* @__PURE__ */ r("div", { children: N.src && /* @__PURE__ */ r(
+              Me,
+              {
+                className: "richtext-w-full",
+                crop: _,
+                onChange: (i) => S(i),
+                onComplete: (i) => c(i),
+                children: /* @__PURE__ */ r(
+                  "img",
+                  {
+                    alt: "Crop me",
+                    ref: T,
+                    src: N.src
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ x(Ee, { children: [
+              /* @__PURE__ */ x(
+                B,
+                {
+                  disabled: b,
+                  onClick: () => {
+                    h(!1), k({
+                      src: "",
+                      file: null
+                    }), L();
+                  },
+                  children: [
+                    u("editor.imageUpload.cancel"),
+                    /* @__PURE__ */ r(
+                      $,
+                      {
+                        className: "richtext-ml-1",
+                        name: "Trash2"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ r(
+                B,
+                {
+                  className: "richtext-w-fit",
+                  disabled: b || !_,
+                  onClick: D,
+                  children: b ? /* @__PURE__ */ x(H, { children: [
+                    u("editor.imageUpload.uploading"),
+                    /* @__PURE__ */ r(
+                      $,
+                      {
+                        className: "richtext-ml-1 richtext-animate-spin",
+                        name: "Loader"
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ x(H, { children: [
+                    u("editor.imageUpload.crop"),
+                    /* @__PURE__ */ r(
+                      $,
+                      {
+                        className: "richtext-ml-1",
+                        name: "Crop"
+                      }
+                    )
+                  ] })
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ r(
+      "input",
+      {
+        accept: ((y = p == null ? void 0 : p.acceptMimes) == null ? void 0 : y.join(",")) || "image/*",
+        multiple: !1,
+        onChange: d,
+        ref: E,
+        style: { display: "none" },
+        type: "file"
+      }
+    )
+  ] });
+}
+function ct() {
+  const { t: e } = le(), { toast: t } = he(), a = Ne(), s = _e(V.name), {
+    icon: f,
+    tooltip: u
+  } = (s == null ? void 0 : s.componentProps) ?? {}, { editorDisabled: g } = ke(), [v, h] = M(!1), [b, C] = M(!1), T = ue(V.name), _ = (d) => {
+    h(d.detail);
+  }, [S, z] = M(""), [R, E] = M(""), N = ne(null), k = (T == null ? void 0 : T.options.defaultInline) || !1, [A, p] = M(k), c = P(() => T == null ? void 0 : T.options, [T]);
+  W(() => {
+    const d = ve(Te.UPLOAD_IMAGE(a.id), _);
+    return () => {
+      d();
+    };
+  }, []);
+  async function U(d) {
+    var y;
+    const L = (y = d == null ? void 0 : d.target) == null ? void 0 : y.files;
+    if (!a || a.isDestroyed || L.length === 0 || b) {
+      d.target.value = "";
+      return;
+    }
+    const n = fe(L, {
+      acceptMimes: c == null ? void 0 : c.acceptMimes,
+      maxSize: c == null ? void 0 : c.maxSize,
+      t: e,
+      toast: t,
+      onError: c.onError
+    });
+    if (n.length <= 0) {
+      d.target.value = "";
+      return;
+    }
+    C(!0);
+    try {
+      if (c != null && c.multiple) {
+        const i = n.map(async (m) => {
+          let o = "";
+          return c.upload ? o = await c.upload(m) : o = URL.createObjectURL(m), o;
+        });
+        (await Promise.all(i)).forEach((m) => {
+          a.chain().focus().setImageInline({ src: m, inline: A, alt: R }).run();
+        });
+      } else {
+        const i = n[0];
+        let l = "";
+        c.upload ? l = await c.upload(i) : l = URL.createObjectURL(i), a.chain().focus().setImageInline({ src: l, inline: A, alt: R }).run();
+      }
+      h(!1), E(""), p(k);
+    } catch (i) {
+      console.error("Error uploading image", i), c.onError ? c.onError({
+        type: "upload",
+        message: e("editor.upload.error")
+      }) : t({
+        variant: "destructive",
+        title: e("editor.upload.error")
+      });
+    } finally {
+      C(!1), d.target.value = "";
+    }
+  }
+  function D(d) {
+    d.preventDefault(), d.stopPropagation(), a.chain().focus().setImageInline({ src: S, inline: A, alt: R }).run(), h(!1), p(k), z(""), E("");
+  }
+  function O(d) {
+    var L;
+    d.preventDefault(), (L = N.current) == null || L.click();
+  }
+  return s ? /* @__PURE__ */ x(
+    oe,
+    {
+      onOpenChange: h,
+      open: v,
+      children: [
+        /* @__PURE__ */ r(
+          se,
+          {
+            asChild: !0,
+            children: /* @__PURE__ */ r(
+              Ce,
+              {
+                disabled: g,
+                icon: f,
+                tooltip: u,
+                action: () => {
+                  g || h(!0);
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ x(ce, { children: [
+          /* @__PURE__ */ r(de, { children: e("editor.image.dialog.title") }),
+          /* @__PURE__ */ x(
+            ze,
+            {
+              activationMode: "manual",
+              defaultValue: c.resourceImage === "both" || c.resourceImage === "upload" ? "upload" : "link",
+              children: [
+                c.resourceImage === "both" && /* @__PURE__ */ x(Ue, { className: "richtext-grid richtext-w-full richtext-grid-cols-2", children: [
+                  /* @__PURE__ */ r(te, { value: "upload", children: e("editor.image.dialog.tab.upload") }),
+                  /* @__PURE__ */ r(te, { value: "link", children: e("editor.image.dialog.tab.url") })
+                ] }),
+                /* @__PURE__ */ x("div", { className: "richtext-my-[10px] richtext-flex richtext-items-center richtext-gap-[4px]", children: [
+                  /* @__PURE__ */ r(
+                    me,
+                    {
+                      checked: A,
+                      onCheckedChange: (d) => {
+                        p(d);
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ r(ae, { children: e("editor.link.dialog.inline") })
+                ] }),
+                c.enableAlt && /* @__PURE__ */ x("div", { className: "richtext-my-[10px] ", children: [
+                  /* @__PURE__ */ r(ae, { className: "mb-[6px]", children: e("editor.imageUpload.alt") }),
+                  /* @__PURE__ */ r(
+                    re,
+                    {
+                      onChange: (d) => E(d.target.value),
+                      required: !0,
+                      type: "text",
+                      value: R
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ x(ie, { value: "upload", children: [
+                  /* @__PURE__ */ x("div", { className: "richtext-flex richtext-items-center richtext-gap-[10px]", children: [
+                    /* @__PURE__ */ r(
+                      B,
+                      {
+                        className: "richtext-mt-1 richtext-w-full",
+                        disabled: b,
+                        onClick: O,
+                        size: "sm",
+                        children: b ? /* @__PURE__ */ x(H, { children: [
+                          e("editor.imageUpload.uploading"),
+                          /* @__PURE__ */ r(
+                            $,
+                            {
+                              className: "richtext-ml-1 richtext-animate-spin",
+                              name: "Loader"
+                            }
+                          )
+                        ] }) : e("editor.image.dialog.tab.upload")
+                      }
+                    ),
+                    /* @__PURE__ */ r(
+                      He,
+                      {
+                        alt: R,
+                        disabled: b,
+                        editor: a,
+                        imageInline: A,
+                        onClose: () => {
+                          Re.setOpen(a.id, !1), E("");
+                        }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ r(
+                    "input",
+                    {
+                      accept: c.acceptMimes.join(",") || "image/*",
+                      multiple: c.multiple,
+                      onChange: U,
+                      ref: N,
+                      style: { display: "none" },
+                      type: "file"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ r(ie, { value: "link", children: /* @__PURE__ */ r("form", { onSubmit: D, children: /* @__PURE__ */ x("div", { className: "richtext-flex richtext-items-center richtext-gap-2", children: [
+                  /* @__PURE__ */ r(
+                    re,
+                    {
+                      autoFocus: !0,
+                      onChange: (d) => z(d.target.value),
+                      placeholder: e("editor.image.dialog.placeholder"),
+                      required: !0,
+                      type: "url",
+                      value: S
+                    }
+                  ),
+                  /* @__PURE__ */ r(B, { type: "submit", children: e("editor.image.dialog.button.apply") })
+                ] }) }) })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  ) : /* @__PURE__ */ r(H, {});
+}
+const Pe = {
+  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 {
+      ...Pe,
+      ...(e = this.parent) == null ? void 0 : e.call(this),
+      upload: () => Promise.reject("Image Upload Function"),
+      button: ({
+        editor: t,
+        extension: a,
+        t: s
+      }) => {
+        var f, u;
+        return {
+          componentProps: {
+            action: () => !0,
+            upload: a.options.upload,
+            /* If setImage is not available(when Image Component is not imported), the button is disabled */
+            disabled: !((u = (f = t.can()).setImage) != null && u.call(f, {})),
+            icon: "ImageUp",
+            tooltip: s("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 a = t.style.width || t.getAttribute("width") || null;
+          return a ? Number.parseInt(a, 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 ye(Oe);
+  },
+  addCommands() {
+    var e;
+    return {
+      ...(e = this.parent) == null ? void 0 : e.call(this),
+      setImageInline: (t) => ({ commands: a }) => a.insertContent({
+        type: this.name,
+        attrs: {
+          ...t,
+          inline: t.inline ?? this.options.defaultInline
+        }
+      }),
+      updateImage: (t) => ({ commands: a }) => a.updateAttributes(this.name, t),
+      setAlignImage: (t) => ({ commands: a }) => a.updateAttributes(this.name, { align: t })
+    };
+  },
+  renderHTML({ HTMLAttributes: e }) {
+    const { flipX: t, flipY: a, align: s, inline: f } = e, u = f && (s === "left" || s === "right"), g = t || a ? `transform: rotateX(${t ? "180" : "0"}deg) rotateY(${a ? "180" : "0"}deg);` : "", v = u ? "" : `text-align: ${s};`, C = `${u ? `float: ${s};` : ""}${u ? s === "left" ? "margin: 1em 1em 1em 0;" : "margin: 1em 0 1em 1em;" : ""}${g}`;
+    return [
+      f ? "span" : "div",
+      {
+        style: v,
+        class: "image"
+      },
+      [
+        "img",
+        pe(
+          {
+            height: "auto",
+            style: C
+          },
+          this.options.HTMLAttributes,
+          e
+        )
+      ]
+    ];
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "span.image img",
+        getAttrs: (e) => {
+          var u;
+          const t = e == null ? void 0 : e.parentElement, a = e == null ? void 0 : e.getAttribute("width"), s = (e == null ? void 0 : e.getAttribute("flipx")) || !1, f = (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: a ? Number.parseInt(a, 10) : null,
+            align: (e == null ? void 0 : e.getAttribute("align")) || ((u = t == null ? void 0 : t.style) == null ? void 0 : u.textAlign) || null,
+            inline: (e == null ? void 0 : e.getAttribute("inline")) || !1,
+            flipX: s === "true",
+            flipY: f === "true"
+          };
+        }
+      },
+      {
+        tag: "div[class=image]",
+        getAttrs: (e) => {
+          const t = e.querySelector("img"), a = t == null ? void 0 : t.getAttribute("width"), s = (t == null ? void 0 : t.getAttribute("flipx")) || !1, f = (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: a ? Number.parseInt(a, 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: f === "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 {
-  t as Image,
-  e as default
+  V as Image,
+  ct as RichTextImage
 };