flowtext-editor 0.1.0

package/dist/index.cjs

@@ -0,0 +1,2910 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const cx = (...values) => values.filter(Boolean).join(" ");
+const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+function SpinnerLoader() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "erte-spinner-overlay", role: "status", "aria-live": "polite", "aria-label": "Loading", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "erte-spinner" }) });
+}
+function ErrorToaster({ message, hidden }) {
+  if (hidden || !message) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "erte-toast", role: "alert", children: message });
+}
+const TABLE_ACTION_SPACE = 52;
+const CELL_STYLE = [
+  "padding: 8px 10px",
+  "border: 1px solid #d7dce2",
+  "font-weight: normal",
+  "font-family: sans-serif",
+  "vertical-align: top",
+  "word-break: break-word",
+  "overflow-wrap: break-word"
+].join("; ");
+const getTableHtml = (rows, cols) => `
+  <table data-erte-table="true" style="width: calc(100% - ${TABLE_ACTION_SPACE}px); table-layout: fixed; border-collapse: collapse; font-weight: normal; font-family: sans-serif;">
+    <colgroup>${Array.from({ length: cols }).map(() => "<col>").join("")}</colgroup>
+    <tbody>
+      ${Array.from({ length: rows }).map(
+  () => `
+        <tr>
+          ${Array.from({ length: cols }).map(() => `<td style="${CELL_STYLE}">&nbsp;</td>`).join("")}
+        </tr>
+      `
+).join("")}
+    </tbody>
+  </table>
+  <p><br></p>
+`;
+const svg = (viewBox, path) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}" fill="currentColor" aria-hidden="true" focusable="false"><path d="${path}"/></svg>`;
+const strokeSvg = (inner) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${inner}</svg>`;
+const icons = {
+  undo: svg(
+    "0 0 512 512",
+    "M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z"
+  ),
+  redo: svg(
+    "0 0 512 512",
+    "M500.33 0h-47.41a12 12 0 0 0-12 12.57l4 82.76A247.42 247.42 0 0 0 256 8C119.34 8 7.9 119.53 8 256.19 8.1 393.07 119.1 504 256 504a247.1 247.1 0 0 0 166.18-63.91 12 12 0 0 0 .48-17.43l-34-34a12 12 0 0 0-16.38-.55A176 176 0 1 1 402.1 157.8l-101.53-4.87a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12h200.33a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12z"
+  ),
+  bold: svg(
+    "0 0 384 512",
+    "M333.49 238a122 122 0 0 0 27-65.21C367.87 96.49 308 32 233.42 32H34a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h31.87v288H34a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h209.32c70.8 0 134.14-51.75 141-122.4 4.74-48.45-16.39-92.06-50.83-119.6zM145.66 112h87.76a48 48 0 0 1 0 96h-87.76zm87.76 288h-87.76V288h87.76a56 56 0 0 1 0 112z"
+  ),
+  italic: svg(
+    "0 0 320 512",
+    "M320 48v32a16 16 0 0 1-16 16h-62.76l-80 320H208a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H16a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16h62.76l80-320H112a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h192a16 16 0 0 1 16 16z"
+  ),
+  underline: svg(
+    "0 0 448 512",
+    "M32 64h32v160c0 88.22 71.78 160 160 160s160-71.78 160-160V64h32a16 16 0 0 0 16-16V16a16 16 0 0 0-16-16H272a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32v160a80 80 0 0 1-160 0V64h32a16 16 0 0 0 16-16V16a16 16 0 0 0-16-16H32a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16zm400 384H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"
+  ),
+  alignLeft: svg(
+    "0 0 448 512",
+    "M12.83 352h262.34A12.82 12.82 0 0 0 288 339.17v-38.34A12.82 12.82 0 0 0 275.17 288H12.83A12.82 12.82 0 0 0 0 300.83v38.34A12.82 12.82 0 0 0 12.83 352zm0-256h262.34A12.82 12.82 0 0 0 288 83.17V44.83A12.82 12.82 0 0 0 275.17 32H12.83A12.82 12.82 0 0 0 0 44.83v38.34A12.82 12.82 0 0 0 12.83 96zM432 160H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0 256H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"
+  ),
+  alignCenter: svg(
+    "0 0 448 512",
+    "M432 160H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0 256H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM108.1 96h231.81A12.09 12.09 0 0 0 352 83.9V44.09A12.09 12.09 0 0 0 339.91 32H108.1A12.09 12.09 0 0 0 96 44.09V83.9A12.1 12.1 0 0 0 108.1 96zm231.81 256A12.09 12.09 0 0 0 352 339.9v-39.81A12.09 12.09 0 0 0 339.91 288H108.1A12.09 12.09 0 0 0 96 300.09v39.81a12.1 12.1 0 0 0 12.1 12.1z"
+  ),
+  alignRight: svg(
+    "0 0 448 512",
+    "M16 224h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16zm416 192H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm3.17-384H172.83A12.82 12.82 0 0 0 160 44.83v38.34A12.82 12.82 0 0 0 172.83 96h262.34A12.82 12.82 0 0 0 448 83.17V44.83A12.82 12.82 0 0 0 435.17 32zm0 256H172.83A12.82 12.82 0 0 0 160 300.83v38.34A12.82 12.82 0 0 0 172.83 352h262.34A12.82 12.82 0 0 0 448 339.17v-38.34A12.82 12.82 0 0 0 435.17 288z"
+  ),
+  listUl: svg(
+    "0 0 512 512",
+    "M48 48a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm448 16H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"
+  ),
+  listOl: svg(
+    "0 0 512 512",
+    "M61.77 401l17.5-20.15a19.92 19.92 0 0 0 5.07-14.19v-3.31C84.34 356 80.5 352 73 352H16a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h22.83a157.41 157.41 0 0 0-11 12.31l-5.61 7c-4 5.07-5.25 10.13-2.8 14.88l1.05 1.93c3 5.76 6.29 7.88 12.25 7.88h4.73c10.33 0 15.94 2.44 15.94 9.09 0 4.72-4.2 8.22-14.36 8.22a41.54 41.54 0 0 1-15.47-3.12c-6.49-3.88-11.74-3.5-15.6 3.12l-5.59 9.31c-3.72 6.13-3.19 11.72 2.63 15.94 7.71 4.69 20.38 9.44 37 9.44 34.16 0 48.5-22.75 48.5-44.12-.03-14.38-9.12-29.76-28.73-34.88zM496 224H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM16 160h64a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H64V40a8 8 0 0 0-8-8H32a8 8 0 0 0-7.14 4.42l-8 16A8 8 0 0 0 24 64h8v64H16a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8zm-3.91 160H80a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H41.32c3.29-10.29 48.34-18.68 48.34-56.44 0-29.06-25-39.56-44.47-39.56-21.36 0-33.8 10-40.46 18.75-4.37 5.59-3 10.84 2.8 15.37l8.58 6.88c5.61 4.56 11 2.47 16.12-2.44a13.44 13.44 0 0 1 9.46-3.84c3.33 0 9.28 1.56 9.28 8.75C51 248.19 0 257.31 0 304.59v4C0 316 5.08 320 12.09 320z"
+  ),
+  link: svg(
+    "0 0 512 512",
+    "M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"
+  ),
+  eraser: svg(
+    "0 0 512 512",
+    "M497.941 273.941c18.745-18.745 18.745-49.137 0-67.882l-160-160c-18.745-18.745-49.136-18.746-67.883 0l-256 256c-18.745 18.745-18.745 49.137 0 67.882l96 96A48.004 48.004 0 0 0 144 480h356c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12H355.883l142.058-142.059zm-302.627-62.627l137.373 137.373L265.373 416H150.628l-80-80 124.686-124.686z"
+  ),
+  table: svg(
+    "0 0 512 512",
+    "M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM224 416H64v-96h160v96zm0-160H64v-96h160v96zm224 160H288v-96h160v96zm0-160H288v-96h160v96z"
+  ),
+  outdent: svg(
+    "0 0 448 512",
+    "M100.69 363.29c10 10 27.31 2.93 27.31-11.31V160c0-14.32-17.33-21.31-27.31-11.31l-96 96a16 16 0 0 0 0 22.62zM432 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm3.17-128H204.83A12.82 12.82 0 0 0 192 300.83v38.34A12.82 12.82 0 0 0 204.83 352h230.34A12.82 12.82 0 0 0 448 339.17v-38.34A12.82 12.82 0 0 0 435.17 288zm0-128H204.83A12.82 12.82 0 0 0 192 172.83v38.34A12.82 12.82 0 0 0 204.83 224h230.34A12.82 12.82 0 0 0 448 211.17v-38.34A12.82 12.82 0 0 0 435.17 160zM432 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
+  ),
+  indent: svg(
+    "0 0 448 512",
+    "M27.31 363.3l96-96a16 16 0 0 0 0-22.62l-96-96C17.27 138.66 0 145.78 0 160v192c0 14.31 17.33 21.3 27.31 11.3zM432 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm3.17-128H204.83A12.82 12.82 0 0 0 192 300.83v38.34A12.82 12.82 0 0 0 204.83 352h230.34A12.82 12.82 0 0 0 448 339.17v-38.34A12.82 12.82 0 0 0 435.17 288zm0-128H204.83A12.82 12.82 0 0 0 192 172.83v38.34A12.82 12.82 0 0 0 204.83 224h230.34A12.82 12.82 0 0 0 448 211.17v-38.34A12.82 12.82 0 0 0 435.17 160zM432 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
+  ),
+  alignJustify: svg(
+    "0 0 448 512",
+    "M432 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-128H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-128H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-128H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
+  ),
+  strikethrough: svg(
+    "0 0 512 512",
+    "M496 224H293.9l-87.17-26.83A43.55 43.55 0 0 1 219.55 112h66.79A49.89 49.89 0 0 1 331 139.58a16 16 0 0 0 21.46 7.15l42.94-21.47a16 16 0 0 0 7.16-21.46l-.53-1A128 128 0 0 0 287.51 32h-68a123.68 123.68 0 0 0-123 135.64c2 20.89 10.1 39.83 21.78 56.36H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h480a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-180.24 96A43 43 0 0 1 336 356.45 43.59 43.59 0 0 1 292.45 400h-66.79A49.89 49.89 0 0 1 181 372.42a16 16 0 0 0-21.46-7.15l-42.94 21.47a16 16 0 0 0-7.16 21.46l.53 1A128 128 0 0 0 224.49 480h68a123.68 123.68 0 0 0 123-135.64 114.25 114.25 0 0 0-5.34-24.36z"
+  ),
+  subscript: svg(
+    "0 0 512 512",
+    "M496 448h-16V304a16 16 0 0 0-16-16h-48a16 16 0 0 0-14.29 8.83l-16 32A16 16 0 0 0 400 352h16v96h-16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h96a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM336 64h-67a16 16 0 0 0-13.14 6.87l-79.9 115-79.9-115A16 16 0 0 0 83 64H16A16 16 0 0 0 0 80v48a16 16 0 0 0 16 16h33.48l77.81 112-77.81 112H16a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h67a16 16 0 0 0 13.14-6.87l79.9-115 79.9 115A16 16 0 0 0 269 448h67a16 16 0 0 0 16-16v-48a16 16 0 0 0-16-16h-33.48l-77.81-112 77.81-112H336a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16z"
+  ),
+  superscript: svg(
+    "0 0 512 512",
+    "M496 160h-16V16a16 16 0 0 0-16-16h-48a16 16 0 0 0-14.29 8.83l-16 32A16 16 0 0 0 400 64h16v96h-16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h96a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM336 64h-67a16 16 0 0 0-13.14 6.87l-79.9 115-79.9-115A16 16 0 0 0 83 64H16A16 16 0 0 0 0 80v48a16 16 0 0 0 16 16h33.48l77.81 112-77.81 112H16a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h67a16 16 0 0 0 13.14-6.87l79.9-115 79.9 115A16 16 0 0 0 269 448h67a16 16 0 0 0 16-16v-48a16 16 0 0 0-16-16h-33.48l-77.81-112 77.81-112H336a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16z"
+  ),
+  ellipsis: svg(
+    "0 0 512 512",
+    "M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z"
+  ),
+  quote: svg(
+    "0 0 512 512",
+    "M464 32H336c-26.5 0-48 21.5-48 48v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48zm-288 0H48C21.5 32 0 53.5 0 80v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48z"
+  ),
+  paragraph: svg(
+    "0 0 448 512",
+    "M448 48v32a16 16 0 0 1-16 16h-48v368a16 16 0 0 1-16 16h-32a16 16 0 0 1-16-16V96h-32v368a16 16 0 0 1-16 16h-32a16 16 0 0 1-16-16V352h-16a160 160 0 0 1 0-320h240a16 16 0 0 1 16 16z"
+  ),
+  code: svg(
+    "0 0 640 512",
+    "M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"
+  ),
+  horizontalRule: svg(
+    "0 0 448 512",
+    "M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+  ),
+  highlighter: svg(
+    "0 0 544 512",
+    "M0 479.98L99.92 512l35.45-35.45-67.04-67.04L0 479.98zm124.61-240.01a36.592 36.592 0 0 0-10.79 38.1l13.05 42.83-50.93 50.94 96.23 96.23 50.86-50.86 42.74 13.08c13.73 4.2 28.65-.01 38.15-10.78l35.55-41.64-173.34-173.34-41.52 35.44zm403.31-160.7l-63.2-63.2c-20.49-20.49-53.38-21.52-75.12-2.35L190.55 183.68l169.77 169.78L530.27 154.4c19.18-21.74 18.15-54.63-2.35-75.13z"
+  ),
+  palette: svg(
+    "0 0 512 512",
+    "M204.3 5C104.9 24.4 24.8 104.3 5.2 203.4c-37 187 131.7 326.4 258.8 306.7 41.2-6.4 61.4-54.6 42.5-91.7-23.1-45.4 9.9-98.4 60.9-98.4h79.7c35.8 0 64.8-29.6 64.9-65.3C511.5 97.1 368.1-26.9 204.3 5zM96 320c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm32-128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128-64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"
+  ),
+  check: svg(
+    "0 0 512 512",
+    "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204 0z"
+  ),
+  // Link-popover actions (↩ apply / open in new tab / remove link).
+  linkApply: strokeSvg('<polyline points="9 10 4 15 9 20"/><path d="M20 4v7a4 4 0 0 1-4 4H4"/>'),
+  linkOpen: strokeSvg(
+    '<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/>'
+  ),
+  linkRemove: strokeSvg(
+    '<polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/>'
+  )
+};
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const clampByte = (value) => clamp(Math.round(value) || 0, 0, 255);
+function hexToRgb(input) {
+  let hex = input.trim().replace(/^#/, "").toLowerCase();
+  if (/^[0-9a-f]{3}$/.test(hex)) {
+    hex = hex.split("").map((char) => char + char).join("");
+  }
+  if (!/^[0-9a-f]{6}$/.test(hex)) return null;
+  return {
+    r: parseInt(hex.slice(0, 2), 16),
+    g: parseInt(hex.slice(2, 4), 16),
+    b: parseInt(hex.slice(4, 6), 16)
+  };
+}
+function rgbToHex({ r, g, b }) {
+  const part = (value) => clampByte(value).toString(16).padStart(2, "0");
+  return `#${part(r)}${part(g)}${part(b)}`;
+}
+function rgbToHsv({ r, g, b }) {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const delta = max - min;
+  let h = 0;
+  if (delta !== 0) {
+    if (max === rn) h = 60 * ((gn - bn) / delta % 6);
+    else if (max === gn) h = 60 * ((bn - rn) / delta + 2);
+    else h = 60 * ((rn - gn) / delta + 4);
+  }
+  if (h < 0) h += 360;
+  return { h, s: max === 0 ? 0 : delta / max, v: max };
+}
+function hsvToRgb({ h, s, v }) {
+  const c = v * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = v - c;
+  let rn = 0;
+  let gn = 0;
+  let bn = 0;
+  if (h < 60) [rn, gn, bn] = [c, x, 0];
+  else if (h < 120) [rn, gn, bn] = [x, c, 0];
+  else if (h < 180) [rn, gn, bn] = [0, c, x];
+  else if (h < 240) [rn, gn, bn] = [0, x, c];
+  else if (h < 300) [rn, gn, bn] = [x, 0, c];
+  else [rn, gn, bn] = [c, 0, x];
+  return {
+    r: clampByte((rn + m) * 255),
+    g: clampByte((gn + m) * 255),
+    b: clampByte((bn + m) * 255)
+  };
+}
+const RGB_PATTERN = /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/i;
+function parseCssColor(input) {
+  const value = input.trim().toLowerCase();
+  if (value === "transparent") return { r: 0, g: 0, b: 0, a: 0 };
+  const fromHex = hexToRgb(value);
+  if (fromHex) return { ...fromHex, a: 1 };
+  const match = RGB_PATTERN.exec(value);
+  if (!match) return null;
+  return {
+    r: clampByte(Number(match[1])),
+    g: clampByte(Number(match[2])),
+    b: clampByte(Number(match[3])),
+    a: match[4] === void 0 ? 1 : clamp(Number(match[4]), 0, 1)
+  };
+}
+const clamp01 = (value) => Math.min(1, Math.max(0, value));
+function openColorPicker(options) {
+  const { doc } = options;
+  let hsv = rgbToHsv(hexToRgb(options.initialColor) ?? { r: 0, g: 0, b: 0 });
+  const backdrop = doc.createElement("div");
+  backdrop.className = "erte-picker-backdrop";
+  backdrop.innerHTML = `
+    <div class="erte-picker" role="dialog" aria-modal="true" aria-label="Colour picker">
+      <div class="erte-picker-header">
+        <span class="erte-picker-title">${options.title ?? "Color Picker"}</span>
+        <button type="button" class="erte-picker-close" aria-label="Close">&#10005;</button>
+      </div>
+      <div class="erte-picker-body">
+        <div class="erte-picker-sv"><div class="erte-picker-sv-dot"></div></div>
+        <div class="erte-picker-hue"><div class="erte-picker-hue-thumb"></div></div>
+        <div class="erte-picker-fields">
+          <label class="erte-picker-field">R<input data-channel="r" type="number" min="0" max="255" /></label>
+          <label class="erte-picker-field">G<input data-channel="g" type="number" min="0" max="255" /></label>
+          <label class="erte-picker-field">B<input data-channel="b" type="number" min="0" max="255" /></label>
+          <label class="erte-picker-field">#<input data-hex type="text" maxlength="7" spellcheck="false" /></label>
+          <div class="erte-picker-preview" aria-hidden="true"></div>
+        </div>
+      </div>
+      <div class="erte-picker-actions">
+        <button type="button" class="erte-modal-btn erte-modal-cancel" data-cancel>Cancel</button>
+        <button type="button" class="erte-modal-btn erte-modal-insert" data-save>Save</button>
+      </div>
+    </div>`;
+  const svEl = backdrop.querySelector(".erte-picker-sv");
+  const svDot = backdrop.querySelector(".erte-picker-sv-dot");
+  const hueEl = backdrop.querySelector(".erte-picker-hue");
+  const hueThumb = backdrop.querySelector(".erte-picker-hue-thumb");
+  const rInput = backdrop.querySelector('input[data-channel="r"]');
+  const gInput = backdrop.querySelector('input[data-channel="g"]');
+  const bInput = backdrop.querySelector('input[data-channel="b"]');
+  const hexInput = backdrop.querySelector("input[data-hex]");
+  const preview = backdrop.querySelector(".erte-picker-preview");
+  const saveBtn = backdrop.querySelector("[data-save]");
+  const cancelBtn = backdrop.querySelector("[data-cancel]");
+  const closeBtn = backdrop.querySelector(".erte-picker-close");
+  if (!svEl || !svDot || !hueEl || !hueThumb || !rInput || !gInput || !bInput || !hexInput || !preview || !saveBtn || !cancelBtn || !closeBtn) {
+    return () => void 0;
+  }
+  const close = () => {
+    doc.removeEventListener("keydown", onKeyDown, true);
+    backdrop.remove();
+  };
+  const cancel = () => {
+    options.onCancel?.();
+    close();
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      cancel();
+    }
+  };
+  const render = (except) => {
+    const rgb = hsvToRgb(hsv);
+    const hex = rgbToHex(rgb);
+    svEl.style.background = `linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0)), hsl(${Math.round(hsv.h)}, 100%, 50%)`;
+    svDot.style.left = `${hsv.s * 100}%`;
+    svDot.style.top = `${(1 - hsv.v) * 100}%`;
+    hueThumb.style.top = `${hsv.h / 360 * 100}%`;
+    preview.style.background = hex;
+    if (rInput !== except) rInput.value = String(rgb.r);
+    if (gInput !== except) gInput.value = String(rgb.g);
+    if (bInput !== except) bInput.value = String(rgb.b);
+    if (hexInput !== except) hexInput.value = hex;
+  };
+  const bindDrag = (el, update) => {
+    el.addEventListener("pointerdown", (event) => {
+      event.preventDefault();
+      try {
+        el.setPointerCapture(event.pointerId);
+      } catch {
+      }
+      update(event);
+      const move = (moveEvent) => update(moveEvent);
+      const end = () => {
+        el.removeEventListener("pointermove", move);
+        el.removeEventListener("pointerup", end);
+        el.removeEventListener("pointercancel", end);
+      };
+      el.addEventListener("pointermove", move);
+      el.addEventListener("pointerup", end);
+      el.addEventListener("pointercancel", end);
+    });
+  };
+  bindDrag(svEl, (event) => {
+    const rect = svEl.getBoundingClientRect();
+    hsv = {
+      h: hsv.h,
+      s: clamp01((event.clientX - rect.left) / rect.width),
+      v: 1 - clamp01((event.clientY - rect.top) / rect.height)
+    };
+    render();
+  });
+  bindDrag(hueEl, (event) => {
+    const rect = hueEl.getBoundingClientRect();
+    hsv = { ...hsv, h: clamp01((event.clientY - rect.top) / rect.height) * 360 };
+    render();
+  });
+  [rInput, gInput, bInput].forEach((input) => {
+    input.addEventListener("input", () => {
+      hsv = rgbToHsv({
+        r: clampByte(Number(rInput.value)),
+        g: clampByte(Number(gInput.value)),
+        b: clampByte(Number(bInput.value))
+      });
+      render(input);
+    });
+  });
+  hexInput.addEventListener("input", () => {
+    const rgb = hexToRgb(hexInput.value);
+    if (!rgb) return;
+    hsv = rgbToHsv(rgb);
+    render(hexInput);
+  });
+  saveBtn.addEventListener("click", (event) => {
+    event.preventDefault();
+    options.onSave(rgbToHex(hsvToRgb(hsv)));
+    close();
+  });
+  cancelBtn.addEventListener("click", (event) => {
+    event.preventDefault();
+    cancel();
+  });
+  closeBtn.addEventListener("click", (event) => {
+    event.preventDefault();
+    cancel();
+  });
+  backdrop.addEventListener("mousedown", (event) => {
+    if (event.target === backdrop) cancel();
+  });
+  doc.addEventListener("keydown", onKeyDown, true);
+  doc.body.appendChild(backdrop);
+  render();
+  hexInput.focus();
+  hexInput.select();
+  return close;
+}
+const validateLinkUrl = (raw) => {
+  const value = raw.trim();
+  if (!value) return { valid: false, normalized: "" };
+  if (/^https?:\/\//i.test(value)) {
+    return { valid: /^https?:\/\/\S+$/i.test(value), normalized: value };
+  }
+  if (/^mailto:/i.test(value)) {
+    return { valid: /^mailto:[^\s@]+@[^\s@]+\.[^\s@]+$/i.test(value), normalized: value };
+  }
+  if (/^tel:/i.test(value)) {
+    return { valid: /^tel:\+?[\d\s().-]{3,}$/.test(value), normalized: value };
+  }
+  if (/^(\/|\.\/|\.\.\/|#|\?)\S*$/.test(value)) {
+    return { valid: true, normalized: value };
+  }
+  if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+    return { valid: true, normalized: `mailto:${value}` };
+  }
+  if (/^[a-z0-9-]+(\.[a-z0-9-]+)+(:\d+)?([/?#]\S*)?$/i.test(value)) {
+    return { valid: true, normalized: `https://${value}` };
+  }
+  return { valid: false, normalized: value };
+};
+const CLOSE_ANIMATION_MS = 160;
+function openLinkPopover(options) {
+  const { doc, anchor } = options;
+  const win = doc.defaultView;
+  const popover = doc.createElement("div");
+  popover.className = "erte-link-popover";
+  popover.setAttribute("role", "dialog");
+  popover.setAttribute("aria-label", options.hasLink ? "Edit link" : "Insert link");
+  popover.innerHTML = `
+    <div class="erte-link-row">
+      <input class="erte-link-input" type="text" placeholder="Paste a link..."
+        spellcheck="false" autocomplete="off" aria-label="Link URL" />
+      <button type="button" class="erte-link-btn" data-apply title="Apply link" aria-label="Apply link">${icons.linkApply}</button>
+      <span class="erte-link-sep" aria-hidden="true"></span>
+      <button type="button" class="erte-link-btn" data-open title="Open link in new tab" aria-label="Open link in new tab">${icons.linkOpen}</button>
+      <button type="button" class="erte-link-btn" data-remove title="Remove link" aria-label="Remove link">${icons.linkRemove}</button>
+    </div>
+    <div class="erte-link-error" role="alert" hidden>Enter a valid URL (https://, mailto:, tel: or a relative path).</div>`;
+  const input = popover.querySelector(".erte-link-input");
+  const applyBtn = popover.querySelector("[data-apply]");
+  const openBtn = popover.querySelector("[data-open]");
+  const removeBtn = popover.querySelector("[data-remove]");
+  const errorEl = popover.querySelector(".erte-link-error");
+  if (!input || !applyBtn || !openBtn || !removeBtn || !errorEl || !win) {
+    return () => void 0;
+  }
+  let parentDoc = null;
+  try {
+    parentDoc = win.frameElement?.ownerDocument ?? null;
+  } catch {
+    parentDoc = null;
+  }
+  let closed = false;
+  const close = (reason) => {
+    if (closed) return;
+    closed = true;
+    doc.removeEventListener("mousedown", onDocMouseDown, true);
+    doc.removeEventListener("keydown", onDocKeyDown, true);
+    parentDoc?.removeEventListener("mousedown", onParentMouseDown, true);
+    popover.classList.remove("is-open");
+    win.setTimeout(() => popover.remove(), CLOSE_ANIMATION_MS);
+    options.onClose?.(reason);
+  };
+  const onDocMouseDown = (event) => {
+    const target = event.target;
+    if (target && (popover.contains(target) || anchor.contains(target))) return;
+    close("outside");
+  };
+  const onParentMouseDown = () => close("outside");
+  const onDocKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      close("escape");
+    }
+  };
+  const update = () => {
+    const { valid } = validateLinkUrl(input.value);
+    const isEmpty = input.value.trim() === "";
+    applyBtn.disabled = !valid;
+    openBtn.disabled = !valid;
+    removeBtn.disabled = !options.hasLink;
+    const showError = !isEmpty && !valid;
+    errorEl.hidden = !showError;
+    popover.classList.toggle("is-invalid", showError);
+  };
+  const apply = () => {
+    const { valid, normalized } = validateLinkUrl(input.value);
+    if (!valid) return;
+    options.onApply(normalized);
+    close("apply");
+  };
+  input.addEventListener("input", update);
+  input.addEventListener("keydown", (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      apply();
+    }
+  });
+  [applyBtn, openBtn, removeBtn].forEach(
+    (btn) => btn.addEventListener("mousedown", (event) => event.preventDefault())
+  );
+  applyBtn.addEventListener("click", apply);
+  openBtn.addEventListener("click", () => {
+    const { valid, normalized } = validateLinkUrl(input.value);
+    if (valid) win.open(normalized, "_blank", "noopener,noreferrer");
+  });
+  removeBtn.addEventListener("click", () => {
+    options.onRemove();
+    close("remove");
+  });
+  popover.addEventListener("keydown", (event) => {
+    if (event.key !== "Tab") return;
+    const focusables = [input, applyBtn, openBtn, removeBtn].filter(
+      (el) => !(el instanceof HTMLButtonElement) || !el.disabled
+    );
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    if (!first || !last) return;
+    if (event.shiftKey && doc.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && doc.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  });
+  doc.body.appendChild(popover);
+  const anchorRect = anchor.getBoundingClientRect();
+  const margin = 8;
+  const maxLeft = doc.documentElement.clientWidth - popover.offsetWidth - margin;
+  popover.style.top = `${Math.round(anchorRect.bottom + margin)}px`;
+  popover.style.left = `${Math.round(Math.min(Math.max(anchorRect.left, margin), Math.max(margin, maxLeft)))}px`;
+  input.value = options.initialUrl;
+  update();
+  input.focus();
+  if (options.initialUrl) input.select();
+  doc.addEventListener("mousedown", onDocMouseDown, true);
+  doc.addEventListener("keydown", onDocKeyDown, true);
+  parentDoc?.addEventListener("mousedown", onParentMouseDown, true);
+  win.requestAnimationFrame(() => {
+    win.requestAnimationFrame(() => popover.classList.add("is-open"));
+  });
+  return () => close("programmatic");
+}
+const EDGE = 4;
+const MIN_COL_WIDTH = 40;
+const MIN_ROW_HEIGHT = 24;
+const TABLE_WIDTH_CSS = `calc(100% - ${TABLE_ACTION_SPACE}px)`;
+const getCols = (table) => Array.from(table.querySelectorAll(":scope > colgroup > col"));
+const isEditableTable = (table) => table.dataset.erteTable === "true" || table.getAttribute("role") !== "presentation";
+const ensureTableSetup = (doc, table) => {
+  const firstRow = table.rows[0];
+  if (!firstRow) return [];
+  let cols = getCols(table);
+  if (cols.length !== firstRow.cells.length) {
+    table.querySelector(":scope > colgroup")?.remove();
+    const colgroup = doc.createElement("colgroup");
+    cols = Array.from(firstRow.cells).map(() => doc.createElement("col"));
+    cols.forEach((col) => colgroup.appendChild(col));
+    table.insertBefore(colgroup, table.firstChild);
+  }
+  table.style.tableLayout = "fixed";
+  if (!table.style.width || table.style.width === "100%") {
+    table.style.width = TABLE_WIDTH_CSS;
+  }
+  return cols;
+};
+const materializeColWidths = (table, cols) => {
+  const firstRow = table.rows[0];
+  if (!firstRow) return;
+  cols.forEach((col, index) => {
+    const cell = firstRow.cells[index];
+    if (cell) col.style.width = `${Math.round(cell.getBoundingClientRect().width)}px`;
+  });
+};
+function initTableTools({ doc, onContentChange }) {
+  const editor = doc.getElementById("editor");
+  const scroll = doc.getElementById("editor-scroll");
+  if (!editor || !scroll) return () => void 0;
+  const makeAddButton = (extraClass, title) => {
+    const btn = doc.createElement("button");
+    btn.type = "button";
+    btn.className = `erte-table-add ${extraClass}`;
+    btn.title = title;
+    btn.setAttribute("aria-label", title);
+    btn.textContent = "+";
+    btn.setAttribute("contenteditable", "false");
+    scroll.appendChild(btn);
+    return btn;
+  };
+  const addColBtn = makeAddButton("erte-table-add--col", "Add column");
+  const addRowBtn = makeAddButton("erte-table-add--row", "Add row");
+  const win = doc.defaultView ?? window;
+  const HIDE_DELAY = 200;
+  const ADD_BTN_SIZE = 16;
+  let activeTable = null;
+  let hideTimer = null;
+  const cancelHide = () => {
+    if (hideTimer !== null) {
+      win.clearTimeout(hideTimer);
+      hideTimer = null;
+    }
+  };
+  const hideAddButtons = () => {
+    cancelHide();
+    addColBtn.classList.remove("is-visible");
+    addRowBtn.classList.remove("is-visible");
+    activeTable = null;
+  };
+  const scheduleHide = () => {
+    if (hideTimer !== null) return;
+    hideTimer = win.setTimeout(() => {
+      hideTimer = null;
+      addColBtn.classList.remove("is-visible");
+      addRowBtn.classList.remove("is-visible");
+      activeTable = null;
+    }, HIDE_DELAY);
+  };
+  addColBtn.addEventListener("mouseenter", cancelHide);
+  addRowBtn.addEventListener("mouseenter", cancelHide);
+  const GAP = 8;
+  const positionAddButtons = (table, showCol, showRow) => {
+    const tRect = table.getBoundingClientRect();
+    const sRect = scroll.getBoundingClientRect();
+    const offsetLeft = tRect.left - sRect.left + scroll.scrollLeft;
+    const offsetTop = tRect.top - sRect.top + scroll.scrollTop;
+    if (showCol) {
+      const centred = offsetLeft + tRect.width + (TABLE_ACTION_SPACE - ADD_BTN_SIZE) / 2;
+      const maxLeft = scroll.scrollLeft + scroll.clientWidth - ADD_BTN_SIZE - 6;
+      addColBtn.style.left = `${Math.round(Math.min(centred, maxLeft))}px`;
+      addColBtn.style.top = `${offsetTop}px`;
+      addColBtn.style.width = `${ADD_BTN_SIZE}px`;
+      addColBtn.style.height = `${tRect.height}px`;
+    }
+    addColBtn.classList.toggle("is-visible", showCol);
+    if (showRow) {
+      addRowBtn.style.left = `${offsetLeft}px`;
+      addRowBtn.style.top = `${offsetTop + tRect.height + GAP}px`;
+      addRowBtn.style.width = `${tRect.width}px`;
+      addRowBtn.style.height = `${ADD_BTN_SIZE}px`;
+    }
+    addRowBtn.classList.toggle("is-visible", showRow);
+  };
+  const addColumn = () => {
+    const table = activeTable;
+    if (!table) return;
+    const cols = ensureTableSetup(doc, table);
+    materializeColWidths(table, cols);
+    const fitWidth = table.getBoundingClientRect().width;
+    const widths = cols.map((col) => parseFloat(col.style.width) || 0);
+    const currentTotal = widths.reduce((a, b) => a + b, 0) || fitWidth;
+    const newColCount = cols.length + 1;
+    const idealNew = fitWidth / newColCount;
+    const colgroup = table.querySelector(":scope > colgroup");
+    const newCol = doc.createElement("col");
+    colgroup?.appendChild(newCol);
+    if (idealNew >= MIN_COL_WIDTH) {
+      const scale = (fitWidth - idealNew) / currentTotal;
+      cols.forEach((col, i) => {
+        col.style.width = `${Math.round((widths[i] ?? 0) * scale)}px`;
+      });
+      newCol.style.width = `${Math.round(idealNew)}px`;
+      table.style.width = TABLE_WIDTH_CSS;
+    } else {
+      cols.forEach((col) => {
+        col.style.width = `${MIN_COL_WIDTH}px`;
+      });
+      newCol.style.width = `${MIN_COL_WIDTH}px`;
+      table.style.width = `${newColCount * MIN_COL_WIDTH}px`;
+    }
+    Array.from(table.rows).forEach((row) => {
+      const last = row.cells[row.cells.length - 1];
+      if (!last) return;
+      const cell = last.cloneNode(false);
+      cell.innerHTML = "&nbsp;";
+      row.appendChild(cell);
+    });
+    positionAddButtons(table, true, addRowBtn.classList.contains("is-visible"));
+    onContentChange();
+  };
+  const addRow = () => {
+    const table = activeTable;
+    if (!table) return;
+    const lastRow = table.rows[table.rows.length - 1];
+    if (!lastRow) return;
+    const newRow = lastRow.cloneNode(false);
+    newRow.style.height = "";
+    Array.from(lastRow.cells).forEach((cell) => {
+      const clone = cell.cloneNode(false);
+      clone.innerHTML = "&nbsp;";
+      newRow.appendChild(clone);
+    });
+    lastRow.parentElement?.appendChild(newRow);
+    positionAddButtons(table, addColBtn.classList.contains("is-visible"), true);
+    onContentChange();
+  };
+  addColBtn.addEventListener("click", addColumn);
+  addRowBtn.addEventListener("click", addRow);
+  let colZone = null;
+  let rowZone = null;
+  let dragging = false;
+  const clearHoverState = () => {
+    colZone = null;
+    rowZone = null;
+    if (editor.style.cursor) editor.style.cursor = "";
+  };
+  const onMouseMove = (event) => {
+    if (dragging) return;
+    const target = event.target;
+    if (target === addColBtn || target === addRowBtn) {
+      cancelHide();
+      return;
+    }
+    const cell = target?.closest?.("td, th");
+    const table = cell?.closest("table");
+    if (!cell || !table || !editor.contains(table) || !isEditableTable(table)) {
+      clearHoverState();
+      scheduleHide();
+      return;
+    }
+    cancelHide();
+    const rect = cell.getBoundingClientRect();
+    const row = cell.parentElement;
+    if (event.clientX >= rect.right - EDGE && cell.cellIndex < row.cells.length - 1) {
+      colZone = { table, leftIndex: cell.cellIndex };
+    } else if (event.clientX <= rect.left + EDGE && cell.cellIndex > 0) {
+      colZone = { table, leftIndex: cell.cellIndex - 1 };
+    } else {
+      colZone = null;
+    }
+    if (event.clientY >= rect.bottom - EDGE) {
+      rowZone = { row };
+    } else if (event.clientY <= rect.top + EDGE && row.rowIndex > 0) {
+      const prev = table.rows[row.rowIndex - 1];
+      rowZone = prev ? { row: prev } : null;
+    } else {
+      rowZone = null;
+    }
+    editor.style.cursor = colZone ? "ew-resize" : rowZone ? "ns-resize" : "";
+    activeTable = table;
+    const isLastCol = cell.cellIndex === row.cells.length - 1;
+    const isLastRow = row.rowIndex === table.rows.length - 1;
+    if (isLastCol || isLastRow) positionAddButtons(table, isLastCol, isLastRow);
+    else scheduleHide();
+  };
+  const onPointerDown = (event) => {
+    if (event.button !== 0) return;
+    const downTarget = event.target;
+    if (downTarget && (addColBtn.contains(downTarget) || addRowBtn.contains(downTarget))) return;
+    if (!colZone && !rowZone) return;
+    event.preventDefault();
+    dragging = true;
+    cancelHide();
+    hideAddButtons();
+    const startX = event.clientX;
+    const startY = event.clientY;
+    let moveHandler = () => void 0;
+    if (colZone) {
+      const { table, leftIndex } = colZone;
+      const cols = ensureTableSetup(doc, table);
+      materializeColWidths(table, cols);
+      const leftCol = cols[leftIndex];
+      const rightCol = cols[leftIndex + 1];
+      const leftStart = leftCol ? parseFloat(leftCol.style.width) || 0 : 0;
+      const rightStart = rightCol ? parseFloat(rightCol.style.width) || 0 : 0;
+      const total = leftStart + rightStart;
+      editor.style.cursor = "ew-resize";
+      moveHandler = (e) => {
+        if (!leftCol || !rightCol) return;
+        const dx = e.clientX - startX;
+        const left = Math.min(Math.max(leftStart + dx, MIN_COL_WIDTH), total - MIN_COL_WIDTH);
+        leftCol.style.width = `${Math.round(left)}px`;
+        rightCol.style.width = `${Math.round(total - left)}px`;
+      };
+    } else if (rowZone) {
+      const { row } = rowZone;
+      const startHeight = row.getBoundingClientRect().height;
+      editor.style.cursor = "ns-resize";
+      moveHandler = (e) => {
+        const dy = e.clientY - startY;
+        row.style.height = `${Math.round(Math.max(MIN_ROW_HEIGHT, startHeight + dy))}px`;
+      };
+    }
+    const endHandler = () => {
+      doc.removeEventListener("pointermove", moveHandler);
+      doc.removeEventListener("pointerup", endHandler);
+      doc.removeEventListener("pointercancel", endHandler);
+      dragging = false;
+      clearHoverState();
+      onContentChange();
+    };
+    doc.addEventListener("pointermove", moveHandler);
+    doc.addEventListener("pointerup", endHandler);
+    doc.addEventListener("pointercancel", endHandler);
+  };
+  const onScroll = () => hideAddButtons();
+  const onMouseLeave = () => {
+    if (dragging) return;
+    clearHoverState();
+    scheduleHide();
+  };
+  scroll.addEventListener("mousemove", onMouseMove);
+  scroll.addEventListener("mouseleave", onMouseLeave);
+  scroll.addEventListener("pointerdown", onPointerDown, true);
+  scroll.addEventListener("scroll", onScroll, { passive: true });
+  return () => {
+    cancelHide();
+    scroll.removeEventListener("mousemove", onMouseMove);
+    scroll.removeEventListener("mouseleave", onMouseLeave);
+    scroll.removeEventListener("pointerdown", onPointerDown, true);
+    scroll.removeEventListener("scroll", onScroll);
+    addColBtn.remove();
+    addRowBtn.remove();
+  };
+}
+const applySpellcheckIgnore = (content, words) => words.reduce(
+  (html, word) => html.replace(new RegExp(escapeRegExp(word), "g"), `<span spellcheck="false">${word}</span>`),
+  content
+);
+const TOGGLE_COMMANDS = /* @__PURE__ */ new Set([
+  "bold",
+  "italic",
+  "underline",
+  "strikeThrough",
+  "subscript",
+  "superscript",
+  "justifyLeft",
+  "justifyCenter",
+  "justifyRight",
+  "justifyFull",
+  "insertUnorderedList",
+  "insertOrderedList"
+]);
+const BLOCK_OPTIONS = [
+  { label: "Paragraph", tag: "p", optionClass: "" },
+  { label: "Heading 1", tag: "h1", optionClass: "erte-option--h1" },
+  { label: "Heading 2", tag: "h2", optionClass: "erte-option--h2" },
+  { label: "Heading 3", tag: "h3", optionClass: "erte-option--h3" },
+  { label: "Heading 4", tag: "h4", optionClass: "erte-option--h4" },
+  { label: "Heading 5", tag: "h5", optionClass: "erte-option--h5" },
+  { label: "Heading 6", tag: "h6", optionClass: "erte-option--h6" },
+  { label: "Preformatted", tag: "pre", optionClass: "erte-option--pre" }
+];
+const ALIGN_OPTIONS = [
+  { key: "left", label: "Left", cmd: "justifyLeft", iconKey: "alignLeft" },
+  { key: "center", label: "Center", cmd: "justifyCenter", iconKey: "alignCenter" },
+  { key: "right", label: "Right", cmd: "justifyRight", iconKey: "alignRight" },
+  { key: "justify", label: "Justify", cmd: "justifyFull", iconKey: "alignJustify" }
+];
+const ORDERED_LIST_STYLES = [
+  { key: "decimal", label: "Decimal", markers: ["1.", "2.", "3."], css: "decimal" },
+  { key: "lower-alpha", label: "Lower alpha", markers: ["a.", "b.", "c."], css: "lower-alpha" },
+  { key: "upper-alpha", label: "Upper alpha", markers: ["A.", "B.", "C."], css: "upper-alpha" },
+  { key: "lower-roman", label: "Lower roman", markers: ["i.", "ii.", "iii."], css: "lower-roman" },
+  { key: "upper-roman", label: "Upper roman", markers: ["I.", "II.", "III."], css: "upper-roman" },
+  {
+    key: "leading-zero",
+    label: "Leading zero",
+    markers: ["01.", "02.", "03."],
+    css: "decimal-leading-zero"
+  },
+  { key: "legal", label: "Legal (nested 1.1)", markers: ["1.1", "1.2", "1.3"], css: null }
+];
+const BULLET_LIST_STYLES = [
+  { key: "disc", label: "Solid circle", markers: ["●", "●", "●"], css: "disc" },
+  { key: "circle", label: "Hollow circle", markers: ["○", "○", "○"], css: "circle" },
+  { key: "square", label: "Square", markers: ["▪", "▪", "▪"], css: "square" },
+  { key: "diamond", label: "Diamond", markers: ["◆", "◆", "◆"], css: '"◆  "' },
+  { key: "dash", label: "Dash", markers: ["–", "–", "–"], css: '"–  "' },
+  { key: "arrow", label: "Arrow", markers: ["➤", "➤", "➤"], css: '"➤  "' },
+  { key: "check", label: "Checkmark", markers: ["✓", "✓", "✓"], css: '"✓  "' }
+];
+const QUOTE_INLINE_STYLE = {
+  margin: "12px 0",
+  padding: "2px 0 2px 14px",
+  borderLeft: "3px solid #d5dbe2",
+  color: "#5f6368"
+};
+const CODE_BLOCK_INLINE_STYLE = {
+  background: "#f6f8fa",
+  border: "1px solid #e8ebee",
+  borderRadius: "8px",
+  padding: "12px 14px",
+  margin: "12px 0",
+  fontFamily: "ui-monospace, 'Cascadia Code', Consolas, monospace",
+  fontSize: "13px",
+  lineHeight: "1.55",
+  whiteSpace: "pre-wrap",
+  overflowX: "auto"
+};
+const HR_INLINE_STYLE = {
+  border: "none",
+  borderTop: "1px solid #d5dbe2",
+  margin: "18px 0"
+};
+const FONT_SIZES = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 32, 36, 48, 64, 72];
+const DEFAULT_FONT_SIZE = 16;
+const MIN_FONT_SIZE = 1;
+const MAX_FONT_SIZE = 200;
+const DEFAULT_TEXT_COLOR = "#1a1a1a";
+const COLOR_PALETTE = [
+  { hex: "#bfedd2", name: "Light green" },
+  { hex: "#fbeeb8", name: "Light yellow" },
+  { hex: "#f8cac6", name: "Light red" },
+  { hex: "#eccafa", name: "Light purple" },
+  { hex: "#c2e0f4", name: "Light blue" },
+  { hex: "#b2ebf2", name: "Light cyan" },
+  { hex: "#2dc26b", name: "Green" },
+  { hex: "#f1c40f", name: "Yellow" },
+  { hex: "#e03e2d", name: "Red" },
+  { hex: "#b96ad9", name: "Purple" },
+  { hex: "#3598db", name: "Blue" },
+  { hex: "#00bcd4", name: "Cyan" },
+  { hex: "#169179", name: "Dark turquoise" },
+  { hex: "#e67e23", name: "Orange" },
+  { hex: "#ba372a", name: "Dark red" },
+  { hex: "#843fa1", name: "Dark purple" },
+  { hex: "#236fa1", name: "Dark blue" },
+  { hex: "#e91e63", name: "Pink" },
+  { hex: "#ecf0f1", name: "Light gray" },
+  { hex: "#ced4d9", name: "Medium gray" },
+  { hex: "#95a5a6", name: "Gray" },
+  { hex: "#7e8c8d", name: "Dark gray" },
+  { hex: "#34495e", name: "Navy blue" },
+  { hex: "#795548", name: "Brown" },
+  { hex: "#000000", name: "Black" },
+  { hex: "#434343", name: "Dark charcoal" },
+  { hex: "#666666", name: "Dim gray" },
+  { hex: "#b7b7b7", name: "Silver" },
+  { hex: "#f3f3f3", name: "Off white" },
+  { hex: "#ffffff", name: "White" }
+];
+const MIN_EDITOR_WIDTH = 600;
+const MIN_EDITOR_HEIGHT = 350;
+const MAX_EDITOR_HEIGHT = 1200;
+const RESIZE_ZONES = [
+  {
+    key: "right",
+    label: "Resize editor width",
+    cursor: "ew-resize",
+    edges: { h: "right", v: null },
+    placement: { top: 12, bottom: 12, right: 0, width: 6 }
+  },
+  {
+    key: "bottom-left",
+    label: "Resize editor",
+    cursor: "nesw-resize",
+    edges: { h: "left", v: "bottom" },
+    placement: { bottom: 0, left: 0, width: 12, height: 12 }
+  },
+  {
+    key: "bottom-right",
+    label: "Resize editor",
+    cursor: "nwse-resize",
+    edges: { h: "right", v: "bottom" },
+    placement: { bottom: 0, right: 0, width: 12, height: 12 }
+  }
+];
+const clampNumber = (value, min, max) => Math.min(Math.max(value, min), Math.max(min, max));
+function FlowTextEditor({
+  mailContent,
+  setMailContent,
+  resetMailContent = false,
+  showAiTools = false,
+  modalHeight = "",
+  spellcheckIgnoreWords = [],
+  onAiTextAction
+}) {
+  const iframeRef = react.useRef(null);
+  const [doc, setDoc] = react.useState(null);
+  const [savedRange, setSavedRange] = react.useState(null);
+  const linkPopoverCloseRef = react.useRef(null);
+  const [isErrorToastHidden, setIsErrorToastHidden] = react.useState(true);
+  const [toastErrorMessage, setToastErrorMessage] = react.useState(null);
+  const [loading, setLoading] = react.useState(false);
+  const isInternalEdit = react.useRef(false);
+  const toggleButtonsRef = react.useRef([]);
+  const blockToggleButtonsRef = react.useRef([]);
+  const blockTriggerRef = react.useRef(null);
+  const blockMenuRef = react.useRef(null);
+  const sizeLabelRef = react.useRef(null);
+  const sizeMenuRef = react.useRef(null);
+  const alignIconRef = react.useRef(null);
+  const alignMenuRef = react.useRef(null);
+  const olMenuRef = react.useRef(null);
+  const ulMenuRef = react.useRef(null);
+  const dropdownRangeRef = react.useRef(null);
+  const currentFontSizeRef = react.useRef(DEFAULT_FONT_SIZE);
+  const textColorBarRef = react.useRef(null);
+  const bgColorBarRef = react.useRef(null);
+  const textColorMenuRef = react.useRef(null);
+  const bgColorMenuRef = react.useRef(null);
+  const currentTextColorRef = react.useRef(DEFAULT_TEXT_COLOR);
+  const currentBgColorRef = react.useRef(null);
+  const lastCustomColorRef = react.useRef({
+    text: null,
+    bg: null
+  });
+  const containerRef = react.useRef(null);
+  const resizeCleanupRef = react.useRef(null);
+  const [size, setSize] = react.useState({ width: null, height: null });
+  const callAiTextAction = async (action, text, wordCount, toneType) => {
+    if (!onAiTextAction) {
+      console.warn(
+        "[FlowTextEditor] `onAiTextAction` prop was not provided; AI tools are disabled."
+      );
+      return null;
+    }
+    setLoading(true);
+    try {
+      const result = await onAiTextAction({ action, text, wordCount, toneType });
+      return result ?? null;
+    } catch (error) {
+      console.error("[FlowTextEditor] AI request failed:", error);
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleErrorTextSelection = () => {
+    setToastErrorMessage("Please select some text before using AI tools.");
+    setIsErrorToastHidden(false);
+    setTimeout(() => {
+      setIsErrorToastHidden(true);
+      setToastErrorMessage(null);
+    }, 3e3);
+  };
+  const saveSelection = () => {
+    if (!doc) return;
+    const sel = doc.getSelection();
+    if (sel && sel.rangeCount > 0) {
+      setSavedRange(sel.getRangeAt(0));
+    }
+  };
+  const restoreSelection = () => {
+    if (!doc || !savedRange) return;
+    const sel = doc.getSelection();
+    if (!sel) return;
+    sel.removeAllRanges();
+    sel.addRange(savedRange);
+  };
+  const updateToolbarActiveState = () => {
+    if (!doc) return;
+    for (const { el, cmd } of toggleButtonsRef.current) {
+      let active = false;
+      try {
+        active = doc.queryCommandState(cmd);
+      } catch {
+        active = false;
+      }
+      el.classList.toggle("is-active", active);
+      el.setAttribute("aria-pressed", active ? "true" : "false");
+    }
+    for (const { el, detect } of blockToggleButtonsRef.current) {
+      const active = detect();
+      el.classList.toggle("is-active", active);
+      el.setAttribute("aria-pressed", active ? "true" : "false");
+    }
+  };
+  const closestFromNode = (start, match) => {
+    if (!doc) return null;
+    const editor = doc.getElementById("editor");
+    if (!editor || !start || !editor.contains(start)) return null;
+    let node = start;
+    if (node.nodeType === Node.TEXT_NODE) node = node.parentNode;
+    while (node && node !== editor) {
+      if (node.nodeType === Node.ELEMENT_NODE && match(node)) {
+        return node;
+      }
+      node = node.parentNode;
+    }
+    return null;
+  };
+  const closestFromSelection = (match) => {
+    const sel = doc?.getSelection();
+    return closestFromNode(sel?.anchorNode ?? null, match);
+  };
+  const listStyleKeyOf = (list, kind) => {
+    const dataStyle = list.dataset.erteList;
+    if (dataStyle) return dataStyle;
+    const raw = list.style.listStyleType.trim();
+    if (!raw) return kind === "ol" ? "decimal" : "disc";
+    const styles = kind === "ol" ? ORDERED_LIST_STYLES : BULLET_LIST_STYLES;
+    const normalize = (value) => value.replace(/["']/g, "").trim();
+    const match = styles.find(
+      (option) => option.css !== null && normalize(option.css) === normalize(raw)
+    );
+    return match?.key ?? "custom";
+  };
+  const markListMenu = (kind) => {
+    const menu = kind === "ol" ? olMenuRef.current : ulMenuRef.current;
+    if (!menu) return;
+    const list = closestFromSelection((el) => el.tagName === kind.toUpperCase());
+    const activeKey = list ? listStyleKeyOf(list, kind) : null;
+    menu.querySelectorAll("[data-list-style]").forEach((el) => {
+      el.classList.toggle("is-selected", el.dataset.listStyle === activeKey);
+    });
+  };
+  const syncToolbarState = () => {
+    if (!doc) return;
+    updateToolbarActiveState();
+    let block = "";
+    try {
+      block = String(doc.queryCommandValue("formatBlock") || "").toLowerCase();
+    } catch {
+      block = "";
+    }
+    let activeTag = BLOCK_OPTIONS.find((option) => option.tag === block)?.tag ?? "p";
+    const special = closestFromSelection(
+      (el) => el.tagName === "PRE" && el.hasAttribute("data-erte-code") || el.tagName === "BLOCKQUOTE" && el.hasAttribute("data-erte-quote")
+    );
+    if (special) activeTag = special.tagName === "PRE" ? "codeblock" : "blockquote";
+    const matched = BLOCK_OPTIONS.find((option) => option.tag === activeTag);
+    if (blockTriggerRef.current) {
+      blockTriggerRef.current.title = matched ? `Text styles: ${matched.label}` : "Text styles";
+    }
+    blockMenuRef.current?.querySelectorAll("[data-tag]").forEach((el) => {
+      el.classList.toggle("is-selected", el.dataset.tag === activeTag);
+    });
+    let alignKey = "left";
+    for (const option of ALIGN_OPTIONS) {
+      try {
+        if (doc.queryCommandState(option.cmd)) {
+          alignKey = option.key;
+          break;
+        }
+      } catch {
+      }
+    }
+    const alignActive = ALIGN_OPTIONS.find((option) => option.key === alignKey);
+    if (alignIconRef.current && alignActive) {
+      alignIconRef.current.innerHTML = icons[alignActive.iconKey];
+    }
+    alignMenuRef.current?.querySelectorAll("[data-align]").forEach((el) => {
+      el.classList.toggle("is-selected", el.dataset.align === alignKey);
+    });
+    markListMenu("ol");
+    markListMenu("ul");
+    const view = doc.defaultView;
+    const selection = doc.getSelection();
+    let node = selection?.anchorNode ?? null;
+    if (node && node.nodeType === Node.TEXT_NODE) node = node.parentNode;
+    if (view && node && node.nodeType === Node.ELEMENT_NODE) {
+      const size2 = Math.round(parseFloat(view.getComputedStyle(node).fontSize));
+      if (!Number.isNaN(size2)) {
+        currentFontSizeRef.current = size2;
+        if (sizeLabelRef.current) sizeLabelRef.current.textContent = `${size2}px`;
+        sizeMenuRef.current?.querySelectorAll("[data-size]").forEach((el) => {
+          el.classList.toggle("is-selected", Number(el.dataset.size) === size2);
+        });
+      }
+    }
+    const editorRoot = doc.getElementById("editor");
+    if (view && node && node.nodeType === Node.ELEMENT_NODE && editorRoot?.contains(node)) {
+      const element = node;
+      const parsedColor = parseCssColor(view.getComputedStyle(element).color);
+      currentTextColorRef.current = parsedColor ? rgbToHex(parsedColor) : DEFAULT_TEXT_COLOR;
+      let bgHex = null;
+      let cursor = element;
+      while (cursor && cursor !== editorRoot) {
+        const parsedBg = parseCssColor(view.getComputedStyle(cursor).backgroundColor);
+        if (parsedBg && parsedBg.a > 0) {
+          bgHex = rgbToHex(parsedBg);
+          break;
+        }
+        cursor = cursor.parentElement;
+      }
+      currentBgColorRef.current = bgHex;
+      updateColorIndicators();
+      markSwatches(textColorMenuRef.current, currentTextColorRef.current);
+      markSwatches(bgColorMenuRef.current, currentBgColorRef.current);
+    }
+  };
+  const exec = (cmd, val = null) => {
+    if (!doc) return;
+    restoreSelection();
+    doc.execCommand(cmd, false, val ?? void 0);
+    syncToolbarState();
+  };
+  const insertTable = (rows, cols) => {
+    if (!doc) return;
+    restoreSelection();
+    doc.execCommand("insertHTML", false, getTableHtml(rows, cols));
+  };
+  const findLinkInRange = (range) => {
+    if (!doc) return null;
+    const editor = doc.getElementById("editor");
+    if (!editor) return null;
+    const closestAnchor = (start) => {
+      let node = start;
+      while (node && node !== editor) {
+        if (node.nodeType === Node.ELEMENT_NODE && node.tagName === "A") {
+          return node;
+        }
+        node = node.parentNode;
+      }
+      return null;
+    };
+    return closestAnchor(range.commonAncestorContainer) ?? closestAnchor(range.startContainer) ?? closestAnchor(range.endContainer);
+  };
+  const restoreLinkRange = (range) => {
+    if (!doc) return null;
+    const selection = doc.getSelection();
+    const editor = doc.getElementById("editor");
+    if (!selection || !editor) return null;
+    editor.focus();
+    let target = range;
+    if (!target) {
+      target = doc.createRange();
+      target.selectNodeContents(editor);
+      target.collapse(false);
+    }
+    selection.removeAllRanges();
+    selection.addRange(target);
+    return selection;
+  };
+  const applyLink = (url, range, existingLink) => {
+    if (!doc) return;
+    const selection = restoreLinkRange(range);
+    if (!selection) return;
+    if (existingLink && existingLink.isConnected) {
+      const linkRange = doc.createRange();
+      linkRange.selectNodeContents(existingLink);
+      selection.removeAllRanges();
+      selection.addRange(linkRange);
+      doc.execCommand("unlink");
+      doc.execCommand("createLink", false, url);
+    } else if (!selection.isCollapsed) {
+      doc.execCommand("createLink", false, url);
+    } else {
+      const escaped = url.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+      doc.execCommand("insertHTML", false, `<a href="${escaped}">${escaped}</a>`);
+    }
+    saveSelection();
+    propagateContent();
+    syncToolbarState();
+  };
+  const removeLink = (range, existingLink) => {
+    if (!doc) return;
+    const selection = restoreLinkRange(range);
+    if (!selection) return;
+    if (existingLink && existingLink.isConnected) {
+      const linkRange = doc.createRange();
+      linkRange.selectNodeContents(existingLink);
+      selection.removeAllRanges();
+      selection.addRange(linkRange);
+    }
+    doc.execCommand("unlink");
+    saveSelection();
+    propagateContent();
+    syncToolbarState();
+  };
+  const toggleLinkPopover = (button) => {
+    if (!doc) return;
+    if (linkPopoverCloseRef.current) {
+      linkPopoverCloseRef.current();
+      return;
+    }
+    saveSelection();
+    const selection = doc.getSelection();
+    const range = selection && selection.rangeCount > 0 ? selection.getRangeAt(0).cloneRange() : null;
+    const existingLink = range ? findLinkInRange(range) : null;
+    linkPopoverCloseRef.current = openLinkPopover({
+      doc,
+      anchor: button,
+      initialUrl: existingLink?.getAttribute("href") ?? "",
+      hasLink: existingLink !== null,
+      onApply: (url) => applyLink(url, range, existingLink),
+      onRemove: () => removeLink(range, existingLink),
+      onClose: (reason) => {
+        linkPopoverCloseRef.current = null;
+        if (reason === "escape" || reason === "programmatic") {
+          restoreLinkRange(range);
+          syncToolbarState();
+        }
+      }
+    });
+  };
+  const propagateContent = () => {
+    if (!doc) return;
+    const editor = doc.getElementById("editor");
+    if (!editor) return;
+    isInternalEdit.current = true;
+    setMailContent(editor.innerHTML);
+    setTimeout(() => {
+      isInternalEdit.current = false;
+    }, 100);
+  };
+  const applyInlineStyles = (el, styles) => {
+    Object.assign(el.style, styles);
+  };
+  const decorateSelectionBlocks = (tagName) => {
+    if (!doc) return;
+    const selection = doc.getSelection();
+    if (!selection) return;
+    const attr = tagName === "PRE" ? "data-erte-code" : "data-erte-quote";
+    const styles = tagName === "PRE" ? CODE_BLOCK_INLINE_STYLE : QUOTE_INLINE_STYLE;
+    for (const endpoint of [selection.anchorNode, selection.focusNode]) {
+      const blockEl = closestFromNode(
+        endpoint,
+        (el) => el.tagName === tagName && !el.hasAttribute(attr)
+      );
+      if (blockEl) {
+        blockEl.setAttribute(attr, "true");
+        applyInlineStyles(blockEl, styles);
+      }
+    }
+  };
+  const BLOCK_OVERRIDE_PROPS = ["font-size", "font-weight", "line-height", "margin"];
+  const stripBlockOverrides = (el) => {
+    BLOCK_OVERRIDE_PROPS.forEach((prop) => el.style.removeProperty(prop));
+    ["margin-top", "margin-bottom"].forEach((prop) => el.style.removeProperty(prop));
+    if (!el.getAttribute("style")) el.removeAttribute("style");
+  };
+  const stripBlocksInSelection = (tag) => {
+    if (!doc) return;
+    const selection = doc.getSelection();
+    if (!selection || selection.rangeCount === 0) return;
+    const range = selection.getRangeAt(0);
+    const upper = tag.toUpperCase();
+    const blocks = /* @__PURE__ */ new Set();
+    for (const endpoint of [range.startContainer, range.endContainer]) {
+      const el = closestFromNode(endpoint, (node) => node.tagName === upper);
+      if (el) blocks.add(el);
+    }
+    let root = range.commonAncestorContainer;
+    if (root.nodeType === Node.TEXT_NODE) root = root.parentElement;
+    if (root && root.nodeType === Node.ELEMENT_NODE) {
+      root.querySelectorAll(tag).forEach((el) => {
+        if (range.intersectsNode(el)) blocks.add(el);
+      });
+    }
+    blocks.forEach(stripBlockOverrides);
+  };
+  const applyBlockFormat = (tag) => {
+    if (!doc) return;
+    const savedDropdownRange = dropdownRangeRef.current;
+    if (savedDropdownRange) {
+      const selection = doc.getSelection();
+      if (selection) {
+        selection.removeAllRanges();
+        selection.addRange(savedDropdownRange);
+      }
+    } else {
+      restoreSelection();
+    }
+    const quote = closestFromSelection(
+      (el) => el.tagName === "BLOCKQUOTE" && el.hasAttribute("data-erte-quote")
+    );
+    const code = closestFromSelection(
+      (el) => el.tagName === "PRE" && el.hasAttribute("data-erte-code")
+    );
+    if (tag === "blockquote") {
+      if (quote) {
+        doc.execCommand("outdent");
+      } else {
+        doc.execCommand("formatBlock", false, "<blockquote>");
+        decorateSelectionBlocks("BLOCKQUOTE");
+      }
+    } else if (tag === "codeblock") {
+      if (code) {
+        code.removeAttribute("data-erte-code");
+        code.removeAttribute("style");
+        doc.execCommand("formatBlock", false, "<p>");
+        stripBlocksInSelection("p");
+      } else {
+        if (quote) doc.execCommand("outdent");
+        doc.execCommand("formatBlock", false, "<pre>");
+        decorateSelectionBlocks("PRE");
+      }
+    } else if (tag === "pre" && code) {
+      code.removeAttribute("data-erte-code");
+      code.removeAttribute("style");
+    } else {
+      if (quote) doc.execCommand("outdent");
+      doc.execCommand("formatBlock", false, `<${tag}>`);
+      stripBlocksInSelection(tag);
+    }
+    propagateContent();
+    syncToolbarState();
+  };
+  const applyListStyle = (kind, styleKey, cssValue) => {
+    if (!doc) return;
+    const saved = dropdownRangeRef.current;
+    if (saved) {
+      const selection = doc.getSelection();
+      if (selection) {
+        selection.removeAllRanges();
+        selection.addRange(saved);
+      }
+    }
+    const tagName = kind === "ol" ? "OL" : "UL";
+    const findList = () => closestFromSelection((el) => el.tagName === tagName);
+    let list = findList();
+    if (!list) {
+      doc.execCommand(kind === "ol" ? "insertOrderedList" : "insertUnorderedList");
+      list = findList();
+    }
+    if (!list) return;
+    if (cssValue === null) {
+      list.dataset.erteList = styleKey;
+      list.style.listStyleType = styleKey === "legal" ? "none" : "";
+    } else {
+      if (styleKey === "custom") list.dataset.erteList = "custom";
+      else delete list.dataset.erteList;
+      list.style.listStyleType = cssValue;
+    }
+    propagateContent();
+    syncToolbarState();
+  };
+  const resetIndentation = () => {
+    if (!doc) return;
+    restoreSelection();
+    const editor = doc.getElementById("editor");
+    if (!editor) return;
+    const hasIndentation = () => {
+      let listDepth = 0;
+      let found = false;
+      closestFromSelection((el) => {
+        if (el.tagName === "BLOCKQUOTE" && !el.hasAttribute("data-erte-quote")) found = true;
+        if (el.tagName === "OL" || el.tagName === "UL") listDepth += 1;
+        if (parseFloat(el.style.marginLeft || "0") > 0) found = true;
+        return false;
+      });
+      return found || listDepth > 1;
+    };
+    for (let i = 0; i < 10 && hasIndentation(); i++) {
+      doc.execCommand("outdent");
+    }
+    propagateContent();
+    syncToolbarState();
+  };
+  const insertHorizontalRule = () => {
+    if (!doc) return;
+    restoreSelection();
+    doc.execCommand("insertHorizontalRule");
+    doc.getElementById("editor")?.querySelectorAll("hr:not([data-erte-hr])").forEach((hr) => {
+      hr.setAttribute("data-erte-hr", "true");
+      applyInlineStyles(hr, HR_INLINE_STYLE);
+    });
+    propagateContent();
+    syncToolbarState();
+  };
+  const insertTypingSpan = (decorate) => {
+    if (!doc) return;
+    const selection = doc.getSelection();
+    if (!selection || selection.rangeCount === 0) return;
+    const range = selection.getRangeAt(0);
+    const span = doc.createElement("span");
+    decorate(span);
+    span.appendChild(doc.createTextNode(String.fromCharCode(8203)));
+    range.insertNode(span);
+    const caret = doc.createRange();
+    if (span.firstChild) caret.setStart(span.firstChild, 1);
+    caret.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(caret);
+  };
+  const applyFontSize = (px) => {
+    if (!doc) return;
+    const editor = doc.getElementById("editor");
+    const selection = doc.getSelection();
+    if (!editor || !selection || selection.rangeCount === 0) return;
+    const size2 = Math.min(MAX_FONT_SIZE, Math.max(MIN_FONT_SIZE, Math.round(px)));
+    if (selection.isCollapsed) {
+      insertTypingSpan((span) => {
+        span.style.fontSize = `${size2}px`;
+      });
+    } else {
+      doc.execCommand("styleWithCSS", false, "false");
+      doc.execCommand("fontSize", false, "7");
+      const restyled = [];
+      editor.querySelectorAll('font[size="7"]').forEach((font) => {
+        const parent = font.parentElement;
+        if (parent && parent.tagName === "SPAN" && parent.childNodes.length === 1 && parent.style.length === 1 && parent.style.fontSize) {
+          parent.style.fontSize = `${size2}px`;
+          while (font.firstChild) parent.appendChild(font.firstChild);
+          font.remove();
+          restyled.push(parent);
+        } else {
+          const span = doc.createElement("span");
+          span.style.fontSize = `${size2}px`;
+          while (font.firstChild) span.appendChild(font.firstChild);
+          font.replaceWith(span);
+          restyled.push(span);
+        }
+      });
+      const first = restyled[0];
+      const last = restyled[restyled.length - 1];
+      if (first && last) {
+        const range = doc.createRange();
+        range.setStart(first, 0);
+        range.setEnd(last, last.childNodes.length);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+    }
+    currentFontSizeRef.current = size2;
+    propagateContent();
+    syncToolbarState();
+  };
+  const stepFontSize = (delta) => {
+    applyFontSize(currentFontSizeRef.current + delta);
+  };
+  const updateColorIndicators = () => {
+    const textBar = textColorBarRef.current;
+    if (textBar) textBar.style.background = currentTextColorRef.current;
+    const bgBar = bgColorBarRef.current;
+    if (bgBar) {
+      const bg = currentBgColorRef.current;
+      bgBar.classList.toggle("is-transparent", !bg);
+      bgBar.style.background = bg ?? "";
+    }
+  };
+  const markSwatches = (menu, hex) => {
+    if (!menu) return;
+    menu.querySelectorAll("[data-color]").forEach((el) => {
+      el.classList.toggle("is-selected", !!hex && el.dataset.color === hex);
+    });
+    menu.querySelector(".erte-color-remove")?.classList.toggle("is-selected", hex === null);
+  };
+  const applyColor = (kind, color) => {
+    if (!doc) return;
+    const selection = doc.getSelection();
+    if (!selection || selection.rangeCount === 0) return;
+    const cssValue = kind === "text" ? color ?? DEFAULT_TEXT_COLOR : color ?? "transparent";
+    if (selection.isCollapsed) {
+      insertTypingSpan((span) => {
+        if (kind === "text") span.style.color = cssValue;
+        else span.style.backgroundColor = cssValue;
+      });
+    } else {
+      doc.execCommand("styleWithCSS", false, "true");
+      if (kind === "text") {
+        doc.execCommand("foreColor", false, cssValue);
+      } else if (!doc.execCommand("hiliteColor", false, cssValue)) {
+        doc.execCommand("backColor", false, cssValue);
+      }
+    }
+    if (kind === "text") currentTextColorRef.current = cssValue;
+    else currentBgColorRef.current = color;
+    updateColorIndicators();
+    propagateContent();
+    syncToolbarState();
+  };
+  const openCustomPicker = (kind) => {
+    if (!doc) return;
+    const selection = doc.getSelection();
+    const range = selection && selection.rangeCount > 0 ? selection.getRangeAt(0).cloneRange() : null;
+    const restoreRange = () => {
+      if (!range || !selection) return;
+      selection.removeAllRanges();
+      selection.addRange(range);
+    };
+    const initialColor = kind === "text" ? lastCustomColorRef.current.text ?? currentTextColorRef.current : lastCustomColorRef.current.bg ?? currentBgColorRef.current ?? "#fbeeb8";
+    openColorPicker({
+      doc,
+      initialColor,
+      title: kind === "text" ? "Text color" : "Highlight color",
+      onSave: (hex) => {
+        if (kind === "text") lastCustomColorRef.current.text = hex;
+        else lastCustomColorRef.current.bg = hex;
+        restoreRange();
+        applyColor(kind, hex);
+      },
+      onCancel: restoreRange
+    });
+  };
+  const runAiAction = async (action, computeWordCount, toneType) => {
+    if (!doc) return;
+    saveSelection();
+    const selectedText = doc.getSelection()?.toString() ?? "";
+    if (!selectedText) {
+      handleErrorTextSelection();
+      return;
+    }
+    const wordCount = computeWordCount ? computeWordCount(selectedText) : null;
+    const result = await callAiTextAction(action, selectedText, wordCount, toneType);
+    if (result) exec("insertText", result);
+  };
+  const updateToolbarRowStarts = () => {
+    if (!doc) return;
+    const toolbar = doc.getElementById("toolbar");
+    if (!toolbar) return;
+    let prevLeft = Number.POSITIVE_INFINITY;
+    toolbar.querySelectorAll(".erte-toolbar-group").forEach((group) => {
+      const isRowStart = group.offsetLeft <= prevLeft;
+      group.classList.toggle("erte-row-start", isRowStart);
+      prevLeft = group.offsetLeft;
+    });
+  };
+  const renderToolbar = () => {
+    if (!doc) return;
+    const editorDoc = doc;
+    const toolbar = editorDoc.getElementById("toolbar");
+    if (!toolbar) return;
+    toolbar.innerHTML = "";
+    toggleButtonsRef.current = [];
+    blockToggleButtonsRef.current = [];
+    const makeButton = (config) => {
+      const btn = editorDoc.createElement("button");
+      btn.type = "button";
+      btn.className = "erte-btn";
+      btn.title = config.title;
+      btn.setAttribute("aria-label", config.title);
+      btn.innerHTML = config.icon;
+      btn.onclick = (event) => {
+        event.preventDefault();
+        if (config.onClick) {
+          config.onClick();
+          return;
+        }
+        if (config.cmd) exec(config.cmd);
+      };
+      if (config.cmd && TOGGLE_COMMANDS.has(config.cmd)) {
+        btn.setAttribute("aria-pressed", "false");
+        toggleButtonsRef.current.push({ el: btn, cmd: config.cmd });
+      }
+      return btn;
+    };
+    const makeGroup = (items) => {
+      const group = editorDoc.createElement("div");
+      group.className = "erte-toolbar-group";
+      items.forEach((item) => group.appendChild(item));
+      return group;
+    };
+    const closeAllDropdowns = () => {
+      editorDoc.querySelectorAll(".erte-select-wrap.is-open").forEach((wrap) => {
+        wrap.classList.remove("is-open");
+        wrap.querySelector(".erte-select")?.setAttribute("aria-expanded", "false");
+      });
+    };
+    const positionMenu = (wrap) => {
+      const menu = wrap.querySelector(".erte-select-menu");
+      if (!menu) return;
+      const MARGIN = 8;
+      menu.style.left = "0px";
+      menu.style.right = "auto";
+      menu.style.top = "";
+      menu.style.bottom = "";
+      const wrapRect = wrap.getBoundingClientRect();
+      const viewportW = editorDoc.documentElement.clientWidth;
+      const viewportH = editorDoc.documentElement.clientHeight;
+      const menuW = menu.offsetWidth;
+      const menuH = menu.offsetHeight;
+      const targetLeft = Math.max(MARGIN, Math.min(wrapRect.left, viewportW - MARGIN - menuW));
+      menu.style.left = `${Math.round(targetLeft - wrapRect.left)}px`;
+      if (viewportH - wrapRect.bottom < menuH + MARGIN && wrapRect.top > menuH + MARGIN) {
+        menu.style.top = "auto";
+        menu.style.bottom = "calc(100% + 4px)";
+      }
+    };
+    const toggleDropdown = (wrap) => {
+      const willOpen = !wrap.classList.contains("is-open");
+      closeAllDropdowns();
+      if (willOpen) {
+        wrap.classList.add("is-open");
+        wrap.querySelector(".erte-select")?.setAttribute("aria-expanded", "true");
+        positionMenu(wrap);
+      }
+    };
+    const makeSelect = (options, config) => {
+      const wrap = editorDoc.createElement("div");
+      wrap.className = "erte-select-wrap";
+      const trigger = editorDoc.createElement("button");
+      trigger.type = "button";
+      trigger.className = `erte-select${config.triggerClass ? ` ${config.triggerClass}` : ""}`;
+      trigger.title = config.title;
+      trigger.setAttribute("aria-label", config.title);
+      trigger.setAttribute("aria-haspopup", "listbox");
+      trigger.setAttribute("aria-expanded", "false");
+      const caret = editorDoc.createElement("span");
+      caret.className = "erte-select-caret";
+      caret.setAttribute("aria-hidden", "true");
+      let label = null;
+      if (config.triggerIconHtml) {
+        const icon = editorDoc.createElement("span");
+        icon.className = "erte-select-icon";
+        icon.setAttribute("aria-hidden", "true");
+        icon.innerHTML = config.triggerIconHtml;
+        trigger.append(icon, caret);
+      } else {
+        label = editorDoc.createElement("span");
+        label.className = "erte-select-label";
+        label.textContent = config.initialLabel;
+        trigger.append(label, caret);
+      }
+      const menu = editorDoc.createElement("div");
+      menu.className = `erte-select-menu${config.menuClass ? ` ${config.menuClass}` : ""}`;
+      menu.setAttribute("role", "listbox");
+      options.forEach((option) => {
+        const item = editorDoc.createElement("button");
+        item.type = "button";
+        item.className = `erte-option${option.optionClass ? ` ${option.optionClass}` : ""}`;
+        item.setAttribute("role", "option");
+        item.setAttribute(option.dataAttr, option.key);
+        item.textContent = option.label;
+        item.addEventListener("mousedown", (event) => event.preventDefault());
+        item.addEventListener("click", (event) => {
+          event.preventDefault();
+          option.onSelect();
+          closeAllDropdowns();
+        });
+        menu.appendChild(item);
+      });
+      trigger.addEventListener("mousedown", (event) => event.preventDefault());
+      trigger.addEventListener("click", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        saveSelection();
+        const sel = editorDoc.getSelection();
+        dropdownRangeRef.current = sel && sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;
+        toggleDropdown(wrap);
+      });
+      wrap.append(trigger, menu);
+      return { wrap, trigger, label, menu };
+    };
+    const makeIconDropdown = (config) => {
+      const wrap = editorDoc.createElement("div");
+      wrap.className = "erte-select-wrap";
+      const trigger = editorDoc.createElement("button");
+      trigger.type = "button";
+      trigger.className = `erte-select erte-icon-select${config.triggerClass ? ` ${config.triggerClass}` : ""}`;
+      trigger.title = config.title;
+      trigger.setAttribute("aria-label", config.title);
+      trigger.setAttribute("aria-haspopup", "menu");
+      trigger.setAttribute("aria-expanded", "false");
+      const icon = editorDoc.createElement("span");
+      icon.className = "erte-icon-select-icon";
+      icon.setAttribute("aria-hidden", "true");
+      icon.innerHTML = config.triggerHtml;
+      const caret = editorDoc.createElement("span");
+      caret.className = "erte-select-caret";
+      caret.setAttribute("aria-hidden", "true");
+      trigger.append(icon, caret);
+      const menu = editorDoc.createElement("div");
+      menu.className = `erte-select-menu${config.menuClass ? ` ${config.menuClass}` : ""}`;
+      menu.setAttribute("role", "menu");
+      trigger.addEventListener("mousedown", (event) => event.preventDefault());
+      trigger.addEventListener("click", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        saveSelection();
+        const sel = editorDoc.getSelection();
+        dropdownRangeRef.current = sel && sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;
+        toggleDropdown(wrap);
+      });
+      wrap.append(trigger, menu);
+      return { wrap, trigger, icon, menu };
+    };
+    const makeMenuItem = (config) => {
+      const item = editorDoc.createElement("button");
+      item.type = "button";
+      item.className = "erte-menu-item";
+      item.setAttribute("role", "menuitem");
+      if (config.data) item.setAttribute(config.data.attr, config.data.value);
+      if (config.leadingHtml !== void 0) {
+        const lead = editorDoc.createElement("span");
+        lead.className = "erte-menu-item-lead";
+        lead.setAttribute("aria-hidden", "true");
+        lead.innerHTML = config.leadingHtml;
+        item.appendChild(lead);
+      }
+      const text = editorDoc.createElement("span");
+      text.className = "erte-menu-item-label";
+      text.textContent = config.label;
+      item.appendChild(text);
+      item.addEventListener("mousedown", (event) => event.preventDefault());
+      item.addEventListener("click", (event) => {
+        event.preventDefault();
+        config.onSelect();
+        closeAllDropdowns();
+      });
+      return item;
+    };
+    const makeStepButton = (glyph, title, onClick) => {
+      const btn = editorDoc.createElement("button");
+      btn.type = "button";
+      btn.className = "erte-btn erte-step-btn";
+      btn.title = title;
+      btn.setAttribute("aria-label", title);
+      btn.textContent = glyph;
+      btn.addEventListener("mousedown", (event) => event.preventDefault());
+      btn.addEventListener("click", (event) => {
+        event.preventDefault();
+        onClick();
+      });
+      return btn;
+    };
+    const makeTablePicker = () => {
+      const GRID_COLS = 10;
+      const GRID_ROWS = 8;
+      const wrap = editorDoc.createElement("div");
+      wrap.className = "erte-select-wrap erte-table-wrap";
+      const trigger = editorDoc.createElement("button");
+      trigger.type = "button";
+      trigger.className = "erte-btn";
+      trigger.title = "Insert table";
+      trigger.setAttribute("aria-label", "Insert table");
+      trigger.setAttribute("aria-haspopup", "dialog");
+      trigger.setAttribute("aria-expanded", "false");
+      trigger.innerHTML = icons.table;
+      trigger.addEventListener("mousedown", (event) => event.preventDefault());
+      trigger.addEventListener("click", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        toggleDropdown(wrap);
+      });
+      const menu = editorDoc.createElement("div");
+      menu.className = "erte-select-menu erte-table-menu";
+      const grid = editorDoc.createElement("div");
+      grid.className = "erte-table-grid";
+      const label = editorDoc.createElement("div");
+      label.className = "erte-table-label";
+      label.textContent = "1 × 1";
+      const highlight = (cols, rows) => {
+        grid.querySelectorAll(".erte-table-cell").forEach((el) => {
+          el.classList.toggle(
+            "is-on",
+            Number(el.dataset.c) <= cols && Number(el.dataset.r) <= rows
+          );
+        });
+        label.textContent = `${cols} × ${rows}`;
+      };
+      for (let r = 1; r <= GRID_ROWS; r++) {
+        for (let c = 1; c <= GRID_COLS; c++) {
+          const cell = editorDoc.createElement("button");
+          cell.type = "button";
+          cell.className = "erte-table-cell";
+          cell.dataset.c = String(c);
+          cell.dataset.r = String(r);
+          cell.setAttribute("aria-label", `${c} × ${r} table`);
+          cell.addEventListener("mouseover", () => highlight(c, r));
+          cell.addEventListener("focus", () => highlight(c, r));
+          cell.addEventListener("mousedown", (event) => event.preventDefault());
+          cell.addEventListener("click", (event) => {
+            event.preventDefault();
+            insertTable(r, c);
+            closeAllDropdowns();
+            highlight(0, 0);
+            label.textContent = "1 × 1";
+          });
+          grid.appendChild(cell);
+        }
+      }
+      grid.addEventListener("mouseleave", () => {
+        highlight(0, 0);
+        label.textContent = "1 × 1";
+      });
+      menu.append(grid, label);
+      wrap.append(trigger, menu);
+      return wrap;
+    };
+    const paragraph = makeSelect(
+      BLOCK_OPTIONS.map((option) => ({
+        key: option.tag,
+        label: option.label,
+        optionClass: option.optionClass,
+        dataAttr: "data-tag",
+        onSelect: () => applyBlockFormat(option.tag)
+      })),
+      {
+        title: "Text styles",
+        triggerClass: "erte-select--block",
+        menuClass: "erte-select-menu--block",
+        initialLabel: "",
+        triggerIconHtml: icons.paragraph
+      }
+    );
+    blockTriggerRef.current = paragraph.trigger;
+    blockMenuRef.current = paragraph.menu;
+    const fontSize = makeSelect(
+      FONT_SIZES.map((size2) => ({
+        key: String(size2),
+        label: `${size2}px`,
+        dataAttr: "data-size",
+        onSelect: () => applyFontSize(size2)
+      })),
+      {
+        title: "Font size",
+        triggerClass: "erte-select--size",
+        menuClass: "erte-select-menu--size",
+        initialLabel: `${DEFAULT_FONT_SIZE}px`
+      }
+    );
+    sizeLabelRef.current = fontSize.label;
+    sizeMenuRef.current = fontSize.menu;
+    const makeBlockToggle = (config) => {
+      const btn = makeButton({
+        icon: config.icon,
+        title: config.title,
+        onClick: () => applyBlockFormat(config.tag)
+      });
+      btn.addEventListener("mousedown", (event) => event.preventDefault());
+      btn.setAttribute("aria-pressed", "false");
+      blockToggleButtonsRef.current.push({ el: btn, detect: config.detect });
+      return btn;
+    };
+    const blockQuoteBtn = makeBlockToggle({
+      icon: icons.quote,
+      title: "Block quote",
+      tag: "blockquote",
+      detect: () => !!closestFromSelection(
+        (el) => el.tagName === "BLOCKQUOTE" && el.hasAttribute("data-erte-quote")
+      )
+    });
+    const codeBlockBtn = makeBlockToggle({
+      icon: icons.code,
+      title: "Code block",
+      tag: "codeblock",
+      detect: () => !!closestFromSelection((el) => el.tagName === "PRE" && el.hasAttribute("data-erte-code"))
+    });
+    const blockGroup = editorDoc.createElement("div");
+    blockGroup.className = "erte-toolbar-group erte-block-group";
+    blockGroup.append(paragraph.wrap, blockQuoteBtn, codeBlockBtn);
+    const styleGroup = editorDoc.createElement("div");
+    styleGroup.className = "erte-toolbar-group erte-style-group";
+    styleGroup.append(
+      makeStepButton("−", "Decrease font size", () => stepFontSize(-1)),
+      fontSize.wrap,
+      makeStepButton("+", "Increase font size", () => stepFontSize(1))
+    );
+    const makeColorControl = (kind) => {
+      const isText = kind === "text";
+      const wrap = editorDoc.createElement("div");
+      wrap.className = "erte-select-wrap erte-split-wrap erte-color-wrap";
+      const main = editorDoc.createElement("button");
+      main.type = "button";
+      main.className = "erte-btn erte-split-main erte-color-btn";
+      main.title = isText ? "Text color" : "Highlight color";
+      main.setAttribute("aria-label", main.title);
+      main.innerHTML = `${isText ? '<span class="erte-color-glyph">A</span>' : icons.highlighter}`;
+      const bar = editorDoc.createElement("span");
+      bar.className = "erte-color-bar";
+      bar.setAttribute("aria-hidden", "true");
+      main.appendChild(bar);
+      main.addEventListener("mousedown", (event) => event.preventDefault());
+      main.addEventListener("click", (event) => {
+        event.preventDefault();
+        applyColor(kind, isText ? currentTextColorRef.current : currentBgColorRef.current);
+      });
+      const caretBtn = editorDoc.createElement("button");
+      caretBtn.type = "button";
+      caretBtn.className = "erte-select erte-split-caret erte-color-caret";
+      caretBtn.title = isText ? "Text color palette" : "Highlight color palette";
+      caretBtn.setAttribute("aria-label", caretBtn.title);
+      caretBtn.setAttribute("aria-haspopup", "listbox");
+      caretBtn.setAttribute("aria-expanded", "false");
+      caretBtn.innerHTML = '<span class="erte-select-caret"></span>';
+      caretBtn.addEventListener("mousedown", (event) => event.preventDefault());
+      caretBtn.addEventListener("click", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        toggleDropdown(wrap);
+      });
+      const menu = editorDoc.createElement("div");
+      menu.className = "erte-select-menu erte-color-menu";
+      const removeBtn = editorDoc.createElement("button");
+      removeBtn.type = "button";
+      removeBtn.className = "erte-color-remove";
+      removeBtn.innerHTML = `${icons.check}<span>Remove color</span>`;
+      removeBtn.addEventListener("mousedown", (event) => event.preventDefault());
+      removeBtn.addEventListener("click", (event) => {
+        event.preventDefault();
+        applyColor(kind, null);
+        closeAllDropdowns();
+      });
+      const grid = editorDoc.createElement("div");
+      grid.className = "erte-color-grid";
+      COLOR_PALETTE.forEach(({ hex, name }) => {
+        const swatch = editorDoc.createElement("button");
+        swatch.type = "button";
+        swatch.className = "erte-color-swatch";
+        swatch.title = name;
+        swatch.setAttribute("aria-label", name);
+        swatch.dataset.color = hex;
+        swatch.style.background = hex;
+        swatch.addEventListener("mousedown", (event) => event.preventDefault());
+        swatch.addEventListener("click", (event) => {
+          event.preventDefault();
+          applyColor(kind, hex);
+          closeAllDropdowns();
+        });
+        grid.appendChild(swatch);
+      });
+      const customBtn = editorDoc.createElement("button");
+      customBtn.type = "button";
+      customBtn.className = "erte-color-custom";
+      customBtn.innerHTML = `${icons.palette}<span>Custom color&hellip;</span>`;
+      customBtn.addEventListener("mousedown", (event) => event.preventDefault());
+      customBtn.addEventListener("click", (event) => {
+        event.preventDefault();
+        closeAllDropdowns();
+        openCustomPicker(kind);
+      });
+      menu.append(removeBtn, grid, customBtn);
+      wrap.append(main, caretBtn, menu);
+      if (isText) {
+        textColorBarRef.current = bar;
+        textColorMenuRef.current = menu;
+      } else {
+        bgColorBarRef.current = bar;
+        bgColorMenuRef.current = menu;
+      }
+      return wrap;
+    };
+    const colorGroup = editorDoc.createElement("div");
+    colorGroup.className = "erte-toolbar-group erte-color-group";
+    colorGroup.append(makeColorControl("text"), makeColorControl("bg"));
+    const alignDropdown = makeIconDropdown({
+      title: "Text alignment",
+      triggerHtml: icons.alignLeft,
+      triggerClass: "erte-align-select"
+    });
+    alignIconRef.current = alignDropdown.icon;
+    alignMenuRef.current = alignDropdown.menu;
+    ALIGN_OPTIONS.forEach((option) => {
+      alignDropdown.menu.appendChild(
+        makeMenuItem({
+          leadingHtml: icons[option.iconKey],
+          label: option.label,
+          data: { attr: "data-align", value: option.key },
+          onSelect: () => exec(option.cmd)
+        })
+      );
+    });
+    const makeListControl = (kind) => {
+      const isOrdered = kind === "ol";
+      const styles = isOrdered ? ORDERED_LIST_STYLES : BULLET_LIST_STYLES;
+      const wrap = editorDoc.createElement("div");
+      wrap.className = "erte-select-wrap erte-split-wrap";
+      const main = makeButton({
+        icon: isOrdered ? icons.listOl : icons.listUl,
+        title: isOrdered ? "Numbered list" : "Bulleted list",
+        cmd: isOrdered ? "insertOrderedList" : "insertUnorderedList"
+      });
+      main.classList.add("erte-split-main");
+      const caretBtn = editorDoc.createElement("button");
+      caretBtn.type = "button";
+      caretBtn.className = "erte-select erte-split-caret";
+      caretBtn.title = isOrdered ? "Numbered list styles" : "Bullet list styles";
+      caretBtn.setAttribute("aria-label", caretBtn.title);
+      caretBtn.setAttribute("aria-haspopup", "menu");
+      caretBtn.setAttribute("aria-expanded", "false");
+      caretBtn.innerHTML = '<span class="erte-select-caret"></span>';
+      caretBtn.addEventListener("mousedown", (event) => event.preventDefault());
+      caretBtn.addEventListener("click", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        saveSelection();
+        const sel = editorDoc.getSelection();
+        dropdownRangeRef.current = sel && sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;
+        toggleDropdown(wrap);
+      });
+      const menu = editorDoc.createElement("div");
+      menu.className = "erte-select-menu erte-list-menu";
+      menu.setAttribute("role", "menu");
+      const grid = editorDoc.createElement("div");
+      grid.className = "erte-list-grid";
+      styles.forEach((style) => {
+        const tile = editorDoc.createElement("button");
+        tile.type = "button";
+        tile.className = "erte-list-tile";
+        tile.title = style.label;
+        tile.setAttribute("aria-label", style.label);
+        tile.dataset.listStyle = style.key;
+        tile.innerHTML = style.markers.map(
+          (marker) => `<span class="erte-list-row"><span class="erte-list-marker">${marker}</span><span class="erte-list-bar"></span></span>`
+        ).join("");
+        tile.addEventListener("mousedown", (event) => event.preventDefault());
+        tile.addEventListener("click", (event) => {
+          event.preventDefault();
+          applyListStyle(kind, style.key, style.css);
+          closeAllDropdowns();
+        });
+        grid.appendChild(tile);
+      });
+      menu.appendChild(grid);
+      if (!isOrdered) {
+        const customRow = editorDoc.createElement("div");
+        customRow.className = "erte-list-custom";
+        const input = editorDoc.createElement("input");
+        input.type = "text";
+        input.className = "erte-list-custom-input";
+        input.maxLength = 2;
+        input.placeholder = "★";
+        input.setAttribute("aria-label", "Custom bullet character");
+        const apply = editorDoc.createElement("button");
+        apply.type = "button";
+        apply.className = "erte-list-custom-apply";
+        apply.textContent = "Use bullet";
+        apply.addEventListener("mousedown", (event) => event.preventDefault());
+        apply.addEventListener("click", (event) => {
+          event.preventDefault();
+          const char = input.value.trim();
+          if (!char) return;
+          applyListStyle("ul", "custom", `"${char}  "`);
+          closeAllDropdowns();
+        });
+        customRow.append(input, apply);
+        menu.appendChild(customRow);
+      }
+      caretBtn.addEventListener("keydown", () => void 0);
+      wrap.append(main, caretBtn, menu);
+      if (isOrdered) olMenuRef.current = menu;
+      else ulMenuRef.current = menu;
+      return wrap;
+    };
+    const indentDropdown = makeIconDropdown({
+      title: "Indentation",
+      triggerHtml: icons.indent,
+      menuClass: "erte-plain-menu"
+    });
+    [
+      { icon: icons.indent, label: "Increase indent", onSelect: () => exec("indent") },
+      { icon: icons.outdent, label: "Decrease indent", onSelect: () => exec("outdent") },
+      { icon: icons.outdent, label: "Reset indentation", onSelect: resetIndentation }
+    ].forEach((entry) => {
+      indentDropdown.menu.appendChild(
+        makeMenuItem({ leadingHtml: entry.icon, label: entry.label, onSelect: entry.onSelect })
+      );
+    });
+    const moreDropdown = makeIconDropdown({
+      title: "More formatting",
+      triggerHtml: icons.ellipsis,
+      menuClass: "erte-plain-menu"
+    });
+    const registerMoreToggle = (item, cmd) => {
+      item.setAttribute("aria-pressed", "false");
+      item.dataset.toggleCmd = cmd;
+      toggleButtonsRef.current.push({ el: item, cmd });
+    };
+    const strikeItem = makeMenuItem({
+      leadingHtml: icons.strikethrough,
+      label: "Strikethrough",
+      onSelect: () => exec("strikeThrough")
+    });
+    registerMoreToggle(strikeItem, "strikeThrough");
+    const subItem = makeMenuItem({
+      leadingHtml: icons.subscript,
+      label: "Subscript",
+      onSelect: () => exec("subscript")
+    });
+    registerMoreToggle(subItem, "subscript");
+    const superItem = makeMenuItem({
+      leadingHtml: icons.superscript,
+      label: "Superscript",
+      onSelect: () => exec("superscript")
+    });
+    registerMoreToggle(superItem, "superscript");
+    moreDropdown.menu.append(
+      strikeItem,
+      subItem,
+      superItem,
+      makeMenuItem({
+        leadingHtml: icons.horizontalRule,
+        label: "Horizontal rule",
+        onSelect: insertHorizontalRule
+      }),
+      makeMenuItem({
+        leadingHtml: icons.eraser,
+        label: "Clear formatting",
+        onSelect: () => exec("removeFormat")
+      })
+    );
+    const linkButton = makeButton({
+      icon: icons.link,
+      title: "Insert link",
+      onClick: () => toggleLinkPopover(linkButton)
+    });
+    linkButton.addEventListener("mousedown", (event) => event.preventDefault());
+    const groups = [
+      [
+        makeButton({ icon: icons.undo, title: "Undo", cmd: "undo" }),
+        makeButton({ icon: icons.redo, title: "Redo", cmd: "redo" })
+      ],
+      [
+        makeButton({ icon: icons.bold, title: "Bold", cmd: "bold" }),
+        makeButton({ icon: icons.italic, title: "Italic", cmd: "italic" }),
+        makeButton({ icon: icons.underline, title: "Underline", cmd: "underline" })
+      ],
+      [alignDropdown.wrap],
+      [makeListControl("ol"), makeListControl("ul")],
+      [indentDropdown.wrap],
+      [moreDropdown.wrap],
+      [linkButton, makeTablePicker()]
+    ];
+    const iconGroups = groups.map(makeGroup);
+    const orderedGroups = [
+      ...iconGroups.slice(0, 2),
+      // undo/redo, bold/italic/underline
+      blockGroup,
+      // paragraph styles + block quote + code block
+      styleGroup,
+      // font size (− size +)
+      ...iconGroups.slice(2),
+      // alignment … link/table
+      colorGroup
+    ];
+    orderedGroups.forEach((group) => toolbar.appendChild(group));
+    updateColorIndicators();
+    markSwatches(textColorMenuRef.current, currentTextColorRef.current);
+    markSwatches(bgColorMenuRef.current, currentBgColorRef.current);
+    updateToolbarRowStarts();
+    if (showAiTools) {
+      const aiGroup = editorDoc.createElement("div");
+      aiGroup.className = "erte-ai-group";
+      const addAiBtn = (label, onClick) => {
+        const btn = editorDoc.createElement("button");
+        btn.type = "button";
+        btn.className = "erte-ai-btn";
+        btn.textContent = label;
+        btn.onclick = (event) => {
+          event.preventDefault();
+          onClick();
+        };
+        aiGroup.appendChild(btn);
+      };
+      addAiBtn("Enhance", () => void runAiAction("enhance", null, null));
+      addAiBtn("Proofread", () => void runAiAction("proofread", null, null));
+      addAiBtn(
+        "Expand",
+        () => void runAiAction("expand", (t) => t.trim().split(/\s+/).length * 2, null)
+      );
+      addAiBtn(
+        "Shorten",
+        () => void runAiAction(
+          "shorten",
+          (t) => Math.max(1, Math.floor(t.trim().split(/\s+/).length / 2)),
+          null
+        )
+      );
+      addAiBtn("Friendly", () => void runAiAction("changeTone", null, "friendly"));
+      addAiBtn("Formal", () => void runAiAction("changeTone", null, "formal"));
+      addAiBtn("Undo", () => exec("undo"));
+      toolbar.appendChild(aiGroup);
+    }
+    syncToolbarState();
+  };
+  const startResize = (edges) => (event) => {
+    const container = containerRef.current;
+    if (!container) return;
+    event.preventDefault();
+    const rect = container.getBoundingClientRect();
+    const startX = event.clientX;
+    const startY = event.clientY;
+    const startWidth = rect.width;
+    const startHeight = rect.height;
+    const handleEl = event.currentTarget;
+    const { pointerId } = event;
+    try {
+      handleEl.setPointerCapture(pointerId);
+    } catch {
+    }
+    container.classList.add("is-resizing");
+    handleEl.classList.add("is-active");
+    const previousCursor = document.body.style.cursor;
+    const previousUserSelect = document.body.style.userSelect;
+    document.body.style.cursor = edges.h && edges.v ? edges.h === "left" === (edges.v === "top") ? "nwse-resize" : "nesw-resize" : edges.h ? "ew-resize" : "ns-resize";
+    document.body.style.userSelect = "none";
+    if (iframeRef.current) iframeRef.current.style.pointerEvents = "none";
+    const parentEl = container.parentElement;
+    let maxAvailableWidth = startWidth;
+    if (parentEl) {
+      const parentStyle = parentEl.ownerDocument.defaultView?.getComputedStyle(parentEl);
+      const parentPadding = parentStyle ? (parseFloat(parentStyle.paddingLeft) || 0) + (parseFloat(parentStyle.paddingRight) || 0) : 0;
+      maxAvailableWidth = parentEl.clientWidth - parentPadding;
+    }
+    const handleMove = (moveEvent) => {
+      if (edges.h) {
+        const dx = moveEvent.clientX - startX;
+        const nextWidth = clampNumber(
+          startWidth + (edges.h === "right" ? dx : -dx),
+          MIN_EDITOR_WIDTH,
+          maxAvailableWidth
+        );
+        container.style.width = `${nextWidth}px`;
+      }
+      if (edges.v) {
+        const dy = moveEvent.clientY - startY;
+        const nextHeight = clampNumber(
+          startHeight + (edges.v === "bottom" ? dy : -dy),
+          MIN_EDITOR_HEIGHT,
+          MAX_EDITOR_HEIGHT
+        );
+        container.style.height = `${nextHeight}px`;
+      }
+    };
+    const cleanup = () => {
+      window.removeEventListener("pointermove", handleMove);
+      window.removeEventListener("pointerup", handleEnd);
+      window.removeEventListener("pointercancel", handleEnd);
+      document.body.style.cursor = previousCursor;
+      document.body.style.userSelect = previousUserSelect;
+      if (iframeRef.current) iframeRef.current.style.pointerEvents = "";
+      container.classList.remove("is-resizing");
+      handleEl.classList.remove("is-active");
+      try {
+        handleEl.releasePointerCapture(pointerId);
+      } catch {
+      }
+      resizeCleanupRef.current = null;
+    };
+    const handleEnd = () => {
+      setSize((prev) => ({
+        width: edges.h ? Math.round(container.offsetWidth) : prev.width,
+        height: edges.v ? Math.round(container.offsetHeight) : prev.height
+      }));
+      cleanup();
+    };
+    resizeCleanupRef.current = cleanup;
+    window.addEventListener("pointermove", handleMove);
+    window.addEventListener("pointerup", handleEnd);
+    window.addEventListener("pointercancel", handleEnd);
+  };
+  react.useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe?.contentDocument) return;
+    const iframeDoc = iframe.contentDocument;
+    iframeDoc.open();
+    iframeDoc.write(`
+        <html>
+          <head>
+            <style>
+              :root {
+                --erte-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+                --erte-text: #1a1a1a;
+                --erte-toolbar-bg: #ffffff;
+                --erte-border: #e6e6e6;
+                --erte-icon: #5f6368;
+                --erte-icon-hover: #1a1a1a;
+                --erte-hover-bg: #f1f3f4;
+                --erte-active-bg: #e8eaed;
+                --erte-active-icon: #1a1a1a;
+                --erte-accent: #d23f00;
+                --erte-accent-hover: #b83700;
+                --erte-radius: 8px;
+              }
+              * { box-sizing: border-box; }
+              html, body { height: 100%; }
+              /* Flex column: fixed toolbar row + scrollable content area.
+                 The toolbar is OUTSIDE the scroll container, so it can never
+                 scroll out of view — content scrolls underneath it. */
+              body {
+                margin: 0; font-family: var(--erte-font); font-weight: normal;
+                color: var(--erte-text); background: #fff;
+                display: flex; flex-direction: column; overflow: hidden;
+              }
+
+              .toolbar {
+                position: relative; z-index: 10; flex: 0 0 auto;
+                display: flex; align-items: center; flex-wrap: wrap; gap: 5px 15px;
+                padding: 7px 10px;
+                background: var(--erte-toolbar-bg);
+                border-bottom: 1px solid var(--erte-border);
+              }
+              /* Group separators are drawn by each group in the gap to its
+                 left (never standalone elements), so wrapping can't strand
+                 one at a row edge. Groups that start a row get .erte-row-start
+                 (computed from layout) which hides their separator. */
+              .erte-toolbar-group { position: relative; }
+              .erte-toolbar-group::before {
+                content: ''; position: absolute; left: -8px; top: 50%;
+                transform: translateY(-50%);
+                width: 1px; height: 24px; background: #e5e7eb;
+              }
+              .erte-toolbar-group.erte-row-start::before { display: none; }
+
+              .editor-scroll {
+                position: relative; /* positioning context for table add-buttons */
+                flex: 1 1 auto; min-height: 0; overflow: auto;
+                scrollbar-width: thin; scrollbar-color: #c9cfd6 transparent;
+              }
+              .editor-scroll::-webkit-scrollbar { width: 12px; height: 12px; }
+              .editor-scroll::-webkit-scrollbar-track { background: transparent; }
+              .editor-scroll::-webkit-scrollbar-thumb {
+                background: #c9cfd6; border-radius: 8px;
+                border: 3px solid #fff; background-clip: padding-box;
+              }
+              .editor-scroll::-webkit-scrollbar-thumb:hover { background-color: #aab2bc; }
+              .erte-toolbar-group { display: flex; align-items: center; gap: 2px; }
+              .erte-ai-group { display: flex; align-items: center; gap: 6px; margin-left: auto; padding-left: 8px; flex-wrap: wrap; }
+
+              .erte-btn {
+                display: inline-flex; align-items: center; justify-content: center;
+                width: 34px; height: 34px; padding: 0;
+                border: none; background: transparent; border-radius: var(--erte-radius);
+                color: var(--erte-icon); cursor: pointer;
+                transition: background-color 0.15s ease, color 0.15s ease;
+              }
+              .erte-btn svg { display: block; width: 17px; height: 17px; }
+              .erte-btn:hover { background: var(--erte-hover-bg); color: var(--erte-icon-hover); }
+              .erte-btn:focus-visible { outline: 2px solid var(--erte-accent); outline-offset: 1px; }
+              .erte-btn.is-active { background: var(--erte-active-bg); color: var(--erte-active-icon); }
+
+              .erte-ai-btn {
+                display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
+                border: 1px solid var(--erte-border); background: #fff; border-radius: 999px;
+                color: #3c4043; font-family: var(--erte-font); font-size: 13px; font-weight: 500;
+                cursor: pointer; white-space: nowrap;
+                transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+              }
+              .erte-ai-btn:hover { background: var(--erte-hover-bg); border-color: #d5d5d5; color: var(--erte-text); }
+              .erte-ai-btn:focus-visible { outline: 2px solid var(--erte-accent); outline-offset: 1px; }
+
+              /* Paragraph style + font-size controls */
+              .erte-style-group { gap: 6px; }
+              .erte-select-wrap { position: relative; display: inline-flex; }
+              .erte-select {
+                display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px;
+                border: 1px solid var(--erte-border); background: #fff; border-radius: var(--erte-radius);
+                color: var(--erte-text); font-family: var(--erte-font); font-size: 13px; line-height: 1;
+                cursor: pointer; white-space: nowrap;
+                transition: background-color 0.15s ease, border-color 0.15s ease;
+              }
+              .erte-select:hover { background: var(--erte-hover-bg); }
+              .erte-select:focus-visible { outline: 2px solid var(--erte-accent); outline-offset: 1px; }
+              /* Paragraph-style trigger: a clear text-styles icon + caret,
+                 sized to sit alongside the Bold/Italic/Underline icons. */
+              .erte-block-group { gap: 3px; }
+              .erte-select--block { gap: 3px; padding: 0 6px 0 8px; }
+              .erte-select-icon {
+                display: inline-flex; align-items: center; justify-content: center;
+                width: 20px; height: 20px; color: var(--erte-icon);
+              }
+              .erte-select-icon svg { display: block; width: 19px; height: 19px; }
+              .erte-select--block:hover .erte-select-icon { color: var(--erte-icon-hover); }
+              .erte-select--size { min-width: 60px; justify-content: center; }
+              .erte-select-caret {
+                width: 0; height: 0; margin-left: 2px;
+                border-left: 4px solid transparent; border-right: 4px solid transparent;
+                border-top: 5px solid var(--erte-icon);
+              }
+
+              /* Icon-triggered dropdowns (alignment, indent, more) */
+              .erte-icon-select { gap: 3px; padding: 0 6px 0 8px; }
+              .erte-icon-select-icon {
+                display: inline-flex; align-items: center; justify-content: center;
+                width: 17px; height: 17px; color: var(--erte-icon);
+              }
+              .erte-icon-select-icon svg { display: block; width: 17px; height: 17px; }
+
+              /* Split-buttons (list styles): ONE shared rounded frame holding an
+                 icon half (default action) and a caret half (opens the style
+                 menu), split by a thin divider. The frame, border and base hover
+                 live on the wrap so the two halves read as a single control —
+                 matching the icon-dropdowns (alignment / indent / more). */
+              .erte-split-wrap {
+                display: inline-flex; align-items: stretch; height: 34px;
+                border: 1px solid var(--erte-border); background: #fff;
+                border-radius: var(--erte-radius);
+                transition: background-color 0.15s ease, border-color 0.15s ease;
+              }
+              .erte-split-wrap:hover { background: var(--erte-hover-bg); }
+              .erte-split-wrap:focus-within { border-color: #d0d0d0; }
+              /* Halves are transparent and borderless; they inherit the wrap's
+                 frame. height:auto lets them stretch to the frame's inner box,
+                 and each keeps only its outer-edge radius. */
+              .erte-split-wrap .erte-split-main {
+                width: 30px; height: auto; border: none; background: transparent;
+                border-radius: var(--erte-radius) 0 0 var(--erte-radius);
+              }
+              .erte-split-wrap .erte-split-caret {
+                position: relative; width: 22px; min-width: 0; height: auto; padding: 0;
+                border: none; background: transparent;
+                border-radius: 0 var(--erte-radius) var(--erte-radius) 0;
+                justify-content: center;
+              }
+              /* Thin divider between the icon and the caret. */
+              .erte-split-caret::before {
+                content: ''; position: absolute; left: 0; top: 50%;
+                transform: translateY(-50%);
+                width: 1px; height: 16px; background: var(--erte-border);
+              }
+              .erte-split-caret .erte-select-caret { margin-left: 0; }
+              /* Per-half hover is a subtle tint layered over the frame hover, so
+                 pointing at just the caret nudges that section a touch darker. */
+              .erte-split-wrap .erte-split-main:hover,
+              .erte-split-wrap .erte-split-caret:hover { background: rgba(60, 64, 67, 0.1); }
+              /* List-on (aria-pressed) state stays visible inside the frame. */
+              .erte-split-wrap .erte-split-main.is-active {
+                background: var(--erte-active-bg); color: var(--erte-active-icon);
+              }
+              .erte-select-wrap.is-open .erte-select { background: var(--erte-hover-bg); border-color: #d0d0d0; }
+              /* Open split-button: highlight the whole frame, not just the caret
+                 (overrides the generic is-open rule above for this wrap). */
+              .erte-split-wrap.is-open { background: var(--erte-hover-bg); border-color: #d0d0d0; }
+              .erte-split-wrap.is-open .erte-split-caret { background: transparent; }
+              .erte-select-menu {
+                position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;
+                min-width: 100%; max-height: 280px; overflow-y: auto;
+                padding: 6px; background: #fff; border: 1px solid var(--erte-border);
+                border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
+                visibility: hidden; opacity: 0; transform: translateY(-4px); pointer-events: none;
+                transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
+              }
+              .erte-select-menu--size { min-width: 96px; }
+              /* Paragraph styles: show all 8 options without scrolling. */
+              .erte-select-menu--block { max-height: none; min-width: 168px; }
+              .erte-select-wrap.is-open .erte-select-menu {
+                visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto;
+              }
+              .erte-option {
+                display: block; width: 100%; text-align: left; padding: 8px 12px;
+                border: none; background: transparent; border-radius: 6px; cursor: pointer;
+                color: var(--erte-text); font-family: var(--erte-font); font-size: 14px;
+                line-height: 1.3; white-space: nowrap;
+              }
+              .erte-option:hover { background: var(--erte-hover-bg); }
+              .erte-option.is-selected { background: var(--erte-accent); color: #fff; }
+              .erte-option--h1 { font-size: 24px; font-weight: 700; }
+              .erte-option--h2 { font-size: 20px; font-weight: 700; }
+              .erte-option--h3 { font-size: 17px; font-weight: 700; }
+              .erte-option--h4 { font-size: 15px; font-weight: 700; }
+              .erte-option--h5 { font-size: 13px; font-weight: 700; }
+              .erte-option--h6 { font-size: 12px; font-weight: 700; }
+              .erte-option--pre { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 13px; }
+              .erte-step-btn { font-size: 18px; font-weight: 500; color: var(--erte-icon); }
+
+              /* Generic menu rows (alignment, indent, more) */
+              .erte-menu-item {
+                display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px 8px 10px;
+                border: none; background: transparent; border-radius: 6px; cursor: pointer;
+                color: var(--erte-text); font-family: var(--erte-font); font-size: 13px;
+                line-height: 1.2; white-space: nowrap; text-align: left;
+              }
+              .erte-menu-item:hover { background: var(--erte-hover-bg); }
+              .erte-menu-item.is-selected { background: var(--erte-accent); color: #fff; }
+              .erte-menu-item.is-selected .erte-menu-item-lead { color: #fff; }
+              .erte-menu-item.is-active { background: var(--erte-active-bg); font-weight: 600; }
+              .erte-menu-item-lead {
+                display: inline-flex; align-items: center; justify-content: center;
+                width: 16px; height: 16px; flex: 0 0 16px; color: var(--erte-icon);
+              }
+              .erte-menu-item-lead svg { display: block; width: 16px; height: 16px; }
+              .erte-menu-item-label { flex: 1; }
+              .erte-plain-menu { min-width: 190px; }
+
+              /* List style picker (numbered + bullet marker grids) */
+              .erte-list-menu { padding: 8px; min-width: 0; }
+              .erte-list-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
+              .erte-list-tile {
+                display: flex; flex-direction: column; justify-content: center; gap: 4px;
+                width: 62px; padding: 8px 8px; border: 1px solid var(--erte-border);
+                background: #fff; border-radius: 8px; cursor: pointer;
+                transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
+              }
+              .erte-list-tile:hover { background: var(--erte-hover-bg); border-color: #d0d0d0; }
+              .erte-list-tile.is-selected {
+                border-color: var(--erte-accent);
+                box-shadow: inset 0 0 0 1px var(--erte-accent);
+                background: rgba(210, 63, 0, 0.06);
+              }
+              .erte-list-row { display: flex; align-items: center; gap: 5px; }
+              .erte-list-marker {
+                flex: 0 0 18px; text-align: right; font-size: 10px; line-height: 1;
+                color: #3c4043; font-family: var(--erte-font);
+              }
+              .erte-list-bar {
+                flex: 1; height: 4px; border-radius: 2px; background: #d5dbe2;
+              }
+              .erte-list-tile.is-selected .erte-list-bar { background: #f0b49a; }
+              .erte-list-custom {
+                display: flex; align-items: center; gap: 6px; margin-top: 8px;
+                padding-top: 8px; border-top: 1px solid var(--erte-border);
+              }
+              .erte-list-custom-input {
+                width: 44px; height: 30px; padding: 0 8px; text-align: center;
+                border: 1px solid var(--erte-border); border-radius: 6px;
+                font-family: var(--erte-font); font-size: 14px;
+              }
+              .erte-list-custom-input:focus { outline: none; border-color: var(--erte-accent); }
+              .erte-list-custom-apply {
+                flex: 1; height: 30px; padding: 0 10px; border: 1px solid var(--erte-border);
+                background: #fff; border-radius: 6px; cursor: pointer;
+                font-family: var(--erte-font); font-size: 12px; font-weight: 500; color: #3c4043;
+                transition: background-color 0.12s ease, border-color 0.12s ease;
+              }
+              .erte-list-custom-apply:hover { background: var(--erte-hover-bg); border-color: #d0d0d0; }
+
+              /* Colour tools (text colour + highlight split buttons) */
+              .erte-color-group { gap: 2px; }
+              .erte-color-wrap { position: relative; }
+              .erte-color-btn { width: 30px; position: relative; }
+              .erte-color-glyph { font-size: 15px; font-weight: 700; line-height: 1; transform: translateY(-2px); }
+              .erte-color-btn svg { transform: translateY(-2px); }
+              .erte-color-bar {
+                position: absolute; left: 6px; right: 6px; bottom: 5px; height: 3px;
+                border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+              }
+              /* "No colour" state: subtle neutral slot (never a colour swatch). */
+              .erte-color-bar.is-transparent {
+                background: #eceff2;
+                box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
+              }
+              .erte-color-menu { left: auto; right: 0; padding: 8px; width: max-content; }
+              .erte-color-remove, .erte-color-custom {
+                display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px;
+                border: none; background: transparent; border-radius: 6px; cursor: pointer;
+                color: var(--erte-text); font-family: var(--erte-font); font-size: 13px;
+              }
+              .erte-color-remove:hover, .erte-color-custom:hover { background: var(--erte-hover-bg); }
+              .erte-color-remove.is-selected { background: var(--erte-active-bg); font-weight: 600; }
+              .erte-color-remove svg { width: 11px; height: 11px; }
+              .erte-color-custom svg { width: 14px; height: 14px; }
+              .erte-color-grid { display: grid; grid-template-columns: repeat(6, 22px); gap: 4px; padding: 8px 2px; }
+              .erte-color-swatch {
+                width: 22px; height: 22px; padding: 0; border: none; border-radius: 4px; cursor: pointer;
+                box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); transition: transform 0.1s ease;
+              }
+              .erte-color-swatch:hover { transform: scale(1.15); }
+              .erte-color-swatch.is-selected,
+              .erte-color-swatch:focus-visible,
+              .erte-color-remove:focus-visible,
+              .erte-color-custom:focus-visible { outline: 2px solid var(--erte-accent); outline-offset: 1px; }
+
+              /* Custom colour picker modal */
+              .erte-picker-backdrop { position: fixed; inset: 0; z-index: 10000; background: rgba(15, 23, 42, 0.18); }
+              .erte-picker {
+                position: absolute; top: 56px; left: 50%; transform: translateX(-50%);
+                width: 400px; max-width: calc(100% - 32px);
+                background: #fff; border: 1px solid var(--erte-border); border-radius: 12px;
+                box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22); padding: 16px;
+                font-family: var(--erte-font); animation: erte-pop 0.14s ease;
+              }
+              @keyframes erte-pop {
+                from { opacity: 0; transform: translateX(-50%) scale(0.97); }
+                to { opacity: 1; transform: translateX(-50%) scale(1); }
+              }
+              .erte-picker-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+              .erte-picker-title { font-size: 14px; font-weight: 600; color: var(--erte-text); }
+              .erte-picker-close {
+                width: 26px; height: 26px; border: none; background: transparent; border-radius: 6px;
+                font-size: 14px; color: var(--erte-icon); cursor: pointer;
+              }
+              .erte-picker-close:hover { background: var(--erte-hover-bg); }
+              .erte-picker-body { display: flex; gap: 12px; }
+              .erte-picker-sv {
+                position: relative; width: 190px; height: 150px; border-radius: 8px;
+                cursor: crosshair; touch-action: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+              }
+              .erte-picker-sv-dot {
+                position: absolute; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%;
+                box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); transform: translate(-50%, -50%); pointer-events: none;
+              }
+              .erte-picker-hue {
+                position: relative; width: 14px; height: 150px; border-radius: 7px; cursor: pointer; touch-action: none;
+                background: linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+              }
+              .erte-picker-hue-thumb {
+                position: absolute; left: -2px; right: -2px; height: 6px; border: 2px solid #fff; border-radius: 4px;
+                box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); transform: translateY(-50%); pointer-events: none;
+              }
+              .erte-picker-fields { display: flex; flex-direction: column; gap: 6px; flex: 1; }
+              .erte-picker-field { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--erte-icon); }
+              .erte-picker-field input {
+                flex: 1; width: 100%; height: 28px; padding: 0 8px;
+                border: 1px solid var(--erte-border); border-radius: 6px;
+                font-size: 13px; font-family: var(--erte-font);
+              }
+              .erte-picker-field input:focus { outline: none; border-color: var(--erte-accent); }
+              .erte-picker-preview { margin-top: auto; height: 32px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
+              .erte-picker-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
+
+              /* Table insert picker (hover grid) */
+              .erte-table-menu { padding: 10px; }
+              .erte-table-grid { display: grid; grid-template-columns: repeat(10, 16px); gap: 3px; }
+              .erte-table-cell {
+                width: 16px; height: 16px; padding: 0; border: none; border-radius: 4px;
+                background: #f1f3f4; box-shadow: inset 0 0 0 1px #e3e6ea; cursor: pointer;
+                transition: background-color 0.08s ease, box-shadow 0.08s ease;
+              }
+              .erte-table-cell.is-on {
+                background: rgba(210, 63, 0, 0.14);
+                box-shadow: inset 0 0 0 1px var(--erte-accent);
+              }
+              .erte-table-label { margin-top: 8px; text-align: center; font-size: 12px; color: #5f6368; }
+
+              /* Floating add row/column buttons beside the hovered table */
+              .erte-table-add {
+                position: absolute; z-index: 20;
+                display: flex; align-items: center; justify-content: center;
+                padding: 0; border: none; border-radius: 7px;
+                background: #eaf1f9; color: #0e4678;
+                font-size: 13px; font-weight: 600; font-family: var(--erte-font); line-height: 1;
+                cursor: pointer; opacity: 0; visibility: hidden;
+                transition:
+                  opacity 0.12s ease, background-color 0.12s ease, color 0.12s ease;
+              }
+              .erte-table-add.is-visible { opacity: 1; visibility: visible; }
+              .erte-table-add:hover { background: #d6e5f4; color: #0b3860; }
+              .erte-table-add:active { background: #0e4678; color: #ffffff; }
+
+              .editor {
+                padding: 24px 28px; min-height: 100%;
+                border: none; outline: none;
+                font-family: var(--erte-font); font-size: 16px; line-height: 1.7; color: var(--erte-text);
+              }
+              .editor a { color: var(--erte-accent); }
+              .editor table { border-collapse: collapse; }
+              /* Semantic block styles. Explicit px sizes + weights so a heading
+                 always renders as a heading (independent of any inherited
+                 font-size), matching modern editors. The block-style tool
+                 strips exported inline font-size/weight so these can apply. */
+              .editor h1 { font-size: 30px; font-weight: 700; line-height: 1.25; margin: 0.5em 0; }
+              .editor h2 { font-size: 25px; font-weight: 700; line-height: 1.28; margin: 0.5em 0; }
+              .editor h3 { font-size: 21px; font-weight: 700; line-height: 1.3; margin: 0.5em 0; }
+              .editor h4 { font-size: 18px; font-weight: 700; line-height: 1.35; margin: 0.55em 0; }
+              .editor h5 { font-size: 16px; font-weight: 700; line-height: 1.4; margin: 0.6em 0; }
+              .editor h6 { font-size: 14px; font-weight: 700; line-height: 1.4; margin: 0.6em 0; text-transform: uppercase; letter-spacing: 0.03em; }
+              .editor p { margin: 0.5em 0; }
+              .editor pre {
+                font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
+                font-size: 13px; line-height: 1.5; white-space: pre-wrap; margin: 0.5em 0;
+              }
+              /* Legal (multi-level) numbering: "1.", "1.1", "1.1.1" via counters.
+                 Inline list-style-type can't express this, so it's attribute-driven. */
+              .editor ol[data-erte-list='legal'] { counter-reset: erte-legal; list-style: none; }
+              .editor ol[data-erte-list='legal'] > li { counter-increment: erte-legal; }
+              .editor ol[data-erte-list='legal'] > li::marker { content: counters(erte-legal, '.') '. '; }
+              /* Custom bullet character (string list-style-type isn't universal). */
+              .editor ul[data-erte-list='custom'] { list-style: none; }
+
+              /* Floating link popover (anchored below the toolbar link button) */
+              .erte-link-popover {
+                position: fixed; z-index: 9000;
+                width: min(420px, calc(100vw - 16px));
+                background: #fff; border: 1px solid var(--erte-border);
+                border-radius: 14px; padding: 5px 6px;
+                box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
+                font-family: var(--erte-font);
+                opacity: 0; transform: translateY(-6px) scale(0.98);
+                transition: opacity 0.16s ease, transform 0.16s ease;
+              }
+              .erte-link-popover.is-open { opacity: 1; transform: translateY(0) scale(1); }
+              .erte-link-row { display: flex; align-items: center; gap: 2px; }
+              .erte-link-input {
+                flex: 1; min-width: 0; height: 34px; padding: 0 10px;
+                border: none; outline: none; background: transparent;
+                color: var(--erte-text); font-family: var(--erte-font); font-size: 14px;
+              }
+              .erte-link-input::placeholder { color: #9aa0a6; }
+              .erte-link-popover.is-invalid .erte-link-input { color: #d93025; }
+              .erte-link-btn {
+                display: inline-flex; align-items: center; justify-content: center;
+                flex: 0 0 auto; width: 32px; height: 32px; padding: 0;
+                border: none; background: transparent; border-radius: 9px;
+                color: var(--erte-icon); cursor: pointer;
+                transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
+              }
+              .erte-link-btn svg { display: block; width: 16px; height: 16px; }
+              .erte-link-btn:hover:not(:disabled) { background: var(--erte-hover-bg); color: var(--erte-icon-hover); }
+              .erte-link-btn:active:not(:disabled) { background: var(--erte-active-bg); }
+              .erte-link-btn:disabled { opacity: 0.35; cursor: default; }
+              .erte-link-btn:focus-visible { outline: 2px solid var(--erte-accent); outline-offset: 1px; }
+              .erte-link-sep { flex: 0 0 auto; width: 1px; height: 20px; margin: 0 4px; background: var(--erte-border); }
+              .erte-link-error { padding: 2px 12px 7px; font-size: 12px; color: #d93025; }
+
+              /* Shared action-button styles (used by the colour picker) */
+              .erte-modal-btn {
+                height: 36px; padding: 0 16px; border-radius: 8px;
+                font-size: 13px; font-weight: 500; cursor: pointer; font-family: var(--erte-font);
+                transition: background-color 0.15s ease, border-color 0.15s ease;
+              }
+              .erte-modal-insert { background: var(--erte-accent); border: 1px solid var(--erte-accent); color: #fff; }
+              .erte-modal-insert:hover { background: var(--erte-accent-hover); border-color: var(--erte-accent-hover); }
+              .erte-modal-cancel { background: #fff; border: 1px solid var(--erte-border); color: #3c4043; }
+              .erte-modal-cancel:hover { background: var(--erte-hover-bg); }
+            </style>
+          </head>
+          <body contenteditable="false">
+            <div class="toolbar" id="toolbar"></div>
+            <div class="editor-scroll" id="editor-scroll">
+              <div class="editor" id="editor" contenteditable="true" spellcheck="true"></div>
+            </div>
+          </body>
+        </html>
+      `);
+    iframeDoc.close();
+    setDoc(iframeDoc);
+  }, []);
+  react.useEffect(() => {
+    if (!doc) return;
+    const editor = doc.getElementById("editor");
+    if (!editor) return;
+    editor.innerHTML = applySpellcheckIgnore(mailContent ?? "", spellcheckIgnoreWords);
+  }, [doc]);
+  react.useEffect(() => {
+    if (!doc || isInternalEdit.current) return;
+    const editor = doc.getElementById("editor");
+    if (!editor) return;
+    const displayContent = applySpellcheckIgnore(mailContent ?? "", spellcheckIgnoreWords);
+    if (editor.innerHTML !== displayContent) {
+      editor.innerHTML = displayContent;
+    }
+  }, [mailContent, resetMailContent]);
+  react.useEffect(() => {
+    if (!doc) return;
+    const editor = doc.getElementById("editor");
+    if (!editor) return;
+    const handleInput = () => {
+      isInternalEdit.current = true;
+      setMailContent(editor.innerHTML);
+      setTimeout(() => {
+        isInternalEdit.current = false;
+      }, 100);
+    };
+    editor.addEventListener("input", handleInput);
+    return () => editor.removeEventListener("input", handleInput);
+  }, [doc]);
+  react.useEffect(() => () => linkPopoverCloseRef.current?.(), []);
+  react.useEffect(() => {
+    if (!doc) return;
+    const editor = doc.getElementById("editor");
+    if (!editor) return;
+    editor.innerHTML = applySpellcheckIgnore(mailContent ?? "", spellcheckIgnoreWords);
+  }, [resetMailContent]);
+  react.useEffect(() => {
+    renderToolbar();
+  }, [doc]);
+  react.useEffect(() => {
+    if (!doc) return;
+    return initTableTools({ doc, onContentChange: propagateContent });
+  }, [doc]);
+  react.useEffect(() => {
+    if (!doc) return;
+    const handler = () => syncToolbarState();
+    doc.addEventListener("selectionchange", handler);
+    return () => doc.removeEventListener("selectionchange", handler);
+  }, [doc]);
+  react.useEffect(() => {
+    if (!doc) return;
+    const closeAll = () => {
+      doc.querySelectorAll(".erte-select-wrap.is-open").forEach((wrap) => {
+        wrap.classList.remove("is-open");
+        wrap.querySelector(".erte-select")?.setAttribute("aria-expanded", "false");
+      });
+    };
+    const onMouseDown = (event) => {
+      const target = event.target;
+      if (!target || !target.closest(".erte-select-wrap")) closeAll();
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") closeAll();
+    };
+    doc.addEventListener("mousedown", onMouseDown);
+    doc.addEventListener("keydown", onKeyDown);
+    return () => {
+      doc.removeEventListener("mousedown", onMouseDown);
+      doc.removeEventListener("keydown", onKeyDown);
+    };
+  }, [doc]);
+  react.useEffect(() => {
+    const win = doc?.defaultView;
+    if (!win) return;
+    const handler = () => updateToolbarRowStarts();
+    win.addEventListener("resize", handler);
+    return () => win.removeEventListener("resize", handler);
+  }, [doc]);
+  react.useEffect(() => () => resizeCleanupRef.current?.(), []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    loading && /* @__PURE__ */ jsxRuntime.jsx(SpinnerLoader, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: "erte-resizable",
+        style: {
+          position: "relative",
+          boxSizing: "border-box",
+          display: "grid",
+          gridTemplateRows: "minmax(0, 1fr) 8px",
+          width: size.width != null ? `${size.width}px` : "100%",
+          height: size.height != null ? `${size.height}px` : modalHeight || "650px",
+          maxWidth: "100%",
+          border: "1px solid #e6e6e6",
+          borderRadius: "10px",
+          background: "#fff",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "iframe",
+            {
+              ref: iframeRef,
+              style: {
+                gridRow: "1",
+                display: "block",
+                width: "100%",
+                height: "100%",
+                border: "none"
+              },
+              title: "iframe-editor"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "erte-resize-handle erte-resize-handle--bottom",
+              role: "separator",
+              "aria-orientation": "horizontal",
+              "aria-label": "Resize editor height",
+              style: {
+                gridRow: "2",
+                position: "relative",
+                cursor: "ns-resize",
+                touchAction: "none"
+              },
+              onPointerDown: startResize({ h: null, v: "bottom" })
+            }
+          ),
+          RESIZE_ZONES.map((zone) => /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "erte-resize-zone",
+              role: "separator",
+              "aria-label": zone.label,
+              style: {
+                position: "absolute",
+                zIndex: zone.edges.h && zone.edges.v ? 7 : 6,
+                cursor: zone.cursor,
+                touchAction: "none",
+                ...zone.placement
+              },
+              onPointerDown: startResize(zone.edges)
+            },
+            zone.key
+          ))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(ErrorToaster, { message: toastErrorMessage, hidden: isErrorToastHidden })
+  ] });
+}
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
+exports.FlowTextEditor = FlowTextEditor;
+exports.cx = cx;
+exports.escapeRegExp = escapeRegExp;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;