@remarkablejames/editor 0.0.1

package/lib/Drawer-BCWVN-4l.js

@@ -0,0 +1,1125 @@
+import { h as oe, $ as X, m as le, k as ne } from "./clsx-CDyrfCnw.js";
+import { z as Y, w as ie, c as g, h as se, u as ae, d as ce, D as he, m as de, A as ue, n as ge, o as me, p as pe, B as we, Y as ve, H as fe } from "./index-lj3VWExo.js";
+import { jsx as e, jsxs as y, Fragment as j } from "react/jsx-runtime";
+import { useState as H, useMemo as G, useCallback as q, useEffect as $, useRef as K } from "react";
+import { I as Q, i as J, j as Ce } from "./index-4Q5IhypJ.js";
+import { Color4 as m, Editor as Te, makeDropdownToolbar as be } from "easydrawer";
+const W = {
+  TOP_LEFT: "tl",
+  TOP_RIGHT: "tr",
+  BOTTOM_LEFT: "bl",
+  BOTTOM_RIGHT: "br"
+};
+function xe({ editor: t, node: r, updateAttributes: o, getPos: n, selected: v }) {
+  const [b, M] = H({
+    width: Q,
+    height: Q
+  }), [d, a] = H({
+    width: 0,
+    height: 0
+  }), [S] = H([
+    W.TOP_LEFT,
+    W.TOP_RIGHT,
+    W.BOTTOM_LEFT,
+    W.BOTTOM_RIGHT
+  ]), [x, B] = H(!1), [c, h] = H({
+    x: 0,
+    y: 0,
+    w: 0,
+    h: 0,
+    dir: ""
+  }), { align: T } = r == null ? void 0 : r.attrs, C = G(() => {
+    const { src: u, alt: N, width: L, height: z } = r == null ? void 0 : r.attrs, _ = X(L) ? `${L}px` : L, f = X(z) ? `${z}px` : z;
+    return {
+      src: u || void 0,
+      alt: N || void 0,
+      style: {
+        width: _ || void 0,
+        height: f || void 0
+      }
+    };
+  }, [r == null ? void 0 : r.attrs]), i = G(() => {
+    const {
+      style: { width: u }
+    } = C;
+    return { width: u === "100%" ? u : void 0 };
+  }, [C]);
+  function O(u) {
+    a({
+      width: u.target.width,
+      height: u.target.height
+    });
+  }
+  const P = q(() => {
+    t.commands.setNodeSelection(n());
+  }, []), D = q(
+    Y(() => {
+      const { width: u } = getComputedStyle(t.view.dom);
+      M((N) => ({
+        ...N,
+        width: Number.parseInt(u, 10)
+      }));
+    }, J),
+    [t]
+  );
+  function V(u, N) {
+    u.preventDefault(), u.stopPropagation();
+    const L = d.width, z = d.height, _ = L / z;
+    let f = Number(r.attrs.width), A = Number(r.attrs.height);
+    const E = b.width;
+    f && !A ? (f = f > E ? E : f, A = Math.round(f / _)) : A && !f ? (f = Math.round(A * _), f = f > E ? E : f) : !f && !A ? (f = L > E ? E : L, A = Math.round(f / _)) : f = f > E ? E : f, B(!0), h({
+      x: u.clientX,
+      y: u.clientY,
+      w: f,
+      h: A,
+      dir: N
+    });
+  }
+  const p = q(
+    Y((u) => {
+      if (u.preventDefault(), u.stopPropagation(), !x)
+        return;
+      const { x: N, w: L, dir: z } = c, _ = (u.clientX - N) * (/l/.test(z) ? -1 : 1), { width: f, height: A } = r == null ? void 0 : r.attrs, E = f / A, Z = ie(L + _, Ce, b.width), re = Math.round(Z / E);
+      o({
+        width: Z,
+        height: re
+      });
+    }, J),
+    [x, c, b, o, r == null ? void 0 : r.attrs]
+  ), s = q(
+    (u) => {
+      u.preventDefault(), u.stopPropagation(), x && (h({
+        x: 0,
+        y: 0,
+        w: 0,
+        h: 0,
+        dir: ""
+      }), B(!1), P());
+    },
+    [x, P]
+  ), w = q(() => {
+    document == null || document.addEventListener("mousemove", p, !0), document == null || document.addEventListener("mouseup", s, !0);
+  }, [p, s]), k = q(() => {
+    document == null || document.removeEventListener("mousemove", p, !0), document == null || document.removeEventListener("mouseup", s, !0);
+  }, [p, s]);
+  $(() => (x ? w() : k(), () => {
+    k();
+  }), [x, w, k]);
+  const R = G(() => new ResizeObserver(() => D()), [D]);
+  return $(() => (R.observe(t.view.dom), () => {
+    R.disconnect();
+  }), [t.view.dom, R]), /* @__PURE__ */ e(
+    oe,
+    {
+      className: "image-view",
+      style: { ...i, width: "100%", textAlign: T },
+      children: /* @__PURE__ */ y(
+        "div",
+        {
+          "data-drag-handle": !0,
+          draggable: "true",
+          style: { ...i, background: "#fff" },
+          className: `image-view__body ${v ? "image-view__body--focused" : ""} ${x ? "image-view__body--resizing" : ""}`,
+          children: [
+            /* @__PURE__ */ e(
+              "img",
+              {
+                alt: C.alt,
+                className: "image-view__body__image block",
+                height: "auto",
+                onClick: P,
+                onLoad: O,
+                src: C.src,
+                style: C.style
+              }
+            ),
+            t.view.editable && (v || x) && /* @__PURE__ */ e("div", { className: "image-resizer", children: S == null ? void 0 : S.map((u) => /* @__PURE__ */ e(
+              "span",
+              {
+                className: `image-resizer__handler image-resizer__handler--${u}`,
+                onMouseDown: (N) => V(N, u)
+              },
+              `image-dir-${u}`
+            )) })
+          ]
+        }
+      )
+    }
+  );
+}
+const F = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", ye = (t) => {
+  t = t.replace(/\r\n/g, `
+`);
+  let r = 0, o = "";
+  for (; r < t.length; r++) {
+    const n = t.charCodeAt(r);
+    n < 128 ? o += String.fromCharCode(n) : n > 127 && n < 2048 ? (o += String.fromCharCode(n >> 6 | 192), o += String.fromCharCode(63 & n | 128)) : (o += String.fromCharCode(n >> 12 | 224), o += String.fromCharCode(n >> 6 & 63 | 128), o += String.fromCharCode(63 & n | 128));
+  }
+  return o;
+}, Me = (t) => {
+  let r, o, n, v, b, M, d, a = 0, S = "";
+  for (t = ye(t); a < t.length; ) r = t.charCodeAt(a++), o = t.charCodeAt(a++), n = t.charCodeAt(a++), v = r >> 2, b = (3 & r) << 4 | o >> 4, M = (15 & o) << 2 | n >> 6, d = 63 & n, isNaN(o) ? M = d = 64 : isNaN(n) && (d = 64), S = S + F.charAt(v) + F.charAt(b) + F.charAt(M) + F.charAt(d);
+  return S;
+}, Se = (t) => typeof t == "string" ? "string" : typeof SVGElement < "u" && t instanceof SVGElement ? "element" : void 0, te = (t) => "data:image/svg+xml;base64," + Me(t), He = (t) => te(new XMLSerializer().serializeToString(t)), Ee = (t) => {
+  switch (Se(t)) {
+    case "string":
+      return te(t);
+    case "element":
+      return He(t);
+    default:
+      return t;
+  }
+};
+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",
+    {
+      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 Le(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 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: "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 ke(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 ze(t) {
+  return /* @__PURE__ */ y("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 _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: "M3 3h18v18H3zm2 2v14h14V5z", 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: "M2 20V4h20v16zm2-2h16V6H4zm0 0V6z", 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",
+    {
+      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 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",
+    {
+      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 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: "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 Ie(t) {
+  return /* @__PURE__ */ e("svg", { height: "1em", viewBox: "0 0 24 24", width: "1em", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ y("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 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: "M16.01 11H4v2h12.01v3L20 12l-3.99-4z", 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",
+    {
+      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 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",
+    {
+      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 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: "M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zm2-4h2V8H9zm4 0h2V8h-2z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function Ve(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 Ge(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 $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: "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 Ue(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 je(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 Ze = "_wrapper_pva9d_1", Xe = "_tool_pva9d_17", Ye = "_active_pva9d_37", Ke = "_pen_pva9d_41", Qe = "_line_pva9d_48", Je = "_options_pva9d_56", et = "_colorWrap_pva9d_66", tt = "_color_pva9d_66", rt = "_colorActive_pva9d_83", l = {
+  wrapper: Ze,
+  tool: Xe,
+  active: Ye,
+  pen: Ke,
+  line: Qe,
+  options: Je,
+  colorWrap: et,
+  color: tt,
+  colorActive: rt
+}, ot = [
+  m.blackHighlight,
+  m.ofRGBA(166 / 255, 81 / 255, 167 / 255, 0.3),
+  m.ofRGBA(247 / 255, 78 / 255, 158 / 255, 0.3),
+  m.ofRGBA(166 / 255, 83 / 255, 88 / 255, 0.3),
+  m.ofRGBA(246 / 255, 130 / 255, 28 / 255, 0.3),
+  m.ofRGBA(166 / 255, 198 / 255, 0, 0.3),
+  m.ofRGBA(98 / 255, 186 / 255, 70 / 255, 0.3)
+], ee = [
+  m.black,
+  m.fromHex("#007AFF"),
+  m.fromHex("#A651A7"),
+  m.fromHex("#F74E9E"),
+  m.fromHex("#FF5358"),
+  m.fromHex("#F6821C"),
+  m.fromHex("#FFC600"),
+  m.fromHex("#62BA46"),
+  m.fromHex("#E6BFE8"),
+  m.fromHex("#FEA3D2"),
+  m.fromHex("#FFA0A3"),
+  m.fromHex("#FBC276"),
+  m.fromHex("#FFFB85"),
+  m.fromHex("#AADC99")
+];
+function lt({ onChange: t }) {
+  const [r, o] = H(m.blackHighlight);
+  return /* @__PURE__ */ e("div", { className: l.colorWrap, children: ot.map((n, v) => /* @__PURE__ */ e(
+    "button",
+    {
+      style: { backgroundColor: n.toHexString() },
+      className: g(l.color, {
+        [l.colorActive]: r.toHexString() === n.toHexString()
+      }),
+      onClick: () => {
+        o(n), t(n);
+      }
+    },
+    v
+  )) });
+}
+function U({ onChange: t }) {
+  const [r, o] = H(m.black);
+  return /* @__PURE__ */ y(j, { children: [
+    /* @__PURE__ */ e("div", { className: l.colorWrap, children: ee.slice(0, 7).map((n, v) => /* @__PURE__ */ e(
+      "button",
+      {
+        style: { backgroundColor: n.toHexString() },
+        className: g(l.color, {
+          [l.colorActive]: r.toHexString() === n.toHexString()
+        }),
+        onClick: () => {
+          o(n), t(n);
+        }
+      },
+      v
+    )) }),
+    /* @__PURE__ */ e("div", { className: l.colorWrap, children: ee.slice(7).map((n, v) => /* @__PURE__ */ e(
+      "button",
+      {
+        style: { backgroundColor: n.toHexString() },
+        className: g(l.color, {
+          [l.colorActive]: r.toHexString() === n.toHexString()
+        }),
+        onClick: () => {
+          o(n), t(n);
+        }
+      },
+      v
+    )) })
+  ] });
+}
+function nt({ setColorPen: t, setThicknessPen: r }) {
+  const [o, n] = H(2);
+  return /* @__PURE__ */ y("div", { className: l.options, children: [
+    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(U, { onChange: (v) => t(v) }) }),
+    /* @__PURE__ */ e("div", { className: l.line }),
+    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+      "input",
+      {
+        max: 10,
+        min: 1,
+        step: 0.1,
+        type: "range",
+        value: o,
+        onChange: (v) => {
+          r(Number.parseFloat(v.target.value)), n(Number.parseFloat(v.target.value));
+        }
+      }
+    ) })
+  ] });
+}
+function it({ setColorHighlight: t }) {
+  return /* @__PURE__ */ e("div", { className: l.options, children: /* @__PURE__ */ e(lt, { onChange: (r) => t(r) }) });
+}
+function st({ changeColorShape: t, changeBorderColorShape: r, onThicknessChange: o }) {
+  return /* @__PURE__ */ y("div", { className: l.options, children: [
+    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(U, { onChange: (n) => t(n) }) }),
+    /* @__PURE__ */ e("div", { className: l.line }),
+    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(U, { onChange: (n) => r(n) }) }),
+    /* @__PURE__ */ e("div", { className: l.line }),
+    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+      "input",
+      {
+        defaultValue: 0,
+        max: 20,
+        min: 0,
+        step: 1,
+        type: "range",
+        onChange: (n) => {
+          o(Number.parseFloat(n.target.value));
+        }
+      }
+    ) })
+  ] });
+}
+function at(t) {
+  const {
+    setColorPen: r,
+    refEditor: o,
+    setThicknessPen: n,
+    setColorHighlight: v,
+    changeBorderColorShape: b,
+    onUndo: M,
+    changeColorShape: d,
+    changeShape: a,
+    onThicknessChange: S,
+    onRedo: x,
+    onClear: B
+  } = t, [c, h] = H(null), [T, C] = H(
+    0
+    /* square */
+  );
+  return /* @__PURE__ */ e(j, { children: /* @__PURE__ */ y("div", { className: l.wrapper, children: [
+    /* @__PURE__ */ y("div", { className: l.pen, children: [
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: g(l.tool, {
+            [l.active]: c === "select"
+          }),
+          onClick: () => {
+            const i = o.current.toolController.getPrimaryTools();
+            if (c === "select") {
+              h(null), i[0].setEnabled(!1);
+              return;
+            }
+            h("select"), i[0].setEnabled(!0);
+          },
+          children: /* @__PURE__ */ e(Ne, {})
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: l.line }),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: g(l.tool, {
+            [l.active]: c === "text"
+          }),
+          onClick: () => {
+            const i = o.current.toolController.getPrimaryTools();
+            if (o.current.toolController.setToolEnabled(i[1]), c === "text") {
+              i[1].setEnabled(!1), h(null);
+              return;
+            }
+            h("text"), i[1].setEnabled(!0);
+          },
+          children: /* @__PURE__ */ e(Le, {})
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: l.line }),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: g(l.tool, {
+            [l.active]: c === "pencil"
+          }),
+          onClick: () => {
+            const i = o.current.toolController.getPrimaryTools();
+            if (c === "pencil") {
+              h(null), i[2].setEnabled(!1);
+              return;
+            }
+            h("pencil"), i[2].setEnabled(!0);
+          },
+          children: /* @__PURE__ */ e(Ae, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: g(l.tool, {
+            [l.active]: c === "highlighter"
+          }),
+          onClick: () => {
+            const i = o.current.toolController.getPrimaryTools();
+            if (c === "highlighter") {
+              h(null), i[3].setEnabled(!1);
+              return;
+            }
+            h("highlighter"), i[3].setEnabled(!0);
+          },
+          children: /* @__PURE__ */ e(ke, {})
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: l.line }),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: g(l.tool, {
+            [l.active]: c === "eraser"
+          }),
+          onClick: () => {
+            const i = o.current.toolController.getPrimaryTools();
+            if (c === "eraser") {
+              h(null), i[4].setEnabled(!1);
+              return;
+            }
+            h("eraser"), i[4].setEnabled(!0);
+          },
+          children: /* @__PURE__ */ e(ze, {})
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: l.line }),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: g(l.tool, {
+            [l.active]: c === "shapes" && T === 0
+            /* square */
+          }),
+          onClick: () => {
+            const i = o.current.toolController.getPrimaryTools();
+            o.current.toolController.setToolEnabled(i[5]), h("shapes"), i[5].setEnabled(!0), a(
+              0
+              /* square */
+            ), C(
+              0
+              /* square */
+            );
+          },
+          children: /* @__PURE__ */ e(_e, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: g(l.tool, {
+            [l.active]: c === "shapes" && T === 1
+            /* rectangle */
+          }),
+          onClick: () => {
+            const i = o.current.toolController.getPrimaryTools();
+            o.current.toolController.setToolEnabled(i[5]), h("shapes"), i[5].setEnabled(!0), a(
+              1
+              /* rectangle */
+            ), C(
+              1
+              /* rectangle */
+            );
+          },
+          children: /* @__PURE__ */ e(Be, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: g(l.tool, {
+            [l.active]: c === "shapes" && T === 2
+            /* circle */
+          }),
+          onClick: () => {
+            const i = o.current.toolController.getPrimaryTools();
+            o.current.toolController.setToolEnabled(i[5]), h("shapes"), i[5].setEnabled(!0), a(
+              2
+              /* circle */
+            ), C(
+              2
+              /* circle */
+            );
+          },
+          children: /* @__PURE__ */ e(Pe, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: g(l.tool, {
+            [l.active]: c === "shapes" && T === 3
+            /* triangle */
+          }),
+          onClick: () => {
+            const i = o.current.toolController.getPrimaryTools();
+            o.current.toolController.setToolEnabled(i[5]), h("shapes"), i[5].setEnabled(!0), a(
+              3
+              /* triangle */
+            ), C(
+              3
+              /* triangle */
+            );
+          },
+          children: /* @__PURE__ */ e(qe, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: g(l.tool, {
+            [l.active]: c === "shapes" && T === 4
+            /* hexagonal */
+          }),
+          onClick: () => {
+            const i = o.current.toolController.getPrimaryTools();
+            o.current.toolController.setToolEnabled(i[5]), h("shapes"), i[5].setEnabled(!0), a(
+              4
+              /* hexagonal */
+            ), C(
+              4
+              /* hexagonal */
+            );
+          },
+          children: /* @__PURE__ */ e(Re, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: g(l.tool, {
+            [l.active]: c === "shapes" && T === 5
+            /* diamond */
+          }),
+          onClick: () => {
+            const i = o.current.toolController.getPrimaryTools();
+            o.current.toolController.setToolEnabled(i[5]), h("shapes"), i[5].setEnabled(!0), a(
+              5
+              /* diamond */
+            ), C(
+              5
+              /* diamond */
+            );
+          },
+          children: /* @__PURE__ */ e(Ie, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: g(l.tool, {
+            [l.active]: c === "shapes" && T === 6
+            /* arrow */
+          }),
+          onClick: () => {
+            const i = o.current.toolController.getPrimaryTools();
+            o.current.toolController.setToolEnabled(i[5]), h("shapes"), i[5].setEnabled(!0), a(
+              6
+              /* arrow */
+            ), C(
+              6
+              /* arrow */
+            );
+          },
+          children: /* @__PURE__ */ e(De, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: g(l.tool, {
+            [l.active]: c === "shapes" && T === 7
+            /* line */
+          }),
+          onClick: () => {
+            const i = o.current.toolController.getPrimaryTools();
+            o.current.toolController.setToolEnabled(i[5]), h("shapes"), i[5].setEnabled(!0), a(
+              7
+              /* line */
+            ), C(
+              7
+              /* line */
+            );
+          },
+          children: /* @__PURE__ */ e(Ve, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: g(l.tool, {
+            [l.active]: c === "shapes" && T === 8
+            /* heart */
+          }),
+          onClick: () => {
+            const i = o.current.toolController.getPrimaryTools();
+            o.current.toolController.setToolEnabled(i[5]), h("shapes"), i[5].setEnabled(!0), a(
+              8
+              /* heart */
+            ), C(
+              8
+              /* heart */
+            );
+          },
+          children: /* @__PURE__ */ e(Ge, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: g(l.tool, {
+            [l.active]: c === "shapes" && T === 9
+            /* star */
+          }),
+          onClick: () => {
+            const i = o.current.toolController.getPrimaryTools();
+            o.current.toolController.setToolEnabled(i[5]), h("shapes"), i[5].setEnabled(!0), a(
+              9
+              /* star */
+            ), C(
+              9
+              /* star */
+            );
+          },
+          children: /* @__PURE__ */ e($e, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: g(l.tool, {
+            [l.active]: c === "shapes" && T === 10
+            /* cloud */
+          }),
+          onClick: () => {
+            const i = o.current.toolController.getPrimaryTools();
+            o.current.toolController.setToolEnabled(i[5]), h("shapes"), i[5].setEnabled(!0), a(
+              10
+              /* cloud */
+            ), C(
+              10
+              /* cloud */
+            );
+          },
+          children: /* @__PURE__ */ e(Ue, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: g(l.tool, {
+            [l.active]: c === "shapes" && T === 11
+            /* parallelogram */
+          }),
+          onClick: () => {
+            const i = o.current.toolController.getPrimaryTools();
+            o.current.toolController.setToolEnabled(i[5]), h("shapes"), i[5].setEnabled(!0), a(
+              11
+              /* parallelogram */
+            ), C(
+              11
+              /* parallelogram */
+            );
+          },
+          children: /* @__PURE__ */ e(je, {})
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: l.line }),
+      /* @__PURE__ */ e("button", { className: g(l.tool), onClick: M, children: /* @__PURE__ */ e(We, {}) }),
+      /* @__PURE__ */ e("button", { className: g(l.tool), onClick: x, children: /* @__PURE__ */ e(Fe, {}) }),
+      /* @__PURE__ */ e("button", { className: g(l.tool), onClick: B, children: /* @__PURE__ */ e(Oe, {}) })
+    ] }),
+    /* @__PURE__ */ y("div", { className: l.optionsWrap, children: [
+      c === "pencil" && /* @__PURE__ */ e(nt, { setColorPen: r, setThicknessPen: n }),
+      c === "highlighter" && /* @__PURE__ */ e(it, { setColorHighlight: v }),
+      c === "shapes" && /* @__PURE__ */ e(
+        st,
+        {
+          changeBorderColorShape: b,
+          changeColorShape: d,
+          changeShape: a,
+          onThicknessChange: S
+        }
+      )
+    ] })
+  ] }) });
+}
+function ct(t = 8) {
+  return Math.random().toString(36).substring(2, t + 2);
+}
+let I = !1;
+function vt() {
+  const t = se(), r = ae(ht.name), { isActive: o = void 0, upload: n } = (r == null ? void 0 : r.componentProps) ?? {}, { editorDisabled: v } = ce(o), [b, M] = H(!1), d = K(null), a = K(null), S = () => {
+    (async () => {
+      const s = document.querySelector("#easydrawer");
+      s && (d.current = new Te(s, {
+        wheelEventsEnabled: !1,
+        disableZoom: !0
+      }), a.current = be(d.current), a.current.addDefaultToolWidgets());
+    })();
+  };
+  $(() => {
+    b && setTimeout(() => {
+      S();
+    }, 200);
+  }, [b]);
+  const x = async () => {
+    if (d.current) {
+      const p = d.current.toSVG(), s = p.outerHTML, w = `drawer-${ct()}.svg`;
+      let k = Ee(p.outerHTML);
+      if (n) {
+        const R = ve(k, w);
+        k = await n(R);
+      }
+      t == null || t.chain().focus().setDrawer(
+        {
+          type: "drawer",
+          src: k,
+          alt: encodeURIComponent(s),
+          width: 426,
+          height: 212
+        },
+        !!s
+      ).run();
+    }
+    M(!1);
+  }, B = (p) => {
+    const s = d.current.toolController.getPrimaryTools()[2], w = a.current.getWidgetById("pen-1");
+    s && w && (s.setColor(p), w.serializeState());
+  }, c = (p) => {
+    const s = d.current.toolController.getPrimaryTools()[2], w = a.current.getWidgetById("pen-1");
+    s && w && (s.setThickness(p), w.serializeState());
+  }, h = (p) => {
+    const s = d.current.toolController.getPrimaryTools()[3], w = a.current.getWidgetById("pen-2");
+    s && w && (s.setColor(p), w.serializeState());
+  }, T = (p) => {
+    const s = a.current.getWidgetById("shape");
+    s && s.setShapeType(p);
+  }, C = (p) => {
+    const s = d.current.toolController.getPrimaryTools()[5], w = a.current.getWidgetById("shape");
+    s && w && (s.setColor(p), w.serializeState());
+  }, i = (p) => {
+    const s = d.current.toolController.getPrimaryTools()[5], w = a.current.getWidgetById("shape");
+    s && w && (s.setThickness(p), w.serializeState());
+  }, O = (p) => {
+    const s = d.current.toolController.getPrimaryTools()[5], w = a.current.getWidgetById("shape");
+    s && w && (s.setBorderColor(p), w.serializeState());
+  }, P = () => {
+    if (I) {
+      for (; d.current.history.redoStackSize > 0; )
+        d.current.history.redo();
+      I = !1;
+      return;
+    }
+    d.current.history.undo();
+  }, D = () => {
+    I || d.current.history.redo();
+  }, V = () => {
+    if (!I) {
+      for (; d.current.history.undoStackSize > 0; )
+        P();
+      I = !0;
+    }
+  };
+  return r ? /* @__PURE__ */ y(he, { onOpenChange: M, open: b, children: [
+    /* @__PURE__ */ e(de, { asChild: !0, children: /* @__PURE__ */ e(
+      ue,
+      {
+        disabled: v,
+        action: () => {
+          v || M(!0);
+        },
+        icon: "PencilRuler",
+        tooltip: "Drawer"
+      }
+    ) }),
+    /* @__PURE__ */ y(ge, { className: "richtext-z-[99999] !richtext-max-w-[1300px]", children: [
+      /* @__PURE__ */ e(me, { children: "Drawer" }),
+      /* @__PURE__ */ y(
+        "div",
+        {
+          style: {
+            height: "600px",
+            width: "100%",
+            borderWidth: 1,
+            background: "white",
+            position: "relative"
+          },
+          children: [
+            /* @__PURE__ */ e("div", { className: "richtext-size-full", id: "easydrawer" }),
+            /* @__PURE__ */ e(
+              at,
+              {
+                changeBorderColorShape: O,
+                changeColorShape: C,
+                changeShape: T,
+                onClear: V,
+                onRedo: D,
+                onThicknessChange: i,
+                onUndo: P,
+                refEditor: d,
+                setColorHighlight: h,
+                setColorPen: B,
+                setThicknessPen: c
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(pe, { children: /* @__PURE__ */ e(we, { onClick: x, type: "button", children: "Save changes" }) })
+    ] })
+  ] }) : /* @__PURE__ */ e(j, {});
+}
+const ht = /* @__PURE__ */ fe.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: r, extension: o }) => {
+        var n;
+        return {
+          componentProps: {
+            action: () => !0,
+            isActive: () => !1,
+            disabled: !1,
+            icon: "PencilRuler",
+            tooltip: r("editor.drawer.tooltip"),
+            upload: (n = o == null ? void 0 : o.options) == null ? void 0 : n.upload
+          }
+        };
+      }
+    };
+  },
+  addAttributes() {
+    var t;
+    return {
+      ...(t = this.parent) == null ? void 0 : t.call(this),
+      width: {
+        default: null,
+        parseHTML: (r) => {
+          const o = r.querySelector("img"), n = o == null ? void 0 : o.getAttribute("width");
+          return n ? Number.parseInt(n, 10) : 320;
+        },
+        renderHTML: (r) => ({
+          width: r.width
+        })
+      },
+      height: {
+        default: null,
+        parseHTML: (r) => {
+          const o = r.querySelector("img"), n = o == null ? void 0 : o.getAttribute("height");
+          return n ? Number.parseInt(n, 10) : 212;
+        },
+        renderHTML: (r) => ({
+          height: r.height
+        })
+      },
+      align: {
+        default: "center",
+        parseHTML: (r) => r.getAttribute("align"),
+        renderHTML: (r) => ({
+          align: r.align
+        })
+      }
+    };
+  },
+  addNodeView() {
+    return ne(xe);
+  },
+  // @ts-ignore
+  addCommands() {
+    return {
+      setDrawer: (t, r) => ({ commands: o, editor: n }) => r ? o.insertContent({
+        type: this.name,
+        attrs: t
+      }) : o.insertContentAt(n.state.selection.anchor, {
+        type: this.name,
+        attrs: t
+      }),
+      setAlignImageDrawer: (t) => ({ commands: r }) => r.updateAttributes(this.name, { align: t })
+    };
+  },
+  renderHTML({ HTMLAttributes: t }) {
+    const { align: r } = t;
+    return [
+      "div",
+      // Parent element
+      {
+        style: r ? `text-align: ${r};` : "",
+        class: "imageDrawer"
+      },
+      [
+        "img",
+        le(
+          // @ts-ignore
+          this.options.HTMLAttributes,
+          t
+        )
+      ]
+    ];
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "div[class=imageDrawer]",
+        getAttrs: (t) => {
+          const r = t.querySelector("img"), o = r == null ? void 0 : r.getAttribute("width"), n = r == null ? void 0 : r.getAttribute("height");
+          return {
+            src: r == null ? void 0 : r.getAttribute("src"),
+            alt: r == null ? void 0 : r.getAttribute("alt"),
+            width: o ? Number.parseInt(o, 10) : null,
+            height: n ? Number.parseInt(n, 10) : null,
+            align: (r == null ? void 0 : r.getAttribute("align")) || t.style.textAlign || null
+          };
+        }
+      }
+    ];
+  }
+});
+export {
+  at as C,
+  ht as D,
+  vt as R,
+  Ee as i,
+  ct as s
+};