reactjs-tiptap-editor 0.3.30 → 0.3.31

package/lib/{Drawer-BKTU9CpU.js → Drawer-BHkje8ys.js}

@@ -1,8 +1,8 @@
 import { h as j, m as te } from "./index-DI9T3iLd.js";
-import { d, w as re, x as oe, A as le, y as ne, z as ie, F as se, B as ae, G as ce, J as Z, K as he, N as ue } from "./RichTextEditor-BQN2eLD_.js";
+import { d, w as re, x as oe, A as le, y as ne, z as ie, F as se, B as ae, G as ce, J as Z, K as he, N as ue } from "./RichTextEditor-KP2Rgcqe.js";
 import { N as de, R as ge } from "./dom-dataset-Di3tIRrR.js";
-import { jsx as e, jsxs as x, Fragment as Y } from "react/jsx-runtime";
-import { useState as y, useRef as X, useEffect as O, useMemo as D, useCallback as q } from "react";
+import { jsx as e, jsxs as y, Fragment as Y } from "react/jsx-runtime";
+import { useState as M, useRef as X, useEffect as V, useMemo as O, useCallback as P } 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 J } from "./index-CsK90iVd.js";
@@ -99,7 +99,7 @@ function ke(t) {
   );
 }
 function _e(t) {
-  return /* @__PURE__ */ x(
+  return /* @__PURE__ */ y(
     "svg",
     {
       height: "1em",
@@ -234,7 +234,7 @@ function Ie(t) {
       width: "1em",
       xmlns: "http://www.w3.org/2000/svg",
       ...t,
-      children: /* @__PURE__ */ x(
+      children: /* @__PURE__ */ y(
         "g",
         {
           fill: "none",
@@ -456,8 +456,8 @@ const Ze = [
   g.fromHex("#AADC99")
 ];
 function Xe({ onChange: t }) {
-  const [r, o] = y(g.blackHighlight);
-  return /* @__PURE__ */ e("div", { className: l.colorWrap, children: Ze.map((i, s) => /* @__PURE__ */ e(
+  const [r, o] = M(g.blackHighlight);
+  return /* @__PURE__ */ e("div", { className: l.colorWrap, children: Ze.map((i, m) => /* @__PURE__ */ e(
     "button",
     {
       style: { backgroundColor: i.toHexString() },
@@ -468,13 +468,13 @@ function Xe({ onChange: t }) {
         o(i), t(i);
       }
     },
-    s
+    m
   )) });
 }
-function V({ onChange: t }) {
-  const [r, o] = y(g.black);
-  return /* @__PURE__ */ x(Y, { children: [
-    /* @__PURE__ */ e("div", { className: l.colorWrap, children: Q.slice(0, 7).map((i, s) => /* @__PURE__ */ e(
+function G({ onChange: t }) {
+  const [r, o] = M(g.black);
+  return /* @__PURE__ */ y(Y, { children: [
+    /* @__PURE__ */ e("div", { className: l.colorWrap, children: Q.slice(0, 7).map((i, m) => /* @__PURE__ */ e(
       "button",
       {
         style: { backgroundColor: i.toHexString() },
@@ -485,9 +485,9 @@ function V({ onChange: t }) {
           o(i), t(i);
         }
       },
-      s
+      m
     )) }),
-    /* @__PURE__ */ e("div", { className: l.colorWrap, children: Q.slice(7).map((i, s) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e("div", { className: l.colorWrap, children: Q.slice(7).map((i, m) => /* @__PURE__ */ e(
       "button",
       {
         style: { backgroundColor: i.toHexString() },
@@ -498,17 +498,17 @@ function V({ onChange: t }) {
           o(i), t(i);
         }
       },
-      s
+      m
     )) })
   ] });
 }
 function Ke({ setColorPen: t, setThicknessPen: r }) {
-  const [o, i] = y(2);
-  return /* @__PURE__ */ x("div", { className: l.options, children: [
+  const [o, i] = M(2);
+  return /* @__PURE__ */ y("div", { className: l.options, children: [
     /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-      V,
+      G,
       {
-        onChange: (s) => t(s)
+        onChange: (m) => t(m)
       }
     ) }),
     /* @__PURE__ */ e("div", { className: l.line }),
@@ -520,8 +520,8 @@ function Ke({ setColorPen: t, setThicknessPen: r }) {
         step: 0.1,
         type: "range",
         value: o,
-        onChange: (s) => {
-          r(Number.parseFloat(s.target.value)), i(Number.parseFloat(s.target.value));
+        onChange: (m) => {
+          r(Number.parseFloat(m.target.value)), i(Number.parseFloat(m.target.value));
         }
       }
     ) })
@@ -540,16 +540,16 @@ function Qe({
   changeBorderColorShape: r,
   onThicknessChange: o
 }) {
-  return /* @__PURE__ */ x("div", { className: l.options, children: [
+  return /* @__PURE__ */ y("div", { className: l.options, children: [
     /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-      V,
+      G,
       {
         onChange: (i) => t(i)
       }
     ) }),
     /* @__PURE__ */ e("div", { className: l.line }),
     /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-      V,
+      G,
       {
         onChange: (i) => r(i)
       }
@@ -575,37 +575,37 @@ function Ye(t) {
     setColorPen: r,
     refEditor: o,
     setThicknessPen: i,
-    setColorHighlight: s,
-    changeBorderColorShape: C,
-    onUndo: P,
-    changeColorShape: _,
-    changeShape: f,
-    onThicknessChange: S,
-    onRedo: b,
-    onClear: A
-  } = t, [a, h] = y(null), [T, m] = y(
+    setColorHighlight: m,
+    changeBorderColorShape: p,
+    onUndo: b,
+    changeColorShape: A,
+    changeShape: T,
+    onThicknessChange: z,
+    onRedo: x,
+    onClear: B
+  } = t, [s, c] = M(null), [C, v] = M(
     0
     /* square */
   );
-  return /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ x(
+  return /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ y(
     "div",
     {
       className: l.wrapper,
       children: [
-        /* @__PURE__ */ x("div", { className: l.pen, children: [
+        /* @__PURE__ */ y("div", { className: l.pen, children: [
           /* @__PURE__ */ e(
             "button",
             {
               className: d(l.tool, {
-                [l.active]: a === "select"
+                [l.active]: s === "select"
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                if (a === "select") {
-                  h(null), n[0].setEnabled(!1);
+                if (s === "select") {
+                  c(null), n[0].setEnabled(!1);
                   return;
                 }
-                h("select"), n[0].setEnabled(!0);
+                c("select"), n[0].setEnabled(!0);
               },
               children: /* @__PURE__ */ e(Ne, {})
             }
@@ -615,15 +615,15 @@ function Ye(t) {
             "button",
             {
               className: d(l.tool, {
-                [l.active]: a === "text"
+                [l.active]: s === "text"
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                if (o.current.toolController.setToolEnabled(n[1]), a === "text") {
-                  n[1].setEnabled(!1), h(null);
+                if (o.current.toolController.setToolEnabled(n[1]), s === "text") {
+                  n[1].setEnabled(!1), c(null);
                   return;
                 }
-                h("text"), n[1].setEnabled(!0);
+                c("text"), n[1].setEnabled(!0);
               },
               children: /* @__PURE__ */ e(Se, {})
             }
@@ -633,15 +633,15 @@ function Ye(t) {
             "button",
             {
               className: d(l.tool, {
-                [l.active]: a === "pencil"
+                [l.active]: s === "pencil"
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                if (a === "pencil") {
-                  h(null), n[2].setEnabled(!1);
+                if (s === "pencil") {
+                  c(null), n[2].setEnabled(!1);
                   return;
                 }
-                h("pencil"), n[2].setEnabled(!0);
+                c("pencil"), n[2].setEnabled(!0);
               },
               children: /* @__PURE__ */ e(ze, {})
             }
@@ -650,15 +650,15 @@ function Ye(t) {
             "button",
             {
               className: d(l.tool, {
-                [l.active]: a === "highlighter"
+                [l.active]: s === "highlighter"
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                if (a === "highlighter") {
-                  h(null), n[3].setEnabled(!1);
+                if (s === "highlighter") {
+                  c(null), n[3].setEnabled(!1);
                   return;
                 }
-                h("highlighter"), n[3].setEnabled(!0);
+                c("highlighter"), n[3].setEnabled(!0);
               },
               children: /* @__PURE__ */ e(ke, {})
             }
@@ -668,15 +668,15 @@ function Ye(t) {
             "button",
             {
               className: d(l.tool, {
-                [l.active]: a === "eraser"
+                [l.active]: s === "eraser"
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                if (a === "eraser") {
-                  h(null), n[4].setEnabled(!1);
+                if (s === "eraser") {
+                  c(null), n[4].setEnabled(!1);
                   return;
                 }
-                h("eraser"), n[4].setEnabled(!0);
+                c("eraser"), n[4].setEnabled(!0);
               },
               children: /* @__PURE__ */ e(_e, {})
             }
@@ -686,15 +686,15 @@ function Ye(t) {
             "button",
             {
               className: d(l.tool, {
-                [l.active]: a === "shapes" && T === 0
+                [l.active]: s === "shapes" && C === 0
                 /* square */
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                o.current.toolController.setToolEnabled(n[5]), h("shapes"), n[5].setEnabled(!0), f(
+                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), T(
                   0
                   /* square */
-                ), m(
+                ), v(
                   0
                   /* square */
                 );
@@ -706,15 +706,15 @@ function Ye(t) {
             "button",
             {
               className: d(l.tool, {
-                [l.active]: a === "shapes" && T === 1
+                [l.active]: s === "shapes" && C === 1
                 /* rectangle */
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                o.current.toolController.setToolEnabled(n[5]), h("shapes"), n[5].setEnabled(!0), f(
+                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), T(
                   1
                   /* rectangle */
-                ), m(
+                ), v(
                   1
                   /* rectangle */
                 );
@@ -726,15 +726,15 @@ function Ye(t) {
             "button",
             {
               className: d(l.tool, {
-                [l.active]: a === "shapes" && T === 2
+                [l.active]: s === "shapes" && C === 2
                 /* circle */
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                o.current.toolController.setToolEnabled(n[5]), h("shapes"), n[5].setEnabled(!0), f(
+                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), T(
                   2
                   /* circle */
-                ), m(
+                ), v(
                   2
                   /* circle */
                 );
@@ -746,15 +746,15 @@ function Ye(t) {
             "button",
             {
               className: d(l.tool, {
-                [l.active]: a === "shapes" && T === 3
+                [l.active]: s === "shapes" && C === 3
                 /* triangle */
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                o.current.toolController.setToolEnabled(n[5]), h("shapes"), n[5].setEnabled(!0), f(
+                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), T(
                   3
                   /* triangle */
-                ), m(
+                ), v(
                   3
                   /* triangle */
                 );
@@ -766,15 +766,15 @@ function Ye(t) {
             "button",
             {
               className: d(l.tool, {
-                [l.active]: a === "shapes" && T === 4
+                [l.active]: s === "shapes" && C === 4
                 /* hexagonal */
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                o.current.toolController.setToolEnabled(n[5]), h("shapes"), n[5].setEnabled(!0), f(
+                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), T(
                   4
                   /* hexagonal */
-                ), m(
+                ), v(
                   4
                   /* hexagonal */
                 );
@@ -786,15 +786,15 @@ function Ye(t) {
             "button",
             {
               className: d(l.tool, {
-                [l.active]: a === "shapes" && T === 5
+                [l.active]: s === "shapes" && C === 5
                 /* diamond */
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                o.current.toolController.setToolEnabled(n[5]), h("shapes"), n[5].setEnabled(!0), f(
+                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), T(
                   5
                   /* diamond */
-                ), m(
+                ), v(
                   5
                   /* diamond */
                 );
@@ -806,15 +806,15 @@ function Ye(t) {
             "button",
             {
               className: d(l.tool, {
-                [l.active]: a === "shapes" && T === 6
+                [l.active]: s === "shapes" && C === 6
                 /* arrow */
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                o.current.toolController.setToolEnabled(n[5]), h("shapes"), n[5].setEnabled(!0), f(
+                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), T(
                   6
                   /* arrow */
-                ), m(
+                ), v(
                   6
                   /* arrow */
                 );
@@ -826,15 +826,15 @@ function Ye(t) {
             "button",
             {
               className: d(l.tool, {
-                [l.active]: a === "shapes" && T === 7
+                [l.active]: s === "shapes" && C === 7
                 /* line */
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                o.current.toolController.setToolEnabled(n[5]), h("shapes"), n[5].setEnabled(!0), f(
+                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), T(
                   7
                   /* line */
-                ), m(
+                ), v(
                   7
                   /* line */
                 );
@@ -846,15 +846,15 @@ function Ye(t) {
             "button",
             {
               className: d(l.tool, {
-                [l.active]: a === "shapes" && T === 8
+                [l.active]: s === "shapes" && C === 8
                 /* heart */
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                o.current.toolController.setToolEnabled(n[5]), h("shapes"), n[5].setEnabled(!0), f(
+                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), T(
                   8
                   /* heart */
-                ), m(
+                ), v(
                   8
                   /* heart */
                 );
@@ -866,15 +866,15 @@ function Ye(t) {
             "button",
             {
               className: d(l.tool, {
-                [l.active]: a === "shapes" && T === 9
+                [l.active]: s === "shapes" && C === 9
                 /* star */
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                o.current.toolController.setToolEnabled(n[5]), h("shapes"), n[5].setEnabled(!0), f(
+                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), T(
                   9
                   /* star */
-                ), m(
+                ), v(
                   9
                   /* star */
                 );
@@ -886,15 +886,15 @@ function Ye(t) {
             "button",
             {
               className: d(l.tool, {
-                [l.active]: a === "shapes" && T === 10
+                [l.active]: s === "shapes" && C === 10
                 /* cloud */
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                o.current.toolController.setToolEnabled(n[5]), h("shapes"), n[5].setEnabled(!0), f(
+                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), T(
                   10
                   /* cloud */
-                ), m(
+                ), v(
                   10
                   /* cloud */
                 );
@@ -906,15 +906,15 @@ function Ye(t) {
             "button",
             {
               className: d(l.tool, {
-                [l.active]: a === "shapes" && T === 11
+                [l.active]: s === "shapes" && C === 11
                 /* parallelogram */
               }),
               onClick: () => {
                 const n = o.current.toolController.getPrimaryTools();
-                o.current.toolController.setToolEnabled(n[5]), h("shapes"), n[5].setEnabled(!0), f(
+                o.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), T(
                   11
                   /* parallelogram */
-                ), m(
+                ), v(
                   11
                   /* parallelogram */
                 );
@@ -927,7 +927,7 @@ function Ye(t) {
             "button",
             {
               className: d(l.tool),
-              onClick: P,
+              onClick: b,
               children: /* @__PURE__ */ e(Fe, {})
             }
           ),
@@ -935,7 +935,7 @@ function Ye(t) {
             "button",
             {
               className: d(l.tool),
-              onClick: b,
+              onClick: x,
               children: /* @__PURE__ */ e(De, {})
             }
           ),
@@ -943,27 +943,27 @@ function Ye(t) {
             "button",
             {
               className: d(l.tool),
-              onClick: A,
+              onClick: B,
               children: /* @__PURE__ */ e(Oe, {})
             }
           )
         ] }),
-        /* @__PURE__ */ x("div", { className: l.optionsWrap, children: [
-          a === "pencil" && /* @__PURE__ */ e(
+        /* @__PURE__ */ y("div", { className: l.optionsWrap, children: [
+          s === "pencil" && /* @__PURE__ */ e(
             Ke,
             {
               setColorPen: r,
               setThicknessPen: i
             }
           ),
-          a === "highlighter" && /* @__PURE__ */ e(Je, { setColorHighlight: s }),
-          a === "shapes" && /* @__PURE__ */ e(
+          s === "highlighter" && /* @__PURE__ */ e(Je, { setColorHighlight: m }),
+          s === "shapes" && /* @__PURE__ */ e(
             Qe,
             {
-              changeBorderColorShape: C,
-              changeColorShape: _,
-              changeShape: f,
-              onThicknessChange: S
+              changeBorderColorShape: p,
+              changeColorShape: A,
+              changeShape: T,
+              onThicknessChange: z
             }
           )
         ] })
@@ -971,89 +971,90 @@ function Ye(t) {
     }
   ) });
 }
-let R = !1;
-const et = ({ editor: t, upload: r }) => {
-  const [o, i] = y(!1), s = X(null), C = X(null), P = () => {
+let q = !1;
+const et = ({ editor: t, upload: r, tooltipOptions: o }) => {
+  const [i, m] = M(!1), p = X(null), b = X(null), A = () => {
     (async () => {
-      const c = document.querySelector("#easydrawer");
-      c && (s.current = new me(c, {
+      const a = document.querySelector("#easydrawer");
+      a && (p.current = new me(a, {
         wheelEventsEnabled: !1,
         disableZoom: !0
-      }), C.current = pe(s.current), C.current.addDefaultToolWidgets());
+      }), b.current = pe(p.current), b.current.addDefaultToolWidgets());
     })();
   };
-  O(() => {
-    o && setTimeout(() => {
-      P();
+  V(() => {
+    i && setTimeout(() => {
+      A();
     }, 200);
-  }, [o]);
-  const _ = async () => {
-    if (s.current) {
-      const p = s.current.toSVG(), c = p.outerHTML, w = `drawer-${we()}.svg`;
-      let N = ve(p.outerHTML);
+  }, [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 B = ce(N, w);
-        N = await r(B);
+        const I = ce(S, u);
+        S = await r(I);
       }
       t == null || t.chain().focus().setDrawer(
         {
           type: "drawer",
-          src: N,
-          alt: encodeURIComponent(c),
+          src: S,
+          alt: encodeURIComponent(a),
           width: 426,
           height: 212
         },
-        !!c
+        !!a
       ).run();
     }
-    i(!1);
-  }, f = (p) => {
-    const c = s.current.toolController.getPrimaryTools()[2], w = C.current.getWidgetById("pen-1");
-    c && w && (c.setColor(p), w.serializeState());
-  }, S = (p) => {
-    const c = s.current.toolController.getPrimaryTools()[2], w = C.current.getWidgetById("pen-1");
-    c && w && (c.setThickness(p), w.serializeState());
-  }, b = (p) => {
-    const c = s.current.toolController.getPrimaryTools()[3], w = C.current.getWidgetById("pen-2");
-    c && w && (c.setColor(p), w.serializeState());
-  }, A = (p) => {
-    const c = C.current.getWidgetById("shape");
-    c && c.setShapeType(p);
-  }, a = (p) => {
-    const c = s.current.toolController.getPrimaryTools()[5], w = C.current.getWidgetById("shape");
-    c && w && (c.setColor(p), w.serializeState());
-  }, h = (p) => {
-    const c = s.current.toolController.getPrimaryTools()[5], w = C.current.getWidgetById("shape");
-    c && w && (c.setThickness(p), w.serializeState());
-  }, T = (p) => {
-    const c = s.current.toolController.getPrimaryTools()[5], w = C.current.getWidgetById("shape");
-    c && w && (c.setBorderColor(p), w.serializeState());
-  }, m = () => {
-    if (R) {
-      for (; s.current.history.redoStackSize > 0; )
-        s.current.history.redo();
-      R = !1;
+    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 (q) {
+      for (; p.current.history.redoStackSize > 0; )
+        p.current.history.redo();
+      q = !1;
       return;
     }
-    s.current.history.undo();
+    p.current.history.undo();
   };
-  return /* @__PURE__ */ x(
+  return /* @__PURE__ */ y(
     re,
     {
-      onOpenChange: i,
-      open: o,
+      onOpenChange: m,
+      open: i,
       children: [
         /* @__PURE__ */ e(oe, { asChild: !0, children: /* @__PURE__ */ e(
           le,
           {
-            action: () => i(!0),
+            action: () => m(!0),
             icon: "PencilRuler",
-            tooltip: "Drawer"
+            tooltip: "Drawer",
+            tooltipOptions: o
           }
         ) }),
-        /* @__PURE__ */ x(ne, { className: "richtext-z-[99999] !richtext-max-w-[1300px]", children: [
+        /* @__PURE__ */ y(ne, { className: "richtext-z-[99999] !richtext-max-w-[1300px]", children: [
           /* @__PURE__ */ e(ie, { children: "Drawer" }),
-          /* @__PURE__ */ x("div", { style: { height: "600px", width: "100%", borderWidth: 1, background: "white", position: "relative" }, children: [
+          /* @__PURE__ */ y("div", { style: { height: "600px", width: "100%", borderWidth: 1, background: "white", position: "relative" }, children: [
             /* @__PURE__ */ e(
               "div",
               {
@@ -1064,32 +1065,32 @@ const et = ({ editor: t, upload: r }) => {
             /* @__PURE__ */ e(
               Ye,
               {
-                changeBorderColorShape: T,
-                changeColorShape: a,
-                changeShape: A,
+                changeBorderColorShape: v,
+                changeColorShape: c,
+                changeShape: s,
                 onClear: () => {
-                  if (!R) {
-                    for (; s.current.history.undoStackSize > 0; )
-                      m();
-                    R = !0;
+                  if (!q) {
+                    for (; p.current.history.undoStackSize > 0; )
+                      n();
+                    q = !0;
                   }
                 },
                 onRedo: () => {
-                  R || s.current.history.redo();
+                  q || p.current.history.redo();
                 },
-                onThicknessChange: h,
-                onUndo: m,
-                refEditor: s,
-                setColorHighlight: b,
-                setColorPen: f,
-                setThicknessPen: S
+                onThicknessChange: C,
+                onUndo: n,
+                refEditor: p,
+                setColorHighlight: B,
+                setColorPen: z,
+                setThicknessPen: x
               }
             )
           ] }),
           /* @__PURE__ */ e(se, { children: /* @__PURE__ */ e(
             ae,
             {
-              onClick: _,
+              onClick: T,
               type: "button",
               children: "Save changes"
             }
@@ -1098,143 +1099,143 @@ const et = ({ editor: t, upload: r }) => {
       ]
     }
   );
-}, I = {
+}, W = {
   TOP_LEFT: "tl",
   TOP_RIGHT: "tr",
   BOTTOM_LEFT: "bl",
   BOTTOM_RIGHT: "br"
 };
-function tt({ editor: t, node: r, updateAttributes: o, getPos: i, selected: s }) {
-  const [C, P] = y({
+function tt({ editor: t, node: r, updateAttributes: o, getPos: i, selected: m }) {
+  const [p, b] = M({
     width: K,
     height: K
-  }), [_, f] = y({
+  }), [A, T] = M({
     width: 0,
     height: 0
-  }), [S] = y([
-    I.TOP_LEFT,
-    I.TOP_RIGHT,
-    I.BOTTOM_LEFT,
-    I.BOTTOM_RIGHT
-  ]), [b, A] = y(!1), [a, h] = y({
+  }), [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: T } = r == null ? void 0 : r.attrs, m = D(() => {
-    const { src: u, alt: H, width: E, height: z } = r == null ? void 0 : r.attrs, k = j(E) ? `${E}px` : E, v = j(z) ? `${z}px` : z;
+  }), { 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: u || void 0,
-      alt: H || void 0,
+      src: h || void 0,
+      alt: E || void 0,
       style: {
-        width: k || void 0,
-        height: v || void 0
+        width: _ || void 0,
+        height: w || void 0
       }
     };
-  }, [r == null ? void 0 : r.attrs]), n = D(() => {
+  }, [r == null ? void 0 : r.attrs]), n = O(() => {
     const {
-      style: { width: u }
-    } = m;
-    return { width: u === "100%" ? u : void 0 };
-  }, [m]);
-  function G(u) {
-    f({
-      width: u.target.width,
-      height: u.target.height
+      style: { width: h }
+    } = v;
+    return { width: h === "100%" ? h : void 0 };
+  }, [v]);
+  function $(h) {
+    T({
+      width: h.target.width,
+      height: h.target.height
     });
   }
-  function p() {
+  function R() {
     t.commands.setNodeSelection(i());
   }
-  const c = q(
+  const f = P(
     Z(() => {
-      const { width: u } = getComputedStyle(t.view.dom);
-      P((H) => ({
-        ...H,
-        width: Number.parseInt(u, 10)
+      const { width: h } = getComputedStyle(t.view.dom);
+      b((E) => ({
+        ...E,
+        width: Number.parseInt(h, 10)
       }));
     }, J),
     [t]
   );
-  function w(u, H) {
-    u.preventDefault(), u.stopPropagation();
-    const E = _.width, z = _.height, k = E / z;
-    let v = Number(r.attrs.width), L = Number(r.attrs.height);
-    const M = C.width;
-    v && !L ? (v = v > M ? M : v, L = Math.round(v / k)) : L && !v ? (v = Math.round(L * k), v = v > M ? M : v) : !v && !L ? (v = E > M ? M : E, L = Math.round(v / k)) : v = v > M ? M : v, A(!0), h({
-      x: u.clientX,
-      y: u.clientY,
-      w: v,
-      h: L,
-      dir: H
+  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 N = q(
-    Z((u) => {
-      if (u.preventDefault(), u.stopPropagation(), !b)
+  const u = P(
+    Z((h) => {
+      if (h.preventDefault(), h.stopPropagation(), !x)
         return;
-      const { x: H, w: E, dir: z } = a, k = (u.clientX - H) * (/l/.test(z) ? -1 : 1), { width: v, height: L } = r == null ? void 0 : r.attrs, M = v / L, U = he(E + k, fe, C.width), ee = Math.round(U / M);
+      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
       });
     }, J),
-    [b, a, C, o, r == null ? void 0 : r.attrs]
-  ), B = q(
-    (u) => {
-      u.preventDefault(), u.stopPropagation(), b && (h({
+    [x, s, p, o, r == null ? void 0 : r.attrs]
+  ), S = P(
+    (h) => {
+      h.preventDefault(), h.stopPropagation(), x && (c({
         x: 0,
         y: 0,
         w: 0,
         h: 0,
         dir: ""
-      }), A(!1), p());
+      }), B(!1), R());
     },
-    [b, p]
-  ), $ = q(() => {
-    document == null || document.addEventListener("mousemove", N, !0), document == null || document.addEventListener("mouseup", B, !0);
-  }, [N, B]), W = q(() => {
-    document == null || document.removeEventListener("mousemove", N, !0), document == null || document.removeEventListener("mouseup", B, !0);
-  }, [N, B]);
-  O(() => (b ? $() : W(), () => {
-    W();
-  }), [b, $, W]);
-  const F = D(() => new ResizeObserver(() => c()), [c]);
-  return O(() => (F.observe(t.view.dom), () => {
-    F.disconnect();
-  }), [t.view.dom, F]), /* @__PURE__ */ e(
+    [x, R]
+  ), I = P(() => {
+    document == null || document.addEventListener("mousemove", u, !0), document == null || document.addEventListener("mouseup", S, !0);
+  }, [u, S]), F = P(() => {
+    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: T },
-      children: /* @__PURE__ */ x(
+      style: { ...n, width: "100%", textAlign: C },
+      children: /* @__PURE__ */ y(
         "div",
         {
           "data-drag-handle": !0,
           draggable: "true",
           style: { ...n, background: "#fff" },
-          className: `image-view__body ${s ? "image-view__body--focused" : ""} ${b ? "image-view__body--resizing" : ""}`,
+          className: `image-view__body ${m ? "image-view__body--focused" : ""} ${x ? "image-view__body--resizing" : ""}`,
           children: [
             /* @__PURE__ */ e(
               "img",
               {
-                alt: m.alt,
+                alt: v.alt,
                 className: "image-view__body__image block",
                 height: "auto",
-                onClick: p,
-                onLoad: G,
-                src: m.src,
-                style: m.style
+                onClick: R,
+                onLoad: $,
+                src: v.src,
+                style: v.style
               }
             ),
-            t.view.editable && (s || b) && /* @__PURE__ */ e("div", { className: "image-resizer", children: S == null ? void 0 : S.map((u) => /* @__PURE__ */ e(
+            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--${u}`,
-                onMouseDown: (H) => w(H, u)
+                className: `image-resizer__handler image-resizer__handler--${h}`,
+                onMouseDown: (E) => a(E, h)
               },
-              `image-dir-${u}`
+              `image-dir-${h}`
             )) })
           ]
         }
@@ -1259,7 +1260,7 @@ const ht = /* @__PURE__ */ ue.extend({
         class: "drawer"
       },
       button: ({ editor: r, t: o, extension: i }) => {
-        var s;
+        var m;
         return {
           component: et,
           componentProps: {
@@ -1269,7 +1270,7 @@ const ht = /* @__PURE__ */ ue.extend({
             editor: r,
             icon: "PencilRuler",
             tooltip: o("editor.drawer.tooltip"),
-            upload: (s = i == null ? void 0 : i.options) == null ? void 0 : s.upload
+            upload: (m = i == null ? void 0 : i.options) == null ? void 0 : m.upload
           }
         };
       }