reactjs-tiptap-editor 1.0.17 → 1.0.18

package/lib/Drawer-DxOoRiGQ.js

@@ -0,0 +1,1099 @@
+import { q as Z, m as te } from "./index-mfGK4pFo.js";
+import { v as X, w as oe, c as d, h as re, u as le, d as ne, D as ie, m as se, A as ae, n as ce, o as he, p as ue, B as de, x as ge, y as me } from "./index-DHUN85fV.js";
+import { N as pe, a as we } from "./clsx-eGVyq7ot.js";
+import { jsx as e, jsxs as x, Fragment as U } from "react/jsx-runtime";
+import { useState as y, useMemo as V, useCallback as q, useEffect as G, useRef as K } from "react";
+import { I as Q, i as Y, j as ve } from "./index-BlXGgvT-.js";
+import { Color4 as g, Editor as fe, makeDropdownToolbar as Te } from "easydrawer";
+import { s as Ce, i as be } from "./shortId-WJVkrvml.js";
+const W = {
+  TOP_LEFT: "tl",
+  TOP_RIGHT: "tr",
+  BOTTOM_LEFT: "bl",
+  BOTTOM_RIGHT: "br"
+};
+function xe({ editor: t, node: o, updateAttributes: r, 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 } = o == null ? void 0 : o.attrs, f = V(() => {
+    const { src: u, alt: E, width: L, height: A } = o == null ? void 0 : o.attrs, z = Z(L) ? `${L}px` : L, v = Z(A) ? `${A}px` : A;
+    return {
+      src: u || void 0,
+      alt: E || void 0,
+      style: {
+        width: z || void 0,
+        height: v || void 0
+      }
+    };
+  }, [o == null ? void 0 : o.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
+    });
+  }
+  const P = q(() => {
+    t.commands.setNodeSelection(i());
+  }, []), D = q(
+    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, A = w.height, z = L / A;
+    let v = Number(o.attrs.width), N = Number(o.attrs.height);
+    const M = H.width;
+    v && !N ? (v = v > M ? M : v, N = Math.round(v / z)) : N && !v ? (v = Math.round(N * z), v = v > M ? M : v) : !v && !N ? (v = L > M ? M : L, N = Math.round(v / z)) : v = v > M ? M : v, B(!0), c({
+      x: u.clientX,
+      y: u.clientY,
+      w: v,
+      h: N,
+      dir: E
+    });
+  }
+  const m = q(
+    X((u) => {
+      if (u.preventDefault(), u.stopPropagation(), !b)
+        return;
+      const { x: E, w: L, dir: A } = a, z = (u.clientX - E) * (/l/.test(A) ? -1 : 1), { width: v, height: N } = o == null ? void 0 : o.attrs, M = v / N, j = oe(L + z, ve, H.width), ee = Math.round(j / M);
+      r({
+        width: j,
+        height: ee
+      });
+    }, Y),
+    [b, a, H, r, o == null ? void 0 : o.attrs]
+  ), s = q(
+    (u) => {
+      u.preventDefault(), u.stopPropagation(), b && (c({
+        x: 0,
+        y: 0,
+        w: 0,
+        h: 0,
+        dir: ""
+      }), B(!1), P());
+    },
+    [b, P]
+  ), p = q(() => {
+    document == null || document.addEventListener("mousemove", m, !0), document == null || document.addEventListener("mouseup", s, !0);
+  }, [m, s]), _ = q(() => {
+    document == null || document.removeEventListener("mousemove", m, !0), document == null || document.removeEventListener("mouseup", s, !0);
+  }, [m, s]);
+  G(() => (b ? p() : _(), () => {
+    _();
+  }), [b, p, _]);
+  const R = V(() => new ResizeObserver(() => D()), [D]);
+  return G(() => (R.observe(t.view.dom), () => {
+    R.disconnect();
+  }), [t.view.dom, R]), /* @__PURE__ */ e(
+    pe,
+    {
+      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}`
+            )) })
+          ]
+        }
+      )
+    }
+  );
+}
+function ye(t) {
+  return /* @__PURE__ */ e("svg", { height: "1em", viewBox: "0 0 24 24", width: "1em", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e(
+    "path",
+    {
+      color: "currentColor",
+      d: "M2 9.2v3.6M12.8 2H9.2M7.5 20H9M20 7.5V9M2.133 4.699c.155-.727.415-1.274.854-1.712c.426-.426.954-.684 1.652-.84m15.228 2.552c-.155-.727-.415-1.274-.854-1.712c-.417-.417-.932-.673-1.608-.83M4.64 19.853c-.698-.156-1.226-.414-1.652-.84c-.43-.43-.69-.965-.845-1.673m11.638 3.626c-1.812.125-3.607-8.326-2.374-9.559s9.684.561 9.559 2.373c-.087 1.187-2.095 1.656-2.037 2.711c.018.309.408.59 1.188 1.154c.543.39 1.096.77 1.629 1.175a.66.66 0 0 1 .234.687a3.35 3.35 0 0 1-2.472 2.473a.66.66 0 0 1-.688-.235c-.404-.533-.784-1.086-1.175-1.628c-.563-.78-.844-1.17-1.153-1.188c-1.055-.059-1.524 1.95-2.71 2.037",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "1.5"
+    }
+  ) });
+}
+function Me(t) {
+  return /* @__PURE__ */ e("svg", { height: "1em", viewBox: "0 0 24 24", width: "1em", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e(
+    "path",
+    {
+      d: "M20.06 18a4 4 0 0 1-.2-.89c-.67.7-1.48 1.05-2.41 1.05c-.83 0-1.52-.24-2.05-.71c-.53-.45-.8-1.06-.8-1.79c0-.88.33-1.56 1-2.05s1.61-.73 2.83-.73h1.4v-.64q0-.735-.45-1.17c-.3-.29-.75-.43-1.33-.43c-.52 0-.95.12-1.3.36c-.35.25-.52.54-.52.89h-1.46c0-.43.15-.84.45-1.24c.28-.4.71-.71 1.22-.94c.51-.21 1.06-.35 1.69-.35c.98 0 1.74.24 2.29.73s.84 1.16.86 2.02V16c0 .8.1 1.42.3 1.88V18zm-2.4-1.12c.45 0 .88-.11 1.29-.32c.4-.21.7-.49.88-.83v-1.57H18.7c-1.77 0-2.66.47-2.66 1.41c0 .43.15.73.46.96c.3.23.68.35 1.16.35m-12.2-3.17h4.07L7.5 8.29zM6.64 6h1.72l4.71 12h-1.93l-.97-2.57H4.82L3.86 18H1.93z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function He(t) {
+  return /* @__PURE__ */ e("svg", { height: "1em", viewBox: "0 0 24 24", width: "1em", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e(
+    "path",
+    {
+      d: "M3 21v-4.25L16.2 3.575q.3-.275.663-.425t.762-.15t.775.15t.65.45L20.425 5q.3.275.438.65T21 6.4q0 .4-.137.763t-.438.662L7.25 21zM17.6 7.8L19 6.4L17.6 5l-1.4 1.4z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function Ee(t) {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      height: "1em",
+      viewBox: "0 0 256 256",
+      width: "1em",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...t,
+      children: /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M253.66 106.34a8 8 0 0 0-11.32 0L192 156.69L107.31 72l50.35-50.34a8 8 0 1 0-11.32-11.32L96 60.69a16 16 0 0 0-2.82 18.81L72 100.69a16 16 0 0 0 0 22.62l4.69 4.69l-58.35 58.34a8 8 0 0 0 3.13 13.25l72 24A7.9 7.9 0 0 0 96 224a8 8 0 0 0 5.66-2.34L136 187.31l4.69 4.69a16 16 0 0 0 22.62 0l21.19-21.18a16 16 0 0 0 18.81-2.82l50.35-50.34a8 8 0 0 0 0-11.32M93.84 206.85l-55-18.35L88 139.31L124.69 176ZM152 180.69L83.31 112L104 91.31L172.69 160Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+}
+function Le(t) {
+  return /* @__PURE__ */ x("svg", { height: "1em", viewBox: "0 0 16 16", width: "1em", xmlns: "http://www.w3.org/2000/svg", ...t, children: [
+    /* @__PURE__ */ e(
+      "path",
+      {
+        d: "m2.648 9.937l7.29-7.288a2.21 2.21 0 0 1 3.124 0l2.29 2.288a2.21 2.21 0 0 1 0 3.126L10.413 13H12.5a.5.5 0 0 1 0 1H4.501a2.2 2.2 0 0 1-1.563-.647l.707-.707c.227.226.535.354.856.354h4.005a1.2 1.2 0 0 0 .848-.354l1.292-1.293l-4-4l-3.29 3.291a1.21 1.21 0 0 0 0 1.712l.29.29l-.708.707l-.29-.29a2.21 2.21 0 0 1 0-3.126M8 6h6.89a1.2 1.2 0 0 0-.246-.356L14 5H9zm2-2h3l-.645-.644a1.21 1.21 0 0 0-1.71 0zm4.89 3H7.708l1 1H14l.644-.644A1.2 1.2 0 0 0 14.891 7zM9.708 9l1.646 1.646L13 9z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        d: "M14 11.5a.5.5 0 1 1-1 0a.5.5 0 0 1 1 0m1.5-.5a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1m-1 2a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1z",
+        fill: "currentColor"
+      }
+    )
+  ] });
+}
+function Ne(t) {
+  return /* @__PURE__ */ e("svg", { height: "1em", viewBox: "0 0 24 24", width: "1em", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e("path", { d: "M3 3h18v18H3zm2 2v14h14V5z", fill: "currentColor" }) });
+}
+function Se(t) {
+  return /* @__PURE__ */ e("svg", { height: "1em", viewBox: "0 0 24 24", width: "1em", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e("path", { d: "M2 20V4h20v16zm2-2h16V6H4zm0 0V6z", fill: "currentColor" }) });
+}
+function ke(t) {
+  return /* @__PURE__ */ e("svg", { height: "1em", viewBox: "0 0 24 24", width: "1em", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e(
+    "path",
+    {
+      d: "M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8",
+      fill: "currentColor"
+    }
+  ) });
+}
+function _e(t) {
+  return /* @__PURE__ */ e("svg", { height: "1em", viewBox: "0 0 24 24", width: "1em", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e(
+    "path",
+    {
+      d: "M10.363 3.591L2.257 17.125a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87L13.637 3.59a1.914 1.914 0 0 0-3.274 0z",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "2"
+    }
+  ) });
+}
+function Ae(t) {
+  return /* @__PURE__ */ e("svg", { height: "1em", viewBox: "0 0 24 24", width: "1em", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e(
+    "path",
+    {
+      d: "m6.8 21l-5.2-9l5.2-9h10.4l5.2 9l-5.2 9zm1.15-2h8.1l4.025-7l-4.025-7h-8.1L3.9 12zM12 12",
+      fill: "currentColor"
+    }
+  ) });
+}
+function ze(t) {
+  return /* @__PURE__ */ e("svg", { height: "1em", viewBox: "0 0 24 24", width: "1em", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ x("g", { fill: "none", fillRule: "evenodd", children: [
+    /* @__PURE__ */ e("path", { d: "m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z" }),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        d: "M10.586 2.807a2 2 0 0 1 2.828 0l7.778 7.779a2 2 0 0 1 0 2.828l-7.778 7.778a2 2 0 0 1-2.828 0l-7.778-7.778a2 2 0 0 1 0-2.828zM12 4.222L4.222 12L12 19.778L19.778 12z",
+        fill: "currentColor"
+      }
+    )
+  ] }) });
+}
+function Be(t) {
+  return /* @__PURE__ */ e("svg", { height: "1em", viewBox: "0 0 24 24", width: "1em", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e("path", { d: "M16.01 11H4v2h12.01v3L20 12l-3.99-4z", fill: "currentColor" }) });
+}
+function Pe(t) {
+  return /* @__PURE__ */ e("svg", { height: "1em", viewBox: "0 0 24 24", width: "1em", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M7.53 3.47a.75.75 0 0 1 0 1.06L5.81 6.25H15a5.75 5.75 0 0 1 0 11.5H8a.75.75 0 0 1 0-1.5h7a4.25 4.25 0 0 0 0-8.5H5.81l1.72 1.72a.75.75 0 1 1-1.06 1.06l-3-3a.75.75 0 0 1 0-1.06l3-3a.75.75 0 0 1 1.06 0",
+      fill: "currentColor",
+      fillRule: "evenodd"
+    }
+  ) });
+}
+function qe(t) {
+  return /* @__PURE__ */ e("svg", { height: "1em", viewBox: "0 0 24 24", width: "1em", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M16.47 3.47a.75.75 0 0 1 1.06 0l3 3a.75.75 0 0 1 0 1.06l-3 3a.75.75 0 1 1-1.06-1.06l1.72-1.72H9a4.25 4.25 0 0 0 0 8.5h7a.75.75 0 0 1 0 1.5H9a5.75 5.75 0 0 1 0-11.5h9.19l-1.72-1.72a.75.75 0 0 1 0-1.06",
+      fill: "currentColor",
+      fillRule: "evenodd"
+    }
+  ) });
+}
+function Re(t) {
+  return /* @__PURE__ */ e("svg", { height: "1em", viewBox: "0 0 24 24", width: "1em", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e(
+    "path",
+    {
+      d: "M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zm2-4h2V8H9zm4 0h2V8h-2z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function Ie(t) {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      height: "1em",
+      viewBox: "0 0 256 256",
+      width: "1em",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...t,
+      children: /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M211.81 83.79a28 28 0 0 1-33.12 4.83l-90.07 90.07a28 28 0 1 1-44.43-6.48a28 28 0 0 1 33.12-4.83l90.07-90.07a28 28 0 1 1 44.43 6.48",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+}
+function De(t) {
+  return /* @__PURE__ */ e("svg", { height: "1em", viewBox: "0 0 24 24", width: "1em", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e(
+    "path",
+    {
+      d: "M12 20.325q-.35 0-.712-.125t-.638-.4l-1.725-1.575q-2.65-2.425-4.788-4.812T2 8.15Q2 5.8 3.575 4.225T7.5 2.65q1.325 0 2.5.562t2 1.538q.825-.975 2-1.537t2.5-.563q2.35 0 3.925 1.575T22 8.15q0 2.875-2.125 5.275T15.05 18.25l-1.7 1.55q-.275.275-.637.4t-.713.125M11.05 6.75q-.725-1.025-1.55-1.563t-2-.537q-1.5 0-2.5 1t-1 2.5q0 1.3.925 2.763t2.213 2.837t2.65 2.575T12 18.3q.85-.775 2.213-1.975t2.65-2.575t2.212-2.837T20 8.15q0-1.5-1-2.5t-2.5-1q-1.175 0-2 .538T12.95 6.75q-.175.25-.425.375T12 7.25t-.525-.125t-.425-.375m.95 4.725",
+      fill: "currentColor"
+    }
+  ) });
+}
+function We(t) {
+  return /* @__PURE__ */ e("svg", { height: "1em", viewBox: "0 0 24 24", width: "1em", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e(
+    "path",
+    {
+      d: "m7.625 6.4l2.8-3.625q.3-.4.713-.587T12 2t.863.188t.712.587l2.8 3.625l4.25 1.425q.65.2 1.025.738t.375 1.187q0 .3-.088.6t-.287.575l-2.75 3.9l.1 4.1q.025.875-.575 1.475t-1.4.6q-.05 0-.55-.075L12 19.675l-4.475 1.25q-.125.05-.275.063T6.975 21q-.8 0-1.4-.6T5 18.925l.1-4.125l-2.725-3.875q-.2-.275-.288-.575T2 9.75q0-.625.363-1.162t1.012-.763zM8.85 8.125L4 9.725L7.1 14.2L7 18.975l5-1.375l5 1.4l-.1-4.8L20 9.775l-4.85-1.65L12 4zM12 11.5",
+      fill: "currentColor"
+    }
+  ) });
+}
+function Fe(t) {
+  return /* @__PURE__ */ e("svg", { height: "1em", viewBox: "0 0 24 24", width: "1em", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e(
+    "path",
+    {
+      d: "M12.01 6c2.61 0 4.89 1.86 5.4 4.43l.3 1.5l1.52.11c1.56.11 2.78 1.41 2.78 2.96c0 1.65-1.35 3-3 3h-13c-2.21 0-4-1.79-4-4c0-2.05 1.53-3.76 3.56-3.97l1.07-.11l.5-.95A5.46 5.46 0 0 1 12.01 6m0-2C9.12 4 6.6 5.64 5.35 8.04C2.35 8.36.01 10.91.01 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5c0-2.64-2.05-4.78-4.64-4.96C18.68 6.59 15.65 4 12.01 4",
+      fill: "currentColor"
+    }
+  ) });
+}
+function Oe(t) {
+  return /* @__PURE__ */ e("svg", { height: "1em", viewBox: "0 0 24 24", width: "1em", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ e(
+    "path",
+    {
+      d: "M5.586 6.45A2 2 0 0 1 7.509 5h11.84a2 2 0 0 1 1.923 2.55l-2.858 10A2 2 0 0 1 16.491 19H4.651a2 2 0 0 1-1.923-2.55z",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2"
+    }
+  ) });
+}
+const Ve = "_wrapper_pva9d_1", Ge = "_tool_pva9d_17", $e = "_active_pva9d_37", Ue = "_pen_pva9d_41", je = "_line_pva9d_48", Ze = "_options_pva9d_56", Xe = "_colorWrap_pva9d_66", Ke = "_color_pva9d_66", Qe = "_colorActive_pva9d_83", l = {
+  wrapper: Ve,
+  tool: Ge,
+  active: $e,
+  pen: Ue,
+  line: je,
+  options: Ze,
+  colorWrap: Xe,
+  color: Ke,
+  colorActive: Qe
+}, Ye = [
+  g.blackHighlight,
+  g.ofRGBA(166 / 255, 81 / 255, 167 / 255, 0.3),
+  g.ofRGBA(247 / 255, 78 / 255, 158 / 255, 0.3),
+  g.ofRGBA(166 / 255, 83 / 255, 88 / 255, 0.3),
+  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)
+], J = [
+  g.black,
+  g.fromHex("#007AFF"),
+  g.fromHex("#A651A7"),
+  g.fromHex("#F74E9E"),
+  g.fromHex("#FF5358"),
+  g.fromHex("#F6821C"),
+  g.fromHex("#FFC600"),
+  g.fromHex("#62BA46"),
+  g.fromHex("#E6BFE8"),
+  g.fromHex("#FEA3D2"),
+  g.fromHex("#FFA0A3"),
+  g.fromHex("#FBC276"),
+  g.fromHex("#FFFB85"),
+  g.fromHex("#AADC99")
+];
+function Je({ onChange: t }) {
+  const [o, r] = y(g.blackHighlight);
+  return /* @__PURE__ */ e("div", { className: l.colorWrap, children: Ye.map((i, T) => /* @__PURE__ */ e(
+    "button",
+    {
+      style: { backgroundColor: i.toHexString() },
+      className: d(l.color, {
+        [l.colorActive]: o.toHexString() === i.toHexString()
+      }),
+      onClick: () => {
+        r(i), t(i);
+      }
+    },
+    T
+  )) });
+}
+function $({ onChange: t }) {
+  const [o, r] = 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() },
+        className: d(l.color, {
+          [l.colorActive]: o.toHexString() === i.toHexString()
+        }),
+        onClick: () => {
+          r(i), t(i);
+        }
+      },
+      T
+    )) }),
+    /* @__PURE__ */ e("div", { className: l.colorWrap, children: J.slice(7).map((i, T) => /* @__PURE__ */ e(
+      "button",
+      {
+        style: { backgroundColor: i.toHexString() },
+        className: d(l.color, {
+          [l.colorActive]: o.toHexString() === i.toHexString()
+        }),
+        onClick: () => {
+          r(i), t(i);
+        }
+      },
+      T
+    )) })
+  ] });
+}
+function et({ setColorPen: t, setThicknessPen: o }) {
+  const [r, i] = y(2);
+  return /* @__PURE__ */ x("div", { className: l.options, children: [
+    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e($, { onChange: (T) => t(T) }) }),
+    /* @__PURE__ */ e("div", { className: l.line }),
+    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+      "input",
+      {
+        max: 10,
+        min: 1,
+        step: 0.1,
+        type: "range",
+        value: r,
+        onChange: (T) => {
+          o(Number.parseFloat(T.target.value)), i(Number.parseFloat(T.target.value));
+        }
+      }
+    ) })
+  ] });
+}
+function tt({ setColorHighlight: t }) {
+  return /* @__PURE__ */ e("div", { className: l.options, children: /* @__PURE__ */ e(Je, { onChange: (o) => t(o) }) });
+}
+function ot({ changeColorShape: t, changeBorderColorShape: o, onThicknessChange: r }) {
+  return /* @__PURE__ */ x("div", { className: l.options, children: [
+    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e($, { onChange: (i) => t(i) }) }),
+    /* @__PURE__ */ e("div", { className: l.line }),
+    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e($, { onChange: (i) => o(i) }) }),
+    /* @__PURE__ */ e("div", { className: l.line }),
+    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+      "input",
+      {
+        defaultValue: 0,
+        max: 20,
+        min: 0,
+        step: 1,
+        type: "range",
+        onChange: (i) => {
+          r(Number.parseFloat(i.target.value));
+        }
+      }
+    ) })
+  ] });
+}
+function rt(t) {
+  const {
+    setColorPen: o,
+    refEditor: r,
+    setThicknessPen: i,
+    setColorHighlight: T,
+    changeBorderColorShape: H,
+    onUndo: S,
+    changeColorShape: w,
+    changeShape: h,
+    onThicknessChange: k,
+    onRedo: b,
+    onClear: B
+  } = t, [a, c] = y(null), [C, f] = y(
+    0
+    /* square */
+  );
+  return /* @__PURE__ */ e(U, { children: /* @__PURE__ */ x("div", { className: l.wrapper, children: [
+    /* @__PURE__ */ x("div", { className: l.pen, children: [
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: d(l.tool, {
+            [l.active]: a === "select"
+          }),
+          onClick: () => {
+            const n = r.current.toolController.getPrimaryTools();
+            if (a === "select") {
+              c(null), n[0].setEnabled(!1);
+              return;
+            }
+            c("select"), n[0].setEnabled(!0);
+          },
+          children: /* @__PURE__ */ e(ye, {})
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: l.line }),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: d(l.tool, {
+            [l.active]: a === "text"
+          }),
+          onClick: () => {
+            const n = r.current.toolController.getPrimaryTools();
+            if (r.current.toolController.setToolEnabled(n[1]), a === "text") {
+              n[1].setEnabled(!1), c(null);
+              return;
+            }
+            c("text"), n[1].setEnabled(!0);
+          },
+          children: /* @__PURE__ */ e(Me, {})
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: l.line }),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: d(l.tool, {
+            [l.active]: a === "pencil"
+          }),
+          onClick: () => {
+            const n = r.current.toolController.getPrimaryTools();
+            if (a === "pencil") {
+              c(null), n[2].setEnabled(!1);
+              return;
+            }
+            c("pencil"), n[2].setEnabled(!0);
+          },
+          children: /* @__PURE__ */ e(He, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: d(l.tool, {
+            [l.active]: a === "highlighter"
+          }),
+          onClick: () => {
+            const n = r.current.toolController.getPrimaryTools();
+            if (a === "highlighter") {
+              c(null), n[3].setEnabled(!1);
+              return;
+            }
+            c("highlighter"), n[3].setEnabled(!0);
+          },
+          children: /* @__PURE__ */ e(Ee, {})
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: l.line }),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: d(l.tool, {
+            [l.active]: a === "eraser"
+          }),
+          onClick: () => {
+            const n = r.current.toolController.getPrimaryTools();
+            if (a === "eraser") {
+              c(null), n[4].setEnabled(!1);
+              return;
+            }
+            c("eraser"), n[4].setEnabled(!0);
+          },
+          children: /* @__PURE__ */ e(Le, {})
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: l.line }),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: d(l.tool, {
+            [l.active]: a === "shapes" && C === 0
+            /* square */
+          }),
+          onClick: () => {
+            const n = r.current.toolController.getPrimaryTools();
+            r.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), h(
+              0
+              /* square */
+            ), f(
+              0
+              /* square */
+            );
+          },
+          children: /* @__PURE__ */ e(Ne, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: d(l.tool, {
+            [l.active]: a === "shapes" && C === 1
+            /* rectangle */
+          }),
+          onClick: () => {
+            const n = r.current.toolController.getPrimaryTools();
+            r.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), h(
+              1
+              /* rectangle */
+            ), f(
+              1
+              /* rectangle */
+            );
+          },
+          children: /* @__PURE__ */ e(Se, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: d(l.tool, {
+            [l.active]: a === "shapes" && C === 2
+            /* circle */
+          }),
+          onClick: () => {
+            const n = r.current.toolController.getPrimaryTools();
+            r.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), h(
+              2
+              /* circle */
+            ), f(
+              2
+              /* circle */
+            );
+          },
+          children: /* @__PURE__ */ e(ke, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: d(l.tool, {
+            [l.active]: a === "shapes" && C === 3
+            /* triangle */
+          }),
+          onClick: () => {
+            const n = r.current.toolController.getPrimaryTools();
+            r.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), h(
+              3
+              /* triangle */
+            ), f(
+              3
+              /* triangle */
+            );
+          },
+          children: /* @__PURE__ */ e(_e, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: d(l.tool, {
+            [l.active]: a === "shapes" && C === 4
+            /* hexagonal */
+          }),
+          onClick: () => {
+            const n = r.current.toolController.getPrimaryTools();
+            r.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), h(
+              4
+              /* hexagonal */
+            ), f(
+              4
+              /* hexagonal */
+            );
+          },
+          children: /* @__PURE__ */ e(Ae, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: d(l.tool, {
+            [l.active]: a === "shapes" && C === 5
+            /* diamond */
+          }),
+          onClick: () => {
+            const n = r.current.toolController.getPrimaryTools();
+            r.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), h(
+              5
+              /* diamond */
+            ), f(
+              5
+              /* diamond */
+            );
+          },
+          children: /* @__PURE__ */ e(ze, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: d(l.tool, {
+            [l.active]: a === "shapes" && C === 6
+            /* arrow */
+          }),
+          onClick: () => {
+            const n = r.current.toolController.getPrimaryTools();
+            r.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), h(
+              6
+              /* arrow */
+            ), f(
+              6
+              /* arrow */
+            );
+          },
+          children: /* @__PURE__ */ e(Be, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: d(l.tool, {
+            [l.active]: a === "shapes" && C === 7
+            /* line */
+          }),
+          onClick: () => {
+            const n = r.current.toolController.getPrimaryTools();
+            r.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), h(
+              7
+              /* line */
+            ), f(
+              7
+              /* line */
+            );
+          },
+          children: /* @__PURE__ */ e(Ie, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: d(l.tool, {
+            [l.active]: a === "shapes" && C === 8
+            /* heart */
+          }),
+          onClick: () => {
+            const n = r.current.toolController.getPrimaryTools();
+            r.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), h(
+              8
+              /* heart */
+            ), f(
+              8
+              /* heart */
+            );
+          },
+          children: /* @__PURE__ */ e(De, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: d(l.tool, {
+            [l.active]: a === "shapes" && C === 9
+            /* star */
+          }),
+          onClick: () => {
+            const n = r.current.toolController.getPrimaryTools();
+            r.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), h(
+              9
+              /* star */
+            ), f(
+              9
+              /* star */
+            );
+          },
+          children: /* @__PURE__ */ e(We, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: d(l.tool, {
+            [l.active]: a === "shapes" && C === 10
+            /* cloud */
+          }),
+          onClick: () => {
+            const n = r.current.toolController.getPrimaryTools();
+            r.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), h(
+              10
+              /* cloud */
+            ), f(
+              10
+              /* cloud */
+            );
+          },
+          children: /* @__PURE__ */ e(Fe, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: d(l.tool, {
+            [l.active]: a === "shapes" && C === 11
+            /* parallelogram */
+          }),
+          onClick: () => {
+            const n = r.current.toolController.getPrimaryTools();
+            r.current.toolController.setToolEnabled(n[5]), c("shapes"), n[5].setEnabled(!0), h(
+              11
+              /* parallelogram */
+            ), f(
+              11
+              /* parallelogram */
+            );
+          },
+          children: /* @__PURE__ */ e(Oe, {})
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: l.line }),
+      /* @__PURE__ */ e("button", { className: d(l.tool), onClick: S, children: /* @__PURE__ */ e(Pe, {}) }),
+      /* @__PURE__ */ e("button", { className: d(l.tool), onClick: b, children: /* @__PURE__ */ e(qe, {}) }),
+      /* @__PURE__ */ e("button", { className: d(l.tool), onClick: B, children: /* @__PURE__ */ e(Re, {}) })
+    ] }),
+    /* @__PURE__ */ x("div", { className: l.optionsWrap, children: [
+      a === "pencil" && /* @__PURE__ */ e(et, { setColorPen: o, setThicknessPen: i }),
+      a === "highlighter" && /* @__PURE__ */ e(tt, { setColorHighlight: T }),
+      a === "shapes" && /* @__PURE__ */ e(
+        ot,
+        {
+          changeBorderColorShape: H,
+          changeColorShape: w,
+          changeShape: h,
+          onThicknessChange: k
+        }
+      )
+    ] })
+  ] }) });
+}
+let I = !1;
+function gt() {
+  const t = re(), o = le(lt.name), { isActive: r = void 0, upload: i } = (o == null ? void 0 : o.componentProps) ?? {}, { editorDisabled: T } = ne(r), [H, S] = y(!1), w = K(null), h = K(null), k = () => {
+    (async () => {
+      const s = document.querySelector("#easydrawer");
+      s && (w.current = new fe(s, {
+        wheelEventsEnabled: !1,
+        disableZoom: !0
+      }), h.current = Te(w.current), h.current.addDefaultToolWidgets());
+    })();
+  };
+  G(() => {
+    H && setTimeout(() => {
+      k();
+    }, 200);
+  }, [H]);
+  const b = async () => {
+    if (w.current) {
+      const m = w.current.toSVG(), s = m.outerHTML, p = `drawer-${Ce()}.svg`;
+      let _ = be(m.outerHTML);
+      if (i) {
+        const R = ge(_, p);
+        _ = await i(R);
+      }
+      t == null || t.chain().focus().setDrawer(
+        {
+          type: "drawer",
+          src: _,
+          alt: encodeURIComponent(s),
+          width: 426,
+          height: 212
+        },
+        !!s
+      ).run();
+    }
+    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;
+    }
+    w.current.history.undo();
+  }, D = () => {
+    I || w.current.history.redo();
+  }, O = () => {
+    if (!I) {
+      for (; w.current.history.undoStackSize > 0; )
+        P();
+      I = !0;
+    }
+  };
+  return o ? /* @__PURE__ */ x(ie, { onOpenChange: S, open: H, children: [
+    /* @__PURE__ */ e(se, { asChild: !0, children: /* @__PURE__ */ e(
+      ae,
+      {
+        disabled: T,
+        action: () => {
+          T || S(!0);
+        },
+        icon: "PencilRuler",
+        tooltip: "Drawer"
+      }
+    ) }),
+    /* @__PURE__ */ x(ce, { className: "richtext-z-[99999] !richtext-max-w-[1300px]", children: [
+      /* @__PURE__ */ e(he, { children: "Drawer" }),
+      /* @__PURE__ */ x(
+        "div",
+        {
+          style: {
+            height: "600px",
+            width: "100%",
+            borderWidth: 1,
+            background: "white",
+            position: "relative"
+          },
+          children: [
+            /* @__PURE__ */ e("div", { className: "richtext-size-full", id: "easydrawer" }),
+            /* @__PURE__ */ e(
+              rt,
+              {
+                changeBorderColorShape: F,
+                changeColorShape: f,
+                changeShape: C,
+                onClear: O,
+                onRedo: D,
+                onThicknessChange: n,
+                onUndo: P,
+                refEditor: w,
+                setColorHighlight: c,
+                setColorPen: B,
+                setThicknessPen: a
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(ue, { children: /* @__PURE__ */ e(de, { onClick: b, type: "button", children: "Save changes" }) })
+    ] })
+  ] }) : /* @__PURE__ */ e(U, {});
+}
+const lt = /* @__PURE__ */ me.extend({
+  name: "richTextDrawer",
+  //@ts-expect-error
+  addOptions() {
+    var t;
+    return {
+      ...(t = this.parent) == null ? void 0 : t.call(this),
+      inline: !1,
+      content: "",
+      marks: "",
+      group: "block",
+      draggable: !1,
+      selectable: !0,
+      atom: !0,
+      HTMLAttributes: {
+        class: "drawer"
+      },
+      button: ({ t: o, extension: r }) => {
+        var i;
+        return {
+          componentProps: {
+            action: () => !0,
+            isActive: () => !1,
+            disabled: !1,
+            icon: "PencilRuler",
+            tooltip: o("editor.drawer.tooltip"),
+            upload: (i = r == null ? void 0 : r.options) == null ? void 0 : i.upload
+          }
+        };
+      }
+    };
+  },
+  addAttributes() {
+    var t;
+    return {
+      ...(t = this.parent) == null ? void 0 : t.call(this),
+      width: {
+        default: null,
+        parseHTML: (o) => {
+          const r = o.querySelector("img"), i = r == null ? void 0 : r.getAttribute("width");
+          return i ? Number.parseInt(i, 10) : 320;
+        },
+        renderHTML: (o) => ({
+          width: o.width
+        })
+      },
+      height: {
+        default: null,
+        parseHTML: (o) => {
+          const r = o.querySelector("img"), i = r == null ? void 0 : r.getAttribute("height");
+          return i ? Number.parseInt(i, 10) : 212;
+        },
+        renderHTML: (o) => ({
+          height: o.height
+        })
+      },
+      align: {
+        default: "center",
+        parseHTML: (o) => o.getAttribute("align"),
+        renderHTML: (o) => ({
+          align: o.align
+        })
+      }
+    };
+  },
+  addNodeView() {
+    return we(xe);
+  },
+  // @ts-ignore
+  addCommands() {
+    return {
+      setDrawer: (t, o) => ({ commands: r, editor: i }) => o ? r.insertContent({
+        type: this.name,
+        attrs: t
+      }) : r.insertContentAt(i.state.selection.anchor, {
+        type: this.name,
+        attrs: t
+      }),
+      setAlignImageDrawer: (t) => ({ commands: o }) => o.updateAttributes(this.name, { align: t })
+    };
+  },
+  renderHTML({ HTMLAttributes: t }) {
+    const { align: o } = t;
+    return [
+      "div",
+      // Parent element
+      {
+        style: o ? `text-align: ${o};` : "",
+        class: "imageDrawer"
+      },
+      [
+        "img",
+        te(
+          // @ts-ignore
+          this.options.HTMLAttributes,
+          t
+        )
+      ]
+    ];
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "div[class=imageDrawer]",
+        getAttrs: (t) => {
+          const o = t.querySelector("img"), r = o == null ? void 0 : o.getAttribute("width"), i = o == null ? void 0 : o.getAttribute("height");
+          return {
+            src: o == null ? void 0 : o.getAttribute("src"),
+            alt: o == null ? void 0 : o.getAttribute("alt"),
+            width: r ? Number.parseInt(r, 10) : null,
+            height: i ? Number.parseInt(i, 10) : null,
+            align: (o == null ? void 0 : o.getAttribute("align")) || t.style.textAlign || null
+          };
+        }
+      }
+    ];
+  }
+});
+export {
+  rt as C,
+  lt as D,
+  gt as R
+};