reactjs-tiptap-editor 0.4.1 → 1.0.0

package/lib/{Drawer-CaAfmqNo.js → Drawer-DZ5jvmrX.js}

@@ -1,23 +1,173 @@
-import { q as j, m as te } from "./index-kbO3iWqL.js";
-import { d, t as re, u as oe, A as le, v as ne, w as ie, x as se, B as ae, y as ce, z as Z, E as he, F as ue } from "./RichTextEditor-DGcKEUGr.js";
-import { N as de, R as ge } from "./dom-dataset-lYeH6gfI.js";
-import { jsx as e, jsxs as y, Fragment as J } from "react/jsx-runtime";
-import { useState as M, useRef as X, useEffect as V, useMemo as O, useCallback as q } from "react";
-import { Color4 as g, Editor as me, makeDropdownToolbar as pe } from "easydrawer";
-import { s as we, i as ve } from "./shortId-WJVkrvml.js";
-import { I as K, i as fe, j as Q } from "./index-LmrOdnen.js";
-const Te = "_wrapper_rraz2_1", Ce = "_tool_rraz2_17", be = "_active_rraz2_37", xe = "_pen_rraz2_41", ye = "_line_rraz2_48", Me = "_options_rraz2_56", He = "_colorWrap_rraz2_66", Ee = "_color_rraz2_66", Le = "_colorActive_rraz2_83", l = {
-  wrapper: Te,
-  tool: Ce,
-  active: be,
-  pen: xe,
-  line: ye,
-  options: Me,
-  colorWrap: He,
-  color: Ee,
-  colorActive: Le
+import { q as j, m as te } from "./index-DnWWK9F_.js";
+import { a as X, c as re } from "./throttle-CdwDrFpn.js";
+import { N as oe, R as le } from "./index-DzcKxutn.js";
+import { jsx as e, jsxs as x, Fragment as U } from "react/jsx-runtime";
+import { useState as y, useMemo as V, useCallback as R, useEffect as G, useRef as K } from "react";
+import { I as Q, m as Y, n as ne } from "./index-DYkucCoF.js";
+import { i as ie, u as se, a as ae } from "./useButtonProps-BsEd4zYM.js";
+import { Color4 as g, Editor as ce, makeDropdownToolbar as he } from "easydrawer";
+import { s as ue, i as de } from "./shortId-WJVkrvml.js";
+import { A as ge } from "./toggle-Cdp4IT2U.js";
+import { D as me, a as pe, b as we, c as ve, d as fe } from "./dialog-PtQivpHS.js";
+import { c as d, a as Te } from "./index-BPfVXs5_.js";
+import { d as Ce } from "./file-BLas99n7.js";
+import { B as be } from "./button-DXMsXUEn.js";
+const W = {
+  TOP_LEFT: "tl",
+  TOP_RIGHT: "tr",
+  BOTTOM_LEFT: "bl",
+  BOTTOM_RIGHT: "br"
+};
+function xe({ editor: t, node: r, updateAttributes: o, getPos: i, selected: T }) {
+  const [H, S] = y({
+    width: Q,
+    height: Q
+  }), [w, h] = y({
+    width: 0,
+    height: 0
+  }), [k] = y([
+    W.TOP_LEFT,
+    W.TOP_RIGHT,
+    W.BOTTOM_LEFT,
+    W.BOTTOM_RIGHT
+  ]), [b, B] = y(!1), [a, c] = y({
+    x: 0,
+    y: 0,
+    w: 0,
+    h: 0,
+    dir: ""
+  }), { align: C } = r == null ? void 0 : r.attrs, f = V(() => {
+    const { src: u, alt: E, width: L, height: _ } = r == null ? void 0 : r.attrs, A = j(L) ? `${L}px` : L, v = j(_) ? `${_}px` : _;
+    return {
+      src: u || void 0,
+      alt: E || void 0,
+      style: {
+        width: A || void 0,
+        height: v || void 0
+      }
+    };
+  }, [r == null ? void 0 : r.attrs]), n = V(() => {
+    const {
+      style: { width: u }
+    } = f;
+    return { width: u === "100%" ? u : void 0 };
+  }, [f]);
+  function F(u) {
+    h({
+      width: u.target.width,
+      height: u.target.height
+    });
+  }
+  function P() {
+    t.commands.setNodeSelection(i());
+  }
+  const D = R(
+    X(() => {
+      const { width: u } = getComputedStyle(t.view.dom);
+      S((E) => ({
+        ...E,
+        width: Number.parseInt(u, 10)
+      }));
+    }, Y),
+    [t]
+  );
+  function O(u, E) {
+    u.preventDefault(), u.stopPropagation();
+    const L = w.width, _ = w.height, A = L / _;
+    let v = Number(r.attrs.width), N = Number(r.attrs.height);
+    const M = H.width;
+    v && !N ? (v = v > M ? M : v, N = Math.round(v / A)) : N && !v ? (v = Math.round(N * A), v = v > M ? M : v) : !v && !N ? (v = L > M ? M : L, N = Math.round(v / A)) : v = v > M ? M : v, B(!0), c({
+      x: u.clientX,
+      y: u.clientY,
+      w: v,
+      h: N,
+      dir: E
+    });
+  }
+  const m = R(
+    X((u) => {
+      if (u.preventDefault(), u.stopPropagation(), !b)
+        return;
+      const { x: E, w: L, dir: _ } = a, A = (u.clientX - E) * (/l/.test(_) ? -1 : 1), { width: v, height: N } = r == null ? void 0 : r.attrs, M = v / N, Z = ie(L + A, ne, H.width), ee = Math.round(Z / M);
+      o({
+        width: Z,
+        height: ee
+      });
+    }, Y),
+    [b, a, H, o, r == null ? void 0 : r.attrs]
+  ), s = R(
+    (u) => {
+      u.preventDefault(), u.stopPropagation(), b && (c({
+        x: 0,
+        y: 0,
+        w: 0,
+        h: 0,
+        dir: ""
+      }), B(!1), P());
+    },
+    [b, P]
+  ), p = R(() => {
+    document == null || document.addEventListener("mousemove", m, !0), document == null || document.addEventListener("mouseup", s, !0);
+  }, [m, s]), z = R(() => {
+    document == null || document.removeEventListener("mousemove", m, !0), document == null || document.removeEventListener("mouseup", s, !0);
+  }, [m, s]);
+  G(() => (b ? p() : z(), () => {
+    z();
+  }), [b, p, z]);
+  const q = V(() => new ResizeObserver(() => D()), [D]);
+  return G(() => (q.observe(t.view.dom), () => {
+    q.disconnect();
+  }), [t.view.dom, q]), /* @__PURE__ */ e(
+    oe,
+    {
+      className: "image-view",
+      style: { ...n, width: "100%", textAlign: C },
+      children: /* @__PURE__ */ x(
+        "div",
+        {
+          "data-drag-handle": !0,
+          draggable: "true",
+          style: { ...n, background: "#fff" },
+          className: `image-view__body ${T ? "image-view__body--focused" : ""} ${b ? "image-view__body--resizing" : ""}`,
+          children: [
+            /* @__PURE__ */ e(
+              "img",
+              {
+                alt: f.alt,
+                className: "image-view__body__image block",
+                height: "auto",
+                onClick: P,
+                onLoad: F,
+                src: f.src,
+                style: f.style
+              }
+            ),
+            t.view.editable && (T || b) && /* @__PURE__ */ e("div", { className: "image-resizer", children: k == null ? void 0 : k.map((u) => /* @__PURE__ */ e(
+              "span",
+              {
+                className: `image-resizer__handler image-resizer__handler--${u}`,
+                onMouseDown: (E) => O(E, u)
+              },
+              `image-dir-${u}`
+            )) })
+          ]
+        }
+      )
+    }
+  );
+}
+const ye = "_wrapper_rraz2_1", Me = "_tool_rraz2_17", He = "_active_rraz2_37", Ee = "_pen_rraz2_41", Le = "_line_rraz2_48", Ne = "_options_rraz2_56", Se = "_colorWrap_rraz2_66", ke = "_color_rraz2_66", ze = "_colorActive_rraz2_83", l = {
+  wrapper: ye,
+  tool: Me,
+  active: He,
+  pen: Ee,
+  line: Le,
+  options: Ne,
+  colorWrap: Se,
+  color: ke,
+  colorActive: ze
 };
-function Ne(t) {
+function _e(t) {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -41,7 +191,7 @@ function Ne(t) {
     }
   );
 }
-function Se(t) {
+function Ae(t) {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -60,7 +210,7 @@ function Se(t) {
     }
   );
 }
-function ze(t) {
+function Be(t) {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -79,7 +229,7 @@ function ze(t) {
     }
   );
 }
-function ke(t) {
+function Pe(t) {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -98,8 +248,8 @@ function ke(t) {
     }
   );
 }
-function _e(t) {
-  return /* @__PURE__ */ y(
+function qe(t) {
+  return /* @__PURE__ */ x(
     "svg",
     {
       height: "1em",
@@ -126,7 +276,7 @@ function _e(t) {
     }
   );
 }
-function Ae(t) {
+function Re(t) {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -145,7 +295,7 @@ function Ae(t) {
     }
   );
 }
-function Be(t) {
+function Ie(t) {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -164,7 +314,7 @@ function Be(t) {
     }
   );
 }
-function qe(t) {
+function De(t) {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -183,7 +333,7 @@ function qe(t) {
     }
   );
 }
-function Pe(t) {
+function We(t) {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -206,7 +356,7 @@ function Pe(t) {
     }
   );
 }
-function Re(t) {
+function Fe(t) {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -225,7 +375,7 @@ function Re(t) {
     }
   );
 }
-function Ie(t) {
+function Oe(t) {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -234,7 +384,7 @@ function Ie(t) {
       width: "1em",
       xmlns: "http://www.w3.org/2000/svg",
       ...t,
-      children: /* @__PURE__ */ y(
+      children: /* @__PURE__ */ x(
         "g",
         {
           fill: "none",
@@ -254,7 +404,7 @@ function Ie(t) {
     }
   );
 }
-function We(t) {
+function Ve(t) {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -273,7 +423,7 @@ function We(t) {
     }
   );
 }
-function Fe(t) {
+function Ge(t) {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -294,7 +444,7 @@ function Fe(t) {
     }
   );
 }
-function De(t) {
+function $e(t) {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -315,7 +465,7 @@ function De(t) {
     }
   );
 }
-function Oe(t) {
+function Ue(t) {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -334,7 +484,7 @@ function Oe(t) {
     }
   );
 }
-function Ve(t) {
+function Ze(t) {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -353,7 +503,7 @@ function Ve(t) {
     }
   );
 }
-function Ge(t) {
+function je(t) {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -372,7 +522,7 @@ function Ge(t) {
     }
   );
 }
-function $e(t) {
+function Xe(t) {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -391,7 +541,7 @@ function $e(t) {
     }
   );
 }
-function Ue(t) {
+function Ke(t) {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -410,7 +560,7 @@ function Ue(t) {
     }
   );
 }
-function je(t) {
+function Qe(t) {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -431,7 +581,7 @@ function je(t) {
     }
   );
 }
-const Ze = [
+const Ye = [
   g.blackHighlight,
   g.ofRGBA(166 / 255, 81 / 255, 167 / 255, 0.3),
   g.ofRGBA(247 / 255, 78 / 255, 158 / 255, 0.3),
@@ -439,7 +589,7 @@ const Ze = [
   g.ofRGBA(246 / 255, 130 / 255, 28 / 255, 0.3),
   g.ofRGBA(166 / 255, 198 / 255, 0, 0.3),
   g.ofRGBA(98 / 255, 186 / 255, 70 / 255, 0.3)
-], Y = [
+], J = [
   g.black,
   g.fromHex("#007AFF"),
   g.fromHex("#A651A7"),
@@ -455,9 +605,9 @@ const Ze = [
   g.fromHex("#FFFB85"),
   g.fromHex("#AADC99")
 ];
-function Xe({ onChange: t }) {
-  const [r, o] = M(g.blackHighlight);
-  return /* @__PURE__ */ e("div", { className: l.colorWrap, children: Ze.map((i, m) => /* @__PURE__ */ e(
+function Je({ onChange: t }) {
+  const [r, o] = y(g.blackHighlight);
+  return /* @__PURE__ */ e("div", { className: l.colorWrap, children: Ye.map((i, T) => /* @__PURE__ */ e(
     "button",
     {
       style: { backgroundColor: i.toHexString() },
@@ -468,13 +618,13 @@ function Xe({ onChange: t }) {
         o(i), t(i);
       }
     },
-    m
+    T
   )) });
 }
-function G({ onChange: t }) {
-  const [r, o] = M(g.black);
-  return /* @__PURE__ */ y(J, { children: [
-    /* @__PURE__ */ e("div", { className: l.colorWrap, children: Y.slice(0, 7).map((i, m) => /* @__PURE__ */ e(
+function $({ onChange: t }) {
+  const [r, o] = y(g.black);
+  return /* @__PURE__ */ x(U, { children: [
+    /* @__PURE__ */ e("div", { className: l.colorWrap, children: J.slice(0, 7).map((i, T) => /* @__PURE__ */ e(
       "button",
       {
         style: { backgroundColor: i.toHexString() },
@@ -485,9 +635,9 @@ function G({ onChange: t }) {
           o(i), t(i);
         }
       },
-      m
+      T
     )) }),
-    /* @__PURE__ */ e("div", { className: l.colorWrap, children: Y.slice(7).map((i, m) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e("div", { className: l.colorWrap, children: J.slice(7).map((i, T) => /* @__PURE__ */ e(
       "button",
       {
         style: { backgroundColor: i.toHexString() },
@@ -498,17 +648,17 @@ function G({ onChange: t }) {
           o(i), t(i);
         }
       },
-      m
+      T
     )) })
   ] });
 }
-function Ke({ setColorPen: t, setThicknessPen: r }) {
-  const [o, i] = M(2);
-  return /* @__PURE__ */ y("div", { className: l.options, children: [
+function et({ setColorPen: t, setThicknessPen: r }) {
+  const [o, i] = y(2);
+  return /* @__PURE__ */ x("div", { className: l.options, children: [
     /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-      G,
+      $,
       {
-        onChange: (m) => t(m)
+        onChange: (T) => t(T)
       }
     ) }),
     /* @__PURE__ */ e("div", { className: l.line }),
@@ -520,36 +670,36 @@ function Ke({ setColorPen: t, setThicknessPen: r }) {
         step: 0.1,
         type: "range",
         value: o,
-        onChange: (m) => {
-          r(Number.parseFloat(m.target.value)), i(Number.parseFloat(m.target.value));
+        onChange: (T) => {
+          r(Number.parseFloat(T.target.value)), i(Number.parseFloat(T.target.value));
         }
       }
     ) })
   ] });
 }
-function Qe({ setColorHighlight: t }) {
+function tt({ setColorHighlight: t }) {
   return /* @__PURE__ */ e("div", { className: l.options, children: /* @__PURE__ */ e(
-    Xe,
+    Je,
     {
       onChange: (r) => t(r)
     }
   ) });
 }
-function Ye({
+function rt({
   changeColorShape: t,
   changeBorderColorShape: r,
   onThicknessChange: o
 }) {
-  return /* @__PURE__ */ y("div", { className: l.options, children: [
+  return /* @__PURE__ */ x("div", { className: l.options, children: [
     /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-      G,
+      $,
       {
         onChange: (i) => t(i)
       }
     ) }),
     /* @__PURE__ */ e("div", { className: l.line }),
     /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-      G,
+      $,
       {
         onChange: (i) => r(i)
       }
@@ -570,44 +720,44 @@ function Ye({
     ) })
   ] });
 }
-function Je(t) {
+function ot(t) {
   const {
     setColorPen: r,
     refEditor: o,
     setThicknessPen: i,
-    setColorHighlight: m,
-    changeBorderColorShape: p,
-    onUndo: b,
-    changeColorShape: A,
-    changeShape: T,
-    onThicknessChange: z,
-    onRedo: x,
+    setColorHighlight: T,
+    changeBorderColorShape: H,
+    onUndo: S,
+    changeColorShape: w,
+    changeShape: h,
+    onThicknessChange: k,
+    onRedo: b,
     onClear: B
-  } = t, [s, c] = M(null), [C, v] = M(
+  } = t, [a, c] = y(null), [C, f] = y(
     0
     /* square */
   );
-  return /* @__PURE__ */ e(J, { children: /* @__PURE__ */ y(
+  return /* @__PURE__ */ e(U, { children: /* @__PURE__ */ x(
     "div",
     {
       className: l.wrapper,
       children: [
-        /* @__PURE__ */ y("div", { className: l.pen, children: [
+        /* @__PURE__ */ x("div", { className: l.pen, children: [
           /* @__PURE__ */ e(
             "button",
             {
               className: d(l.tool, {
-                [l.active]: s === "select"
+                [l.active]: a === "select"
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                if (s === "select") {
+                if (a === "select") {
                   c(null), n[0].setEnabled(!1);
                   return;
                 }
                 c("select"), n[0].setEnabled(!0);
               },
-              children: /* @__PURE__ */ e(Ne, {})
+              children: /* @__PURE__ */ e(_e, {})
             }
           ),
           /* @__PURE__ */ e("div", { className: l.line }),
@@ -615,17 +765,17 @@ function Je(t) {
             "button",
             {
               className: d(l.tool, {
-                [l.active]: s === "text"
+                [l.active]: a === "text"
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                if (o.current.toolController.setToolEnabled(n[1]), s === "text") {
+                if (o.current.toolController.setToolEnabled(n[1]), a === "text") {
                   n[1].setEnabled(!1), c(null);
                   return;
                 }
                 c("text"), n[1].setEnabled(!0);
               },
-              children: /* @__PURE__ */ e(Se, {})
+              children: /* @__PURE__ */ e(Ae, {})
             }
           ),
           /* @__PURE__ */ e("div", { className: l.line }),
@@ -633,34 +783,34 @@ function Je(t) {
             "button",
             {
               className: d(l.tool, {
-                [l.active]: s === "pencil"
+                [l.active]: a === "pencil"
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                if (s === "pencil") {
+                if (a === "pencil") {
                   c(null), n[2].setEnabled(!1);
                   return;
                 }
                 c("pencil"), n[2].setEnabled(!0);
               },
-              children: /* @__PURE__ */ e(ze, {})
+              children: /* @__PURE__ */ e(Be, {})
             }
           ),
           /* @__PURE__ */ e(
             "button",
             {
               className: d(l.tool, {
-                [l.active]: s === "highlighter"
+                [l.active]: a === "highlighter"
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                if (s === "highlighter") {
+                if (a === "highlighter") {
                   c(null), n[3].setEnabled(!1);
                   return;
                 }
                 c("highlighter"), n[3].setEnabled(!0);
               },
-              children: /* @__PURE__ */ e(ke, {})
+              children: /* @__PURE__ */ e(Pe, {})
             }
           ),
           /* @__PURE__ */ e("div", { className: l.line }),
@@ -668,17 +818,17 @@ function Je(t) {
             "button",
             {
               className: d(l.tool, {
-                [l.active]: s === "eraser"
+                [l.active]: a === "eraser"
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                if (s === "eraser") {
+                if (a === "eraser") {
                   c(null), n[4].setEnabled(!1);
                   return;
                 }
                 c("eraser"), n[4].setEnabled(!0);
               },
-              children: /* @__PURE__ */ e(_e, {})
+              children: /* @__PURE__ */ e(qe, {})
             }
           ),
           /* @__PURE__ */ e("div", { className: l.line }),
@@ -686,240 +836,240 @@ function Je(t) {
             "button",
             {
               className: d(l.tool, {
-                [l.active]: s === "shapes" && C === 0
+                [l.active]: a === "shapes" && C === 0
                 /* square */
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), T(
+                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), h(
                   0
                   /* square */
-                ), v(
+                ), f(
                   0
                   /* square */
                 );
               },
-              children: /* @__PURE__ */ e(Ae, {})
+              children: /* @__PURE__ */ e(Re, {})
             }
           ),
           /* @__PURE__ */ e(
             "button",
             {
               className: d(l.tool, {
-                [l.active]: s === "shapes" && C === 1
+                [l.active]: a === "shapes" && C === 1
                 /* rectangle */
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), T(
+                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), h(
                   1
                   /* rectangle */
-                ), v(
+                ), f(
                   1
                   /* rectangle */
                 );
               },
-              children: /* @__PURE__ */ e(Be, {})
+              children: /* @__PURE__ */ e(Ie, {})
             }
           ),
           /* @__PURE__ */ e(
             "button",
             {
               className: d(l.tool, {
-                [l.active]: s === "shapes" && C === 2
+                [l.active]: a === "shapes" && C === 2
                 /* circle */
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), T(
+                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), h(
                   2
                   /* circle */
-                ), v(
+                ), f(
                   2
                   /* circle */
                 );
               },
-              children: /* @__PURE__ */ e(qe, {})
+              children: /* @__PURE__ */ e(De, {})
             }
           ),
           /* @__PURE__ */ e(
             "button",
             {
               className: d(l.tool, {
-                [l.active]: s === "shapes" && C === 3
+                [l.active]: a === "shapes" && C === 3
                 /* triangle */
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), T(
+                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), h(
                   3
                   /* triangle */
-                ), v(
+                ), f(
                   3
                   /* triangle */
                 );
               },
-              children: /* @__PURE__ */ e(Pe, {})
+              children: /* @__PURE__ */ e(We, {})
             }
           ),
           /* @__PURE__ */ e(
             "button",
             {
               className: d(l.tool, {
-                [l.active]: s === "shapes" && C === 4
+                [l.active]: a === "shapes" && C === 4
                 /* hexagonal */
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), T(
+                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), h(
                   4
                   /* hexagonal */
-                ), v(
+                ), f(
                   4
                   /* hexagonal */
                 );
               },
-              children: /* @__PURE__ */ e(Re, {})
+              children: /* @__PURE__ */ e(Fe, {})
             }
           ),
           /* @__PURE__ */ e(
             "button",
             {
               className: d(l.tool, {
-                [l.active]: s === "shapes" && C === 5
+                [l.active]: a === "shapes" && C === 5
                 /* diamond */
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), T(
+                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), h(
                   5
                   /* diamond */
-                ), v(
+                ), f(
                   5
                   /* diamond */
                 );
               },
-              children: /* @__PURE__ */ e(Ie, {})
+              children: /* @__PURE__ */ e(Oe, {})
             }
           ),
           /* @__PURE__ */ e(
             "button",
             {
               className: d(l.tool, {
-                [l.active]: s === "shapes" && C === 6
+                [l.active]: a === "shapes" && C === 6
                 /* arrow */
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), T(
+                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), h(
                   6
                   /* arrow */
-                ), v(
+                ), f(
                   6
                   /* arrow */
                 );
               },
-              children: /* @__PURE__ */ e(We, {})
+              children: /* @__PURE__ */ e(Ve, {})
             }
           ),
           /* @__PURE__ */ e(
             "button",
             {
               className: d(l.tool, {
-                [l.active]: s === "shapes" && C === 7
+                [l.active]: a === "shapes" && C === 7
                 /* line */
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), T(
+                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), h(
                   7
                   /* line */
-                ), v(
+                ), f(
                   7
                   /* line */
                 );
               },
-              children: /* @__PURE__ */ e(Ve, {})
+              children: /* @__PURE__ */ e(Ze, {})
             }
           ),
           /* @__PURE__ */ e(
             "button",
             {
               className: d(l.tool, {
-                [l.active]: s === "shapes" && C === 8
+                [l.active]: a === "shapes" && C === 8
                 /* heart */
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), T(
+                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), h(
                   8
                   /* heart */
-                ), v(
+                ), f(
                   8
                   /* heart */
                 );
               },
-              children: /* @__PURE__ */ e(Ge, {})
+              children: /* @__PURE__ */ e(je, {})
             }
           ),
           /* @__PURE__ */ e(
             "button",
             {
               className: d(l.tool, {
-                [l.active]: s === "shapes" && C === 9
+                [l.active]: a === "shapes" && C === 9
                 /* star */
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), T(
+                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), h(
                   9
                   /* star */
-                ), v(
+                ), f(
                   9
                   /* star */
                 );
               },
-              children: /* @__PURE__ */ e($e, {})
+              children: /* @__PURE__ */ e(Xe, {})
             }
           ),
           /* @__PURE__ */ e(
             "button",
             {
               className: d(l.tool, {
-                [l.active]: s === "shapes" && C === 10
+                [l.active]: a === "shapes" && C === 10
                 /* cloud */
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), T(
+                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), h(
                   10
                   /* cloud */
-                ), v(
+                ), f(
                   10
                   /* cloud */
                 );
               },
-              children: /* @__PURE__ */ e(Ue, {})
+              children: /* @__PURE__ */ e(Ke, {})
             }
           ),
           /* @__PURE__ */ e(
             "button",
             {
               className: d(l.tool, {
-                [l.active]: s === "shapes" && C === 11
+                [l.active]: a === "shapes" && C === 11
                 /* parallelogram */
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), T(
+                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), h(
                   11
                   /* parallelogram */
-                ), v(
+                ), f(
                   11
                   /* parallelogram */
                 );
               },
-              children: /* @__PURE__ */ e(je, {})
+              children: /* @__PURE__ */ e(Qe, {})
             }
           ),
           /* @__PURE__ */ e("div", { className: l.line }),
@@ -927,16 +1077,16 @@ function Je(t) {
             "button",
             {
               className: d(l.tool),
-              onClick: b,
-              children: /* @__PURE__ */ e(Fe, {})
+              onClick: S,
+              children: /* @__PURE__ */ e(Ge, {})
             }
           ),
           /* @__PURE__ */ e(
             "button",
             {
               className: d(l.tool),
-              onClick: x,
-              children: /* @__PURE__ */ e(De, {})
+              onClick: b,
+              children: /* @__PURE__ */ e($e, {})
             }
           ),
           /* @__PURE__ */ e(
@@ -944,26 +1094,26 @@ function Je(t) {
             {
               className: d(l.tool),
               onClick: B,
-              children: /* @__PURE__ */ e(Oe, {})
+              children: /* @__PURE__ */ e(Ue, {})
             }
           )
         ] }),
-        /* @__PURE__ */ y("div", { className: l.optionsWrap, children: [
-          s === "pencil" && /* @__PURE__ */ e(
-            Ke,
+        /* @__PURE__ */ x("div", { className: l.optionsWrap, children: [
+          a === "pencil" && /* @__PURE__ */ e(
+            et,
             {
               setColorPen: r,
               setThicknessPen: i
             }
           ),
-          s === "highlighter" && /* @__PURE__ */ e(Qe, { setColorHighlight: m }),
-          s === "shapes" && /* @__PURE__ */ e(
-            Ye,
+          a === "highlighter" && /* @__PURE__ */ e(tt, { setColorHighlight: T }),
+          a === "shapes" && /* @__PURE__ */ e(
+            rt,
             {
-              changeBorderColorShape: p,
-              changeColorShape: A,
-              changeShape: T,
-              onThicknessChange: z
+              changeBorderColorShape: H,
+              changeColorShape: w,
+              changeShape: h,
+              onThicknessChange: k
             }
           )
         ] })
@@ -971,90 +1121,103 @@ function Je(t) {
     }
   ) });
 }
-let P = !1;
-const et = ({ editor: t, upload: r, tooltipOptions: o }) => {
-  const [i, m] = M(!1), p = X(null), b = X(null), A = () => {
+let I = !1;
+function Tt() {
+  const t = Te(), r = se(lt.name), {
+    isActive: o = void 0,
+    upload: i
+  } = (r == null ? void 0 : r.componentProps) ?? {}, { editorDisabled: T } = ae(o), [H, S] = y(!1), w = K(null), h = K(null), k = () => {
     (async () => {
-      const a = document.querySelector("#easydrawer");
-      a && (p.current = new me(a, {
+      const s = document.querySelector("#easydrawer");
+      s && (w.current = new ce(s, {
         wheelEventsEnabled: !1,
         disableZoom: !0
-      }), b.current = pe(p.current), b.current.addDefaultToolWidgets());
+      }), h.current = he(w.current), h.current.addDefaultToolWidgets());
     })();
   };
-  V(() => {
-    i && setTimeout(() => {
-      A();
+  G(() => {
+    H && setTimeout(() => {
+      k();
     }, 200);
-  }, [i]);
-  const T = async () => {
-    if (p.current) {
-      const f = p.current.toSVG(), a = f.outerHTML, u = `drawer-${we()}.svg`;
-      let S = ve(f.outerHTML);
-      if (r) {
-        const I = ce(S, u);
-        S = await r(I);
+  }, [H]);
+  const b = async () => {
+    if (w.current) {
+      const m = w.current.toSVG(), s = m.outerHTML, p = `drawer-${ue()}.svg`;
+      let z = de(m.outerHTML);
+      if (i) {
+        const q = Ce(z, p);
+        z = await i(q);
       }
       t == null || t.chain().focus().setDrawer(
         {
           type: "drawer",
-          src: S,
-          alt: encodeURIComponent(a),
+          src: z,
+          alt: encodeURIComponent(s),
           width: 426,
           height: 212
         },
-        !!a
+        !!s
       ).run();
     }
-    m(!1);
-  }, z = (f) => {
-    const a = p.current.toolController.getPrimaryTools()[2], u = b.current.getWidgetById("pen-1");
-    a && u && (a.setColor(f), u.serializeState());
-  }, x = (f) => {
-    const a = p.current.toolController.getPrimaryTools()[2], u = b.current.getWidgetById("pen-1");
-    a && u && (a.setThickness(f), u.serializeState());
-  }, B = (f) => {
-    const a = p.current.toolController.getPrimaryTools()[3], u = b.current.getWidgetById("pen-2");
-    a && u && (a.setColor(f), u.serializeState());
-  }, s = (f) => {
-    const a = b.current.getWidgetById("shape");
-    a && a.setShapeType(f);
-  }, c = (f) => {
-    const a = p.current.toolController.getPrimaryTools()[5], u = b.current.getWidgetById("shape");
-    a && u && (a.setColor(f), u.serializeState());
-  }, C = (f) => {
-    const a = p.current.toolController.getPrimaryTools()[5], u = b.current.getWidgetById("shape");
-    a && u && (a.setThickness(f), u.serializeState());
-  }, v = (f) => {
-    const a = p.current.toolController.getPrimaryTools()[5], u = b.current.getWidgetById("shape");
-    a && u && (a.setBorderColor(f), u.serializeState());
-  }, n = () => {
-    if (P) {
-      for (; p.current.history.redoStackSize > 0; )
-        p.current.history.redo();
-      P = !1;
+    S(!1);
+  }, B = (m) => {
+    const s = w.current.toolController.getPrimaryTools()[2], p = h.current.getWidgetById("pen-1");
+    s && p && (s.setColor(m), p.serializeState());
+  }, a = (m) => {
+    const s = w.current.toolController.getPrimaryTools()[2], p = h.current.getWidgetById("pen-1");
+    s && p && (s.setThickness(m), p.serializeState());
+  }, c = (m) => {
+    const s = w.current.toolController.getPrimaryTools()[3], p = h.current.getWidgetById("pen-2");
+    s && p && (s.setColor(m), p.serializeState());
+  }, C = (m) => {
+    const s = h.current.getWidgetById("shape");
+    s && s.setShapeType(m);
+  }, f = (m) => {
+    const s = w.current.toolController.getPrimaryTools()[5], p = h.current.getWidgetById("shape");
+    s && p && (s.setColor(m), p.serializeState());
+  }, n = (m) => {
+    const s = w.current.toolController.getPrimaryTools()[5], p = h.current.getWidgetById("shape");
+    s && p && (s.setThickness(m), p.serializeState());
+  }, F = (m) => {
+    const s = w.current.toolController.getPrimaryTools()[5], p = h.current.getWidgetById("shape");
+    s && p && (s.setBorderColor(m), p.serializeState());
+  }, P = () => {
+    if (I) {
+      for (; w.current.history.redoStackSize > 0; )
+        w.current.history.redo();
+      I = !1;
       return;
     }
-    p.current.history.undo();
+    w.current.history.undo();
+  }, D = () => {
+    I || w.current.history.redo();
+  }, O = () => {
+    if (!I) {
+      for (; w.current.history.undoStackSize > 0; )
+        P();
+      I = !0;
+    }
   };
-  return /* @__PURE__ */ y(
-    re,
+  return r ? /* @__PURE__ */ x(
+    me,
     {
-      onOpenChange: m,
-      open: i,
+      onOpenChange: S,
+      open: H,
       children: [
-        /* @__PURE__ */ e(oe, { asChild: !0, children: /* @__PURE__ */ e(
-          le,
+        /* @__PURE__ */ e(pe, { asChild: !0, children: /* @__PURE__ */ e(
+          ge,
           {
-            action: () => m(!0),
+            disabled: T,
+            action: () => {
+              T || S(!0);
+            },
             icon: "PencilRuler",
-            tooltip: "Drawer",
-            tooltipOptions: o
+            tooltip: "Drawer"
           }
         ) }),
-        /* @__PURE__ */ y(ne, { className: "richtext-z-[99999] !richtext-max-w-[1300px]", children: [
-          /* @__PURE__ */ e(ie, { children: "Drawer" }),
-          /* @__PURE__ */ y("div", { style: { height: "600px", width: "100%", borderWidth: 1, background: "white", position: "relative" }, children: [
+        /* @__PURE__ */ x(we, { className: "richtext-z-[99999] !richtext-max-w-[1300px]", children: [
+          /* @__PURE__ */ e(ve, { children: "Drawer" }),
+          /* @__PURE__ */ x("div", { style: { height: "600px", width: "100%", borderWidth: 1, background: "white", position: "relative" }, children: [
             /* @__PURE__ */ e(
               "div",
               {
@@ -1063,34 +1226,26 @@ const et = ({ editor: t, upload: r, tooltipOptions: o }) => {
               }
             ),
             /* @__PURE__ */ e(
-              Je,
+              ot,
               {
-                changeBorderColorShape: v,
-                changeColorShape: c,
-                changeShape: s,
-                onClear: () => {
-                  if (!P) {
-                    for (; p.current.history.undoStackSize > 0; )
-                      n();
-                    P = !0;
-                  }
-                },
-                onRedo: () => {
-                  P || p.current.history.redo();
-                },
-                onThicknessChange: C,
-                onUndo: n,
-                refEditor: p,
-                setColorHighlight: B,
-                setColorPen: z,
-                setThicknessPen: x
+                changeBorderColorShape: F,
+                changeColorShape: f,
+                changeShape: C,
+                onClear: O,
+                onRedo: D,
+                onThicknessChange: n,
+                onUndo: P,
+                refEditor: w,
+                setColorHighlight: c,
+                setColorPen: B,
+                setThicknessPen: a
               }
             )
           ] }),
-          /* @__PURE__ */ e(se, { children: /* @__PURE__ */ e(
-            ae,
+          /* @__PURE__ */ e(fe, { children: /* @__PURE__ */ e(
+            be,
             {
-              onClick: T,
+              onClick: b,
               type: "button",
               children: "Save changes"
             }
@@ -1098,154 +1253,10 @@ const et = ({ editor: t, upload: r, tooltipOptions: o }) => {
         ] })
       ]
     }
-  );
-}, W = {
-  TOP_LEFT: "tl",
-  TOP_RIGHT: "tr",
-  BOTTOM_LEFT: "bl",
-  BOTTOM_RIGHT: "br"
-};
-function tt({ editor: t, node: r, updateAttributes: o, getPos: i, selected: m }) {
-  const [p, b] = M({
-    width: K,
-    height: K
-  }), [A, T] = M({
-    width: 0,
-    height: 0
-  }), [z] = M([
-    W.TOP_LEFT,
-    W.TOP_RIGHT,
-    W.BOTTOM_LEFT,
-    W.BOTTOM_RIGHT
-  ]), [x, B] = M(!1), [s, c] = M({
-    x: 0,
-    y: 0,
-    w: 0,
-    h: 0,
-    dir: ""
-  }), { align: C } = r == null ? void 0 : r.attrs, v = O(() => {
-    const { src: h, alt: E, width: L, height: k } = r == null ? void 0 : r.attrs, _ = j(L) ? `${L}px` : L, w = j(k) ? `${k}px` : k;
-    return {
-      src: h || void 0,
-      alt: E || void 0,
-      style: {
-        width: _ || void 0,
-        height: w || void 0
-      }
-    };
-  }, [r == null ? void 0 : r.attrs]), n = O(() => {
-    const {
-      style: { width: h }
-    } = v;
-    return { width: h === "100%" ? h : void 0 };
-  }, [v]);
-  function $(h) {
-    T({
-      width: h.target.width,
-      height: h.target.height
-    });
-  }
-  function R() {
-    t.commands.setNodeSelection(i());
-  }
-  const f = q(
-    Z(() => {
-      const { width: h } = getComputedStyle(t.view.dom);
-      b((E) => ({
-        ...E,
-        width: Number.parseInt(h, 10)
-      }));
-    }, Q),
-    [t]
-  );
-  function a(h, E) {
-    h.preventDefault(), h.stopPropagation();
-    const L = A.width, k = A.height, _ = L / k;
-    let w = Number(r.attrs.width), N = Number(r.attrs.height);
-    const H = p.width;
-    w && !N ? (w = w > H ? H : w, N = Math.round(w / _)) : N && !w ? (w = Math.round(N * _), w = w > H ? H : w) : !w && !N ? (w = L > H ? H : L, N = Math.round(w / _)) : w = w > H ? H : w, B(!0), c({
-      x: h.clientX,
-      y: h.clientY,
-      w,
-      h: N,
-      dir: E
-    });
-  }
-  const u = q(
-    Z((h) => {
-      if (h.preventDefault(), h.stopPropagation(), !x)
-        return;
-      const { x: E, w: L, dir: k } = s, _ = (h.clientX - E) * (/l/.test(k) ? -1 : 1), { width: w, height: N } = r == null ? void 0 : r.attrs, H = w / N, U = he(L + _, fe, p.width), ee = Math.round(U / H);
-      o({
-        width: U,
-        height: ee
-      });
-    }, Q),
-    [x, s, p, o, r == null ? void 0 : r.attrs]
-  ), S = q(
-    (h) => {
-      h.preventDefault(), h.stopPropagation(), x && (c({
-        x: 0,
-        y: 0,
-        w: 0,
-        h: 0,
-        dir: ""
-      }), B(!1), R());
-    },
-    [x, R]
-  ), I = q(() => {
-    document == null || document.addEventListener("mousemove", u, !0), document == null || document.addEventListener("mouseup", S, !0);
-  }, [u, S]), F = q(() => {
-    document == null || document.removeEventListener("mousemove", u, !0), document == null || document.removeEventListener("mouseup", S, !0);
-  }, [u, S]);
-  V(() => (x ? I() : F(), () => {
-    F();
-  }), [x, I, F]);
-  const D = O(() => new ResizeObserver(() => f()), [f]);
-  return V(() => (D.observe(t.view.dom), () => {
-    D.disconnect();
-  }), [t.view.dom, D]), /* @__PURE__ */ e(
-    de,
-    {
-      className: "image-view",
-      style: { ...n, width: "100%", textAlign: C },
-      children: /* @__PURE__ */ y(
-        "div",
-        {
-          "data-drag-handle": !0,
-          draggable: "true",
-          style: { ...n, background: "#fff" },
-          className: `image-view__body ${m ? "image-view__body--focused" : ""} ${x ? "image-view__body--resizing" : ""}`,
-          children: [
-            /* @__PURE__ */ e(
-              "img",
-              {
-                alt: v.alt,
-                className: "image-view__body__image block",
-                height: "auto",
-                onClick: R,
-                onLoad: $,
-                src: v.src,
-                style: v.style
-              }
-            ),
-            t.view.editable && (m || x) && /* @__PURE__ */ e("div", { className: "image-resizer", children: z == null ? void 0 : z.map((h) => /* @__PURE__ */ e(
-              "span",
-              {
-                className: `image-resizer__handler image-resizer__handler--${h}`,
-                onMouseDown: (E) => a(E, h)
-              },
-              `image-dir-${h}`
-            )) })
-          ]
-        }
-      )
-    }
-  );
+  ) : /* @__PURE__ */ e(U, {});
 }
-const ht = /* @__PURE__ */ ue.extend({
-  name: "drawer",
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+const lt = /* @__PURE__ */ re.extend({
+  name: "richTextDrawer",
   //@ts-expect-error
   addOptions() {
     var t;
@@ -1261,18 +1272,16 @@ const ht = /* @__PURE__ */ ue.extend({
       HTMLAttributes: {
         class: "drawer"
       },
-      button: ({ editor: r, t: o, extension: i }) => {
-        var m;
+      button: ({ t: r, extension: o }) => {
+        var i;
         return {
-          component: et,
           componentProps: {
             action: () => !0,
             isActive: () => !1,
             disabled: !1,
-            editor: r,
             icon: "PencilRuler",
-            tooltip: o("editor.drawer.tooltip"),
-            upload: (m = i == null ? void 0 : i.options) == null ? void 0 : m.upload
+            tooltip: r("editor.drawer.tooltip"),
+            upload: (i = o == null ? void 0 : o.options) == null ? void 0 : i.upload
           }
         };
       }
@@ -1312,7 +1321,7 @@ const ht = /* @__PURE__ */ ue.extend({
     };
   },
   addNodeView() {
-    return ge(tt);
+    return le(xe);
   },
   // @ts-ignore
   addCommands() {
@@ -1365,6 +1374,7 @@ const ht = /* @__PURE__ */ ue.extend({
   }
 });
 export {
-  Je as C,
-  ht as D
+  ot as C,
+  lt as D,
+  Tt as R
 };