@sobree/block-tools 0.1.9 → 0.1.11

package/dist/index.js

@@ -1,7 +1,7 @@
 import './index.css';var V = Object.defineProperty;
 var z = (n, t, e) => t in n ? V(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
 var b = (n, t, e) => z(n, typeof t != "symbol" ? t + "" : t, e);
-import { resolveStyleCascade as K, toggleMark as j, MARK_PROP as U, MARK_ON as W, PAGE_SIZES as Z, enterZoneEdit as Q } from "@sobree/core";
+import { PAGE_SIZES as K, resolveStyleCascade as j, toggleMark as U, MARK_PROP as W, MARK_ON as Z, enterZoneEdit as Q } from "@sobree/core";
 const Y = '<path d="M13 4v16"/><path d="M17 4v16"/><path d="M19 4H9.5a4.5 4.5 0 0 0 0 9H13"/>', J = '<path d="M4 12h8"/><path d="M4 18V6"/><path d="M12 18V6"/><path d="m17 12 3-2v8"/>', X = '<path d="M3 12h.01"/><path d="M3 18h.01"/><path d="M3 6h.01"/><path d="M8 12h13"/><path d="M8 18h13"/><path d="M8 6h13"/>', tt = '<path d="M10 12h11"/><path d="M10 18h11"/><path d="M10 6h11"/><path d="M4 10h2"/><path d="M4 6h1v4"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/>', et = '<path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/><path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/>', nt = '<path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/>', ot = '<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>', it = '<path d="m18 15-6-6-6 6"/>', rt = '<path d="m6 9 6 6 6-6"/>', at = '<path d="M3 12h18"/><path d="m8 8 4-4 4 4"/><path d="m16 16-4 4-4-4"/>', I = {
   paragraph: { kind: "paragraph", label: "Paragraph", iconPath: Y },
   heading: { kind: "heading", label: "Heading", iconPath: J },
@@ -38,7 +38,8 @@ function D(n, t) {
   const c = e.closest("table");
   if (c && i.contains(c)) return k({ kind: "table", element: c, paper: i });
   const r = e.closest("h1, h2, h3, h4, h5, h6");
-  if (r && i.contains(r)) return k({ kind: "heading", element: r, paper: i });
+  if (r && i.contains(r))
+    return k({ kind: "heading", element: r, paper: i });
   const d = e.closest("blockquote");
   if (d && i.contains(d)) return k({ kind: "blockquote", element: d, paper: i });
   const u = e.closest("li");
@@ -217,10 +218,7 @@ class dt {
       t.left + e,
       Math.min(o.left, t.right - this.root.offsetWidth - e)
     );
-    c ? r = t.top + e : (r = o.top - s - e, r < t.top + e && (r = t.top + e)), d = Math.max(
-      0,
-      Math.min(d, window.innerWidth - this.root.offsetWidth)
-    ), this.root.style.top = `${r}px`, this.root.style.left = `${d}px`, this.root.classList.toggle("is-stuck", c);
+    c ? r = t.top + e : (r = o.top - s - e, r < t.top + e && (r = t.top + e)), d = Math.max(0, Math.min(d, window.innerWidth - this.root.offsetWidth)), this.root.style.top = `${r}px`, this.root.style.left = `${d}px`, this.root.classList.toggle("is-stuck", c);
   }
   /**
    * Case C: if the block is small but the toolbar wouldn't fit above it
@@ -460,12 +458,10 @@ function zt(n, t, e) {
   if (!o) return;
   const s = i.body[o.index];
   if (!s || s.kind !== "paragraph") return;
-  const a = i.numbering.find(
-    (g) => {
-      var f;
-      return ((f = g.abstractFormat.levels[0]) == null ? void 0 : f.format) === e;
-    }
-  );
+  const a = i.numbering.find((g) => {
+    var f;
+    return ((f = g.abstractFormat.levels[0]) == null ? void 0 : f.format) === e;
+  });
   let l, c = i.numbering;
   a ? l = a.numId : (l = i.numbering.reduce((g, f) => Math.max(g, f.numId), 0) + 1, c = [
     ...i.numbering,
@@ -520,13 +516,214 @@ function Kt(n) {
   };
   n.editor.replaceBlock(t, l);
 }
+const jt = ["A3", "A4", "A5", "B5", "Letter", "Legal", "Tabloid"], F = ["top", "right", "bottom", "left"], Ut = ["top", "center", "bottom", "both"];
+function Wt(n, t, e) {
+  const i = Math.max(1, t.getSectionCount());
+  let o = Xt(Jt(t.editor), i);
+  const s = t.editor.selection.get(), a = document.createElement("div");
+  a.className = "sobree-page-setup-popover sobree-change-popover", a.setAttribute("role", "dialog"), a.setAttribute("aria-label", "Page and section setup"), a.tabIndex = -1, document.body.appendChild(a);
+  const l = t.editor.commands.has("section.insertBreakAfter"), c = () => {
+    const v = t.getSectionSetup(o);
+    a.innerHTML = Zt(i, o, v, l), Yt(
+      a,
+      t,
+      () => o,
+      (S) => {
+        o = S, c();
+      },
+      () => y(),
+      s
+    );
+  };
+  c();
+  const r = n.getBoundingClientRect(), u = Math.max(8, Math.min(window.innerWidth - 320 - 8, r.left));
+  a.style.top = `${r.bottom + 6}px`, a.style.left = `${u}px`, requestAnimationFrame(() => a.classList.add("is-open"));
+  const h = (v) => {
+    const S = v.target;
+    a.contains(S) || n.contains(S) || y();
+  }, p = window.setTimeout(() => {
+    document.addEventListener("mousedown", h, !0);
+  }, 0), g = (v) => {
+    v.key === "Escape" && (v.preventDefault(), y());
+  };
+  a.addEventListener("keydown", g), queueMicrotask(() => {
+    (a.querySelector("select, input") ?? a).focus();
+  });
+  let f = !1;
+  const y = () => {
+    f || (f = !0, window.clearTimeout(p), document.removeEventListener("mousedown", h, !0), a.removeEventListener("keydown", g), a.remove(), e());
+  };
+  return y;
+}
+function Zt(n, t, e, i) {
+  const o = n > 1 ? `
+        <label class="ps-row">
+          <span class="ps-label">Section</span>
+          <select data-field="section">
+            ${Array.from({ length: n }, (r, d) => `<option value="${d}"${d === t ? " selected" : ""}>Section ${d + 1}</option>`).join("")}
+          </select>
+        </label>` : "", s = `
+    <div class="ps-section-header">Page</div>
+    <div class="ps-grid">
+      <label class="ps-row">
+        <span class="ps-label">Size</span>
+        <select data-field="size">
+          ${jt.map((r) => {
+    const d = r === e.size ? " selected" : "", u = K[r];
+    return `<option value="${r}"${d}>${r} (${u.width} × ${u.height} mm)</option>`;
+  }).join("")}
+        </select>
+      </label>
+      <label class="ps-row">
+        <span class="ps-label">Orientation</span>
+        <select data-field="orientation">
+          <option value="portrait"${e.orientation === "portrait" ? " selected" : ""}>Portrait</option>
+          <option value="landscape"${e.orientation === "landscape" ? " selected" : ""}>Landscape</option>
+        </select>
+      </label>
+      <div class="ps-row ps-margins">
+        <span class="ps-label">Margins (mm)</span>
+        <div class="ps-margin-grid">
+          ${F.map(
+    (r) => `
+            <label class="ps-margin">
+              <span>${r}</span>
+              <input type="number" min="0" step="1" data-field="margin-${r}" value="${e.margins[r]}" />
+            </label>`
+  ).join("")}
+        </div>
+      </div>
+    </div>`, a = e.header.differentFirst || e.footer.differentFirst, l = e.header.differentLast || e.footer.differentLast, c = `
+    <div class="ps-section-header">Section</div>
+    <div class="ps-grid">
+      <label class="ps-row">
+        <span class="ps-label">Vertical alignment</span>
+        <select data-field="vertical-align">
+          ${Ut.map((r) => {
+    const d = r === e.verticalAlign ? " selected" : "";
+    return `<option value="${r}"${d}>${Qt(r)}</option>`;
+  }).join("")}
+        </select>
+      </label>
+      <label class="ps-row ps-checkbox">
+        <input type="checkbox" data-field="different-first"${a ? " checked" : ""} />
+        <span>Different header / footer for first page</span>
+      </label>
+      <label class="ps-row ps-checkbox">
+        <input type="checkbox" data-field="different-last"${l ? " checked" : ""} />
+        <span>Different header / footer for last page</span>
+      </label>
+      ${i ? `<button type="button" class="ps-insert-break" data-action="insert-section-break">
+               Insert section break after current block
+             </button>` : ""}
+    </div>`;
+  return `
+    <div class="ps-header">Page &amp; section setup</div>
+    ${o}
+    ${s}
+    ${c}
+  `;
+}
+function Qt(n) {
+  return n.charAt(0).toUpperCase() + n.slice(1);
+}
+function Yt(n, t, e, i, o, s) {
+  const a = n.querySelector('select[data-field="section"]');
+  a && a.addEventListener("change", () => {
+    const p = Number(a.value);
+    Number.isFinite(p) && i(p);
+  });
+  const l = n.querySelector('select[data-field="size"]');
+  l == null || l.addEventListener("change", () => {
+    t.setSectionSetup(e(), { size: l.value });
+  });
+  const c = n.querySelector('select[data-field="orientation"]');
+  c == null || c.addEventListener("change", () => {
+    t.setSectionSetup(e(), {
+      orientation: c.value
+    });
+  });
+  for (const p of F) {
+    const g = n.querySelector(`input[data-field="margin-${p}"]`);
+    if (!g) continue;
+    const f = () => {
+      const v = Number(g.value);
+      if (!Number.isFinite(v) || v < 0) return;
+      const S = t.getSectionSetup(e()), G = document.activeElement === g, x = g.selectionStart, C = g.selectionEnd;
+      t.setSectionSetup(e(), {
+        margins: { ...S.margins, [p]: v }
+      }), G && requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          if (document.activeElement !== g && g.focus(), x !== null && C !== null)
+            try {
+              g.setSelectionRange(x, C);
+            } catch {
+            }
+        });
+      });
+    }, y = te(f, 1e3);
+    g.addEventListener("input", y), g.addEventListener("change", f);
+  }
+  const r = n.querySelector('select[data-field="vertical-align"]');
+  r == null || r.addEventListener("change", () => {
+    t.setSectionSetup(e(), {
+      verticalAlign: r.value
+    });
+  });
+  const d = n.querySelector(
+    'input[data-field="different-first"]'
+  );
+  d == null || d.addEventListener("change", () => {
+    const p = t.getSectionSetup(e()), g = d.checked;
+    t.setSectionSetup(e(), {
+      header: { ...p.header, differentFirst: g },
+      footer: { ...p.footer, differentFirst: g }
+    });
+  });
+  const u = n.querySelector('input[data-field="different-last"]');
+  u == null || u.addEventListener("change", () => {
+    const p = t.getSectionSetup(e()), g = u.checked;
+    t.setSectionSetup(e(), {
+      header: { ...p.header, differentLast: g },
+      footer: { ...p.footer, differentLast: g }
+    });
+  });
+  const h = n.querySelector(
+    'button[data-action="insert-section-break"]'
+  );
+  h == null || h.addEventListener("click", (p) => {
+    p.preventDefault(), s && t.editor.selection.set(s), t.editor.commands.execute("section.insertBreakAfter"), o();
+  });
+}
+function Jt(n) {
+  const t = n.selection.currentBlock();
+  if (!t) return 0;
+  const e = n.getBlocks();
+  let i = 0;
+  for (const o of e) {
+    if (o.id === t.id) return i;
+    o.kind === "section_break" && (i += 1);
+  }
+  return i;
+}
+function Xt(n, t) {
+  return !Number.isFinite(n) || n < 0 ? 0 : n >= t ? Math.max(0, t - 1) : n;
+}
+function te(n, t) {
+  let e = null;
+  return () => {
+    e !== null && clearTimeout(e), e = setTimeout(() => {
+      e = null, n();
+    }, t);
+  };
+}
 const E = {
   blockKind: null,
   paragraphProps: null,
   listFormat: null,
   runProps: {}
 };
-function F(n) {
+function _(n) {
   const t = n.selection.currentCaret();
   if (!t) return E;
   const e = n.getDocument(), i = n.getBlockById(t.block.id);
@@ -538,31 +735,31 @@ function F(n) {
       ...E,
       blockKind: o.kind
     };
-  const s = Ut(n, o), { runDefaults: a } = K(e.styles, o.properties.styleId);
+  const s = ne(n, o), { runDefaults: a } = j(e.styles, o.properties.styleId);
   return {
     blockKind: "paragraph",
     paragraphProps: o.properties,
-    listFormat: jt(e, o),
+    listFormat: ee(e, o),
     runProps: { ...a, ...s }
   };
 }
-function jt(n, t) {
+function ee(n, t) {
   var s;
   const e = t.properties.numbering;
   if (!e) return null;
   const i = n.numbering.find((a) => a.numId === e.numId), o = (s = i == null ? void 0 : i.abstractFormat.levels[0]) == null ? void 0 : s.format;
   return o === "bullet" || o === "decimal" ? o : null;
 }
-function Ut(n, t) {
+function ne(n, t) {
   const e = n.selection.currentRange();
   if (e && e.from.block.id === e.to.block.id) {
-    const o = Math.min(e.from.offset, e.to.offset), s = Math.max(e.from.offset, e.to.offset), a = Wt(t.runs, o, s);
-    return a.length === 0 ? {} : Qt(a.map((l) => l.properties));
+    const o = Math.min(e.from.offset, e.to.offset), s = Math.max(e.from.offset, e.to.offset), a = oe(t.runs, o, s);
+    return a.length === 0 ? {} : re(a.map((l) => l.properties));
   }
   const i = n.selection.currentCaret();
-  return i ? Zt(t.runs, i.offset) : {};
+  return i ? ie(t.runs, i.offset) : {};
 }
-function Wt(n, t, e) {
+function oe(n, t, e) {
   const i = [];
   let o = 0;
   return s(n), i;
@@ -576,13 +773,13 @@ function Wt(n, t, e) {
     }
   }
 }
-function Zt(n, t) {
+function ie(n, t) {
   let e = 0, i = {};
   for (const o of n) {
     const s = L(o);
     if (o.kind === "text") i = o.properties;
     else if (o.kind === "hyperlink") {
-      const a = _(o.children);
+      const a = O(o.children);
       a && (i = a);
     }
     if (t > e && t <= e + s)
@@ -591,12 +788,12 @@ function Zt(n, t) {
   }
   return i;
 }
-function _(n) {
+function O(n) {
   let t = null;
   for (const e of n)
     if (e.kind === "text") t = e.properties;
     else if (e.kind === "hyperlink") {
-      const i = _(e.children);
+      const i = O(e.children);
       i && (t = i);
     }
   return t;
@@ -610,7 +807,7 @@ function L(n) {
   }
   return 1;
 }
-function Qt(n) {
+function re(n) {
   if (n.length === 0) return {};
   const t = n[0], e = {};
   for (const [i, o] of Object.entries(t)) {
@@ -625,12 +822,12 @@ function Qt(n) {
   }
   return e;
 }
-function Yt(n) {
+function ae(n) {
   if (n === "table" || n === "header" || n === "footer") return "";
-  const e = [ee()];
-  return n === "heading" && e.push(ne()), (n === "list" || n === "listOrdered") && e.push(oe()), n === "image" && e.push(ie()), `<div class="tb-divider"></div>${e.join('<div class="tb-divider"></div>')}`;
+  const e = [de()];
+  return n === "heading" && e.push(ue()), (n === "list" || n === "listOrdered") && e.push(pe()), n === "image" && e.push(he()), `<div class="tb-divider"></div>${e.join('<div class="tb-divider"></div>')}`;
 }
-function Jt(n, t) {
+function se(n, t) {
   const e = [], i = (c) => {
     const r = c.target.closest('button[data-action="align"]');
     if (!r) return;
@@ -639,7 +836,7 @@ function Jt(n, t) {
     const u = d === "justify" ? "both" : d;
     u !== "left" && u !== "center" && u !== "right" && u !== "both" || B(t, (h) => {
       const p = t.editor.applyBlockProperties([h], { alignment: u });
-      O("align", p);
+      q("align", p);
     });
   };
   n.addEventListener("click", i), e.push(() => n.removeEventListener("click", i));
@@ -672,11 +869,12 @@ function Jt(n, t) {
       const d = r.target.closest("button[data-action]");
       if (!d) return;
       const u = d.getAttribute("data-action");
-      if (u === "toggle-list-kind") ae(t);
+      if (u === "toggle-list-kind") be(t);
       else if (u === "align-list") {
         const h = d.getAttribute("data-arg"), p = h === "justify" ? "both" : h;
-        if (p !== "left" && p !== "center" && p !== "right" && p !== "both") return;
-        re(t, p);
+        if (p !== "left" && p !== "center" && p !== "right" && p !== "both")
+          return;
+        ge(t, p);
       }
     };
     n.addEventListener("click", c), e.push(() => n.removeEventListener("click", c));
@@ -686,43 +884,37 @@ function Jt(n, t) {
       const u = d.target;
       if (u.getAttribute("data-role") !== "image-alt") return;
       const p = u.value;
-      se(t, p);
+      fe(t, p);
     };
     n.addEventListener("input", c), e.push(() => n.removeEventListener("input", c));
     const r = (d) => {
       const u = d.target.closest("button[data-action]");
-      (u == null ? void 0 : u.getAttribute("data-action")) === "delete-image" && le(t);
+      (u == null ? void 0 : u.getAttribute("data-action")) === "delete-image" && me(t);
     };
     n.addEventListener("click", r), e.push(() => n.removeEventListener("click", r));
   }
-  const s = () => Xt(n, t), a = t.editor.on("selection", s), l = t.editor.on("change", s);
+  const s = () => le(n, t), a = t.editor.on("selection", s), l = t.editor.on("change", s);
   return e.push(a, l), s(), () => {
     for (const c of e) c();
   };
 }
-function Xt(n, t) {
+function le(n, t) {
   var r, d, u;
-  const e = F(t.editor), i = (r = e.paragraphProps) == null ? void 0 : r.alignment, o = i === "both" ? "justify" : i === void 0 ? "left" : i, s = n.querySelectorAll(
-    'button[data-action="align"]'
-  );
+  const e = _(t.editor), i = (r = e.paragraphProps) == null ? void 0 : r.alignment, o = i === "both" ? "justify" : i === void 0 ? "left" : i, s = n.querySelectorAll('button[data-action="align"]');
   for (const h of s) {
     const p = h.getAttribute("data-arg") === o;
     h.setAttribute("aria-pressed", String(p)), h.classList.toggle("is-active", p);
   }
-  const a = n.querySelector(
-    'select[data-role="line-spacing"]'
-  );
+  const a = n.querySelector('select[data-role="line-spacing"]');
   if (a) {
     const h = (d = e.paragraphProps) == null ? void 0 : d.spacing;
     if (h != null && h.line && h.lineRule === "auto") {
-      const p = h.line / 240, g = te(a, String(p));
+      const p = h.line / 240, g = ce(a, String(p));
       a.value = g ?? "";
     } else
       a.value = "";
   }
-  const l = n.querySelector(
-    'select[data-role="heading-level"]'
-  );
+  const l = n.querySelector('select[data-role="heading-level"]');
   if (l) {
     const h = (u = e.paragraphProps) == null ? void 0 : u.styleId, p = h == null ? void 0 : h.match(/^Heading([1-6])$/);
     l.value = (p == null ? void 0 : p[1]) ?? "";
@@ -735,12 +927,12 @@ function Xt(n, t) {
     c.innerHTML = m(h ? "list-numbered" : "list-bullet"), c.title = h ? "Switch to bullet list" : "Switch to numbered list";
   }
 }
-function te(n, t) {
+function ce(n, t) {
   for (const e of Array.from(n.options))
     if (e.value === t) return t;
   return null;
 }
-function ee() {
+function de() {
   return `
     <div class="tb-group" data-group="alignment">
       <button type="button" data-action="align" data-arg="left" title="Align left">${m("align-left")}</button>
@@ -757,7 +949,7 @@ function ee() {
     </div>
   `;
 }
-function ne() {
+function ue() {
   return `
     <div class="tb-group" data-group="heading">
       <select data-role="heading-level" aria-label="Heading level" title="Heading level">
@@ -772,7 +964,7 @@ function ne() {
     </div>
   `;
 }
-function oe(n) {
+function pe(n) {
   return `
     <div class="tb-group" data-group="list">
       <button type="button" data-action="toggle-list-kind" title="Toggle bullet / numbered">${m("list-numbered")}</button>
@@ -783,7 +975,7 @@ function oe(n) {
     </div>
   `;
 }
-function ie() {
+function he() {
   return `
     <div class="tb-group" data-group="image">
       <input type="text" data-role="image-alt" placeholder="Alt text" aria-label="Alt text" title="Alt text (screen reader description)" />
@@ -795,7 +987,7 @@ function B(n, t) {
   const e = w(n);
   e && t(e);
 }
-function O(n, t) {
+function q(n, t) {
   t.ok || console.warn(`[block-tools] ${n} failed:`, t.error);
 }
 function w(n) {
@@ -807,7 +999,7 @@ function w(n) {
   const e = n.editor.selection.currentCaret();
   return (e == null ? void 0 : e.block) ?? n.editor.getBlocks()[0] ?? null;
 }
-function re(n, t) {
+function ge(n, t) {
   var u, h;
   const e = w(n);
   if (!e) return;
@@ -819,13 +1011,15 @@ function re(n, t) {
   let l = i.index;
   for (; l > 0; ) {
     const p = o.body[l - 1];
-    if (!p || p.kind !== "paragraph" || ((u = p.properties.numbering) == null ? void 0 : u.numId) !== a) break;
+    if (!p || p.kind !== "paragraph" || ((u = p.properties.numbering) == null ? void 0 : u.numId) !== a)
+      break;
     l--;
   }
   let c = i.index + 1;
   for (; c < o.body.length; ) {
     const p = o.body[c];
-    if (!p || p.kind !== "paragraph" || ((h = p.properties.numbering) == null ? void 0 : h.numId) !== a) break;
+    if (!p || p.kind !== "paragraph" || ((h = p.properties.numbering) == null ? void 0 : h.numId) !== a)
+      break;
     c++;
   }
   const r = [];
@@ -837,9 +1031,9 @@ function re(n, t) {
     f && r.push({ id: f.id, version: f.version });
   }
   const d = n.editor.applyBlockProperties(r, { alignment: t });
-  O("align-list", d);
+  q("align-list", d);
 }
-function ae(n) {
+function be(n) {
   var p;
   const t = w(n);
   if (!t) return;
@@ -847,12 +1041,10 @@ function ae(n) {
   if (!i) return;
   const o = e.body[i.index];
   if (!o || o.kind !== "paragraph" || !o.properties.numbering) return;
-  const s = e.numbering.find(
-    (g) => {
-      var f;
-      return g.numId === ((f = o.properties.numbering) == null ? void 0 : f.numId);
-    }
-  );
+  const s = e.numbering.find((g) => {
+    var f;
+    return g.numId === ((f = o.properties.numbering) == null ? void 0 : f.numId);
+  });
   if (!s) return;
   const l = (((p = s.abstractFormat.levels[0]) == null ? void 0 : p.format) ?? "bullet") !== "bullet", c = e.numbering.find(
     (g) => {
@@ -887,19 +1079,17 @@ function ae(n) {
   const h = { ...e, numbering: d, body: u };
   n.editor.setDocument(h);
 }
-function se(n, t) {
+function fe(n, t) {
   const e = w(n);
   if (!e) return;
   const i = n.editor.getDocument(), o = n.editor.getBlockById(e.id);
   if (!o) return;
   const s = i.body[o.index];
   if (!s || s.kind !== "paragraph") return;
-  const a = s.runs.map(
-    (l) => l.kind === "drawing" ? { ...l, altText: t } : l
-  );
+  const a = s.runs.map((l) => l.kind === "drawing" ? { ...l, altText: t } : l);
   n.editor.replaceBlock(e, { ...s, runs: a });
 }
-function le(n) {
+function me(n) {
   const t = w(n);
   if (!t) return;
   const e = n.editor.getDocument(), i = n.editor.getBlockById(t.id);
@@ -909,7 +1099,7 @@ function le(n) {
   const s = o.runs.filter((a) => a.kind !== "drawing");
   n.editor.replaceBlock(t, { ...o, runs: s });
 }
-function ce(n, t) {
+function ve(n, t) {
   const e = `
     <div class="tb-divider"></div>
     <div class="tb-pill" role="tablist" aria-label="Table scope">
@@ -925,9 +1115,9 @@ function ce(n, t) {
     </div>
     <div class="tb-divider"></div>
   `;
-  return n === "cell" ? e + ue(t) : e + pe();
+  return n === "cell" ? e + ye(t) : e + Se();
 }
-function de(n, t, e) {
+function ke(n, t, e) {
   const i = (s) => {
     const a = s.target.closest("button[data-action]");
     if (!a || a.hasAttribute("disabled")) return;
@@ -937,7 +1127,7 @@ function de(n, t, e) {
       return;
     }
     const r = P(t);
-    r && he(t, r, l, c);
+    r && we(t, r, l, c);
   }, o = (s) => {
     const a = s.target, l = a.getAttribute("data-role");
     if (!l) return;
@@ -954,7 +1144,7 @@ function de(n, t, e) {
     n.removeEventListener("click", i), n.removeEventListener("change", o);
   };
 }
-function ue(n) {
+function ye(n) {
   const t = n ? "" : "disabled";
   return `
     <div class="tb-group" data-group="cell-align">
@@ -976,7 +1166,7 @@ function ue(n) {
     </div>
   `;
 }
-function pe() {
+function Se() {
   return `
     <div class="tb-group" data-group="row-ops">
       <button type="button" data-action="row-above" title="Insert row above">+ Row ↑</button>
@@ -996,7 +1186,7 @@ function pe() {
     </div>
   `;
 }
-function he(n, t, e, i) {
+function we(n, t, e, i) {
   if (!e) return;
   const o = n.editor, s = n.cell, a = (s == null ? void 0 : s.row) ?? 0, l = (s == null ? void 0 : s.col) ?? 0;
   switch (e) {
@@ -1006,7 +1196,7 @@ function he(n, t, e, i) {
       if (!r) return;
       const u = o.getDocument().body[r.index];
       if (!u || u.kind !== "table") return;
-      const h = u.rows[s.row], p = h == null ? void 0 : h.cells[ge(u, s.row, s.col)];
+      const h = u.rows[s.row], p = h == null ? void 0 : h.cells[Te(u, s.row, s.col)];
       if (!p) return;
       const g = p.content.map(
         (f) => f.kind === "paragraph" ? { ...f, properties: { ...f.properties, alignment: c } } : f
@@ -1065,7 +1255,7 @@ function P(n) {
   const e = n.editor.getBlocks().find((o) => o.kind === "table");
   return e ? { id: e.id, version: e.version } : null;
 }
-function ge(n, t, e) {
+function Te(n, t, e) {
   var s;
   const i = n.rows[t];
   if (!i) return -1;
@@ -1077,15 +1267,13 @@ function ge(n, t, e) {
   }
   return -1;
 }
-function be(n) {
+function Ee(n) {
   var c;
   const t = window.getSelection();
   if (!t || t.rangeCount === 0) return null;
   const e = t.anchorNode;
   if (!e) return null;
-  const i = (c = e.nodeType === Node.TEXT_NODE ? e.parentElement : e) == null ? void 0 : c.closest(
-    "td, th"
-  );
+  const i = (c = e.nodeType === Node.TEXT_NODE ? e.parentElement : e) == null ? void 0 : c.closest("td, th");
   if (!i || !n.contains(i)) return null;
   const o = i.parentElement;
   if (!o) return null;
@@ -1150,7 +1338,7 @@ function H(n, t) {
       const d = c.getAttribute("data-tag");
       if (!d) return;
       const u = N(t);
-      j(t.editor, u, d), requestAnimationFrame(() => A(n, t));
+      U(t.editor, u, d), requestAnimationFrame(() => A(n, t));
       return;
     }
     if (r === "clear-formatting") {
@@ -1191,36 +1379,26 @@ function H(n, t) {
   };
 }
 function A(n, t) {
-  const e = F(t.editor), i = n.querySelectorAll(
-    'button[data-action="wrap"][data-tag]'
-  );
+  const e = _(t.editor), i = n.querySelectorAll('button[data-action="wrap"][data-tag]');
   for (const c of i) {
     const r = c.getAttribute("data-tag");
     if (!r || r === "mark") continue;
-    const d = U[r], u = W[r], h = d !== void 0 && e.runProps[d] === u;
+    const d = W[r], u = Z[r], h = d !== void 0 && e.runProps[d] === u;
     c.setAttribute("aria-pressed", String(h)), c.classList.toggle("is-active", h);
   }
-  const o = n.querySelector(
-    'select[data-role="font-family"]'
-  );
+  const o = n.querySelector('select[data-role="font-family"]');
   if (o) {
     const c = e.runProps.fontFamily ?? "";
     o.value = M(o, c) ? c : "";
   }
-  const s = n.querySelector(
-    'select[data-role="font-size"]'
-  );
+  const s = n.querySelector('select[data-role="font-size"]');
   if (s) {
     const c = e.runProps.fontSizePt, r = c === void 0 ? "" : String(c);
     s.value = M(s, r) ? r : "";
   }
-  const a = n.querySelector(
-    'input[data-role="color"]'
-  );
+  const a = n.querySelector('input[data-role="color"]');
   a && e.runProps.color && (a.value = e.runProps.color);
-  const l = n.querySelector(
-    'input[data-role="highlight"]'
-  );
+  const l = n.querySelector('input[data-role="highlight"]');
   l && e.runProps.highlight && (l.value = e.runProps.highlight);
 }
 function M(n, t) {
@@ -1230,239 +1408,15 @@ function M(n, t) {
 }
 function N(n) {
   const t = n.editor.selection.currentRange();
-  return t || fe(n.editor, n.target);
+  return t || Ae(n.editor, n.target);
 }
-function fe(n, t) {
+function Ae(n, t) {
   const e = n.selection.currentCaret(), i = (e == null ? void 0 : e.block) ?? n.getBlocks()[0], o = n.getBlockById(i.id), s = (o == null ? void 0 : o.length) ?? 0;
   return {
     from: { block: i, offset: 0 },
     to: { block: i, offset: s }
   };
 }
-const me = [
-  "A3",
-  "A4",
-  "A5",
-  "B5",
-  "Letter",
-  "Legal",
-  "Tabloid"
-], q = ["top", "right", "bottom", "left"], ve = ["top", "center", "bottom", "both"];
-function ke(n, t, e) {
-  const i = Math.max(1, t.getSectionCount());
-  let o = Ee(Te(t.editor), i);
-  const s = t.editor.selection.get(), a = document.createElement("div");
-  a.className = "sobree-page-setup-popover sobree-change-popover", a.setAttribute("role", "dialog"), a.setAttribute("aria-label", "Page and section setup"), a.tabIndex = -1, document.body.appendChild(a);
-  const l = t.editor.commands.has("section.insertBreakAfter"), c = () => {
-    const v = t.getSectionSetup(o);
-    a.innerHTML = ye(i, o, v, l), we(
-      a,
-      t,
-      () => o,
-      (S) => {
-        o = S, c();
-      },
-      () => y(),
-      s
-    );
-  };
-  c();
-  const r = n.getBoundingClientRect(), u = Math.max(
-    8,
-    Math.min(window.innerWidth - 320 - 8, r.left)
-  );
-  a.style.top = `${r.bottom + 6}px`, a.style.left = `${u}px`, requestAnimationFrame(() => a.classList.add("is-open"));
-  const h = (v) => {
-    const S = v.target;
-    a.contains(S) || n.contains(S) || y();
-  }, p = window.setTimeout(() => {
-    document.addEventListener("mousedown", h, !0);
-  }, 0), g = (v) => {
-    v.key === "Escape" && (v.preventDefault(), y());
-  };
-  a.addEventListener("keydown", g), queueMicrotask(() => {
-    (a.querySelector("select, input") ?? a).focus();
-  });
-  let f = !1;
-  const y = () => {
-    f || (f = !0, window.clearTimeout(p), document.removeEventListener("mousedown", h, !0), a.removeEventListener("keydown", g), a.remove(), e());
-  };
-  return y;
-}
-function ye(n, t, e, i) {
-  const o = n > 1 ? `
-        <label class="ps-row">
-          <span class="ps-label">Section</span>
-          <select data-field="section">
-            ${Array.from({ length: n }, (r, d) => `<option value="${d}"${d === t ? " selected" : ""}>Section ${d + 1}</option>`).join("")}
-          </select>
-        </label>` : "", s = `
-    <div class="ps-section-header">Page</div>
-    <div class="ps-grid">
-      <label class="ps-row">
-        <span class="ps-label">Size</span>
-        <select data-field="size">
-          ${me.map((r) => {
-    const d = r === e.size ? " selected" : "", u = Z[r];
-    return `<option value="${r}"${d}>${r} (${u.width} × ${u.height} mm)</option>`;
-  }).join("")}
-        </select>
-      </label>
-      <label class="ps-row">
-        <span class="ps-label">Orientation</span>
-        <select data-field="orientation">
-          <option value="portrait"${e.orientation === "portrait" ? " selected" : ""}>Portrait</option>
-          <option value="landscape"${e.orientation === "landscape" ? " selected" : ""}>Landscape</option>
-        </select>
-      </label>
-      <div class="ps-row ps-margins">
-        <span class="ps-label">Margins (mm)</span>
-        <div class="ps-margin-grid">
-          ${q.map(
-    (r) => `
-            <label class="ps-margin">
-              <span>${r}</span>
-              <input type="number" min="0" step="1" data-field="margin-${r}" value="${e.margins[r]}" />
-            </label>`
-  ).join("")}
-        </div>
-      </div>
-    </div>`, a = e.header.differentFirst || e.footer.differentFirst, l = e.header.differentLast || e.footer.differentLast, c = `
-    <div class="ps-section-header">Section</div>
-    <div class="ps-grid">
-      <label class="ps-row">
-        <span class="ps-label">Vertical alignment</span>
-        <select data-field="vertical-align">
-          ${ve.map((r) => {
-    const d = r === e.verticalAlign ? " selected" : "";
-    return `<option value="${r}"${d}>${Se(r)}</option>`;
-  }).join("")}
-        </select>
-      </label>
-      <label class="ps-row ps-checkbox">
-        <input type="checkbox" data-field="different-first"${a ? " checked" : ""} />
-        <span>Different header / footer for first page</span>
-      </label>
-      <label class="ps-row ps-checkbox">
-        <input type="checkbox" data-field="different-last"${l ? " checked" : ""} />
-        <span>Different header / footer for last page</span>
-      </label>
-      ${i ? `<button type="button" class="ps-insert-break" data-action="insert-section-break">
-               Insert section break after current block
-             </button>` : ""}
-    </div>`;
-  return `
-    <div class="ps-header">Page &amp; section setup</div>
-    ${o}
-    ${s}
-    ${c}
-  `;
-}
-function Se(n) {
-  return n.charAt(0).toUpperCase() + n.slice(1);
-}
-function we(n, t, e, i, o, s) {
-  const a = n.querySelector(
-    'select[data-field="section"]'
-  );
-  a && a.addEventListener("change", () => {
-    const p = Number(a.value);
-    Number.isFinite(p) && i(p);
-  });
-  const l = n.querySelector(
-    'select[data-field="size"]'
-  );
-  l == null || l.addEventListener("change", () => {
-    t.setSectionSetup(e(), { size: l.value });
-  });
-  const c = n.querySelector(
-    'select[data-field="orientation"]'
-  );
-  c == null || c.addEventListener("change", () => {
-    t.setSectionSetup(e(), {
-      orientation: c.value
-    });
-  });
-  for (const p of q) {
-    const g = n.querySelector(
-      `input[data-field="margin-${p}"]`
-    );
-    if (!g) continue;
-    const f = () => {
-      const v = Number(g.value);
-      if (!Number.isFinite(v) || v < 0) return;
-      const S = t.getSectionSetup(e()), G = document.activeElement === g, x = g.selectionStart, C = g.selectionEnd;
-      t.setSectionSetup(e(), {
-        margins: { ...S.margins, [p]: v }
-      }), G && requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          if (document.activeElement !== g && g.focus(), x !== null && C !== null)
-            try {
-              g.setSelectionRange(x, C);
-            } catch {
-            }
-        });
-      });
-    }, y = Ae(f, 1e3);
-    g.addEventListener("input", y), g.addEventListener("change", f);
-  }
-  const r = n.querySelector(
-    'select[data-field="vertical-align"]'
-  );
-  r == null || r.addEventListener("change", () => {
-    t.setSectionSetup(e(), {
-      verticalAlign: r.value
-    });
-  });
-  const d = n.querySelector(
-    'input[data-field="different-first"]'
-  );
-  d == null || d.addEventListener("change", () => {
-    const p = t.getSectionSetup(e()), g = d.checked;
-    t.setSectionSetup(e(), {
-      header: { ...p.header, differentFirst: g },
-      footer: { ...p.footer, differentFirst: g }
-    });
-  });
-  const u = n.querySelector(
-    'input[data-field="different-last"]'
-  );
-  u == null || u.addEventListener("change", () => {
-    const p = t.getSectionSetup(e()), g = u.checked;
-    t.setSectionSetup(e(), {
-      header: { ...p.header, differentLast: g },
-      footer: { ...p.footer, differentLast: g }
-    });
-  });
-  const h = n.querySelector(
-    'button[data-action="insert-section-break"]'
-  );
-  h == null || h.addEventListener("click", (p) => {
-    p.preventDefault(), s && t.editor.selection.set(s), t.editor.commands.execute("section.insertBreakAfter"), o();
-  });
-}
-function Te(n) {
-  const t = n.selection.currentBlock();
-  if (!t) return 0;
-  const e = n.getBlocks();
-  let i = 0;
-  for (const o of e) {
-    if (o.id === t.id) return i;
-    o.kind === "section_break" && (i += 1);
-  }
-  return i;
-}
-function Ee(n, t) {
-  return !Number.isFinite(n) || n < 0 ? 0 : n >= t ? Math.max(0, t - 1) : n;
-}
-function Ae(n, t) {
-  let e = null;
-  return () => {
-    e !== null && clearTimeout(e), e = setTimeout(() => {
-      e = null, n();
-    }, t);
-  };
-}
 class Le {
   constructor(t) {
     b(this, "stackRoot");
@@ -1536,7 +1490,7 @@ class Le {
     if (t.kind === "table")
       this.renderTableToolbar(t, e);
     else {
-      const o = e.refs.length > 1, s = o ? "" : Yt(t.kind);
+      const o = e.refs.length > 1, s = o ? "" : ae(t.kind);
       this.toolbar.setContent(
         R() + s + $(e.refs.length) + this.buildTrailingToolsHtml()
       ), this.toolbar.open(t);
@@ -1544,7 +1498,7 @@ class Le {
         editor: this.editor,
         target: t
       }), l = o ? () => {
-      } : Jt(this.toolbar.root, {
+      } : se(this.toolbar.root, {
         editor: this.editor,
         target: t
       }), c = this.wireChangeTypeTrigger(e), r = this.wireTrailingTools();
@@ -1611,12 +1565,12 @@ class Le {
   renderTableToolbarBody(t, e, i) {
     var c;
     (c = this.detachTools) == null || c.call(this), this.toolbar.setContent(
-      R() + ce(this.tableMode, !!e) + $(i.refs.length) + this.buildTrailingToolsHtml()
+      R() + ve(this.tableMode, !!e) + $(i.refs.length) + this.buildTrailingToolsHtml()
     );
     const o = H(this.toolbar.root, {
       editor: this.editor,
       target: t
-    }), s = de(
+    }), s = ke(
       this.toolbar.root,
       { editor: this.editor, target: t, cell: e },
       (r) => {
@@ -1661,10 +1615,7 @@ class Le {
         );
         l && !p ? (p = document.createElement("input"), p.type = "text", p.className = "tb-author-input", p.dataset.role = "track-changes-author", p.placeholder = "Anonymous", p.title = "Track changes author", p.setAttribute("aria-label", "Track changes author"), p.maxLength = 60, p.value = a.author ?? "", u.insertAdjacentElement("afterend", p)) : !l && p ? p.remove() : p && p.value !== (a.author ?? "") && document.activeElement !== p && (p.value = a.author ?? "");
       }
-    }, e = this.editor.on(
-      "track-changes-change",
-      t
-    ), i = this.editor.on("change", t);
+    }, e = this.editor.on("track-changes-change", t), i = this.editor.on("change", t);
     t();
     const o = (a) => {
       const l = a.target;
@@ -1698,7 +1649,7 @@ class Le {
         this.closePageSetupPopover();
         return;
       }
-      l.setAttribute("aria-expanded", "true"), this.closePageSetupPopover = ke(
+      l.setAttribute("aria-expanded", "true"), this.closePageSetupPopover = Wt(
         l,
         {
           editor: this.editor,
@@ -1716,7 +1667,7 @@ class Le {
     };
   }
   resolveCell(t) {
-    return t.element.tagName.toLowerCase() !== "table" ? null : be(t.element);
+    return t.element.tagName.toLowerCase() !== "table" ? null : Ee(t.element);
   }
   closeToolbar() {
     var t, e, i;