dopecanvas 0.1.2 → 0.1.3

package/dist/dopecanvas.js

@@ -1,18 +1,19 @@
-import { jsxs as x, jsx as o } from "react/jsx-runtime";
-import { useRef as M, useState as R, useCallback as p, useEffect as _, forwardRef as ne, useMemo as U, useImperativeHandle as re } from "react";
-const G = ({
-  dimensions: i,
+import { jsxs as C, jsx as r } from "react/jsx-runtime";
+import be, { useState as R, useRef as H, useCallback as h, useEffect as F, forwardRef as Ce, useMemo as ne, useImperativeHandle as ye } from "react";
+import { createPortal as xe } from "react-dom";
+const oe = ({
+  dimensions: s,
   margins: e,
   pageNumber: t,
-  totalPages: r,
-  children: n
-}) => /* @__PURE__ */ x(
+  totalPages: n,
+  children: o
+}) => /* @__PURE__ */ C(
   "div",
   {
     className: "dopecanvas-page",
     style: {
-      width: `${i.width}px`,
-      height: `${i.height}px`,
+      width: `${s.width}px`,
+      height: `${s.height}px`,
       backgroundColor: "#ffffff",
       boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1)",
       position: "relative",
@@ -20,7 +21,7 @@ const G = ({
       flexShrink: 0
     },
     children: [
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ r(
         "div",
         {
           className: "dopecanvas-page-content",
@@ -33,10 +34,10 @@ const G = ({
             boxSizing: "border-box",
             overflow: "hidden"
           },
-          children: n
+          children: o
         }
       ),
-      /* @__PURE__ */ x(
+      /* @__PURE__ */ C(
         "div",
         {
           className: "dopecanvas-page-number",
@@ -55,209 +56,493 @@ const G = ({
           children: [
             t,
             " / ",
-            r
+            n
           ]
         }
       )
     ]
   }
-), ee = {
+), ve = ({
+  visible: s,
+  onAddBelow: e,
+  onEditHTML: t,
+  onDelete: n
+}) => /* @__PURE__ */ C(
+  "div",
+  {
+    className: "dopecanvas-block-toolbar",
+    style: {
+      ...Me,
+      display: s ? "flex" : "none"
+    },
+    onMouseDown: (o) => o.preventDefault(),
+    children: [
+      /* @__PURE__ */ r(X, { onClick: e, title: "Add block below", children: /* @__PURE__ */ r(Se, {}) }),
+      /* @__PURE__ */ r(X, { onClick: t, title: "Edit HTML", children: /* @__PURE__ */ r(ke, {}) }),
+      /* @__PURE__ */ r(X, { onClick: n, title: "Delete block", danger: !0, children: /* @__PURE__ */ r(Te, {}) })
+    ]
+  }
+), Se = () => /* @__PURE__ */ C("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", children: [
+  /* @__PURE__ */ r("line", { x1: "7", y1: "3", x2: "7", y2: "11" }),
+  /* @__PURE__ */ r("line", { x1: "3", y1: "7", x2: "11", y2: "7" })
+] }), ke = () => /* @__PURE__ */ C("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ r("polyline", { points: "4.5,3 1.5,7 4.5,11" }),
+  /* @__PURE__ */ r("polyline", { points: "9.5,3 12.5,7 9.5,11" })
+] }), Te = () => /* @__PURE__ */ r("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ r("path", { d: "M2.5 4h9M5 4V2.5h4V4M3.5 4l.5 8h6l.5-8" }) }), X = ({ onClick: s, title: e, children: t, danger: n }) => {
+  const [o, a] = R(!1);
+  return /* @__PURE__ */ r(
+    "button",
+    {
+      onClick: s,
+      title: e,
+      onMouseEnter: () => a(!0),
+      onMouseLeave: () => a(!1),
+      style: {
+        ...Le,
+        background: o ? n ? "#fff0f0" : "#f0f0f0" : "transparent",
+        color: o && n ? "#d32f2f" : "#666"
+      },
+      children: t
+    }
+  );
+}, Me = {
+  position: "absolute",
+  top: 0,
+  left: -40,
+  flexDirection: "column",
+  gap: "1px",
+  zIndex: 100,
+  background: "#fff",
+  borderRadius: "6px",
+  boxShadow: "0 1px 5px rgba(0,0,0,0.12)",
+  padding: "3px",
+  paddingRight: "6px"
+}, Le = {
+  width: "30px",
+  height: "26px",
+  border: "none",
+  cursor: "pointer",
+  borderRadius: "4px",
+  fontSize: "13px",
+  fontFamily: "system-ui, -apple-system, sans-serif",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 0,
+  transition: "background 0.1s, color 0.1s"
+}, He = ({
+  html: s,
+  onSave: e,
+  onCancel: t
+}) => {
+  const [n, o] = R(s);
+  return xe(
+    /* @__PURE__ */ r("div", { style: Ee, onClick: t, children: /* @__PURE__ */ C("div", { style: we, onClick: (i) => i.stopPropagation(), children: [
+      /* @__PURE__ */ C("div", { style: Re, children: [
+        /* @__PURE__ */ r("span", { style: { fontWeight: 600, fontSize: "14px" }, children: "Edit Block HTML" }),
+        /* @__PURE__ */ r("span", { style: { fontSize: "11px", color: "#888" }, children: "⌘Enter to save · Escape to cancel" })
+      ] }),
+      /* @__PURE__ */ r(
+        "textarea",
+        {
+          style: Pe,
+          value: n,
+          onChange: (i) => o(i.target.value),
+          onKeyDown: (i) => {
+            if (i.key === "Enter" && (i.metaKey || i.ctrlKey) && (i.preventDefault(), e(n)), i.key === "Escape" && (i.preventDefault(), t()), i.key === "Tab") {
+              i.preventDefault();
+              const c = i.target, g = c.selectionStart, S = c.selectionEnd, d = n.substring(0, g) + "  " + n.substring(S);
+              o(d), requestAnimationFrame(() => {
+                c.selectionStart = c.selectionEnd = g + 2;
+              });
+            }
+          },
+          spellCheck: !1,
+          autoFocus: !0
+        }
+      ),
+      /* @__PURE__ */ C("div", { style: _e, children: [
+        /* @__PURE__ */ r(
+          "button",
+          {
+            style: Ae,
+            onClick: t,
+            onMouseEnter: (i) => {
+              i.target.style.borderColor = "#888";
+            },
+            onMouseLeave: (i) => {
+              i.target.style.borderColor = "#555";
+            },
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ r(
+          "button",
+          {
+            style: De,
+            onClick: () => e(n),
+            onMouseEnter: (i) => {
+              i.target.style.background = "#0055dd";
+            },
+            onMouseLeave: (i) => {
+              i.target.style.background = "#0066ff";
+            },
+            children: "Save"
+          }
+        )
+      ] })
+    ] }) }),
+    document.body
+  );
+}, Ee = {
+  position: "fixed",
+  inset: 0,
+  background: "rgba(0, 0, 0, 0.5)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  zIndex: 1e4
+}, we = {
+  width: "min(800px, 90vw)",
+  height: "min(600px, 80vh)",
+  background: "#1e1e1e",
+  borderRadius: "10px",
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden",
+  boxShadow: "0 20px 60px rgba(0, 0, 0, 0.4)"
+}, Re = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  padding: "12px 16px",
+  background: "#2d2d2d",
+  color: "#ccc",
+  borderBottom: "1px solid #444"
+}, Pe = {
+  flex: 1,
+  background: "#1e1e1e",
+  color: "#d4d4d4",
+  border: "none",
+  padding: "16px",
+  fontFamily: "'SF Mono', 'Fira Code', 'Consolas', 'Monaco', monospace",
+  fontSize: "13px",
+  lineHeight: "1.6",
+  resize: "none",
+  outline: "none",
+  tabSize: 2
+}, _e = {
+  display: "flex",
+  justifyContent: "flex-end",
+  gap: "8px",
+  padding: "12px 16px",
+  background: "#2d2d2d",
+  borderTop: "1px solid #444"
+}, Ae = {
+  padding: "6px 16px",
+  border: "1px solid #555",
+  borderRadius: "6px",
+  background: "transparent",
+  color: "#ccc",
+  cursor: "pointer",
+  fontSize: "13px",
+  transition: "border-color 0.15s"
+}, De = {
+  padding: "6px 16px",
+  border: "none",
+  borderRadius: "6px",
+  background: "#0066ff",
+  color: "#fff",
+  cursor: "pointer",
+  fontSize: "13px",
+  fontWeight: 500,
+  transition: "background 0.15s"
+}, ue = {
   letter: { width: 816, height: 1056 },
   // 8.5 x 11 inches
   a4: { width: 794, height: 1123 },
   // 210 x 297 mm
   legal: { width: 816, height: 1344 }
   // 8.5 x 14 inches
-}, ie = {
+}, Ie = {
   top: 96,
   right: 96,
   bottom: 96,
   left: 96
-}, O = {
+}, G = {
   size: "letter",
-  margins: { ...ie }
+  margins: { ...Ie }
 };
-function oe(i) {
+function Be(s) {
   const e = [];
-  return i.querySelectorAll("script").forEach((t) => {
-    const r = document.createElement("script");
+  return s.querySelectorAll("script").forEach((t) => {
+    const n = document.createElement("script");
     Array.from(t.attributes).forEach(
-      (n) => r.setAttribute(n.name, n.value)
-    ), r.textContent = t.textContent || "", t.parentNode?.replaceChild(r, t), e.push(r);
+      (o) => n.setAttribute(o.name, o.value)
+    ), n.textContent = t.textContent || "", t.parentNode?.replaceChild(n, t), e.push(n);
   }), e;
 }
-function ae(i) {
+function ze(s) {
   const e = window.getSelection();
   if (!e || e.rangeCount === 0) return null;
-  const t = e.getRangeAt(0), r = t.startContainer, n = Array.from(
-    i.querySelectorAll(".dopecanvas-block-wrapper")
-  ), s = n.findIndex((a) => a.contains(r));
-  if (s === -1) return null;
+  const t = e.getRangeAt(0), n = t.startContainer, o = Array.from(
+    s.querySelectorAll(".dopecanvas-block-content")
+  ), a = o.findIndex((i) => i.contains(n));
+  if (a === -1) return null;
   try {
-    const a = document.createRange();
-    a.selectNodeContents(n[s]), a.setEnd(t.startContainer, t.startOffset);
-    const l = a.toString().length;
-    return { blockIndex: s, textOffset: l };
+    const i = document.createRange();
+    i.selectNodeContents(o[a]), i.setEnd(t.startContainer, t.startOffset);
+    const c = i.toString().length;
+    return { blockIndex: a, textOffset: c };
   } catch {
     return null;
   }
 }
-function se(i, e) {
-  const t = i.querySelectorAll(".dopecanvas-block-wrapper");
+function Fe(s, e) {
+  const t = s.querySelectorAll(".dopecanvas-block-content");
   if (e.blockIndex >= t.length) return;
-  const r = t[e.blockIndex], n = document.createTreeWalker(r, NodeFilter.SHOW_TEXT);
-  let s = e.textOffset;
-  for (; n.nextNode(); ) {
-    const a = n.currentNode;
-    if (s <= a.length) {
+  const n = t[e.blockIndex], o = document.createTreeWalker(n, NodeFilter.SHOW_TEXT);
+  let a = e.textOffset;
+  for (; o.nextNode(); ) {
+    const i = o.currentNode;
+    if (a <= i.length) {
       try {
-        const l = document.createRange();
-        l.setStart(a, s), l.collapse(!0);
-        const h = window.getSelection();
-        h?.removeAllRanges(), h?.addRange(l);
+        const c = document.createRange();
+        c.setStart(i, a), c.collapse(!0);
+        const g = window.getSelection();
+        g?.removeAllRanges(), g?.addRange(c);
       } catch {
       }
       return;
     }
-    s -= a.length;
+    a -= i.length;
   }
   try {
-    const a = document.createRange();
-    a.selectNodeContents(r), a.collapse(!1);
-    const l = window.getSelection();
-    l?.removeAllRanges(), l?.addRange(a);
+    const i = document.createRange();
+    i.selectNodeContents(n), i.collapse(!1);
+    const c = window.getSelection();
+    c?.removeAllRanges(), c?.addRange(i);
   } catch {
   }
 }
-const le = ({
-  html: i,
+const qe = be.memo(({ html: s, isEditable: e, isTable: t }) => /* @__PURE__ */ r(
+  "div",
+  {
+    className: "dopecanvas-block-content",
+    contentEditable: e && !t ? !0 : void 0,
+    suppressContentEditableWarning: !0,
+    dangerouslySetInnerHTML: { __html: s }
+  }
+)), Ne = ({
+  html: s,
   css: e,
   pageConfig: t,
-  layoutEngine: r,
-  editableManager: n,
-  onContentChange: s,
-  onPaginationChange: a
+  layoutEngine: n,
+  editableManager: o,
+  onContentChange: a,
+  onPaginationChange: i
 }) => {
-  const l = M(null), h = M(null), v = M(null), c = M(s);
-  c.current = s;
-  const [d, L] = R([]), m = M(null), C = M(!1), b = M([]), B = typeof t.size == "string" ? ee[t.size] : t.size, F = p(() => {
-    if (!h.current) return;
-    const g = h.current.querySelectorAll(
-      ".dopecanvas-block-wrapper"
-    ), H = [];
-    g.forEach((y) => {
-      const f = y.firstElementChild;
-      f && H.push(f.outerHTML);
+  const c = H(null), g = H(null), S = H(null), d = H(a);
+  d.current = a;
+  const [p, k] = R([]), A = H(null), y = H(!1), E = H([]), [D, q] = R(null), [B, j] = R(null), [m, x] = R(""), P = H(null), I = typeof t.size == "string" ? ue[t.size] : t.size, V = h(() => {
+    if (!g.current) return;
+    const u = g.current.querySelectorAll(
+      ".dopecanvas-block-content"
+    ), l = [];
+    u.forEach((b) => {
+      const f = b.firstElementChild;
+      f && l.push(f.outerHTML);
     });
-    const T = H.join(`
+    const w = l.join(`
 `);
-    c.current?.(T);
-  }, []), N = p(() => {
-    if (!h.current || !l.current) return;
-    const g = h.current, H = ae(g), T = g.querySelectorAll(".dopecanvas-block-wrapper"), y = [];
-    if (T.forEach((S) => {
-      const D = S.firstElementChild;
-      D && y.push(D.outerHTML);
-    }), y.length === 0) return;
-    const f = l.current, P = r.getContentAreaWidth();
-    if (f.style.width = `${P}px`, f.style.position = "absolute", f.style.left = "-9999px", f.style.top = "0", f.style.visibility = "hidden", f.innerHTML = "", e) {
-      const S = document.createElement("style");
-      S.textContent = e, f.appendChild(S);
-    }
-    const k = document.createElement("div");
-    k.innerHTML = y.join(`
-`), f.appendChild(k);
-    const A = r.measureBlocks(k), I = A.map(
-      (S) => S.element.cloneNode(!0).outerHTML
-    ), w = r.paginate(A);
-    f.innerHTML = "";
-    const q = w.pages.map((S) => ({
-      blocks: S.blockIndices.map((D) => I[D])
-    })), $ = b.current.map((S) => S.blocks.length), V = q.map((S) => S.blocks.length);
-    ($.length !== V.length || $.some((S, D) => S !== V[D])) && (C.current = !0, m.current = H, b.current = q, L(q), a?.(w));
-  }, [e, r, a]), u = M(N);
-  u.current = N;
-  const E = p(() => {
-    if (!l.current) return;
-    const g = l.current, H = r.getContentAreaWidth();
-    if (g.style.width = `${H}px`, g.style.position = "absolute", g.style.left = "-9999px", g.style.top = "0", g.style.visibility = "hidden", g.innerHTML = "", e) {
-      const w = document.createElement("style");
-      w.textContent = e, g.appendChild(w);
+    d.current?.(w);
+  }, []), _ = h((u) => {
+    if (!c.current) return;
+    const l = c.current;
+    if (l.style.width = `${n.getContentAreaWidth()}px`, l.style.position = "absolute", l.style.left = "-9999px", l.style.top = "0", l.style.visibility = "hidden", l.innerHTML = "", e) {
+      const M = document.createElement("style");
+      M.textContent = e, l.appendChild(M);
     }
-    const T = new DOMParser().parseFromString(i, "text/html");
-    T.head.querySelectorAll('style, link[rel="stylesheet"]').forEach((w) => {
-      T.body.insertBefore(w, T.body.firstChild);
-    });
-    const y = T.body.innerHTML, f = document.createElement("div");
-    f.innerHTML = y, g.appendChild(f);
-    const P = r.measureBlocks(f), k = P.map(
-      (w) => w.element.cloneNode(!0).outerHTML
-    ), A = r.paginate(P), I = A.pages.map((w) => ({
-      blocks: w.blockIndices.map((q) => k[q])
+    const w = document.createElement("div");
+    w.innerHTML = u, l.appendChild(w);
+    const b = n.measureBlocks(w), f = b.map(
+      (M) => M.element.cloneNode(!0).outerHTML
+    ), v = n.paginate(b), T = v.pages.map((M) => ({
+      blocks: M.blockIndices.map((N) => f[N])
     }));
-    g.innerHTML = "", b.current = I, L(I), a?.(A);
-  }, [i, e, r, a]);
-  return _(() => {
-    E();
-  }, [E]), _(() => {
-    const g = h.current;
-    if (!g) return;
-    v.current && v.current.disconnect(), g.querySelectorAll(".dopecanvas-block-wrapper").forEach((P) => {
-      const k = P.firstElementChild;
-      k && (k.tagName === "TABLE" ? k.querySelectorAll("td, th").forEach((I) => {
-        I.contentEditable = "true";
-      }) : k.tagName === "SCRIPT" || k.tagName === "STYLE" || (k.contentEditable = "true"));
+    l.innerHTML = "", E.current = T, k(T), i?.(v), d.current?.(u);
+  }, [e, n, i]), J = h(() => {
+    if (!g.current || !c.current) return;
+    const u = g.current, l = ze(u), w = u.querySelectorAll(".dopecanvas-block-content"), b = [];
+    if (w.forEach((L) => {
+      const W = L.firstElementChild;
+      W && b.push(W.outerHTML);
+    }), b.length === 0) return;
+    const f = c.current, v = n.getContentAreaWidth();
+    if (f.style.width = `${v}px`, f.style.position = "absolute", f.style.left = "-9999px", f.style.top = "0", f.style.visibility = "hidden", f.innerHTML = "", e) {
+      const L = document.createElement("style");
+      L.textContent = e, f.appendChild(L);
+    }
+    const T = document.createElement("div");
+    T.innerHTML = b.join(`
+`), f.appendChild(T);
+    const M = n.measureBlocks(T), N = M.map(
+      (L) => L.element.cloneNode(!0).outerHTML
+    ), O = n.paginate(M);
+    f.innerHTML = "";
+    const K = O.pages.map((L) => ({
+      blocks: L.blockIndices.map((W) => N[W])
+    })), ee = E.current.map((L) => L.blocks.length), te = K.map((L) => L.blocks.length);
+    (ee.length !== te.length || ee.some((L, W) => L !== te[W])) && (y.current = !0, A.current = l, E.current = K, k(K), i?.(O));
+  }, [e, n, i]), Q = H(J);
+  Q.current = J;
+  const Y = h(() => {
+    const u = new DOMParser().parseFromString(s, "text/html");
+    u.head.querySelectorAll('style, link[rel="stylesheet"]').forEach((l) => {
+      u.body.insertBefore(l, u.body.firstChild);
+    }), _(u.body.innerHTML);
+  }, [s, _]);
+  F(() => {
+    Y();
+  }, [Y]);
+  const z = h(() => {
+    if (!g.current) return [];
+    const u = g.current.querySelectorAll(
+      ".dopecanvas-block-content"
+    ), l = [];
+    return u.forEach((w) => {
+      const b = w.firstElementChild;
+      b && l.push(b.outerHTML);
+    }), l;
+  }, []), he = h(
+    (u) => {
+      const l = z();
+      l.splice(
+        u + 1,
+        0,
+        '<p style="min-height: 1.5em; line-height: 1.6;">&nbsp;</p>'
+      ), q(null), _(l.join(`
+`));
+    },
+    [z, _]
+  ), ge = h(
+    (u) => {
+      const l = z();
+      l.length <= 1 || (l.splice(u, 1), q(null), _(l.join(`
+`)));
+    },
+    [z, _]
+  ), pe = h(
+    (u) => {
+      const l = z();
+      u < l.length && (j(u), x(l[u]));
+    },
+    [z]
+  ), fe = h(
+    (u) => {
+      if (B === null) return;
+      const l = z();
+      B < l.length && (l[B] = u), j(null), x(""), q(null), _(l.join(`
+`));
+    },
+    [B, z, _]
+  ), me = h(() => {
+    j(null), x("");
+  }, []);
+  return F(() => {
+    const u = g.current;
+    if (!u) return;
+    S.current && S.current.disconnect(), u.querySelectorAll(".dopecanvas-block-content").forEach((v) => {
+      const T = v.firstElementChild;
+      T && T.tagName === "TABLE" && T.querySelectorAll("td, th").forEach((N) => {
+        N.contentEditable = "true";
+      });
     });
-    const T = oe(g);
-    let y = null;
+    const w = Be(u);
+    let b = null;
     const f = new MutationObserver(() => {
-      C.current || (y && clearTimeout(y), y = setTimeout(() => {
-        F(), u.current();
+      y.current || (b && clearTimeout(b), b = setTimeout(() => {
+        V(), Q.current();
       }, 300));
     });
-    return f.observe(g, {
+    return f.observe(u, {
       childList: !0,
       subtree: !0,
       characterData: !0,
       attributes: !1
-    }), v.current = f, m.current ? requestAnimationFrame(() => {
-      m.current && h.current && (se(
-        h.current,
-        m.current
-      ), m.current = null), C.current = !1;
-    }) : C.current = !1, () => {
-      f.disconnect(), T.forEach((P) => P.remove()), y && clearTimeout(y);
+    }), S.current = f, A.current ? requestAnimationFrame(() => {
+      A.current && g.current && (Fe(
+        g.current,
+        A.current
+      ), A.current = null), y.current = !1;
+    }) : y.current = !1, () => {
+      f.disconnect(), w.forEach((v) => v.remove()), b && clearTimeout(b);
     };
-  }, [d, F]), /* @__PURE__ */ x("div", { className: "dopecanvas-paged-view", style: ce, children: [
-    /* @__PURE__ */ o("div", { ref: l, "aria-hidden": "true" }),
-    /* @__PURE__ */ x("div", { ref: h, style: ue, children: [
-      e && /* @__PURE__ */ o("style", { dangerouslySetInnerHTML: { __html: e } }),
-      d.map((g, H) => /* @__PURE__ */ o(
-        G,
-        {
-          dimensions: B,
-          margins: t.margins,
-          pageNumber: H + 1,
-          totalPages: d.length,
-          children: g.blocks.map((T, y) => /* @__PURE__ */ o(
-            "div",
-            {
-              className: "dopecanvas-block-wrapper",
-              dangerouslySetInnerHTML: { __html: T }
-            },
-            `${H}-${y}`
-          ))
-        },
-        H
-      )),
-      d.length === 0 && /* @__PURE__ */ o(
-        G,
+  }, [p, V]), /* @__PURE__ */ C("div", { className: "dopecanvas-paged-view", style: We, children: [
+    /* @__PURE__ */ r("div", { ref: c, "aria-hidden": "true" }),
+    /* @__PURE__ */ C("div", { ref: g, style: je, children: [
+      e && /* @__PURE__ */ r("style", { dangerouslySetInnerHTML: { __html: e } }),
+      p.map((u, l) => {
+        const w = p.slice(0, l).reduce((b, f) => b + f.blocks.length, 0);
+        return /* @__PURE__ */ r(
+          oe,
+          {
+            dimensions: I,
+            margins: t.margins,
+            pageNumber: l + 1,
+            totalPages: p.length,
+            children: u.blocks.map((b, f) => {
+              const v = w + f, T = b.trim().toLowerCase(), M = !T.startsWith("<script") && !T.startsWith("<style"), N = T.startsWith("<table");
+              return /* @__PURE__ */ C(
+                "div",
+                {
+                  className: "dopecanvas-block-wrapper",
+                  style: { position: "relative" },
+                  onMouseEnter: () => {
+                    M && (P.current && (clearTimeout(P.current), P.current = null), q(v));
+                  },
+                  onMouseLeave: () => {
+                    P.current = setTimeout(() => {
+                      q(
+                        (O) => O === v ? null : O
+                      );
+                    }, 250);
+                  },
+                  children: [
+                    /* @__PURE__ */ r(
+                      qe,
+                      {
+                        html: b,
+                        isEditable: M,
+                        isTable: N
+                      }
+                    ),
+                    M && /* @__PURE__ */ r(
+                      ve,
+                      {
+                        visible: D === v,
+                        onAddBelow: () => he(v),
+                        onEditHTML: () => pe(v),
+                        onDelete: () => ge(v)
+                      }
+                    )
+                  ]
+                },
+                `${l}-${f}`
+              );
+            })
+          },
+          l
+        );
+      }),
+      p.length === 0 && /* @__PURE__ */ r(
+        oe,
         {
-          dimensions: B,
+          dimensions: I,
           margins: t.margins,
           pageNumber: 1,
           totalPages: 1,
-          children: /* @__PURE__ */ o(
+          children: /* @__PURE__ */ r(
             "div",
             {
               contentEditable: "true",
@@ -267,25 +552,33 @@ const le = ({
           )
         }
       )
-    ] })
+    ] }),
+    B !== null && /* @__PURE__ */ r(
+      He,
+      {
+        html: m,
+        onSave: fe,
+        onCancel: me
+      }
+    )
   ] });
-}, ce = {
+}, We = {
   flex: 1,
   overflow: "auto",
   backgroundColor: "#e8e8e8",
   display: "flex",
   flexDirection: "column",
   alignItems: "center"
-}, ue = {
+}, je = {
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
   gap: "24px",
   padding: "24px 0"
 };
-class te {
+class de {
   config;
-  constructor(e = O) {
+  constructor(e = G) {
     this.config = { ...e };
   }
   // ----------------------------------------------------------
@@ -299,7 +592,7 @@ class te {
   }
   /** Resolve page size name to pixel dimensions */
   getPageDimensions() {
-    return typeof this.config.size == "string" ? ee[this.config.size] : this.config.size;
+    return typeof this.config.size == "string" ? ue[this.config.size] : this.config.size;
   }
   /** Usable content area height (page height minus top+bottom margins) */
   getContentAreaHeight() {
@@ -318,18 +611,18 @@ class te {
    * so that measurements reflect actual rendered heights.
    */
   measureBlocks(e) {
-    const t = Array.from(e.children), r = [];
-    for (let n = 0; n < t.length; n++) {
-      const s = t[n], a = window.getComputedStyle(s), l = a.getPropertyValue("break-before") === "page" || a.getPropertyValue("page-break-before") === "always", h = a.getPropertyValue("break-after") === "page" || a.getPropertyValue("page-break-after") === "always", v = s.getBoundingClientRect(), c = parseFloat(a.marginTop) || 0, d = parseFloat(a.marginBottom) || 0, L = v.height + c + d;
-      r.push({
-        index: n,
-        height: L,
-        element: s,
-        breakBefore: l,
-        breakAfter: h
+    const t = Array.from(e.children), n = [];
+    for (let o = 0; o < t.length; o++) {
+      const a = t[o], i = window.getComputedStyle(a), c = i.getPropertyValue("break-before") === "page" || i.getPropertyValue("page-break-before") === "always", g = i.getPropertyValue("break-after") === "page" || i.getPropertyValue("page-break-after") === "always", S = a.getBoundingClientRect(), d = parseFloat(i.marginTop) || 0, p = parseFloat(i.marginBottom) || 0, k = S.height + d + p;
+      n.push({
+        index: o,
+        height: k,
+        element: a,
+        breakBefore: c,
+        breakAfter: g
       });
     }
-    return r;
+    return n;
   }
   // ----------------------------------------------------------
   // Pagination
@@ -347,19 +640,19 @@ class te {
   paginate(e) {
     if (e.length === 0)
       return { pages: [{ blockIndices: [] }], pageCount: 1 };
-    const t = this.getContentAreaHeight(), r = [];
-    let n = [], s = 0;
-    for (let a = 0; a < e.length; a++) {
-      const l = e[a];
-      l.breakBefore && n.length > 0 && (r.push({ blockIndices: n }), n = [], s = 0), s + l.height > t && n.length > 0 && (r.push({ blockIndices: n }), n = [], s = 0), n.push(l.index), s += l.height, l.breakAfter && (r.push({ blockIndices: n }), n = [], s = 0);
+    const t = this.getContentAreaHeight(), n = [];
+    let o = [], a = 0;
+    for (let i = 0; i < e.length; i++) {
+      const c = e[i];
+      c.breakBefore && o.length > 0 && (n.push({ blockIndices: o }), o = [], a = 0), a + c.height > t && o.length > 0 && (n.push({ blockIndices: o }), o = [], a = 0), o.push(c.index), a += c.height, c.breakAfter && (n.push({ blockIndices: o }), o = [], a = 0);
     }
-    return n.length > 0 && r.push({ blockIndices: n }), r.length === 0 && r.push({ blockIndices: [] }), {
-      pages: r,
-      pageCount: r.length
+    return o.length > 0 && n.push({ blockIndices: o }), n.length === 0 && n.push({ blockIndices: [] }), {
+      pages: n,
+      pageCount: n.length
     };
   }
 }
-class z {
+class $ {
   observer = null;
   changeCallbacks = /* @__PURE__ */ new Set();
   contextCallbacks = /* @__PURE__ */ new Set();
@@ -402,12 +695,12 @@ class z {
    */
   makeChildrenEditable(e) {
     const t = Array.from(e.children);
-    for (const r of t)
-      r.tagName === "TABLE" ? this.makeTableCellsEditable(r) : r.contentEditable = "true";
+    for (const n of t)
+      n.tagName === "TABLE" ? this.makeTableCellsEditable(n) : n.contentEditable = "true";
   }
   makeTableCellsEditable(e) {
-    e.querySelectorAll("td, th").forEach((r) => {
-      r.contentEditable = "true";
+    e.querySelectorAll("td, th").forEach((n) => {
+      n.contentEditable = "true";
     });
   }
   // ----------------------------------------------------------
@@ -416,7 +709,7 @@ class z {
   handleMutations = (e) => {
     this.debounceTimer && clearTimeout(this.debounceTimer), this.debounceTimer = setTimeout(() => {
       this.pushUndoSnapshot(), this.notifyChange();
-    }, z.DEBOUNCE_MS);
+    }, $.DEBOUNCE_MS);
   };
   // ----------------------------------------------------------
   // Selection / context detection
@@ -427,27 +720,27 @@ class z {
       this.setContext("none");
       return;
     }
-    const r = e.getRangeAt(0).startContainer;
-    let n = r;
-    for (; n && n !== this.container; ) {
-      if (n instanceof HTMLElement) {
-        const s = n.tagName;
-        if (s === "TD" || s === "TH" || s === "TABLE") {
+    const n = e.getRangeAt(0).startContainer;
+    let o = n;
+    for (; o && o !== this.container; ) {
+      if (o instanceof HTMLElement) {
+        const a = o.tagName;
+        if (a === "TD" || a === "TH" || a === "TABLE") {
           this.setContext("table");
           return;
         }
-        if (s === "IMG") {
+        if (a === "IMG") {
           this.setContext("image");
           return;
         }
-        if (n.dataset?.dopecanvasChart) {
+        if (o.dataset?.dopecanvasChart) {
           this.setContext("chart");
           return;
         }
       }
-      n = n.parentNode;
+      o = o.parentNode;
     }
-    this.container.contains(r) ? this.setContext("text") : this.setContext("none");
+    this.container.contains(n) ? this.setContext("text") : this.setContext("none");
   }
   setContext(e) {
     e !== this.currentContext && (this.currentContext = e, this.contextCallbacks.forEach((t) => t(e)));
@@ -461,7 +754,7 @@ class z {
   pushUndoSnapshot() {
     if (!this.container) return;
     const e = this.container.innerHTML, t = this.undoStack[this.undoStack.length - 1];
-    t && t.html === e || (this.undoStack.push({ html: e, timestamp: Date.now() }), this.redoStack = [], this.undoStack.length > z.MAX_UNDO_STACK && this.undoStack.shift());
+    t && t.html === e || (this.undoStack.push({ html: e, timestamp: Date.now() }), this.redoStack = [], this.undoStack.length > $.MAX_UNDO_STACK && this.undoStack.shift());
   }
   undo() {
     if (!this.container || this.undoStack.length <= 1) return !1;
@@ -533,65 +826,91 @@ class z {
     return this.container && (this.container.innerText || this.container.textContent) || "";
   }
 }
-const Me = ne(({
-  html: i = "",
+const rt = Ce(({
+  html: s = "",
   css: e,
   pageConfig: t,
-  onContentChange: r,
-  onPageConfigChange: n,
-  style: s
-}, a) => {
-  const [l, h] = R(
-    t || O
-  ), [v, c] = R({
+  onContentChange: n,
+  onPageConfigChange: o,
+  style: a
+}, i) => {
+  const [c, g] = R(
+    t || G
+  ), [S, d] = R({
     pages: [],
     pageCount: 0
-  }), d = M(i), L = M(r);
-  L.current = r;
-  const m = t || l, C = U(() => new te(m), []), b = U(() => new z(), []);
-  _(() => {
-    C.setConfig(m);
-  }, [m, C]);
-  const B = p(
-    (u) => {
-      d.current = u, L.current?.(u);
+  }), p = H(s), k = H(null), A = H(n);
+  A.current = n;
+  const y = t || c, E = ne(() => new de(y), []), D = ne(() => new $(), []);
+  F(() => {
+    E.setConfig(y);
+  }, [y, E]);
+  const q = h(
+    (m) => {
+      p.current = m, A.current?.(m);
     },
     []
-  ), F = p(
-    (u) => {
-      const E = {
+  ), B = h(
+    (m) => {
+      const x = {
+        ...y,
         ...m,
-        ...u,
         margins: {
-          ...m.margins,
-          ...u.margins || {}
+          ...y.margins,
+          ...m.margins || {}
         }
       };
-      h(E), C.setConfig(E), n?.(E);
+      g(x), E.setConfig(x), o?.(x);
     },
-    [m, C, n]
-  ), N = p((u) => {
-    c(u);
+    [y, E, o]
+  ), j = h((m) => {
+    d(m);
   }, []);
-  return re(a, () => ({
-    execCommand: (u, E) => b.execCommand(u, E),
-    queryCommandState: (u) => b.queryCommandState(u),
-    queryCommandValue: (u) => b.queryCommandValue(u),
-    getPageConfig: () => ({ ...m }),
-    setPageConfig: (u) => {
-      F(u);
+  return ye(i, () => ({
+    execCommand: (m, x) => D.execCommand(m, x),
+    queryCommandState: (m) => D.queryCommandState(m),
+    queryCommandValue: (m) => D.queryCommandValue(m),
+    getPageConfig: () => ({ ...y }),
+    setPageConfig: (m) => {
+      B(m);
+    },
+    getPageCount: () => S.pageCount,
+    getHTML: () => {
+      if (k.current) {
+        const m = k.current.querySelectorAll(
+          ".dopecanvas-block-content"
+        );
+        if (m.length > 0) {
+          const x = [];
+          if (m.forEach((P) => {
+            const I = P.firstElementChild;
+            I && x.push(I.outerHTML);
+          }), x.length > 0) {
+            const P = x.join(`
+`);
+            return p.current = P, P;
+          }
+        }
+      }
+      return p.current;
     },
-    getPageCount: () => v.pageCount,
-    getHTML: () => d.current,
     getPlainText: () => {
-      const u = document.createElement("div");
-      return u.innerHTML = d.current, u.innerText || u.textContent || "";
+      const m = k.current ? (() => {
+        const P = k.current.querySelectorAll(".dopecanvas-block-content"), I = [];
+        return P.forEach((V) => {
+          const _ = V.firstElementChild;
+          _ && I.push(_.outerHTML);
+        }), I.length > 0 ? I.join(`
+`) : p.current;
+      })() : p.current, x = document.createElement("div");
+      return x.innerHTML = m, x.innerText || x.textContent || "";
     },
-    undo: () => b.undo(),
-    redo: () => b.redo()
-  }), [b, m, v.pageCount, F]), /* @__PURE__ */ o(
+    undo: () => D.undo(),
+    redo: () => D.redo()
+  }), [D, y, S.pageCount, B]), /* @__PURE__ */ r(
     "div",
     {
+      ref: k,
       className: "dopecanvas-root",
       style: {
         display: "flex",
@@ -599,24 +918,24 @@ const Me = ne(({
         height: "100%",
         width: "100%",
         fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, sans-serif",
-        ...s
+        ...a
       },
-      children: /* @__PURE__ */ o(
-        le,
+      children: /* @__PURE__ */ r(
+        Ne,
         {
-          html: i,
+          html: s,
           css: e,
-          pageConfig: m,
-          layoutEngine: C,
-          editableManager: b,
-          onContentChange: B,
-          onPaginationChange: N
+          pageConfig: y,
+          layoutEngine: E,
+          editableManager: D,
+          onContentChange: q,
+          onPaginationChange: j
         }
       )
     }
   );
 });
-class he {
+class Oe {
   layoutEngine;
   editableManager;
   sourceHTML = "";
@@ -626,8 +945,8 @@ class he {
   paginationResult = { pages: [], pageCount: 0 };
   paginationCallbacks = /* @__PURE__ */ new Set();
   changeCallbacks = /* @__PURE__ */ new Set();
-  constructor(e = O) {
-    this.layoutEngine = new te(e), this.editableManager = new z();
+  constructor(e = G) {
+    this.layoutEngine = new de(e), this.editableManager = new $();
   }
   // ----------------------------------------------------------
   // Accessors
@@ -695,10 +1014,10 @@ class he {
     this.measureContainer.style.width = `${e}px`, this.measureContainer.style.position = "absolute", this.measureContainer.style.left = "-9999px", this.measureContainer.style.top = "0", this.measureContainer.style.visibility = "hidden";
     let t = null;
     this.sourceCSS && (t = document.createElement("style"), t.textContent = this.sourceCSS, this.measureContainer.appendChild(t));
-    const r = document.createElement("div");
-    r.innerHTML = this.sourceHTML, this.measureContainer.appendChild(r);
-    const n = this.layoutEngine.measureBlocks(r);
-    return this.paginationResult = this.layoutEngine.paginate(n), this.measureContainer.innerHTML = "", this.paginationCallbacks.forEach((s) => s(this.paginationResult)), { result: this.paginationResult, measurements: n };
+    const n = document.createElement("div");
+    n.innerHTML = this.sourceHTML, this.measureContainer.appendChild(n);
+    const o = this.layoutEngine.measureBlocks(n);
+    return this.paginationResult = this.layoutEngine.paginate(o), this.measureContainer.innerHTML = "", this.paginationCallbacks.forEach((a) => a(this.paginationResult)), { result: this.paginationResult, measurements: o };
   }
   /**
    * Re-paginate using the current content container's live DOM.
@@ -757,7 +1076,7 @@ class he {
     this.editableManager.detach(), this.paginationCallbacks.clear(), this.changeCallbacks.clear(), this.measureContainer = null, this.contentContainer = null;
   }
 }
-class Le {
+class it {
   _html = "";
   _css = "";
   _pageConfig = null;
@@ -777,7 +1096,7 @@ class Le {
    * Optionally provide CSS to inject alongside.
    */
   loadHTML(e, t) {
-    this._html = e, this._css = t || "", this._loadCallbacks.forEach((r) => r(e, t));
+    this._html = e, this._css = t || "", this._loadCallbacks.forEach((n) => n(e, t));
   }
   /**
    * Get the current document HTML content.
@@ -869,18 +1188,18 @@ class Le {
   getElementContent(e) {
     const t = document.createElement("div");
     t.innerHTML = this.getHTML();
-    const r = t.querySelector(`#${e}`);
-    return r ? r.innerHTML : null;
+    const n = t.querySelector(`#${e}`);
+    return n ? n.innerHTML : null;
   }
   /**
    * Set the innerHTML of a specific element by its ID.
    * Re-loads the full document with the modification.
    */
   setElementContent(e, t) {
-    const r = document.createElement("div");
-    r.innerHTML = this.getHTML();
-    const n = r.querySelector(`#${e}`);
-    n && (n.innerHTML = t, this.loadHTML(r.innerHTML, this._css));
+    const n = document.createElement("div");
+    n.innerHTML = this.getHTML();
+    const o = n.querySelector(`#${e}`);
+    o && (o.innerHTML = t, this.loadHTML(n.innerHTML, this._css));
   }
   // ----------------------------------------------------------
   // Internal connectors (used by DopeCanvas component)
@@ -906,14 +1225,14 @@ class Le {
     this._pageConfig = e;
   }
 }
-function He(i) {
+function st(s) {
   const [e, t] = R("none");
-  return _(() => i ? i.onContextChange((n) => {
-    t(n);
-  }) : void 0, [i]), e;
+  return F(() => s ? s.onContextChange((o) => {
+    t(o);
+  }) : void 0, [s]), e;
 }
-function de() {
-  const [i, e] = R({
+function $e() {
+  const [s, e] = R({
     bold: !1,
     italic: !1,
     underline: !1,
@@ -922,7 +1241,7 @@ function de() {
     justifyCenter: !1,
     justifyRight: !1,
     justifyFull: !1
-  }), t = p(() => {
+  }), t = h(() => {
     e({
       bold: document.queryCommandState("bold"),
       italic: document.queryCommandState("italic"),
@@ -934,146 +1253,146 @@ function de() {
       justifyFull: document.queryCommandState("justifyFull")
     });
   }, []);
-  return _(() => (document.addEventListener("selectionchange", t), () => {
+  return F(() => (document.addEventListener("selectionchange", t), () => {
     document.removeEventListener("selectionchange", t);
-  }), [t]), i;
+  }), [t]), s;
 }
-const ge = ({ onExecCommand: i }) => {
-  const e = de(), t = M(null), r = p(() => {
-    const c = window.getSelection();
-    c && c.rangeCount > 0 && (t.current = c.getRangeAt(0).cloneRange());
-  }, []), n = p(() => {
-    const c = t.current;
-    if (!c) return;
+const Ve = ({ onExecCommand: s }) => {
+  const e = $e(), t = H(null), n = h(() => {
     const d = window.getSelection();
-    d && (d.removeAllRanges(), d.addRange(c));
-  }, []), s = p(
-    (c, d) => (L) => {
-      L.preventDefault(), i(c, d);
+    d && d.rangeCount > 0 && (t.current = d.getRangeAt(0).cloneRange());
+  }, []), o = h(() => {
+    const d = t.current;
+    if (!d) return;
+    const p = window.getSelection();
+    p && (p.removeAllRanges(), p.addRange(d));
+  }, []), a = h(
+    (d, p) => (k) => {
+      k.preventDefault(), s(d, p);
     },
-    [i]
-  ), a = p(
-    (c) => {
-      n(), i("fontSize", c.target.value);
+    [s]
+  ), i = h(
+    (d) => {
+      o(), s("fontSize", d.target.value);
     },
-    [i, n]
-  ), l = p(
-    (c) => {
-      n();
-      const d = c.target.value;
-      d === "p" ? i("formatBlock", "p") : i("formatBlock", d);
+    [s, o]
+  ), c = h(
+    (d) => {
+      o();
+      const p = d.target.value;
+      p === "p" ? s("formatBlock", "p") : s("formatBlock", p);
     },
-    [i, n]
-  ), h = p(
-    (c) => {
-      n(), i("foreColor", c.target.value);
+    [s, o]
+  ), g = h(
+    (d) => {
+      o(), s("foreColor", d.target.value);
     },
-    [i, n]
-  ), v = p(
-    (c) => {
-      n(), i("hiliteColor", c.target.value);
+    [s, o]
+  ), S = h(
+    (d) => {
+      o(), s("hiliteColor", d.target.value);
     },
-    [i, n]
+    [s, o]
   );
-  return /* @__PURE__ */ x("div", { style: pe, children: [
-    /* @__PURE__ */ x(
+  return /* @__PURE__ */ C("div", { style: Ue, children: [
+    /* @__PURE__ */ C(
       "select",
       {
-        onChange: l,
+        onChange: c,
         defaultValue: "p",
-        style: K,
+        style: ie,
         title: "Block Format",
-        onMouseDown: r,
+        onMouseDown: n,
         children: [
-          /* @__PURE__ */ o("option", { value: "p", children: "Paragraph" }),
-          /* @__PURE__ */ o("option", { value: "h1", children: "Heading 1" }),
-          /* @__PURE__ */ o("option", { value: "h2", children: "Heading 2" }),
-          /* @__PURE__ */ o("option", { value: "h3", children: "Heading 3" }),
-          /* @__PURE__ */ o("option", { value: "h4", children: "Heading 4" }),
-          /* @__PURE__ */ o("option", { value: "h5", children: "Heading 5" }),
-          /* @__PURE__ */ o("option", { value: "h6", children: "Heading 6" })
+          /* @__PURE__ */ r("option", { value: "p", children: "Paragraph" }),
+          /* @__PURE__ */ r("option", { value: "h1", children: "Heading 1" }),
+          /* @__PURE__ */ r("option", { value: "h2", children: "Heading 2" }),
+          /* @__PURE__ */ r("option", { value: "h3", children: "Heading 3" }),
+          /* @__PURE__ */ r("option", { value: "h4", children: "Heading 4" }),
+          /* @__PURE__ */ r("option", { value: "h5", children: "Heading 5" }),
+          /* @__PURE__ */ r("option", { value: "h6", children: "Heading 6" })
         ]
       }
     ),
-    /* @__PURE__ */ o("div", { style: j }),
-    /* @__PURE__ */ x(
+    /* @__PURE__ */ r("div", { style: Z }),
+    /* @__PURE__ */ C(
       "select",
       {
-        onChange: a,
+        onChange: i,
         defaultValue: "3",
-        style: K,
+        style: ie,
         title: "Font Size",
-        onMouseDown: r,
+        onMouseDown: n,
         children: [
-          /* @__PURE__ */ o("option", { value: "1", children: "8pt" }),
-          /* @__PURE__ */ o("option", { value: "2", children: "10pt" }),
-          /* @__PURE__ */ o("option", { value: "3", children: "12pt" }),
-          /* @__PURE__ */ o("option", { value: "4", children: "14pt" }),
-          /* @__PURE__ */ o("option", { value: "5", children: "18pt" }),
-          /* @__PURE__ */ o("option", { value: "6", children: "24pt" }),
-          /* @__PURE__ */ o("option", { value: "7", children: "36pt" })
+          /* @__PURE__ */ r("option", { value: "1", children: "8pt" }),
+          /* @__PURE__ */ r("option", { value: "2", children: "10pt" }),
+          /* @__PURE__ */ r("option", { value: "3", children: "12pt" }),
+          /* @__PURE__ */ r("option", { value: "4", children: "14pt" }),
+          /* @__PURE__ */ r("option", { value: "5", children: "18pt" }),
+          /* @__PURE__ */ r("option", { value: "6", children: "24pt" }),
+          /* @__PURE__ */ r("option", { value: "7", children: "36pt" })
         ]
       }
     ),
-    /* @__PURE__ */ o("div", { style: j }),
-    /* @__PURE__ */ o(
-      X,
+    /* @__PURE__ */ r("div", { style: Z }),
+    /* @__PURE__ */ r(
+      re,
       {
         icon: "B",
         title: "Bold (Ctrl+B)",
         active: e.bold,
-        onMouseDown: s("bold"),
+        onMouseDown: a("bold"),
         extraStyle: { fontWeight: "bold" }
       }
     ),
-    /* @__PURE__ */ o(
-      X,
+    /* @__PURE__ */ r(
+      re,
       {
         icon: "I",
         title: "Italic (Ctrl+I)",
         active: e.italic,
-        onMouseDown: s("italic"),
+        onMouseDown: a("italic"),
         extraStyle: { fontStyle: "italic" }
       }
     ),
-    /* @__PURE__ */ o("div", { style: j }),
-    /* @__PURE__ */ x("label", { style: Y, title: "Text Color", onMouseDown: r, children: [
+    /* @__PURE__ */ r("div", { style: Z }),
+    /* @__PURE__ */ C("label", { style: se, title: "Text Color", onMouseDown: n, children: [
       "A",
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ r(
         "input",
         {
           type: "color",
           defaultValue: "#000000",
-          onChange: h,
-          style: Z
+          onChange: g,
+          style: ae
         }
       )
     ] }),
-    /* @__PURE__ */ x("label", { style: Y, title: "Highlight Color", onMouseDown: r, children: [
-      /* @__PURE__ */ o("span", { style: { backgroundColor: "#ffff00", padding: "0 2px" }, children: "A" }),
-      /* @__PURE__ */ o(
+    /* @__PURE__ */ C("label", { style: se, title: "Highlight Color", onMouseDown: n, children: [
+      /* @__PURE__ */ r("span", { style: { backgroundColor: "#ffff00", padding: "0 2px" }, children: "A" }),
+      /* @__PURE__ */ r(
         "input",
         {
           type: "color",
           defaultValue: "#ffff00",
-          onChange: v,
-          style: Z
+          onChange: S,
+          style: ae
         }
       )
     ] })
   ] });
-}, X = ({
-  icon: i,
+}, re = ({
+  icon: s,
   title: e,
   active: t,
-  onMouseDown: r,
-  extraStyle: n
-}) => /* @__PURE__ */ o(
+  onMouseDown: n,
+  extraStyle: o
+}) => /* @__PURE__ */ r(
   "button",
   {
     type: "button",
     title: e,
-    onMouseDown: r,
+    onMouseDown: n,
     style: {
       width: "28px",
       height: "28px",
@@ -1090,16 +1409,16 @@ const ge = ({ onExecCommand: i }) => {
       color: "#333",
       padding: 0,
       fontFamily: "inherit",
-      ...n
+      ...o
     },
-    dangerouslySetInnerHTML: { __html: i }
+    dangerouslySetInnerHTML: { __html: s }
   }
-), pe = {
+), Ue = {
   display: "flex",
   alignItems: "center",
   gap: "2px",
   flexWrap: "wrap"
-}, K = {
+}, ie = {
   height: "28px",
   borderWidth: "1px",
   borderStyle: "solid",
@@ -1109,12 +1428,12 @@ const ge = ({ onExecCommand: i }) => {
   padding: "0 4px",
   cursor: "pointer",
   backgroundColor: "#fff"
-}, j = {
+}, Z = {
   width: "1px",
   height: "20px",
   backgroundColor: "#ddd",
   margin: "0 4px"
-}, Y = {
+}, se = {
   position: "relative",
   width: "28px",
   height: "28px",
@@ -1124,7 +1443,7 @@ const ge = ({ onExecCommand: i }) => {
   cursor: "pointer",
   fontSize: "13px",
   fontWeight: "bold"
-}, Z = {
+}, ae = {
   position: "absolute",
   bottom: 0,
   left: 0,
@@ -1134,114 +1453,114 @@ const ge = ({ onExecCommand: i }) => {
   borderWidth: 0,
   borderStyle: "none",
   cursor: "pointer"
-}, fe = ({
-  pageConfig: i,
+}, Ge = ({
+  pageConfig: s,
   pageCount: e,
   onPageConfigChange: t
 }) => {
-  const r = p(
-    (a) => {
-      const l = a.target.value;
-      t({ size: l });
+  const n = h(
+    (i) => {
+      const c = i.target.value;
+      t({ size: c });
     },
     [t]
-  ), n = p(
-    (a) => (l) => {
-      const h = Math.max(0, parseInt(l.target.value) || 0);
+  ), o = h(
+    (i) => (c) => {
+      const g = Math.max(0, parseInt(c.target.value) || 0);
       t({
         margins: {
-          ...i.margins,
-          [a]: h
+          ...s.margins,
+          [i]: g
         }
       });
     },
-    [i.margins, t]
-  ), s = typeof i.size == "string" ? i.size : "custom";
-  return /* @__PURE__ */ x("div", { style: me, children: [
-    /* @__PURE__ */ x("label", { style: Ce, children: [
+    [s.margins, t]
+  ), a = typeof s.size == "string" ? s.size : "custom";
+  return /* @__PURE__ */ C("div", { style: Ke, children: [
+    /* @__PURE__ */ C("label", { style: Xe, children: [
       "Page:",
-      /* @__PURE__ */ x(
+      /* @__PURE__ */ C(
         "select",
         {
-          value: s,
-          onChange: r,
-          style: be,
+          value: a,
+          onChange: n,
+          style: Ze,
           children: [
-            /* @__PURE__ */ o("option", { value: "letter", children: "Letter (8.5 x 11)" }),
-            /* @__PURE__ */ o("option", { value: "a4", children: "A4 (210 x 297mm)" }),
-            /* @__PURE__ */ o("option", { value: "legal", children: "Legal (8.5 x 14)" })
+            /* @__PURE__ */ r("option", { value: "letter", children: "Letter (8.5 x 11)" }),
+            /* @__PURE__ */ r("option", { value: "a4", children: "A4 (210 x 297mm)" }),
+            /* @__PURE__ */ r("option", { value: "legal", children: "Legal (8.5 x 14)" })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ o("div", { style: J }),
-    /* @__PURE__ */ o("span", { style: { fontSize: "12px", color: "#666" }, children: "Margins (px):" }),
-    /* @__PURE__ */ o(
-      W,
+    /* @__PURE__ */ r("div", { style: le }),
+    /* @__PURE__ */ r("span", { style: { fontSize: "12px", color: "#666" }, children: "Margins (px):" }),
+    /* @__PURE__ */ r(
+      U,
       {
         label: "T",
-        value: i.margins.top,
-        onChange: n("top")
+        value: s.margins.top,
+        onChange: o("top")
       }
     ),
-    /* @__PURE__ */ o(
-      W,
+    /* @__PURE__ */ r(
+      U,
       {
         label: "R",
-        value: i.margins.right,
-        onChange: n("right")
+        value: s.margins.right,
+        onChange: o("right")
       }
     ),
-    /* @__PURE__ */ o(
-      W,
+    /* @__PURE__ */ r(
+      U,
       {
         label: "B",
-        value: i.margins.bottom,
-        onChange: n("bottom")
+        value: s.margins.bottom,
+        onChange: o("bottom")
       }
     ),
-    /* @__PURE__ */ o(
-      W,
+    /* @__PURE__ */ r(
+      U,
       {
         label: "L",
-        value: i.margins.left,
-        onChange: n("left")
+        value: s.margins.left,
+        onChange: o("left")
       }
     ),
-    /* @__PURE__ */ o("div", { style: J }),
-    /* @__PURE__ */ x("span", { style: { fontSize: "12px", color: "#666" }, children: [
+    /* @__PURE__ */ r("div", { style: le }),
+    /* @__PURE__ */ C("span", { style: { fontSize: "12px", color: "#666" }, children: [
       e,
       " ",
       e === 1 ? "page" : "pages"
     ] })
   ] });
-}, W = ({ label: i, value: e, onChange: t }) => /* @__PURE__ */ x("label", { style: ye, title: `${i} margin`, children: [
-  i,
+}, U = ({ label: s, value: e, onChange: t }) => /* @__PURE__ */ C("label", { style: Je, title: `${s} margin`, children: [
+  s,
   ":",
-  /* @__PURE__ */ o(
+  /* @__PURE__ */ r(
     "input",
     {
       type: "number",
       value: e,
       onChange: t,
-      style: xe,
+      style: Qe,
       min: 0,
       max: 300,
       step: 12
     }
   )
-] }), me = {
+] }), Ke = {
   display: "flex",
   alignItems: "center",
   gap: "6px",
   flexWrap: "wrap"
-}, Ce = {
+}, Xe = {
   display: "flex",
   alignItems: "center",
   gap: "4px",
   fontSize: "12px",
   color: "#666"
-}, be = {
+}, Ze = {
   height: "26px",
   borderWidth: "1px",
   borderStyle: "solid",
@@ -1251,18 +1570,18 @@ const ge = ({ onExecCommand: i }) => {
   padding: "0 4px",
   cursor: "pointer",
   backgroundColor: "#fff"
-}, J = {
+}, le = {
   width: "1px",
   height: "20px",
   backgroundColor: "#ddd",
   margin: "0 4px"
-}, ye = {
+}, Je = {
   display: "flex",
   alignItems: "center",
   gap: "2px",
   fontSize: "11px",
   color: "#666"
-}, xe = {
+}, Qe = {
   width: "44px",
   height: "24px",
   borderWidth: "1px",
@@ -1272,22 +1591,22 @@ const ge = ({ onExecCommand: i }) => {
   fontSize: "11px",
   textAlign: "center",
   padding: "0 2px"
-}, we = ({
-  pageConfig: i,
+}, at = ({
+  pageConfig: s,
   pageCount: e,
   onExecCommand: t,
-  onPageConfigChange: r
-}) => /* @__PURE__ */ x("div", { style: Se, children: [
-  /* @__PURE__ */ o("div", { style: Q, children: /* @__PURE__ */ o(ge, { onExecCommand: t }) }),
-  /* @__PURE__ */ o("div", { style: Q, children: /* @__PURE__ */ o(
-    fe,
+  onPageConfigChange: n
+}) => /* @__PURE__ */ C("div", { style: Ye, children: [
+  /* @__PURE__ */ r("div", { style: ce, children: /* @__PURE__ */ r(Ve, { onExecCommand: t }) }),
+  /* @__PURE__ */ r("div", { style: ce, children: /* @__PURE__ */ r(
+    Ge,
     {
-      pageConfig: i,
+      pageConfig: s,
       pageCount: e,
-      onPageConfigChange: r
+      onPageConfigChange: n
     }
   ) })
-] }), Se = {
+] }), Ye = {
   borderBottomWidth: "1px",
   borderBottomStyle: "solid",
   borderBottomColor: "#d0d0d0",
@@ -1298,59 +1617,59 @@ const ge = ({ onExecCommand: i }) => {
   gap: "4px",
   flexShrink: 0,
   zIndex: 10
-}, Q = {
+}, ce = {
   display: "flex",
   alignItems: "center",
   gap: "4px",
   minHeight: "32px"
 };
-function Ee(i = {}) {
+function lt(s = {}) {
   const {
     initialHTML: e = "",
     initialCSS: t = "",
-    initialConfig: r = O
-  } = i, n = M(new he(r)), [s, a] = R({
+    initialConfig: n = G
+  } = s, o = H(new Oe(n)), [a, i] = R({
     pages: [{ blockIndices: [] }],
     pageCount: 1
-  }), [l, h] = R(r), v = p((C, b) => {
-    n.current.loadHTML(C, b);
-  }, []), c = p((C) => {
-    n.current.setPageConfig(C), h(n.current.getPageConfig());
-  }, []), d = p(() => {
-    const { result: C } = n.current.runPagination();
-    a(C);
-  }, []), L = p(() => n.current.getHTML(), []), m = p(() => n.current.getPlainText(), []);
-  return _(() => {
-    e && n.current.loadHTML(e, t);
-  }, [e, t]), _(() => n.current.onPagination((b) => {
-    a(b);
-  }), []), _(() => () => {
-    n.current.destroy();
+  }), [c, g] = R(n), S = h((y, E) => {
+    o.current.loadHTML(y, E);
+  }, []), d = h((y) => {
+    o.current.setPageConfig(y), g(o.current.getPageConfig());
+  }, []), p = h(() => {
+    const { result: y } = o.current.runPagination();
+    i(y);
+  }, []), k = h(() => o.current.getHTML(), []), A = h(() => o.current.getPlainText(), []);
+  return F(() => {
+    e && o.current.loadHTML(e, t);
+  }, [e, t]), F(() => o.current.onPagination((E) => {
+    i(E);
+  }), []), F(() => () => {
+    o.current.destroy();
   }, []), {
-    engine: n.current,
-    paginationResult: s,
-    pageConfig: l,
-    loadHTML: v,
-    setPageConfig: c,
-    triggerPagination: d,
-    getHTML: L,
-    getPlainText: m
+    engine: o.current,
+    paginationResult: a,
+    pageConfig: c,
+    loadHTML: S,
+    setPageConfig: d,
+    triggerPagination: p,
+    getHTML: k,
+    getPlainText: A
   };
 }
 export {
-  ie as DEFAULT_MARGINS,
-  O as DEFAULT_PAGE_CONFIG,
-  Le as DocumentAPI,
-  he as DocumentEngine,
-  Me as DopeCanvas,
-  z as EditableManager,
-  ee as PAGE_SIZE_PRESETS,
-  te as PageLayoutEngine,
-  fe as PageSetupToolbar,
-  ge as TextToolbar,
-  we as Toolbar,
-  Ee as useDocumentEngine,
-  de as useFormattingState,
-  He as useSelectionContext
+  Ie as DEFAULT_MARGINS,
+  G as DEFAULT_PAGE_CONFIG,
+  it as DocumentAPI,
+  Oe as DocumentEngine,
+  rt as DopeCanvas,
+  $ as EditableManager,
+  ue as PAGE_SIZE_PRESETS,
+  de as PageLayoutEngine,
+  Ge as PageSetupToolbar,
+  Ve as TextToolbar,
+  at as Toolbar,
+  lt as useDocumentEngine,
+  $e as useFormattingState,
+  st as useSelectionContext
 };
 //# sourceMappingURL=dopecanvas.js.map