dopecanvas 0.1.2 → 0.1.4

package/dist/dopecanvas.js

@@ -1,12 +1,13 @@
-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 = ({
+import { jsxs as k, jsx as r } from "react/jsx-runtime";
+import qe, { useState as $, forwardRef as Be, useRef as I, useCallback as x, useEffect as Y, useImperativeHandle as Pe, useMemo as Te } from "react";
+import { createPortal as je } from "react-dom";
+const Me = ({
   dimensions: i,
   margins: e,
   pageNumber: t,
-  totalPages: r,
+  totalPages: o,
   children: n
-}) => /* @__PURE__ */ x(
+}) => /* @__PURE__ */ k(
   "div",
   {
     className: "dopecanvas-page",
@@ -20,7 +21,7 @@ const G = ({
       flexShrink: 0
     },
     children: [
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ r(
         "div",
         {
           className: "dopecanvas-page-content",
@@ -36,7 +37,7 @@ const G = ({
           children: n
         }
       ),
-      /* @__PURE__ */ x(
+      /* @__PURE__ */ k(
         "div",
         {
           className: "dopecanvas-page-number",
@@ -55,209 +56,853 @@ const G = ({
           children: [
             t,
             " / ",
-            r
+            o
           ]
         }
       )
     ]
   }
-), ee = {
+), We = ({
+  visible: i,
+  onAddBelow: e,
+  onEditHTML: t,
+  onDelete: o
+}) => /* @__PURE__ */ k(
+  "div",
+  {
+    className: "dopecanvas-block-toolbar",
+    style: {
+      ...Ue,
+      display: i ? "flex" : "none"
+    },
+    onMouseDown: (n) => n.preventDefault(),
+    children: [
+      /* @__PURE__ */ r(xe, { onClick: e, title: "Add block below", children: /* @__PURE__ */ r(Oe, {}) }),
+      /* @__PURE__ */ r(xe, { onClick: t, title: "Edit HTML", children: /* @__PURE__ */ r($e, {}) }),
+      /* @__PURE__ */ r(xe, { onClick: o, title: "Delete block", danger: !0, children: /* @__PURE__ */ r(Ve, {}) })
+    ]
+  }
+), Oe = () => /* @__PURE__ */ k("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" })
+] }), $e = () => /* @__PURE__ */ k("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" })
+] }), Ve = () => /* @__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" }) }), xe = ({ onClick: i, title: e, children: t, danger: o }) => {
+  const [n, a] = $(!1);
+  return /* @__PURE__ */ r(
+    "button",
+    {
+      onClick: i,
+      title: e,
+      onMouseEnter: () => a(!0),
+      onMouseLeave: () => a(!1),
+      style: {
+        ...Ge,
+        background: n ? o ? "#fff0f0" : "#f0f0f0" : "transparent",
+        color: n && o ? "#d32f2f" : "#666"
+      },
+      children: t
+    }
+  );
+}, Ue = {
+  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"
+}, Ge = {
+  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"
+}, Ke = ({
+  html: i,
+  onSave: e,
+  onCancel: t
+}) => {
+  const [o, n] = $(i);
+  return je(
+    /* @__PURE__ */ r("div", { style: Xe, onClick: t, children: /* @__PURE__ */ k("div", { style: Je, onClick: (s) => s.stopPropagation(), children: [
+      /* @__PURE__ */ k("div", { style: Ze, 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: Qe,
+          value: o,
+          onChange: (s) => n(s.target.value),
+          onKeyDown: (s) => {
+            if (s.key === "Enter" && (s.metaKey || s.ctrlKey) && (s.preventDefault(), e(o)), s.key === "Escape" && (s.preventDefault(), t()), s.key === "Tab") {
+              s.preventDefault();
+              const d = s.target, c = d.selectionStart, g = d.selectionEnd, f = o.substring(0, c) + "  " + o.substring(g);
+              n(f), requestAnimationFrame(() => {
+                d.selectionStart = d.selectionEnd = c + 2;
+              });
+            }
+          },
+          spellCheck: !1,
+          autoFocus: !0
+        }
+      ),
+      /* @__PURE__ */ k("div", { style: Ye, children: [
+        /* @__PURE__ */ r(
+          "button",
+          {
+            style: et,
+            onClick: t,
+            onMouseEnter: (s) => {
+              s.target.style.borderColor = "#888";
+            },
+            onMouseLeave: (s) => {
+              s.target.style.borderColor = "#555";
+            },
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ r(
+          "button",
+          {
+            style: tt,
+            onClick: () => e(o),
+            onMouseEnter: (s) => {
+              s.target.style.background = "#0055dd";
+            },
+            onMouseLeave: (s) => {
+              s.target.style.background = "#0066ff";
+            },
+            children: "Save"
+          }
+        )
+      ] })
+    ] }) }),
+    document.body
+  );
+}, Xe = {
+  position: "fixed",
+  inset: 0,
+  background: "rgba(0, 0, 0, 0.5)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  zIndex: 1e4
+}, Je = {
+  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)"
+}, Ze = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  padding: "12px 16px",
+  background: "#2d2d2d",
+  color: "#ccc",
+  borderBottom: "1px solid #444"
+}, Qe = {
+  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
+}, Ye = {
+  display: "flex",
+  justifyContent: "flex-end",
+  gap: "8px",
+  padding: "12px 16px",
+  background: "#2d2d2d",
+  borderTop: "1px solid #444"
+}, et = {
+  padding: "6px 16px",
+  border: "1px solid #555",
+  borderRadius: "6px",
+  background: "transparent",
+  color: "#ccc",
+  cursor: "pointer",
+  fontSize: "13px",
+  transition: "border-color 0.15s"
+}, tt = {
+  padding: "6px 16px",
+  border: "none",
+  borderRadius: "6px",
+  background: "#0066ff",
+  color: "#fff",
+  cursor: "pointer",
+  fontSize: "13px",
+  fontWeight: 500,
+  transition: "background 0.15s"
+}, _e = {
   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 = {
+}, nt = {
   top: 96,
   right: 96,
   bottom: 96,
   left: 96
-}, O = {
+}, fe = {
   size: "letter",
-  margins: { ...ie }
+  margins: { ...nt }
 };
-function oe(i) {
+let ot = 0;
+function De() {
+  return `split-${++ot}-${Date.now()}`;
+}
+const rt = 40, it = /* @__PURE__ */ new Set([
+  "script",
+  "style",
+  "img",
+  "video",
+  "canvas",
+  "svg",
+  "hr",
+  "iframe",
+  "object",
+  "embed",
+  "audio",
+  "picture",
+  "figure"
+]), st = /* @__PURE__ */ new Set([
+  "p",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "blockquote",
+  "div",
+  "li",
+  "span",
+  "td",
+  "th",
+  "pre",
+  "code"
+]);
+function ge(i, e) {
+  const t = i.tagName.toLowerCase();
+  if (it.has(t) || e < rt) return null;
+  const o = window.getComputedStyle(i);
+  if (o.getPropertyValue("break-before") === "page" || o.getPropertyValue("page-break-before") === "always")
+    return null;
+  const n = Array.from(i.children);
+  if (n.length > 1) {
+    const a = lt(i, n, e);
+    if (a) return a;
+  }
+  if (st.has(t) || i.childNodes.length > 0) {
+    const a = ct(i, e);
+    if (a) return a;
+  }
+  return null;
+}
+function at(i) {
+  if (i.length === 0) return i;
+  const e = [];
+  let t = 0;
+  for (; t < i.length; ) {
+    const o = i[t], n = we(o);
+    if (!n) {
+      e.push(o), t++;
+      continue;
+    }
+    const a = [o];
+    let s = t + 1;
+    for (; s < i.length && we(i[s]) === n; )
+      a.push(i[s]), s++;
+    e.push(ut(a)), t = s;
+  }
+  return e;
+}
+function lt(i, e, t) {
+  const o = i.getBoundingClientRect().top;
+  let n = -1;
+  for (let c = 0; c < e.length; c++) {
+    const g = e[c].getBoundingClientRect(), f = window.getComputedStyle(e[c]), P = parseFloat(f.marginBottom) || 0;
+    if (g.bottom + P - o > t && c > 0) {
+      n = c;
+      break;
+    }
+  }
+  if (n <= 0) return null;
+  const a = i.cloneNode(!1), s = i.cloneNode(!1);
+  for (let c = 0; c < e.length; c++)
+    c < n ? a.appendChild(e[c].cloneNode(!0)) : s.appendChild(e[c].cloneNode(!0));
+  const d = De();
+  return a.setAttribute("data-dopecanvas-split-id", d), a.setAttribute("data-dopecanvas-split-part", "0"), s.setAttribute("data-dopecanvas-split-id", d), s.setAttribute("data-dopecanvas-split-part", "1"), {
+    firstHTML: a.outerHTML,
+    secondHTML: s.outerHTML
+  };
+}
+function ct(i, e) {
+  const t = i.getBoundingClientRect().top, o = [], n = document.createTreeWalker(i, NodeFilter.SHOW_TEXT);
+  for (; n.nextNode(); )
+    o.push(n.currentNode);
+  if (o.length === 0) return null;
+  let a = null, s = 0;
+  for (const g of o) {
+    const f = document.createRange();
+    f.selectNodeContents(g);
+    const P = f.getBoundingClientRect();
+    if (P.bottom - t <= e) continue;
+    if (P.top - t >= e) {
+      a = g, s = 0;
+      break;
+    }
+    let S = 0, E = g.length;
+    for (; S < E; ) {
+      const y = Math.floor((S + E) / 2), L = document.createRange();
+      L.setStart(g, y), L.collapse(!0), L.getBoundingClientRect().top - t >= e ? E = y : S = y + 1;
+    }
+    a = g, s = S;
+    break;
+  }
+  if (!a) return null;
+  const d = a.textContent || "";
+  let c = s;
+  for (; c > 0 && d[c - 1] !== " " && d[c - 1] !== `
+`; )
+    c--;
+  if (c > 0 && (s = c), s === 0 && a === o[0] || s >= d.length && a === o[o.length - 1]) return null;
+  try {
+    const g = document.createRange();
+    g.setStart(i, 0), g.setEnd(a, s);
+    const f = document.createRange();
+    f.setStart(a, s), f.setEndAfter(i.lastChild);
+    const P = g.cloneContents(), S = f.cloneContents(), E = Le(P), y = Le(S);
+    if (E.trim().length === 0 || y.trim().length === 0)
+      return null;
+    const L = i.cloneNode(!1);
+    L.appendChild(P);
+    const F = i.cloneNode(!1);
+    F.appendChild(S);
+    const Q = De();
+    return L.setAttribute("data-dopecanvas-split-id", Q), L.setAttribute("data-dopecanvas-split-part", "0"), F.setAttribute("data-dopecanvas-split-id", Q), F.setAttribute("data-dopecanvas-split-part", "1"), {
+      firstHTML: L.outerHTML,
+      secondHTML: F.outerHTML
+    };
+  } catch {
+    return null;
+  }
+}
+function we(i) {
+  const e = i.match(/data-dopecanvas-split-id="([^"]+)"/);
+  return e ? e[1] : null;
+}
+function ut(i) {
+  const e = document.createElement("div"), t = [];
+  let o = "", n = "";
+  for (const a of i) {
+    e.innerHTML = a;
+    const s = e.firstElementChild;
+    if (s) {
+      if (!o) {
+        o = s.tagName.toLowerCase();
+        const d = s.cloneNode(!1);
+        d.removeAttribute("data-dopecanvas-split-id"), d.removeAttribute("data-dopecanvas-split-part");
+        const c = document.createElement("div");
+        c.appendChild(d);
+        const g = c.innerHTML, f = g.lastIndexOf("</");
+        n = f >= 0 ? g.substring(0, f) : g;
+      }
+      t.push(s.innerHTML);
+    }
+  }
+  return o ? `${n}${t.join("")}</${o}>` : i[0];
+}
+function Le(i) {
+  const e = document.createElement("div");
+  return e.appendChild(i.cloneNode(!0)), e.textContent || "";
+}
+function dt(i) {
   const e = [];
   return i.querySelectorAll("script").forEach((t) => {
-    const r = document.createElement("script");
+    const o = 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);
+      (n) => o.setAttribute(n.name, n.value)
+    ), o.textContent = t.textContent || "", t.parentNode?.replaceChild(o, t), e.push(o);
   }), e;
 }
-function ae(i) {
+function ht(i) {
   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), o = t.startContainer, n = Array.from(
+    i.querySelectorAll(".dopecanvas-block-content")
+  ), a = n.findIndex((s) => s.contains(o));
+  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 s = document.createRange();
+    s.selectNodeContents(n[a]), s.setEnd(t.startContainer, t.startOffset);
+    const d = s.toString().length;
+    return { blockIndex: a, textOffset: d };
   } catch {
     return null;
   }
 }
-function se(i, e) {
-  const t = i.querySelectorAll(".dopecanvas-block-wrapper");
+function gt(i, e) {
+  const t = i.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;
+  const o = t[e.blockIndex], n = document.createTreeWalker(o, NodeFilter.SHOW_TEXT);
+  let a = e.textOffset;
   for (; n.nextNode(); ) {
-    const a = n.currentNode;
-    if (s <= a.length) {
+    const s = n.currentNode;
+    if (a <= s.length) {
       try {
-        const l = document.createRange();
-        l.setStart(a, s), l.collapse(!0);
-        const h = window.getSelection();
-        h?.removeAllRanges(), h?.addRange(l);
+        const d = document.createRange();
+        d.setStart(s, a), d.collapse(!0);
+        const c = window.getSelection();
+        c?.removeAllRanges(), c?.addRange(d);
       } catch {
       }
       return;
     }
-    s -= a.length;
+    a -= s.length;
   }
   try {
-    const a = document.createRange();
-    a.selectNodeContents(r), a.collapse(!1);
-    const l = window.getSelection();
-    l?.removeAllRanges(), l?.addRange(a);
+    const s = document.createRange();
+    s.selectNodeContents(o), s.collapse(!1);
+    const d = window.getSelection();
+    d?.removeAllRanges(), d?.addRange(s);
   } catch {
   }
 }
-const le = ({
+const pt = qe.memo(({ html: i, isEditable: e, isTable: t }) => /* @__PURE__ */ r(
+  "div",
+  {
+    className: "dopecanvas-block-content",
+    contentEditable: e && !t ? !0 : void 0,
+    suppressContentEditableWarning: !0,
+    dangerouslySetInnerHTML: { __html: i }
+  }
+));
+function ft(i) {
+  const e = i.replace(/\s+/g, " ").toLowerCase();
+  return e.includes("break-before") && e.includes("page") || e.includes("page-break-before") && e.includes("always");
+}
+const mt = Be(({
   html: i,
   css: e,
   pageConfig: t,
-  layoutEngine: r,
+  layoutEngine: o,
   editableManager: n,
-  onContentChange: s,
-  onPaginationChange: a
-}) => {
-  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);
+  onContentChange: a,
+  onPaginationChange: s,
+  showPageBreaks: d = !1
+}, c) => {
+  const g = I(null), f = I(null), P = I(null), S = I(a);
+  S.current = a;
+  const [E, y] = $([]), L = I(null), F = I(!1), Q = I([]), [re, D] = $(null), [G, K] = $(null), [me, ie] = $(""), se = I(null), h = typeof t.size == "string" ? _e[t.size] : t.size, T = x(() => {
+    if (!f.current) return;
+    const m = f.current.querySelectorAll(
+      ".dopecanvas-block-content"
+    ), u = [];
+    m.forEach((C) => {
+      const w = C, R = w.children;
+      if (R.length !== 0)
+        if (R.length === 1)
+          u.push(R[0].outerHTML);
+        else {
+          const v = document.createElement("div");
+          v.innerHTML = w.innerHTML, u.push(v.outerHTML);
+        }
     });
-    const T = H.join(`
+    const q = u.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);
+    S.current?.(q);
+  }, []), H = x((m) => {
+    if (!g.current) return;
+    const u = g.current, q = o.getContentAreaWidth(), C = o.getContentAreaHeight();
+    if (u.style.width = `${q}px`, u.style.position = "absolute", u.style.left = "-9999px", u.style.top = "0", u.style.visibility = "hidden", u.innerHTML = "", e) {
+      const l = document.createElement("style");
+      l.textContent = e, u.appendChild(l);
+    }
+    const w = document.createElement("div");
+    w.innerHTML = m, u.appendChild(w);
+    const v = o.measureBlocks(w).map((l) => {
+      const B = l.element;
+      return {
+        html: B.cloneNode(!0).outerHTML,
+        height: l.height,
+        element: B,
+        breakBefore: l.breakBefore,
+        breakAfter: l.breakAfter
+      };
+    }), M = [];
+    let b = [], A = 0, X = 0;
+    for (; X < v.length; ) {
+      const l = v[X];
+      l.breakBefore && b.length > 0 && (M.push(b), b = [], A = 0);
+      const B = C - A;
+      if (l.height <= B)
+        b.push(l.html), A += l.height;
+      else if (b.length > 0 && B >= 60) {
+        const j = ge(l.element, B);
+        if (j) {
+          b.push(j.firstHTML), M.push(b), b = [], A = 0;
+          const V = document.createElement("div");
+          V.innerHTML = j.secondHTML;
+          const W = V.firstElementChild;
+          w.appendChild(W);
+          const ae = W.getBoundingClientRect(), le = window.getComputedStyle(W), p = parseFloat(le.marginTop) || 0, U = parseFloat(le.marginBottom) || 0;
+          v.splice(X + 1, 0, {
+            html: W.outerHTML,
+            height: ae.height + p + U,
+            element: W,
+            breakBefore: !1,
+            breakAfter: l.breakAfter
+          });
+        } else
+          M.push(b), b = [l.html], A = l.height;
+      } else if (b.length > 0)
+        M.push(b), b = [l.html], A = l.height;
+      else {
+        const j = ge(l.element, C);
+        if (j) {
+          b.push(j.firstHTML), M.push(b), b = [], A = 0;
+          const V = document.createElement("div");
+          V.innerHTML = j.secondHTML;
+          const W = V.firstElementChild;
+          w.appendChild(W);
+          const ae = W.getBoundingClientRect(), le = window.getComputedStyle(W), p = parseFloat(le.marginTop) || 0, U = parseFloat(le.marginBottom) || 0;
+          v.splice(X + 1, 0, {
+            html: W.outerHTML,
+            height: ae.height + p + U,
+            element: W,
+            breakBefore: !1,
+            breakAfter: l.breakAfter
+          });
+        } else
+          b.push(l.html), M.push(b), b = [], A = 0;
+      }
+      l.breakAfter && b.length > 0 && (M.push(b), b = [], A = 0), X++;
     }
-    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);
+    b.length > 0 && M.push(b), M.length === 0 && M.push([]), u.innerHTML = "";
+    const oe = M.map((l) => ({ blocks: l })), N = {
+      pages: M.map((l, B) => ({ blockIndices: Array.from({ length: M[B].length }, (j, V) => V) })),
+      pageCount: M.length
+    };
+    Q.current = oe, y(oe), s?.(N), S.current?.(m);
+  }, [e, o, s]), O = x(() => {
+    if (!f.current || !g.current) return;
+    const m = f.current, u = ht(m), q = m.querySelectorAll(".dopecanvas-block-content"), C = [];
+    if (q.forEach((p) => {
+      const U = p, J = U.children;
+      if (J.length !== 0)
+        if (J.length === 1)
+          C.push(J[0].outerHTML);
+        else {
+          const ne = document.createElement("div");
+          ne.innerHTML = U.innerHTML, C.push(ne.outerHTML);
+        }
+    }), C.length === 0) return;
+    const R = at(C).join(`
+`), v = g.current, M = o.getContentAreaWidth(), b = o.getContentAreaHeight();
+    if (v.style.width = `${M}px`, v.style.position = "absolute", v.style.left = "-9999px", v.style.top = "0", v.style.visibility = "hidden", v.innerHTML = "", e) {
+      const p = document.createElement("style");
+      p.textContent = e, v.appendChild(p);
     }
-    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])
-    }));
-    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"));
+    const A = document.createElement("div");
+    A.innerHTML = R, v.appendChild(A);
+    const oe = o.measureBlocks(A).map((p) => ({
+      html: p.element.cloneNode(!0).outerHTML,
+      height: p.height,
+      element: p.element,
+      breakBefore: p.breakBefore,
+      breakAfter: p.breakAfter
+    })), N = [];
+    let l = [], B = 0, j = 0;
+    for (; j < oe.length; ) {
+      const p = oe[j];
+      p.breakBefore && l.length > 0 && (N.push(l), l = [], B = 0);
+      const U = b - B;
+      if (p.height <= U)
+        l.push(p.html), B += p.height;
+      else if (l.length > 0 && U >= 60) {
+        const J = ge(p.element, U);
+        if (J) {
+          l.push(J.firstHTML), N.push(l), l = [], B = 0;
+          const ne = document.createElement("div");
+          ne.innerHTML = J.secondHTML;
+          const Z = ne.firstElementChild;
+          A.appendChild(Z);
+          const be = Z.getBoundingClientRect(), ue = window.getComputedStyle(Z), Ce = parseFloat(ue.marginTop) || 0, ye = parseFloat(ue.marginBottom) || 0;
+          oe.splice(j + 1, 0, {
+            html: Z.outerHTML,
+            height: be.height + Ce + ye,
+            element: Z,
+            breakBefore: !1,
+            breakAfter: p.breakAfter
+          });
+        } else
+          N.push(l), l = [p.html], B = p.height;
+      } else if (l.length > 0)
+        N.push(l), l = [p.html], B = p.height;
+      else {
+        const J = ge(p.element, b);
+        if (J) {
+          l.push(J.firstHTML), N.push(l), l = [], B = 0;
+          const ne = document.createElement("div");
+          ne.innerHTML = J.secondHTML;
+          const Z = ne.firstElementChild;
+          A.appendChild(Z);
+          const be = Z.getBoundingClientRect(), ue = window.getComputedStyle(Z), Ce = parseFloat(ue.marginTop) || 0, ye = parseFloat(ue.marginBottom) || 0;
+          oe.splice(j + 1, 0, {
+            html: Z.outerHTML,
+            height: be.height + Ce + ye,
+            element: Z,
+            breakBefore: !1,
+            breakAfter: p.breakAfter
+          });
+        } else
+          l.push(p.html), N.push(l), l = [], B = 0;
+      }
+      p.breakAfter && l.length > 0 && (N.push(l), l = [], B = 0), j++;
+    }
+    l.length > 0 && N.push(l), N.length === 0 && N.push([]), v.innerHTML = "";
+    const V = N.map((p) => ({ blocks: p })), W = Q.current.map((p) => p.blocks.length), ae = V.map((p) => p.blocks.length);
+    W.length !== ae.length || W.some((p, U) => p !== ae[U]) ? (F.current = !0, L.current = u, Q.current = V, y(V), s?.({
+      pages: N.map(() => ({ blockIndices: [] })),
+      pageCount: N.length
+    })) : Q.current = V;
+  }, [e, o, s]), ee = I(O);
+  ee.current = O;
+  const te = x(() => {
+    const m = new DOMParser().parseFromString(i, "text/html");
+    m.head.querySelectorAll('style, link[rel="stylesheet"]').forEach((u) => {
+      m.body.insertBefore(u, m.body.firstChild);
+    }), H(m.body.innerHTML);
+  }, [i, H]);
+  Y(() => {
+    te();
+  }, [te]);
+  const z = x(() => {
+    if (!f.current) return [];
+    const m = f.current.querySelectorAll(
+      ".dopecanvas-block-content"
+    ), u = [];
+    return m.forEach((q) => {
+      const C = q.firstElementChild;
+      C && u.push(C.outerHTML);
+    }), u;
+  }, []), he = x(
+    (m) => {
+      const u = z();
+      u.splice(
+        m + 1,
+        0,
+        '<p style="min-height: 1.5em; line-height: 1.6;">&nbsp;</p>'
+      ), D(null), H(u.join(`
+`));
+    },
+    [z, H]
+  ), Se = x(
+    (m) => {
+      const u = z();
+      u.length <= 1 || (u.splice(m, 1), D(null), H(u.join(`
+`)));
+    },
+    [z, H]
+  ), Ne = x(
+    (m) => {
+      const u = z();
+      m < u.length && (K(m), ie(u[m]));
+    },
+    [z]
+  ), Fe = x(
+    (m) => {
+      if (G === null) return;
+      const u = z();
+      G < u.length && (u[G] = m), K(null), ie(""), D(null), H(u.join(`
+`));
+    },
+    [G, z, H]
+  ), ze = x(() => {
+    K(null), ie("");
+  }, []), ke = x(() => {
+    const m = '<div style="break-before: page;"></div>', u = z();
+    let q = u.length;
+    const C = window.getSelection();
+    if (C && C.rangeCount > 0 && f.current) {
+      const w = C.getRangeAt(0).startContainer, v = Array.from(
+        f.current.querySelectorAll(".dopecanvas-block-content")
+      ).findIndex((M) => M.contains(w));
+      v !== -1 && (q = v + 1);
+    }
+    u.splice(q, 0, m), D(null), H(u.join(`
+`));
+  }, [z, H]);
+  return Pe(c, () => ({
+    insertPageBreak: ke
+  }), [ke]), Y(() => {
+    const m = f.current;
+    if (!m) return;
+    P.current && P.current.disconnect(), m.querySelectorAll(".dopecanvas-block-content").forEach((R) => {
+      const v = R.firstElementChild;
+      v && v.tagName === "TABLE" && v.querySelectorAll("td, th").forEach((b) => {
+        b.contentEditable = "true";
+      });
     });
-    const T = oe(g);
-    let y = null;
-    const f = new MutationObserver(() => {
-      C.current || (y && clearTimeout(y), y = setTimeout(() => {
-        F(), u.current();
-      }, 300));
+    const q = dt(m);
+    let C = null;
+    const w = new MutationObserver(() => {
+      F.current || (C && clearTimeout(C), C = setTimeout(() => {
+        T(), ee.current();
+      }, 800));
     });
-    return f.observe(g, {
+    return w.observe(m, {
       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);
+    }), P.current = w, L.current ? requestAnimationFrame(() => {
+      L.current && f.current && (gt(
+        f.current,
+        L.current
+      ), L.current = null), F.current = !1;
+    }) : F.current = !1, () => {
+      w.disconnect(), q.forEach((R) => R.remove()), C && clearTimeout(C);
     };
-  }, [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,
+  }, [E, T]), /* @__PURE__ */ k("div", { className: "dopecanvas-paged-view", style: bt, children: [
+    /* @__PURE__ */ r("div", { ref: g, "aria-hidden": "true" }),
+    /* @__PURE__ */ k("div", { ref: f, style: Ct, children: [
+      e && /* @__PURE__ */ r("style", { dangerouslySetInnerHTML: { __html: e } }),
+      E.map((m, u) => {
+        const q = E.slice(0, u).reduce((C, w) => C + w.blocks.length, 0);
+        return /* @__PURE__ */ r(
+          Me,
+          {
+            dimensions: h,
+            margins: t.margins,
+            pageNumber: u + 1,
+            totalPages: E.length,
+            children: m.blocks.map((C, w) => {
+              const R = q + w, v = C.trim().toLowerCase(), M = !v.startsWith("<script") && !v.startsWith("<style"), b = v.startsWith("<table"), A = ft(C);
+              return A && d ? /* @__PURE__ */ k(
+                "div",
+                {
+                  className: "dopecanvas-block-wrapper",
+                  style: { position: "relative" },
+                  children: [
+                    /* @__PURE__ */ r(
+                      "div",
+                      {
+                        className: "dopecanvas-block-content",
+                        style: { display: "none" },
+                        dangerouslySetInnerHTML: { __html: C }
+                      }
+                    ),
+                    /* @__PURE__ */ k("div", { style: yt, children: [
+                      /* @__PURE__ */ r("span", { style: He }),
+                      /* @__PURE__ */ r("span", { style: xt, children: "Page Break" }),
+                      /* @__PURE__ */ r("span", { style: He }),
+                      /* @__PURE__ */ r(
+                        "button",
+                        {
+                          type: "button",
+                          title: "Remove page break",
+                          onClick: () => Se(R),
+                          onMouseDown: (X) => X.preventDefault(),
+                          style: vt,
+                          children: "✕"
+                        }
+                      )
+                    ] })
+                  ]
+                },
+                `${u}-${w}`
+              ) : A ? /* @__PURE__ */ r(
+                "div",
+                {
+                  className: "dopecanvas-block-wrapper",
+                  style: { position: "relative" },
+                  children: /* @__PURE__ */ r(
+                    "div",
+                    {
+                      className: "dopecanvas-block-content",
+                      dangerouslySetInnerHTML: { __html: C }
+                    }
+                  )
+                },
+                `${u}-${w}`
+              ) : /* @__PURE__ */ k(
+                "div",
+                {
+                  className: "dopecanvas-block-wrapper",
+                  style: { position: "relative" },
+                  onMouseEnter: () => {
+                    M && (se.current && (clearTimeout(se.current), se.current = null), D(R));
+                  },
+                  onMouseLeave: () => {
+                    se.current = setTimeout(() => {
+                      D(
+                        (X) => X === R ? null : X
+                      );
+                    }, 250);
+                  },
+                  children: [
+                    /* @__PURE__ */ r(
+                      pt,
+                      {
+                        html: C,
+                        isEditable: M,
+                        isTable: b
+                      }
+                    ),
+                    M && /* @__PURE__ */ r(
+                      We,
+                      {
+                        visible: re === R,
+                        onAddBelow: () => he(R),
+                        onEditHTML: () => Ne(R),
+                        onDelete: () => Se(R)
+                      }
+                    )
+                  ]
+                },
+                `${u}-${w}`
+              );
+            })
+          },
+          u
+        );
+      }),
+      E.length === 0 && /* @__PURE__ */ r(
+        Me,
         {
-          dimensions: B,
+          dimensions: h,
           margins: t.margins,
           pageNumber: 1,
           totalPages: 1,
-          children: /* @__PURE__ */ o(
+          children: /* @__PURE__ */ r(
             "div",
             {
               contentEditable: "true",
@@ -267,25 +912,66 @@ const le = ({
           )
         }
       )
-    ] })
+    ] }),
+    G !== null && /* @__PURE__ */ r(
+      Ke,
+      {
+        html: me,
+        onSave: Fe,
+        onCancel: ze
+      }
+    )
   ] });
-}, ce = {
+}), bt = {
   flex: 1,
   overflow: "auto",
   backgroundColor: "#e8e8e8",
   display: "flex",
   flexDirection: "column",
   alignItems: "center"
-}, ue = {
+}, Ct = {
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
   gap: "24px",
   padding: "24px 0"
+}, yt = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  padding: "6px 0",
+  userSelect: "none"
+}, He = {
+  flex: 1,
+  height: 0,
+  borderTop: "2px dashed #b0b0b0"
+}, xt = {
+  fontSize: 11,
+  fontWeight: 600,
+  color: "#888",
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  whiteSpace: "nowrap",
+  fontFamily: "system-ui, -apple-system, sans-serif"
+}, vt = {
+  width: 20,
+  height: 20,
+  border: "1px solid #ccc",
+  borderRadius: 4,
+  backgroundColor: "#fff",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontSize: 11,
+  color: "#999",
+  padding: 0,
+  flexShrink: 0,
+  lineHeight: 1
 };
-class te {
+class Ie {
   config;
-  constructor(e = O) {
+  constructor(e = fe) {
     this.config = { ...e };
   }
   // ----------------------------------------------------------
@@ -299,7 +985,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" ? _e[this.config.size] : this.config.size;
   }
   /** Usable content area height (page height minus top+bottom margins) */
   getContentAreaHeight() {
@@ -318,18 +1004,18 @@ class te {
    * so that measurements reflect actual rendered heights.
    */
   measureBlocks(e) {
-    const t = Array.from(e.children), r = [];
+    const t = Array.from(e.children), o = [];
     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({
+      const a = t[n], s = window.getComputedStyle(a), d = s.getPropertyValue("break-before") === "page" || s.getPropertyValue("page-break-before") === "always", c = s.getPropertyValue("break-after") === "page" || s.getPropertyValue("page-break-after") === "always", g = a.getBoundingClientRect(), f = parseFloat(s.marginTop) || 0, P = parseFloat(s.marginBottom) || 0, S = g.height + f + P;
+      o.push({
         index: n,
-        height: L,
-        element: s,
-        breakBefore: l,
-        breakAfter: h
+        height: S,
+        element: a,
+        breakBefore: d,
+        breakAfter: c
       });
     }
-    return r;
+    return o;
   }
   // ----------------------------------------------------------
   // Pagination
@@ -347,19 +1033,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(), o = [];
+    let n = [], a = 0;
+    for (let s = 0; s < e.length; s++) {
+      const d = e[s];
+      d.breakBefore && n.length > 0 && (o.push({ blockIndices: n }), n = [], a = 0), a + d.height > t && n.length > 0 && (o.push({ blockIndices: n }), n = [], a = 0), n.push(d.index), a += d.height, d.breakAfter && (o.push({ blockIndices: n }), n = [], a = 0);
     }
-    return n.length > 0 && r.push({ blockIndices: n }), r.length === 0 && r.push({ blockIndices: [] }), {
-      pages: r,
-      pageCount: r.length
+    return n.length > 0 && o.push({ blockIndices: n }), o.length === 0 && o.push({ blockIndices: [] }), {
+      pages: o,
+      pageCount: o.length
     };
   }
 }
-class z {
+class de {
   observer = null;
   changeCallbacks = /* @__PURE__ */ new Set();
   contextCallbacks = /* @__PURE__ */ new Set();
@@ -402,12 +1088,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 o of t)
+      o.tagName === "TABLE" ? this.makeTableCellsEditable(o) : o.contentEditable = "true";
   }
   makeTableCellsEditable(e) {
-    e.querySelectorAll("td, th").forEach((r) => {
-      r.contentEditable = "true";
+    e.querySelectorAll("td, th").forEach((o) => {
+      o.contentEditable = "true";
     });
   }
   // ----------------------------------------------------------
@@ -416,7 +1102,7 @@ class z {
   handleMutations = (e) => {
     this.debounceTimer && clearTimeout(this.debounceTimer), this.debounceTimer = setTimeout(() => {
       this.pushUndoSnapshot(), this.notifyChange();
-    }, z.DEBOUNCE_MS);
+    }, de.DEBOUNCE_MS);
   };
   // ----------------------------------------------------------
   // Selection / context detection
@@ -427,16 +1113,16 @@ class z {
       this.setContext("none");
       return;
     }
-    const r = e.getRangeAt(0).startContainer;
-    let n = r;
+    const o = e.getRangeAt(0).startContainer;
+    let n = o;
     for (; n && n !== this.container; ) {
       if (n instanceof HTMLElement) {
-        const s = n.tagName;
-        if (s === "TD" || s === "TH" || s === "TABLE") {
+        const a = n.tagName;
+        if (a === "TD" || a === "TH" || a === "TABLE") {
           this.setContext("table");
           return;
         }
-        if (s === "IMG") {
+        if (a === "IMG") {
           this.setContext("image");
           return;
         }
@@ -447,7 +1133,7 @@ class z {
       }
       n = n.parentNode;
     }
-    this.container.contains(r) ? this.setContext("text") : this.setContext("none");
+    this.container.contains(o) ? this.setContext("text") : this.setContext("none");
   }
   setContext(e) {
     e !== this.currentContext && (this.currentContext = e, this.contextCallbacks.forEach((t) => t(e)));
@@ -461,7 +1147,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 > de.MAX_UNDO_STACK && this.undoStack.shift());
   }
   undo() {
     if (!this.container || this.undoStack.length <= 1) return !1;
@@ -533,65 +1219,132 @@ class z {
     return this.container && (this.container.innerText || this.container.textContent) || "";
   }
 }
-const Me = ne(({
+const Ot = Be(({
   html: i = "",
   css: e,
-  pageConfig: t,
-  onContentChange: r,
-  onPageConfigChange: n,
+  renderMode: t = "paged",
+  pageConfig: o,
+  onContentChange: n,
+  onPageConfigChange: a,
   style: s
-}, a) => {
-  const [l, h] = R(
-    t || O
-  ), [v, c] = R({
+}, d) => {
+  const [c, g] = $(
+    o || fe
+  ), [f, P] = $({
     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);
+  }), S = I(i), E = I(null), y = I(null), L = I(null), [F, Q] = $(!1), re = I(n);
+  re.current = n;
+  const D = o || c, G = Te(() => new Ie(D), []), K = Te(() => new de(), []);
+  Y(() => {
+    G.setConfig(D);
+  }, [D, G]);
+  const me = x(
+    (h) => {
+      S.current = h, re.current?.(h);
     },
     []
-  ), F = p(
-    (u) => {
-      const E = {
-        ...m,
-        ...u,
+  ), ie = x(
+    (h) => {
+      const T = {
+        ...D,
+        ...h,
         margins: {
-          ...m.margins,
-          ...u.margins || {}
+          ...D.margins,
+          ...h.margins || {}
         }
       };
-      h(E), C.setConfig(E), n?.(E);
+      g(T), G.setConfig(T), a?.(T);
     },
-    [m, C, n]
-  ), N = p((u) => {
-    c(u);
+    [D, G, a]
+  ), se = x((h) => {
+    P(h);
   }, []);
-  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 Y(() => {
+    if (t !== "flow" || !y.current) return;
+    const h = S.current || i;
+    y.current.innerHTML = h, S.current = h;
+  }, [i, t]), Pe(d, () => ({
+    execCommand: (h, T) => K.execCommand(h, T),
+    queryCommandState: (h) => K.queryCommandState(h),
+    queryCommandValue: (h) => K.queryCommandValue(h),
+    getPageConfig: () => ({ ...D }),
+    setPageConfig: (h) => {
+      ie(h);
+    },
+    getPageCount: () => f.pageCount,
+    getHTML: () => {
+      if (t === "flow" && y.current) {
+        const h = y.current.innerHTML;
+        return S.current = h, h;
+      }
+      if (E.current) {
+        const h = E.current.querySelectorAll(
+          ".dopecanvas-block-content"
+        );
+        if (h.length > 0) {
+          const T = [];
+          if (h.forEach((H) => {
+            const O = H, ee = O.children;
+            if (ee.length !== 0)
+              if (ee.length === 1)
+                T.push(ee[0].outerHTML);
+              else {
+                const te = document.createElement("div");
+                te.innerHTML = O.innerHTML, T.push(te.outerHTML);
+              }
+          }), T.length > 0) {
+            const H = T.join(`
+`);
+            return S.current = H, H;
+          }
+        }
+      }
+      return S.current;
     },
-    getPageCount: () => v.pageCount,
-    getHTML: () => d.current,
     getPlainText: () => {
-      const u = document.createElement("div");
-      return u.innerHTML = d.current, u.innerText || u.textContent || "";
+      if (t === "flow" && y.current)
+        return y.current.innerText || y.current.textContent || "";
+      const h = E.current ? (() => {
+        const H = E.current.querySelectorAll(".dopecanvas-block-content"), O = [];
+        return H.forEach((ee) => {
+          const te = ee, z = te.children;
+          if (z.length !== 0)
+            if (z.length === 1)
+              O.push(z[0].outerHTML);
+            else {
+              const he = document.createElement("div");
+              he.innerHTML = te.innerHTML, O.push(he.outerHTML);
+            }
+        }), O.length > 0 ? O.join(`
+`) : S.current;
+      })() : S.current, T = document.createElement("div");
+      return T.innerHTML = h, T.innerText || T.textContent || "";
+    },
+    undo: () => K.undo(),
+    redo: () => K.redo(),
+    insertPageBreak: () => {
+      if (t === "flow" && y.current) {
+        const h = window.getSelection();
+        if (!h || h.rangeCount === 0) return;
+        const T = h.getRangeAt(0);
+        if (!y.current.contains(T.startContainer)) return;
+        const H = document.createElement("div");
+        H.style.breakBefore = "page", T.insertNode(H), T.setStartAfter(H), T.collapse(!0), h.removeAllRanges(), h.addRange(T);
+        const O = y.current.innerHTML;
+        S.current = O, re.current?.(O);
+        return;
+      }
+      L.current?.insertPageBreak();
     },
-    undo: () => b.undo(),
-    redo: () => b.redo()
-  }), [b, m, v.pageCount, F]), /* @__PURE__ */ o(
+    setShowPageBreaks: (h) => {
+      Q(h);
+    },
+    getShowPageBreaks: () => F
+  }), [K, D, f.pageCount, ie, F, t]), /* @__PURE__ */ r(
     "div",
     {
+      ref: E,
       className: "dopecanvas-root",
       style: {
         display: "flex",
@@ -601,22 +1354,53 @@ const Me = ne(({
         fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, sans-serif",
         ...s
       },
-      children: /* @__PURE__ */ o(
-        le,
+      children: t === "paged" ? /* @__PURE__ */ r(
+        mt,
         {
+          ref: L,
           html: i,
           css: e,
-          pageConfig: m,
-          layoutEngine: C,
-          editableManager: b,
-          onContentChange: B,
-          onPaginationChange: N
+          pageConfig: D,
+          layoutEngine: G,
+          editableManager: K,
+          onContentChange: me,
+          onPaginationChange: se,
+          showPageBreaks: F
         }
-      )
+      ) : /* @__PURE__ */ k("div", { style: St, children: [
+        e && /* @__PURE__ */ r("style", { dangerouslySetInnerHTML: { __html: e } }),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            ref: y,
+            className: "dopecanvas-flow-content",
+            contentEditable: !0,
+            suppressContentEditableWarning: !0,
+            style: kt,
+            onInput: () => {
+              if (!y.current) return;
+              const h = y.current.innerHTML;
+              S.current = h, re.current?.(h);
+            }
+          }
+        )
+      ] })
     }
   );
-});
-class he {
+}), St = {
+  flex: 1,
+  overflow: "auto",
+  backgroundColor: "#f7f7f5",
+  padding: "24px"
+}, kt = {
+  minHeight: "100%",
+  outline: "none",
+  backgroundColor: "#fff",
+  border: "1px solid #e5e7eb",
+  borderRadius: 8,
+  padding: "20px 24px"
+};
+class Tt {
   layoutEngine;
   editableManager;
   sourceHTML = "";
@@ -626,8 +1410,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 = fe) {
+    this.layoutEngine = new Ie(e), this.editableManager = new de();
   }
   // ----------------------------------------------------------
   // Accessors
@@ -695,10 +1479,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 o = document.createElement("div");
+    o.innerHTML = this.sourceHTML, this.measureContainer.appendChild(o);
+    const n = this.layoutEngine.measureBlocks(o);
+    return this.paginationResult = this.layoutEngine.paginate(n), this.measureContainer.innerHTML = "", this.paginationCallbacks.forEach((a) => a(this.paginationResult)), { result: this.paginationResult, measurements: n };
   }
   /**
    * Re-paginate using the current content container's live DOM.
@@ -757,7 +1541,7 @@ class he {
     this.editableManager.detach(), this.paginationCallbacks.clear(), this.changeCallbacks.clear(), this.measureContainer = null, this.contentContainer = null;
   }
 }
-class Le {
+class $t {
   _html = "";
   _css = "";
   _pageConfig = null;
@@ -777,7 +1561,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((o) => o(e, t));
   }
   /**
    * Get the current document HTML content.
@@ -869,18 +1653,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 o = t.querySelector(`#${e}`);
+    return o ? o.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 o = document.createElement("div");
+    o.innerHTML = this.getHTML();
+    const n = o.querySelector(`#${e}`);
+    n && (n.innerHTML = t, this.loadHTML(o.innerHTML, this._css));
   }
   // ----------------------------------------------------------
   // Internal connectors (used by DopeCanvas component)
@@ -906,174 +1690,196 @@ class Le {
     this._pageConfig = e;
   }
 }
-function He(i) {
-  const [e, t] = R("none");
-  return _(() => i ? i.onContextChange((n) => {
+function Vt(i) {
+  const [e, t] = $("none");
+  return Y(() => i ? i.onContextChange((n) => {
     t(n);
   }) : void 0, [i]), e;
 }
-function de() {
-  const [i, e] = R({
-    bold: !1,
-    italic: !1,
-    underline: !1,
-    strikethrough: !1,
-    justifyLeft: !1,
-    justifyCenter: !1,
-    justifyRight: !1,
-    justifyFull: !1
-  }), t = p(() => {
-    e({
-      bold: document.queryCommandState("bold"),
-      italic: document.queryCommandState("italic"),
-      underline: document.queryCommandState("underline"),
-      strikethrough: document.queryCommandState("strikethrough"),
-      justifyLeft: document.queryCommandState("justifyLeft"),
-      justifyCenter: document.queryCommandState("justifyCenter"),
-      justifyRight: document.queryCommandState("justifyRight"),
-      justifyFull: document.queryCommandState("justifyFull")
-    });
+const Mt = {
+  bold: !1,
+  italic: !1,
+  underline: !1,
+  strikethrough: !1,
+  justifyLeft: !1,
+  justifyCenter: !1,
+  justifyRight: !1,
+  justifyFull: !1,
+  orderedList: !1,
+  unorderedList: !1,
+  superscript: !1,
+  subscript: !1,
+  fontName: "",
+  fontSize: "3",
+  foreColor: "#000000",
+  backColor: "",
+  formatBlock: "p"
+};
+function wt() {
+  const [i, e] = $(Mt), t = x(() => {
+    try {
+      let o = document.queryCommandValue("formatBlock") || "";
+      o = o.replace(/^<|>$/g, "").toLowerCase(), (!o || o === "div") && (o = "p"), e({
+        // Toggle states
+        bold: document.queryCommandState("bold"),
+        italic: document.queryCommandState("italic"),
+        underline: document.queryCommandState("underline"),
+        strikethrough: document.queryCommandState("strikethrough"),
+        justifyLeft: document.queryCommandState("justifyLeft"),
+        justifyCenter: document.queryCommandState("justifyCenter"),
+        justifyRight: document.queryCommandState("justifyRight"),
+        justifyFull: document.queryCommandState("justifyFull"),
+        orderedList: document.queryCommandState("insertOrderedList"),
+        unorderedList: document.queryCommandState("insertUnorderedList"),
+        superscript: document.queryCommandState("superscript"),
+        subscript: document.queryCommandState("subscript"),
+        // Value states
+        fontName: document.queryCommandValue("fontName") || "",
+        fontSize: document.queryCommandValue("fontSize") || "3",
+        foreColor: document.queryCommandValue("foreColor") || "#000000",
+        backColor: document.queryCommandValue("backColor") || "",
+        formatBlock: o
+      });
+    } catch {
+    }
   }, []);
-  return _(() => (document.addEventListener("selectionchange", t), () => {
+  return Y(() => (document.addEventListener("selectionchange", t), () => {
     document.removeEventListener("selectionchange", t);
   }), [t]), i;
 }
-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 d = window.getSelection();
-    d && (d.removeAllRanges(), d.addRange(c));
-  }, []), s = p(
-    (c, d) => (L) => {
-      L.preventDefault(), i(c, d);
+function Lt() {
+  const i = I(null), e = x(() => {
+    const n = window.getSelection();
+    n && n.rangeCount > 0 && (i.current = n.getRangeAt(0).cloneRange());
+  }, []), t = x(() => {
+    const n = i.current;
+    if (!n) return;
+    const a = window.getSelection();
+    a && (a.removeAllRanges(), a.addRange(n));
+  }, []), o = x(
+    (n) => {
+      t(), n();
     },
-    [i]
-  ), a = p(
-    (c) => {
-      n(), i("fontSize", c.target.value);
+    [t]
+  );
+  return { saveSelection: e, restoreSelection: t, restoreAndExec: o };
+}
+const Ht = ({ onExecCommand: i }) => {
+  const e = wt(), { saveSelection: t, restoreAndExec: o } = Lt(), n = x(
+    (c, g) => (f) => {
+      f.preventDefault(), i(c, g);
     },
-    [i, n]
-  ), l = p(
-    (c) => {
-      n();
-      const d = c.target.value;
-      d === "p" ? i("formatBlock", "p") : i("formatBlock", d);
+    [i]
+  ), a = x(
+    (c) => (g) => {
+      o(() => i(c, g.target.value));
     },
-    [i, n]
-  ), h = p(
-    (c) => {
-      n(), i("foreColor", c.target.value);
+    [i, o]
+  ), s = x(
+    (c) => (g) => {
+      o(() => i(c, g.target.value));
     },
-    [i, n]
-  ), v = p(
+    [i, o]
+  ), d = x(
     (c) => {
-      n(), i("hiliteColor", c.target.value);
+      c.preventDefault();
+      const g = prompt("Enter URL:");
+      g && i("createLink", g);
     },
-    [i, n]
+    [i]
   );
-  return /* @__PURE__ */ x("div", { style: pe, children: [
-    /* @__PURE__ */ x(
+  return /* @__PURE__ */ k("div", { style: Et, children: [
+    /* @__PURE__ */ k(
       "select",
       {
-        onChange: l,
-        defaultValue: "p",
-        style: K,
+        value: e.formatBlock,
+        onChange: a("formatBlock"),
+        style: ve,
         title: "Block Format",
-        onMouseDown: r,
+        onMouseDown: t,
         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(ce, {}),
+    /* @__PURE__ */ k(
       "select",
       {
-        onChange: a,
-        defaultValue: "3",
-        style: K,
-        title: "Font Size",
-        onMouseDown: r,
+        value: e.fontName.replace(/['"]/g, ""),
+        onChange: a("fontName"),
+        style: { ...ve, width: 110 },
+        title: "Font Family",
+        onMouseDown: t,
         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: "Arial", children: "Arial" }),
+          /* @__PURE__ */ r("option", { value: "Georgia", children: "Georgia" }),
+          /* @__PURE__ */ r("option", { value: "Times New Roman", children: "Times New Roman" }),
+          /* @__PURE__ */ r("option", { value: "Courier New", children: "Courier New" }),
+          /* @__PURE__ */ r("option", { value: "Verdana", children: "Verdana" }),
+          /* @__PURE__ */ r("option", { value: "Trebuchet MS", children: "Trebuchet MS" }),
+          /* @__PURE__ */ r("option", { value: "Comic Sans MS", children: "Comic Sans MS" }),
+          /* @__PURE__ */ r("option", { value: "Impact", children: "Impact" }),
+          /* @__PURE__ */ r("option", { value: "system-ui", children: "System UI" })
         ]
       }
     ),
-    /* @__PURE__ */ o("div", { style: j }),
-    /* @__PURE__ */ o(
-      X,
-      {
-        icon: "B",
-        title: "Bold (Ctrl+B)",
-        active: e.bold,
-        onMouseDown: s("bold"),
-        extraStyle: { fontWeight: "bold" }
-      }
-    ),
-    /* @__PURE__ */ o(
-      X,
+    /* @__PURE__ */ k(
+      "select",
       {
-        icon: "I",
-        title: "Italic (Ctrl+I)",
-        active: e.italic,
-        onMouseDown: s("italic"),
-        extraStyle: { fontStyle: "italic" }
+        value: e.fontSize,
+        onChange: a("fontSize"),
+        style: { ...ve, width: 56 },
+        title: "Font Size",
+        onMouseDown: t,
+        children: [
+          /* @__PURE__ */ r("option", { value: "1", children: "8" }),
+          /* @__PURE__ */ r("option", { value: "2", children: "10" }),
+          /* @__PURE__ */ r("option", { value: "3", children: "12" }),
+          /* @__PURE__ */ r("option", { value: "4", children: "14" }),
+          /* @__PURE__ */ r("option", { value: "5", children: "18" }),
+          /* @__PURE__ */ r("option", { value: "6", children: "24" }),
+          /* @__PURE__ */ r("option", { value: "7", children: "36" })
+        ]
       }
     ),
-    /* @__PURE__ */ o("div", { style: j }),
-    /* @__PURE__ */ x("label", { style: Y, title: "Text Color", onMouseDown: r, children: [
-      "A",
-      /* @__PURE__ */ o(
-        "input",
-        {
-          type: "color",
-          defaultValue: "#000000",
-          onChange: h,
-          style: Z
-        }
-      )
-    ] }),
-    /* @__PURE__ */ x("label", { style: Y, title: "Highlight Color", onMouseDown: r, children: [
-      /* @__PURE__ */ o("span", { style: { backgroundColor: "#ffff00", padding: "0 2px" }, children: "A" }),
-      /* @__PURE__ */ o(
-        "input",
-        {
-          type: "color",
-          defaultValue: "#ffff00",
-          onChange: v,
-          style: Z
-        }
-      )
-    ] })
+    /* @__PURE__ */ r(ce, {}),
+    /* @__PURE__ */ r(_, { icon: "B", title: "Bold (Ctrl+B)", active: e.bold, onMouseDown: n("bold"), extraStyle: { fontWeight: 700 } }),
+    /* @__PURE__ */ r(_, { icon: "I", title: "Italic (Ctrl+I)", active: e.italic, onMouseDown: n("italic"), extraStyle: { fontStyle: "italic" } }),
+    /* @__PURE__ */ r(_, { icon: "U", title: "Underline (Ctrl+U)", active: e.underline, onMouseDown: n("underline"), extraStyle: { textDecoration: "underline" } }),
+    /* @__PURE__ */ r(_, { icon: "S", title: "Strikethrough", active: e.strikethrough, onMouseDown: n("strikethrough"), extraStyle: { textDecoration: "line-through" } }),
+    /* @__PURE__ */ r(_, { icon: "x²", title: "Superscript", active: e.superscript, onMouseDown: n("superscript") }),
+    /* @__PURE__ */ r(_, { icon: "x₂", title: "Subscript", active: e.subscript, onMouseDown: n("subscript") }),
+    /* @__PURE__ */ r(ce, {}),
+    /* @__PURE__ */ r(Ee, { label: "A", title: "Text Color", defaultValue: "#000000", onChange: s("foreColor"), onMouseDown: t }),
+    /* @__PURE__ */ r(Ee, { label: "A", title: "Highlight Color", defaultValue: "#ffff00", onChange: s("hiliteColor"), onMouseDown: t, highlight: !0 }),
+    /* @__PURE__ */ r(ce, {}),
+    /* @__PURE__ */ r(_, { icon: "≡", title: "Align Left", active: e.justifyLeft, onMouseDown: n("justifyLeft") }),
+    /* @__PURE__ */ r(_, { icon: "≣", title: "Align Center", active: e.justifyCenter, onMouseDown: n("justifyCenter") }),
+    /* @__PURE__ */ r(_, { icon: "≢", title: "Align Right", active: e.justifyRight, onMouseDown: n("justifyRight") }),
+    /* @__PURE__ */ r(_, { icon: "☰", title: "Justify", active: e.justifyFull, onMouseDown: n("justifyFull") }),
+    /* @__PURE__ */ r(ce, {}),
+    /* @__PURE__ */ r(_, { icon: "•", title: "Bullet List", active: e.unorderedList, onMouseDown: n("insertUnorderedList") }),
+    /* @__PURE__ */ r(_, { icon: "1.", title: "Numbered List", active: e.orderedList, onMouseDown: n("insertOrderedList"), extraStyle: { fontSize: "11px", fontWeight: 600 } }),
+    /* @__PURE__ */ r(_, { icon: "⇤", title: "Decrease Indent", onMouseDown: n("outdent") }),
+    /* @__PURE__ */ r(_, { icon: "⇥", title: "Increase Indent", onMouseDown: n("indent") }),
+    /* @__PURE__ */ r(ce, {}),
+    /* @__PURE__ */ r(_, { icon: "🔗", title: "Insert Link", onMouseDown: d }),
+    /* @__PURE__ */ r(_, { icon: "—", title: "Horizontal Rule", onMouseDown: n("insertHorizontalRule") }),
+    /* @__PURE__ */ r(_, { icon: "T̸", title: "Clear Formatting", onMouseDown: n("removeFormat") })
   ] });
-}, X = ({
-  icon: i,
-  title: e,
-  active: t,
-  onMouseDown: r,
-  extraStyle: n
-}) => /* @__PURE__ */ o(
+}, _ = ({ icon: i, title: e, active: t, onMouseDown: o, extraStyle: n }) => /* @__PURE__ */ r(
   "button",
   {
     type: "button",
     title: e,
-    onMouseDown: r,
+    onMouseDown: o,
     style: {
       width: "28px",
       height: "28px",
@@ -1094,12 +1900,30 @@ const ge = ({ onExecCommand: i }) => {
     },
     dangerouslySetInnerHTML: { __html: i }
   }
-), pe = {
+), ce = () => /* @__PURE__ */ r("div", { style: Rt }), Ee = ({
+  label: i,
+  title: e,
+  defaultValue: t,
+  onChange: o,
+  onMouseDown: n,
+  highlight: a
+}) => /* @__PURE__ */ k("label", { style: At, title: e, onMouseDown: n, children: [
+  a ? /* @__PURE__ */ r("span", { style: { backgroundColor: "#ffff00", padding: "0 2px" }, children: i }) : i,
+  /* @__PURE__ */ r(
+    "input",
+    {
+      type: "color",
+      defaultValue: t,
+      onChange: o,
+      style: Bt
+    }
+  )
+] }), Et = {
   display: "flex",
   alignItems: "center",
   gap: "2px",
   flexWrap: "wrap"
-}, K = {
+}, ve = {
   height: "28px",
   borderWidth: "1px",
   borderStyle: "solid",
@@ -1109,12 +1933,12 @@ const ge = ({ onExecCommand: i }) => {
   padding: "0 4px",
   cursor: "pointer",
   backgroundColor: "#fff"
-}, j = {
+}, Rt = {
   width: "1px",
   height: "20px",
   backgroundColor: "#ddd",
   margin: "0 4px"
-}, Y = {
+}, At = {
   position: "relative",
   width: "28px",
   height: "28px",
@@ -1124,7 +1948,7 @@ const ge = ({ onExecCommand: i }) => {
   cursor: "pointer",
   fontSize: "13px",
   fontWeight: "bold"
-}, Z = {
+}, Bt = {
   position: "absolute",
   bottom: 0,
   left: 0,
@@ -1134,114 +1958,114 @@ const ge = ({ onExecCommand: i }) => {
   borderWidth: 0,
   borderStyle: "none",
   cursor: "pointer"
-}, fe = ({
+}, Pt = ({
   pageConfig: i,
   pageCount: e,
   onPageConfigChange: t
 }) => {
-  const r = p(
-    (a) => {
-      const l = a.target.value;
-      t({ size: l });
+  const o = x(
+    (s) => {
+      const d = s.target.value;
+      t({ size: d });
     },
     [t]
-  ), n = p(
-    (a) => (l) => {
-      const h = Math.max(0, parseInt(l.target.value) || 0);
+  ), n = x(
+    (s) => (d) => {
+      const c = Math.max(0, parseInt(d.target.value) || 0);
       t({
         margins: {
           ...i.margins,
-          [a]: h
+          [s]: c
         }
       });
     },
     [i.margins, t]
-  ), s = typeof i.size == "string" ? i.size : "custom";
-  return /* @__PURE__ */ x("div", { style: me, children: [
-    /* @__PURE__ */ x("label", { style: Ce, children: [
+  ), a = typeof i.size == "string" ? i.size : "custom";
+  return /* @__PURE__ */ k("div", { style: _t, children: [
+    /* @__PURE__ */ k("label", { style: Dt, children: [
       "Page:",
-      /* @__PURE__ */ x(
+      /* @__PURE__ */ k(
         "select",
         {
-          value: s,
-          onChange: r,
-          style: be,
+          value: a,
+          onChange: o,
+          style: It,
           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: Re }),
+    /* @__PURE__ */ r("span", { style: { fontSize: "12px", color: "#666" }, children: "Margins (px):" }),
+    /* @__PURE__ */ r(
+      pe,
       {
         label: "T",
         value: i.margins.top,
         onChange: n("top")
       }
     ),
-    /* @__PURE__ */ o(
-      W,
+    /* @__PURE__ */ r(
+      pe,
       {
         label: "R",
         value: i.margins.right,
         onChange: n("right")
       }
     ),
-    /* @__PURE__ */ o(
-      W,
+    /* @__PURE__ */ r(
+      pe,
       {
         label: "B",
         value: i.margins.bottom,
         onChange: n("bottom")
       }
     ),
-    /* @__PURE__ */ o(
-      W,
+    /* @__PURE__ */ r(
+      pe,
       {
         label: "L",
         value: i.margins.left,
         onChange: n("left")
       }
     ),
-    /* @__PURE__ */ o("div", { style: J }),
-    /* @__PURE__ */ x("span", { style: { fontSize: "12px", color: "#666" }, children: [
+    /* @__PURE__ */ r("div", { style: Re }),
+    /* @__PURE__ */ k("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: [
+}, pe = ({ label: i, value: e, onChange: t }) => /* @__PURE__ */ k("label", { style: Nt, title: `${i} margin`, children: [
   i,
   ":",
-  /* @__PURE__ */ o(
+  /* @__PURE__ */ r(
     "input",
     {
       type: "number",
       value: e,
       onChange: t,
-      style: xe,
+      style: Ft,
       min: 0,
       max: 300,
       step: 12
     }
   )
-] }), me = {
+] }), _t = {
   display: "flex",
   alignItems: "center",
   gap: "6px",
   flexWrap: "wrap"
-}, Ce = {
+}, Dt = {
   display: "flex",
   alignItems: "center",
   gap: "4px",
   fontSize: "12px",
   color: "#666"
-}, be = {
+}, It = {
   height: "26px",
   borderWidth: "1px",
   borderStyle: "solid",
@@ -1251,18 +2075,18 @@ const ge = ({ onExecCommand: i }) => {
   padding: "0 4px",
   cursor: "pointer",
   backgroundColor: "#fff"
-}, J = {
+}, Re = {
   width: "1px",
   height: "20px",
   backgroundColor: "#ddd",
   margin: "0 4px"
-}, ye = {
+}, Nt = {
   display: "flex",
   alignItems: "center",
   gap: "2px",
   fontSize: "11px",
   color: "#666"
-}, xe = {
+}, Ft = {
   width: "44px",
   height: "24px",
   borderWidth: "1px",
@@ -1272,22 +2096,22 @@ const ge = ({ onExecCommand: i }) => {
   fontSize: "11px",
   textAlign: "center",
   padding: "0 2px"
-}, we = ({
+}, Ut = ({
   pageConfig: i,
   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: o
+}) => /* @__PURE__ */ k("div", { style: zt, children: [
+  /* @__PURE__ */ r("div", { style: Ae, children: /* @__PURE__ */ r(Ht, { onExecCommand: t }) }),
+  /* @__PURE__ */ r("div", { style: Ae, children: /* @__PURE__ */ r(
+    Pt,
     {
       pageConfig: i,
       pageCount: e,
-      onPageConfigChange: r
+      onPageConfigChange: o
     }
   ) })
-] }), Se = {
+] }), zt = {
   borderBottomWidth: "1px",
   borderBottomStyle: "solid",
   borderBottomColor: "#d0d0d0",
@@ -1298,59 +2122,62 @@ const ge = ({ onExecCommand: i }) => {
   gap: "4px",
   flexShrink: 0,
   zIndex: 10
-}, Q = {
+}, Ae = {
   display: "flex",
   alignItems: "center",
   gap: "4px",
   minHeight: "32px"
 };
-function Ee(i = {}) {
+function Gt(i = {}) {
   const {
     initialHTML: e = "",
     initialCSS: t = "",
-    initialConfig: r = O
-  } = i, n = M(new he(r)), [s, a] = R({
+    initialConfig: o = fe
+  } = i, n = I(new Tt(o)), [a, s] = $({
     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 _(() => {
+  }), [d, c] = $(o), g = x((y, L) => {
+    n.current.loadHTML(y, L);
+  }, []), f = x((y) => {
+    n.current.setPageConfig(y), c(n.current.getPageConfig());
+  }, []), P = x(() => {
+    const { result: y } = n.current.runPagination();
+    s(y);
+  }, []), S = x(() => n.current.getHTML(), []), E = x(() => n.current.getPlainText(), []);
+  return Y(() => {
     e && n.current.loadHTML(e, t);
-  }, [e, t]), _(() => n.current.onPagination((b) => {
-    a(b);
-  }), []), _(() => () => {
+  }, [e, t]), Y(() => n.current.onPagination((L) => {
+    s(L);
+  }), []), Y(() => () => {
     n.current.destroy();
   }, []), {
     engine: n.current,
-    paginationResult: s,
-    pageConfig: l,
-    loadHTML: v,
-    setPageConfig: c,
-    triggerPagination: d,
-    getHTML: L,
-    getPlainText: m
+    paginationResult: a,
+    pageConfig: d,
+    loadHTML: g,
+    setPageConfig: f,
+    triggerPagination: P,
+    getHTML: S,
+    getPlainText: E
   };
 }
 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
+  nt as DEFAULT_MARGINS,
+  fe as DEFAULT_PAGE_CONFIG,
+  $t as DocumentAPI,
+  Tt as DocumentEngine,
+  Ot as DopeCanvas,
+  de as EditableManager,
+  _e as PAGE_SIZE_PRESETS,
+  Ie as PageLayoutEngine,
+  Pt as PageSetupToolbar,
+  Ht as TextToolbar,
+  Ut as Toolbar,
+  at as recombineSplitBlocks,
+  ge as trySplitBlock,
+  Gt as useDocumentEngine,
+  wt as useFormattingState,
+  Vt as useSelectionContext,
+  Lt as useSelectionSaver
 };
 //# sourceMappingURL=dopecanvas.js.map