@sofereditor/react 0.6.0 → 0.9.0

package/dist/index.js

@@ -1,13 +1,14 @@
 // src/Editor.tsx
 import {
-  useCallback as useCallback7,
-  useEffect as useEffect9,
+  useCallback as useCallback8,
+  useEffect as useEffect10,
   useLayoutEffect as useLayoutEffect5,
   useMemo as useMemo4,
-  useRef as useRef11,
-  useState as useState10
+  useRef as useRef12,
+  useState as useState11
 } from "react";
 import {
+  collapsedSelection as collapsedSelection2,
   deleteBackward,
   deleteForward,
   deleteSelection,
@@ -15,6 +16,8 @@ import {
   insertParagraph,
   insertSlice,
   insertText,
+  isEmbedAdjacentToCaret,
+  isFormulaEmbed as isFormulaEmbed2,
   serializeSelection,
   sliceToText,
   SOFER_MIME as SOFER_MIME2
@@ -297,7 +300,12 @@ function applyDomSelection(root, modelSel) {
 import { SOFER_MIME } from "@sofereditor/core";
 
 // src/htmlToSlice.ts
-import { MAX_LIST_LEVEL } from "@sofereditor/core";
+import { isImageEmbed, MAX_LIST_LEVEL } from "@sofereditor/core";
+
+// src/imageConstraints.ts
+var MAX_INSERT_WIDTH = 600;
+
+// src/htmlToSlice.ts
 function htmlToSlice(html) {
   if (!html || html.trim().length === 0) return null;
   let doc;
@@ -316,8 +324,10 @@ function htmlToSlice(html) {
   }
   if (blocks.length === 0) return null;
   normalizeListLevels(blocks);
-  const temTexto = blocks.some((b) => b.text.trim().length > 0);
-  if (!temTexto) return null;
+  const temConteudo = blocks.some(
+    (b) => b.text.trim().length > 0 || b.delta.some((op) => isImageEmbed(op.insert))
+  );
+  if (!temConteudo) return null;
   const blockLevel = blocks.length > 1 || blocks[0].type !== "paragraph";
   return { blocks, openStart: false, openEnd: false, ...blockLevel ? { blockLevel: true } : {} };
 }
@@ -428,6 +438,7 @@ function walkBlockLevel(container, marks, blocks) {
         break;
       }
       case "img":
+        loose.push(node);
         break;
       case "br":
         loose.push(node);
@@ -620,7 +631,11 @@ function walkInlineNode(node, marks, ops) {
   const el = node;
   const tag = el.tagName.toLowerCase();
   if (IGNORED_TAGS.has(tag) || isNamespacedTag(tag)) return;
-  if (tag === "img") return;
+  if (tag === "img") {
+    const op = imageEmbedFromElement(el);
+    if (op) ops.push(op);
+    return;
+  }
   if (tag === "br") {
     ops.push({ insert: " " });
     return;
@@ -635,6 +650,73 @@ function walkInlineNode(node, marks, ops) {
   }
   for (const child of Array.from(el.childNodes)) walkInlineNode(child, nextMarks, ops);
 }
+var MIN_EMBED_BYTES = 1024;
+function decodedDataUrlByteLength(dataUrl) {
+  const commaIndex = dataUrl.indexOf(",");
+  if (commaIndex === -1) return 0;
+  const meta = dataUrl.slice(0, commaIndex);
+  const payload = dataUrl.slice(commaIndex + 1);
+  if (/;base64$/i.test(meta)) {
+    const padding = payload.endsWith("==") ? 2 : payload.endsWith("=") ? 1 : 0;
+    return Math.max(0, Math.floor(payload.length * 3 / 4) - padding);
+  }
+  try {
+    return decodeURIComponent(payload).length;
+  } catch {
+    return payload.length;
+  }
+}
+function imageEmbedFromElement(el) {
+  const src = el.getAttribute("src");
+  if (!src || !src.startsWith("data:image/")) return null;
+  if (decodedDataUrlByteLength(src) < MIN_EMBED_BYTES) return null;
+  const style = parseStyle(el.getAttribute("style"));
+  const width = readImageDimension(el, "width", style);
+  const height = readImageDimension(el, "height", style);
+  if (width == null || height == null) return null;
+  let w = width;
+  let h = height;
+  if (w > MAX_INSERT_WIDTH) {
+    h = h * MAX_INSERT_WIDTH / w;
+    w = MAX_INSERT_WIDTH;
+  }
+  return { insert: { type: "image", src, width: Math.round(w), height: Math.round(h) } };
+}
+function readImageDimension(el, attr, style) {
+  const raw = el.getAttribute(attr);
+  if (raw && /^\d+(\.\d+)?$/.test(raw.trim())) {
+    const n = Number.parseFloat(raw);
+    if (Number.isFinite(n) && n > 0) return n;
+  }
+  const fromStyle = style[attr];
+  if (fromStyle) {
+    const n = cssLengthToPx(fromStyle);
+    if (n != null) return n;
+  }
+  return void 0;
+}
+function cssLengthToPx(raw) {
+  const v = raw.trim();
+  const m = /^(-?[\d.]+)\s*(px|pt|in|cm|mm)?$/i.exec(v);
+  if (!m) return void 0;
+  const num = Number.parseFloat(m[1]);
+  if (!Number.isFinite(num) || num <= 0) return void 0;
+  const unit = (m[2] ?? "px").toLowerCase();
+  switch (unit) {
+    case "px":
+      return num;
+    case "pt":
+      return num * (96 / 72);
+    case "in":
+      return num * 96;
+    case "cm":
+      return num * (96 / 2.54);
+    case "mm":
+      return num * (96 / 25.4);
+    default:
+      return void 0;
+  }
+}
 function applyTagMarks(tag, marks) {
   switch (tag) {
     case "b":
@@ -902,6 +984,58 @@ function planPaste(cd) {
   return { kind: "none" };
 }
 
+// src/resolvePastedImages.ts
+import { isImageEmbed as isImageEmbed2 } from "@sofereditor/core";
+function sliceHasDataImageEmbeds(slice) {
+  return slice.blocks.some(
+    (b) => b.delta.some((op) => isImageEmbed2(op.insert) && op.insert.src.startsWith("data:image/"))
+  );
+}
+async function resolvePastedImageUploads(slice, upload) {
+  if (!upload) return slice;
+  const blocks = await Promise.all(
+    slice.blocks.map(async (block) => {
+      let changed = false;
+      const delta = await Promise.all(
+        block.delta.map(async (op) => {
+          if (!isImageEmbed2(op.insert) || !op.insert.src.startsWith("data:image/")) return op;
+          try {
+            const file = await dataUrlToFile(op.insert.src);
+            const newSrc = await upload(file);
+            changed = true;
+            return { ...op, insert: { ...op.insert, src: newSrc } };
+          } catch (err) {
+            console.error(
+              "[sofereditor] falha ao subir imagem colada para o storage \u2014 mantendo a imagem embutida (data:) nesta colagem",
+              err
+            );
+            return op;
+          }
+        })
+      );
+      return changed ? { ...block, delta } : block;
+    })
+  );
+  return { ...slice, blocks };
+}
+async function dataUrlToFile(dataUrl) {
+  const blob = await fetch(dataUrl).then((r) => r.blob());
+  const mime = blob.type;
+  return new File([blob], `imagem-colada-${Date.now()}.${extensionForMime(mime)}`, { type: mime });
+}
+var MIME_EXTENSIONS = {
+  "image/png": "png",
+  "image/jpeg": "jpg",
+  "image/jpg": "jpg",
+  "image/gif": "gif",
+  "image/webp": "webp",
+  "image/bmp": "bmp",
+  "image/svg+xml": "svg"
+};
+function extensionForMime(mime) {
+  return MIME_EXTENSIONS[mime.toLowerCase()] ?? "png";
+}
+
 // src/BehindImageSelectAffordance.tsx
 import {
   useCallback,
@@ -1669,15 +1803,376 @@ function ImageCaptionDialog() {
   );
 }
 
-// src/EditorContext.tsx
+// src/FormulaDialog.tsx
+import { useCallback as useCallback2, useEffect as useEffect5, useRef as useRef4, useState as useState5 } from "react";
+
+// src/formulaSnippet.ts
+var PALETA = [
+  {
+    nome: "Estruturas",
+    colunas: 4,
+    itens: [
+      { label: "Fra\xE7\xE3o", snippet: "\\frac{}{}" },
+      { label: "Expoente", snippet: "^{}" },
+      { label: "\xCDndice", snippet: "_{}" },
+      { label: "Raiz", snippet: "\\sqrt{}" },
+      { label: "Raiz n-\xE9sima", snippet: "\\sqrt[{}]{}" },
+      { label: "Somat\xF3rio", snippet: "\\sum_{}^{}" },
+      { label: "Produt\xF3rio", snippet: "\\prod_{}^{}" },
+      { label: "Integral", snippet: "\\int_{}^{}" },
+      { label: "Limite", snippet: "\\lim_{{} \\to {}}" },
+      { label: "Derivada", snippet: "\\frac{d}{d{}}" },
+      {
+        label: "Matriz 2\xD72",
+        snippet: "\\begin{pmatrix} {} & {} \\\\ {} & {} \\end{pmatrix}"
+      },
+      { label: "Sistema", snippet: "\\begin{cases} {} \\\\  \\end{cases}" },
+      { label: "Par\xEAnteses", snippet: "\\left({}\\right)" },
+      { label: "Binomial", snippet: "\\binom{}{}" },
+      { label: "M\xF3dulo", snippet: "\\left|{}\\right|" }
+    ]
+  },
+  {
+    nome: "S\xEDmbolos",
+    colunas: 6,
+    itens: [
+      { label: "\xB1", snippet: "\\pm", titulo: "mais ou menos" },
+      { label: "\xD7", snippet: "\\times", titulo: "multiplica\xE7\xE3o" },
+      { label: "\xF7", snippet: "\\div", titulo: "divis\xE3o" },
+      { label: "\xB7", snippet: "\\cdot", titulo: "multiplica\xE7\xE3o (ponto)" },
+      { label: "\u221E", snippet: "\\infty", titulo: "infinito" },
+      { label: "\xB0", snippet: "^\\circ", titulo: "grau" },
+      { label: "%", snippet: "\\%", titulo: "por cento" },
+      { label: ",", snippet: "{,}", titulo: "v\xEDrgula decimal" }
+    ]
+  },
+  {
+    nome: "Rela\xE7\xF5es",
+    colunas: 6,
+    itens: [
+      { label: "\u2260", snippet: "\\neq", titulo: "diferente de" },
+      { label: "\u2248", snippet: "\\approx", titulo: "aproximadamente" },
+      { label: "\u2261", snippet: "\\equiv", titulo: "id\xEAntico a" },
+      { label: "\u2264", snippet: "\\leq", titulo: "menor ou igual a" },
+      { label: "\u2265", snippet: "\\geq", titulo: "maior ou igual a" },
+      { label: "\u221D", snippet: "\\propto", titulo: "proporcional a" },
+      { label: "\u22A5", snippet: "\\perp", titulo: "perpendicular a" },
+      { label: "\u2225", snippet: "\\parallel", titulo: "paralelo a" },
+      { label: "\u2245", snippet: "\\cong", titulo: "congruente a" },
+      { label: "\u223C", snippet: "\\sim", titulo: "semelhante a" }
+    ]
+  },
+  {
+    nome: "Gregas",
+    colunas: 6,
+    itens: [
+      { label: "\u03B1", snippet: "\\alpha", titulo: "alfa" },
+      { label: "\u03B2", snippet: "\\beta", titulo: "beta" },
+      { label: "\u03B3", snippet: "\\gamma", titulo: "gama" },
+      { label: "\u03B4", snippet: "\\delta", titulo: "delta" },
+      { label: "\u03B5", snippet: "\\varepsilon", titulo: "\xE9psilon" },
+      { label: "\u03B8", snippet: "\\theta", titulo: "teta" },
+      { label: "\u03BB", snippet: "\\lambda", titulo: "lambda" },
+      { label: "\u03BC", snippet: "\\mu", titulo: "mi" },
+      { label: "\u03C0", snippet: "\\pi", titulo: "pi" },
+      { label: "\u03C1", snippet: "\\rho", titulo: "r\xF4" },
+      { label: "\u03C3", snippet: "\\sigma", titulo: "sigma" },
+      { label: "\u03C6", snippet: "\\varphi", titulo: "fi" },
+      { label: "\u03C9", snippet: "\\omega", titulo: "\xF4mega" },
+      { label: "\u0394", snippet: "\\Delta", titulo: "delta mai\xFAsculo" },
+      {
+        label: "\u03A3",
+        snippet: "\\Sigma",
+        titulo: "sigma mai\xFAsculo \u2014 letra grega; para somat\xF3rio use Estruturas"
+      },
+      {
+        label: "\u03A0",
+        snippet: "\\Pi",
+        titulo: "pi mai\xFAsculo \u2014 letra grega; para produt\xF3rio use Estruturas"
+      },
+      { label: "\u03A9", snippet: "\\Omega", titulo: "\xF4mega mai\xFAsculo" },
+      { label: "\u03A6", snippet: "\\Phi", titulo: "fi mai\xFAsculo" }
+    ]
+  },
+  {
+    nome: "Conjuntos",
+    colunas: 6,
+    itens: [
+      { label: "\u2208", snippet: "\\in", titulo: "pertence a" },
+      { label: "\u2209", snippet: "\\notin", titulo: "n\xE3o pertence a" },
+      { label: "\u2282", snippet: "\\subset", titulo: "contido em" },
+      { label: "\u2286", snippet: "\\subseteq", titulo: "contido ou igual a" },
+      { label: "\u222A", snippet: "\\cup", titulo: "uni\xE3o" },
+      { label: "\u2229", snippet: "\\cap", titulo: "interse\xE7\xE3o" },
+      { label: "\u2205", snippet: "\\varnothing", titulo: "conjunto vazio" },
+      { label: "\u2115", snippet: "\\mathbb{N}", titulo: "conjunto dos naturais" },
+      { label: "\u2124", snippet: "\\mathbb{Z}", titulo: "conjunto dos inteiros" },
+      { label: "\u211A", snippet: "\\mathbb{Q}", titulo: "conjunto dos racionais" },
+      { label: "\u211D", snippet: "\\mathbb{R}", titulo: "conjunto dos reais" },
+      { label: "\u2102", snippet: "\\mathbb{C}", titulo: "conjunto dos complexos" },
+      { label: "\u2200", snippet: "\\forall", titulo: "para todo" },
+      { label: "\u2203", snippet: "\\exists", titulo: "existe" },
+      { label: "{ }", snippet: "\\{{}\\}", titulo: "chaves de conjunto" }
+    ]
+  },
+  {
+    nome: "Fun\xE7\xF5es",
+    colunas: 6,
+    itens: [
+      { label: "sen", snippet: "\\operatorname{sen}", titulo: "seno" },
+      { label: "cos", snippet: "\\cos", titulo: "cosseno" },
+      { label: "tg", snippet: "\\operatorname{tg}", titulo: "tangente" },
+      { label: "cotg", snippet: "\\operatorname{cotg}", titulo: "cotangente" },
+      { label: "log", snippet: "\\log_{}", titulo: "logaritmo" },
+      { label: "ln", snippet: "\\ln", titulo: "logaritmo natural" },
+      { label: "exp", snippet: "\\exp", titulo: "exponencial" }
+    ]
+  },
+  {
+    nome: "Setas",
+    colunas: 6,
+    itens: [
+      { label: "\u2192", snippet: "\\to", titulo: "tende a / vai para" },
+      { label: "\u2190", snippet: "\\leftarrow", titulo: "vem de / sentido inverso" },
+      { label: "\u21D2", snippet: "\\Rightarrow", titulo: "implica em" },
+      { label: "\u21D4", snippet: "\\Leftrightarrow", titulo: "se e somente se" },
+      { label: "\u21CC", snippet: "\\rightleftharpoons", titulo: "equil\xEDbrio qu\xEDmico" },
+      { label: "vetor AB", snippet: "\\overrightarrow{}", titulo: "vetor entre dois pontos (AB)" },
+      { label: "vetor", snippet: "\\vec{}", titulo: "vetor (f\xEDsica)" },
+      { label: "\u2220", snippet: "\\angle", titulo: "\xE2ngulo" },
+      { label: "\u25B3", snippet: "\\triangle", titulo: "tri\xE2ngulo" }
+    ]
+  }
+];
+function paraMathlive(snippet) {
+  return snippet.replaceAll("{}", "{#?}");
+}
+function paraMarkup(snippet) {
+  return snippet.replaceAll("{}", "{\u25A1}");
+}
+function conteudoDoBotao(markup, snippet, label) {
+  if (!markup) return { children: label };
+  return { dangerouslySetInnerHTML: { __html: markup(paraMarkup(snippet)) } };
+}
+
+// src/formulaGuarda.ts
+var PLACEHOLDER = "\\placeholder{}";
+var GRUPO_VAZIO = /\{\s*\}/;
+var CELULA_VAZIA = /(?:\\begin\{[a-zA-Z]+\*?\}|&|\\\\)\s*(?:&|\\\\|\\end\{)/;
+function podeInserir(latex, preview) {
+  if (motivoBloqueio(latex, preview) !== null) return false;
+  return latex.trim() !== "" && preview?.ok === true;
+}
+function motivoBloqueio(latex, preview) {
+  if (latex.includes(PLACEHOLDER) || GRUPO_VAZIO.test(latex) || CELULA_VAZIA.test(latex)) {
+    return "Preencha os campos em branco da f\xF3rmula.";
+  }
+  if (preview && !preview.ok) return preview.error ?? null;
+  return null;
+}
+
+// src/FormulaDialog.tsx
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var CIRCUNFLEXO_DE_TECLA_MORTA = /* @__PURE__ */ new Set(["\u02C6", "\u0302"]);
+function FormulaDialog({
+  fontsDirectory
+}) {
+  const { formulaRequest, resolveFormulaRequest } = useEditorContext();
+  const dialogRef = useRef4(null);
+  const hostRef = useRef4(null);
+  const fieldRef = useRef4(null);
+  const [latex, setLatex] = useState5("");
+  const [display, setDisplay] = useState5(false);
+  const [abaAtiva, setAbaAtiva] = useState5(0);
+  useEffect5(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (formulaRequest) {
+      setLatex(formulaRequest.initialLatex);
+      setDisplay(formulaRequest.initialDisplay);
+      setAbaAtiva(0);
+      if (!dialog.open) dialog.showModal();
+    } else if (dialog.open) {
+      dialog.close();
+    }
+  }, [formulaRequest]);
+  const rendererRef = useRef4(null);
+  const mathfieldCtorRef = useRef4(null);
+  const markupRef = useRef4(null);
+  const [preview, setPreview] = useState5(null);
+  const [carregando, setCarregando] = useState5(false);
+  const [erroCarregando, setErroCarregando] = useState5(null);
+  useEffect5(() => {
+    if (!formulaRequest || rendererRef.current) return;
+    setCarregando(true);
+    setErroCarregando(null);
+    void Promise.all([import("@sofereditor/math"), import("mathlive")]).then(([math, mathlive]) => {
+      rendererRef.current = math.renderLatexToSvg;
+      mathfieldCtorRef.current = mathlive.MathfieldElement;
+      markupRef.current = mathlive.convertLatexToMarkup;
+      mathlive.MathfieldElement.soundsDirectory = null;
+      if (fontsDirectory) {
+        mathlive.MathfieldElement.fontsDirectory = fontsDirectory;
+      }
+      setCarregando(false);
+    }).catch(() => {
+      setCarregando(false);
+      setErroCarregando(
+        "N\xE3o foi poss\xEDvel carregar o editor de f\xF3rmulas. Recarregue a p\xE1gina e tente de novo."
+      );
+    });
+  }, [formulaRequest]);
+  useEffect5(() => {
+    const render = rendererRef.current;
+    if (!render || !latex.trim()) {
+      setPreview(null);
+      return;
+    }
+    setPreview(render(latex, display));
+  }, [latex, display, carregando]);
+  const onCircunflexoMorto = useCallback2((e) => {
+    const ev = e;
+    if (!ev.data || !CIRCUNFLEXO_DE_TECLA_MORTA.has(ev.data)) return;
+    ev.preventDefault();
+    ev.stopPropagation();
+    fieldRef.current?.insert("^{#?}", { focus: true });
+  }, []);
+  useEffect5(() => {
+    const Ctor = mathfieldCtorRef.current;
+    const host = hostRef.current;
+    if (!Ctor || !host || !formulaRequest) return;
+    const mf = new Ctor();
+    mf.className = "ed-formula-field";
+    const onInput = () => setLatex(mf.getValue("latex"));
+    mf.addEventListener("input", onInput);
+    mf.addEventListener("beforeinput", onCircunflexoMorto, true);
+    host.appendChild(mf);
+    mf.mathVirtualKeyboardPolicy = "manual";
+    mf.inlineShortcuts = {
+      ...mf.inlineShortcuts,
+      sen: "\\operatorname{sen}",
+      tg: "\\operatorname{tg}",
+      cotg: "\\operatorname{cotg}",
+      // Vírgula decimal. Em modo matemático a vírgula crua é átomo de
+      // pontuação e ganha espaço DEPOIS de si: digitar "3,14" sai impresso
+      // como "3, 14" (medido: 4.4ex contra 4.023ex do agrupado). A paleta
+      // tem um botão `{,}`, mas ninguém clica num botão para uma tecla que
+      // está no teclado — e decimal aparece em toda prova de matemática,
+      // física e química.
+      //
+      // O `after: "digit"` é o que separa os dois usos da vírgula, e foi
+      // verificado no navegador: "3,14" vira `3{,}14` e "f(x,y)" continua
+      // `f\left(x,y\right)`, com a vírgula de lista intacta — que é o
+      // comportamento certo, ali ela É pontuação.
+      ",": { after: "digit", value: "{,}" }
+    };
+    mf.setValue(formulaRequest.initialLatex);
+    setLatex(mf.getValue("latex"));
+    fieldRef.current = mf;
+    queueMicrotask(() => mf.focus());
+    return () => {
+      mf.removeEventListener("input", onInput);
+      mf.removeEventListener("beforeinput", onCircunflexoMorto, true);
+      mf.remove();
+      fieldRef.current = null;
+    };
+  }, [formulaRequest, carregando]);
+  if (!formulaRequest) return null;
+  const markup = markupRef.current;
+  const motivo = motivoBloqueio(latex, preview);
+  const podeSubmeter = podeInserir(latex, preview);
+  const onSubmit = (e) => {
+    e.preventDefault();
+    if (!podeSubmeter) return;
+    resolveFormulaRequest({ latex, display });
+  };
+  const onCancel = () => resolveFormulaRequest(null);
+  const onPaleta = (snippet) => {
+    const mf = fieldRef.current;
+    if (!mf) return;
+    mf.insert(paraMathlive(snippet), { focus: true });
+    setLatex(mf.getValue("latex"));
+  };
+  return /* @__PURE__ */ jsx6(
+    "dialog",
+    {
+      ref: dialogRef,
+      className: "ed-formula-dialog ed-link-dialog",
+      style: DIALOG_CENTER_STYLE,
+      onClose: onCancel,
+      onCancel: (e) => {
+        e.preventDefault();
+        onCancel();
+      },
+      children: /* @__PURE__ */ jsxs6("form", { onSubmit, className: "ed-formula-form", children: [
+        /* @__PURE__ */ jsx6("div", { className: "ed-formula-abas", role: "tablist", children: PALETA.map((cat, i) => /* @__PURE__ */ jsx6(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": i === abaAtiva,
+            className: "ed-formula-aba",
+            onClick: () => setAbaAtiva(i),
+            children: cat.nome
+          },
+          cat.nome
+        )) }),
+        /* @__PURE__ */ jsx6(
+          "div",
+          {
+            className: "ed-formula-paleta",
+            role: "tabpanel",
+            style: { gridTemplateColumns: `repeat(${PALETA[abaAtiva].colunas}, 1fr)` },
+            children: PALETA[abaAtiva].itens.map((p) => /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                className: "ed-formula-paleta-btn",
+                title: p.titulo ?? p.label,
+                "aria-label": p.titulo ?? p.label,
+                onClick: () => onPaleta(p.snippet),
+                ...conteudoDoBotao(markup, p.snippet, p.label)
+              },
+              p.label
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx6("div", { ref: hostRef, className: "ed-formula-host" }),
+        /* @__PURE__ */ jsxs6("label", { className: "ed-formula-display", children: [
+          /* @__PURE__ */ jsx6(
+            "input",
+            {
+              type: "checkbox",
+              checked: display,
+              onChange: (e) => setDisplay(e.target.checked)
+            }
+          ),
+          "F\xF3rmula em bloco (centralizada, limites acima e abaixo)"
+        ] }),
+        /* @__PURE__ */ jsx6("div", { className: "ed-formula-preview", "aria-live": "polite", children: carregando ? /* @__PURE__ */ jsx6("span", { className: "ed-formula-vazio", children: "Carregando o editor\u2026" }) : erroCarregando ? /* @__PURE__ */ jsx6("span", { className: "ed-formula-erro", role: "alert", children: erroCarregando }) : motivo ? /* @__PURE__ */ jsx6("span", { className: "ed-formula-erro", role: "alert", children: motivo }) : null }),
+        /* @__PURE__ */ jsxs6("div", { className: "ed-formula-acoes", children: [
+          /* @__PURE__ */ jsx6("button", { type: "button", onClick: onCancel, children: "Cancelar" }),
+          /* @__PURE__ */ jsx6("button", { type: "submit", disabled: !podeSubmeter, children: "Inserir" })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/EditorContext.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var EditorContext = createContext(null);
-function EditorProvider({ editor, children }) {
-  return /* @__PURE__ */ jsxs6(EditorContext.Provider, { value: editor, children: [
+function EditorProvider({
+  editor,
+  children,
+  mathliveFontsDirectory
+}) {
+  return /* @__PURE__ */ jsxs7(EditorContext.Provider, { value: editor, children: [
     children,
-    /* @__PURE__ */ jsx6(LinkDialog, {}),
-    /* @__PURE__ */ jsx6(PageConfigDialog, {}),
-    /* @__PURE__ */ jsx6(ImageCaptionDialog, {})
+    /* @__PURE__ */ jsx7(LinkDialog, {}),
+    /* @__PURE__ */ jsx7(PageConfigDialog, {}),
+    /* @__PURE__ */ jsx7(ImageCaptionDialog, {}),
+    /* @__PURE__ */ jsx7(FormulaDialog, { fontsDirectory: mathliveFontsDirectory })
   ] });
 }
 function useEditorContext() {
@@ -1690,13 +2185,13 @@ function useEditorContext() {
 
 // src/ImageResizeOverlay.tsx
 import {
-  useCallback as useCallback2,
-  useEffect as useEffect5,
+  useCallback as useCallback3,
+  useEffect as useEffect6,
   useLayoutEffect as useLayoutEffect2,
-  useRef as useRef4,
-  useState as useState5
+  useRef as useRef5,
+  useState as useState6
 } from "react";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function ImageResizeOverlay({
   rootRef,
   blockIndex,
@@ -1707,10 +2202,10 @@ function ImageResizeOverlay({
   onCommitMove,
   onReanchor
 }) {
-  const [rect, setRect] = useState5(null);
-  const [isMoving, setIsMoving] = useState5(false);
-  const imgRef = useRef4(null);
-  const locateImage = useCallback2(() => {
+  const [rect, setRect] = useState6(null);
+  const [isMoving, setIsMoving] = useState6(false);
+  const imgRef = useRef5(null);
+  const locateImage = useCallback3(() => {
     const root = rootRef.current;
     if (!root) return null;
     let container = null;
@@ -1728,7 +2223,7 @@ function ImageResizeOverlay({
       `img[data-embed="image"][data-embed-offset="${localOffset}"]`
     );
   }, [rootRef, blockIndex, offset, cellIndex]);
-  const measure = useCallback2(() => {
+  const measure = useCallback3(() => {
     const img = locateImage();
     if (!img) {
       setRect((prev) => prev === null ? prev : null);
@@ -1779,7 +2274,7 @@ function ImageResizeOverlay({
     embed.offsetX,
     embed.offsetY
   ]);
-  useEffect5(() => {
+  useEffect6(() => {
     const root = rootRef.current;
     if (!root) return;
     const onScroll = () => measure();
@@ -1790,7 +2285,7 @@ function ImageResizeOverlay({
       root.removeEventListener("scroll", onScroll);
     };
   }, [measure, rootRef]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (typeof ResizeObserver === "undefined") return;
     const img = locateImage();
     const root = rootRef.current;
@@ -1803,7 +2298,7 @@ function ImageResizeOverlay({
   if (!rect) return null;
   const layout = embed.layout ?? "inline";
   const movable = layout !== "inline" && onCommitMove !== void 0;
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className: "ed-image-overlay",
@@ -1814,7 +2309,7 @@ function ImageResizeOverlay({
         // follows the cursor, so the image stays visible while it crosses the
         // page boundary (the real, clipped figure is hidden during the drag).
         // Inline styles only — the package does not ship CSS.
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "img",
           {
             src: embed.src,
@@ -1832,7 +2327,7 @@ function ImageResizeOverlay({
             }
           }
         ),
-        movable && /* @__PURE__ */ jsx7(
+        movable && /* @__PURE__ */ jsx8(
           MoveHandle,
           {
             layout,
@@ -1850,7 +2345,7 @@ function ImageResizeOverlay({
             onMoveEnd: () => setIsMoving(false)
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           Handle,
           {
             corner: "nw",
@@ -1861,7 +2356,7 @@ function ImageResizeOverlay({
             onLiveChange: measure
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           Handle,
           {
             corner: "ne",
@@ -1872,7 +2367,7 @@ function ImageResizeOverlay({
             onLiveChange: measure
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           Handle,
           {
             corner: "sw",
@@ -1883,7 +2378,7 @@ function ImageResizeOverlay({
             onLiveChange: measure
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           Handle,
           {
             corner: "se",
@@ -1913,7 +2408,7 @@ function MoveHandle({
   onMoveStart,
   onMoveEnd
 }) {
-  const dragRef = useRef4(null);
+  const dragRef = useRef5(null);
   const onPointerDown = (e) => {
     if (e.button !== 0) return;
     if (!imgRef.current) return;
@@ -2063,7 +2558,7 @@ function MoveHandle({
       newOffsetY
     );
   };
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       className: "ed-image-move",
@@ -2083,7 +2578,7 @@ function Handle({
   onCommit,
   onLiveChange
 }) {
-  const dragRef = useRef4(null);
+  const dragRef = useRef5(null);
   const onPointerDown = (e) => {
     if (e.button !== 0) return;
     if (!imgRef.current) return;
@@ -2126,7 +2621,7 @@ function Handle({
     }
     onCommit(Math.round(d.liveW), Math.round(d.liveH));
   };
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       className: `ed-image-handle ${corner}`,
@@ -2140,15 +2635,15 @@ function Handle({
 
 // src/RemoteCursorsOverlay.tsx
 import {
-  useCallback as useCallback3,
-  useEffect as useEffect6,
-  useRef as useRef5,
-  useState as useState6
+  useCallback as useCallback4,
+  useEffect as useEffect7,
+  useRef as useRef6,
+  useState as useState7
 } from "react";
 import {
   decodeSelection
 } from "@sofereditor/core";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 var DEFAULT_COLOR = "#3b82f6";
 function RemoteCursorsOverlay({
   rootRef,
@@ -2156,9 +2651,9 @@ function RemoteCursorsOverlay({
   awareness,
   revision
 }) {
-  const [views, setViews] = useState6([]);
-  const rafRef = useRef5(null);
-  const measure = useCallback3(() => {
+  const [views, setViews] = useState7([]);
+  const rafRef = useRef6(null);
+  const measure = useCallback4(() => {
     const root = rootRef.current;
     if (!root) {
       setViews((prev) => prev.length === 0 ? prev : []);
@@ -2223,7 +2718,7 @@ function RemoteCursorsOverlay({
     });
     setViews(out);
   }, [rootRef, doc, awareness]);
-  const scheduleMeasure = useCallback3(() => {
+  const scheduleMeasure = useCallback4(() => {
     if (rafRef.current != null) return;
     const raf = typeof requestAnimationFrame === "function" ? requestAnimationFrame : (cb) => setTimeout(() => cb(0), 16);
     rafRef.current = raf(() => {
@@ -2231,16 +2726,16 @@ function RemoteCursorsOverlay({
       measure();
     });
   }, [measure]);
-  useEffect6(() => {
+  useEffect7(() => {
     const onChange = () => scheduleMeasure();
     awareness.on("change", onChange);
     scheduleMeasure();
     return () => awareness.off("change", onChange);
   }, [awareness, scheduleMeasure]);
-  useEffect6(() => {
+  useEffect7(() => {
     scheduleMeasure();
   }, [revision, scheduleMeasure]);
-  useEffect6(() => {
+  useEffect7(() => {
     const root = rootRef.current;
     if (!root) return;
     const onScroll = () => scheduleMeasure();
@@ -2262,8 +2757,8 @@ function RemoteCursorsOverlay({
     pointerEvents: "none",
     zIndex: 6
   };
-  return /* @__PURE__ */ jsx8("div", { className: "ed-remote-cursors", "aria-hidden": true, style: layer, children: views.map((v) => /* @__PURE__ */ jsxs8("div", { children: [
-    v.selection.map((r, i) => /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9("div", { className: "ed-remote-cursors", "aria-hidden": true, style: layer, children: views.map((v) => /* @__PURE__ */ jsxs9("div", { children: [
+    v.selection.map((r, i) => /* @__PURE__ */ jsx9(
       "div",
       {
         style: {
@@ -2279,7 +2774,7 @@ function RemoteCursorsOverlay({
       },
       i
     )),
-    v.caret && /* @__PURE__ */ jsx8(
+    v.caret && /* @__PURE__ */ jsx9(
       "div",
       {
         style: {
@@ -2290,7 +2785,7 @@ function RemoteCursorsOverlay({
           width: 2,
           background: v.color
         },
-        children: /* @__PURE__ */ jsx8(
+        children: /* @__PURE__ */ jsx9(
           "span",
           {
             style: {
@@ -2316,10 +2811,11 @@ function RemoteCursorsOverlay({
 }
 
 // src/NodeView.tsx
-import { useMemo as useMemo2, useRef as useRef7 } from "react";
+import { useMemo as useMemo2, useRef as useRef8 } from "react";
 import {
   answerLineStyle,
   cellBorderStyle,
+  normalizarLarguras as normalizarLarguras2,
   tableRectSelection
 } from "@sofereditor/core";
 
@@ -2327,13 +2823,13 @@ import {
 import { Fragment as Fragment3, memo } from "react";
 import {
   BLANK_STYLE,
-  isImageEmbed,
+  isImageEmbed as isImageEmbed3,
   splitUnderscoreRuns
 } from "@sofereditor/core";
-import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 function renderInline(delta, keyPrefix) {
   if (delta.length === 0 || delta.length === 1 && typeof delta[0].insert === "string" && delta[0].insert === "") {
-    return /* @__PURE__ */ jsx9("br", { "data-empty": "true" });
+    return /* @__PURE__ */ jsx10("br", { "data-empty": "true" });
   }
   let offset = 0;
   const wrapAnchors = [];
@@ -2343,18 +2839,18 @@ function renderInline(delta, keyPrefix) {
       const text = op.insert;
       if (text.length === 0) continue;
       const key = `${keyPrefix}-${offset}`;
-      body.push(/* @__PURE__ */ jsx9(Fragment3, { children: wrap(text, op.attributes) }, key));
+      body.push(/* @__PURE__ */ jsx10(Fragment3, { children: wrap(text, op.attributes) }, key));
       offset += text.length;
-    } else if (isImageEmbed(op.insert)) {
+    } else if (isImageEmbed3(op.insert)) {
       const key = `${keyPrefix}-${offset}`;
       const layout = op.insert.layout ?? "inline";
       const commentMarkId = op.attributes?.comment?.markId;
       if (layout === "wrap-left" || layout === "wrap-right") {
         wrapAnchors.push(
-          /* @__PURE__ */ jsx9(ImageEmbedView, { embed: op.insert, offset, wrapAnchor: true }, `${key}-anchor`)
+          /* @__PURE__ */ jsx10(ImageEmbedView, { embed: op.insert, offset, wrapAnchor: true }, `${key}-anchor`)
         );
         body.push(
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             "span",
             {
               "data-embed-phantom": "true",
@@ -2366,10 +2862,10 @@ function renderInline(delta, keyPrefix) {
           )
         );
       } else {
-        const imgNode = /* @__PURE__ */ jsx9(ImageEmbedView, { embed: op.insert, offset }, key);
+        const imgNode = /* @__PURE__ */ jsx10(ImageEmbedView, { embed: op.insert, offset }, key);
         if (commentMarkId) {
           body.push(
-            /* @__PURE__ */ jsx9("span", { "data-comment-id": commentMarkId, className: "ed-comment", children: imgNode }, `${key}-cmt`)
+            /* @__PURE__ */ jsx10("span", { "data-comment-id": commentMarkId, className: "ed-comment", children: imgNode }, `${key}-cmt`)
           );
         } else {
           body.push(imgNode);
@@ -2380,7 +2876,7 @@ function renderInline(delta, keyPrefix) {
       offset += 1;
     }
   }
-  if (wrapAnchors.length === 0 && body.length === 0) return /* @__PURE__ */ jsx9("br", { "data-empty": "true" });
+  if (wrapAnchors.length === 0 && body.length === 0) return /* @__PURE__ */ jsx10("br", { "data-empty": "true" });
   return [...wrapAnchors, ...body];
 }
 var PHANTOM_STYLE = {
@@ -2455,7 +2951,9 @@ function ImageEmbedViewImpl({
         marginRight: align === "right" ? 0 : "auto"
       } : {
         display: "inline-block",
-        verticalAlign: "text-bottom",
+        // Fórmula inline traz o deslocamento de base que o MathJax mediu;
+        // sem ele a fórmula flutua no topo da linha em vez de sentar nela.
+        verticalAlign: embed.formula?.vAlign ?? "text-bottom",
         width: embed.width
       };
       break;
@@ -2465,7 +2963,7 @@ function ImageEmbedViewImpl({
     height: embed.height,
     display: "block"
   };
-  const img = /* @__PURE__ */ jsx9(
+  const img = /* @__PURE__ */ jsx10(
     "img",
     {
       src: embed.src,
@@ -2485,7 +2983,7 @@ function ImageEmbedViewImpl({
     }
   );
   const captionAlign = embed.captionAlign ?? "center";
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "figure",
     {
       className: "ed-figure",
@@ -2495,7 +2993,7 @@ function ImageEmbedViewImpl({
       style: outerStyle,
       children: [
         img,
-        hasCaption && /* @__PURE__ */ jsx9(
+        hasCaption && /* @__PURE__ */ jsx10(
           "figcaption",
           {
             className: "ed-figcaption",
@@ -2512,26 +3010,26 @@ function decorateBlanks(text) {
   const segs = splitUnderscoreRuns(text);
   if (segs.length === 1 && !segs[0].blank) return text;
   return segs.map(
-    (s, i) => s.blank ? /* @__PURE__ */ jsx9("span", { "data-blank": "true", style: BLANK_STYLE, children: s.text }, i) : /* @__PURE__ */ jsx9(Fragment3, { children: s.text }, i)
+    (s, i) => s.blank ? /* @__PURE__ */ jsx10("span", { "data-blank": "true", style: BLANK_STYLE, children: s.text }, i) : /* @__PURE__ */ jsx10(Fragment3, { children: s.text }, i)
   );
 }
 function wrap(text, attrs) {
   let node = decorateBlanks(text);
   if (!attrs) return node;
-  if (attrs.bold) node = /* @__PURE__ */ jsx9("strong", { children: node });
-  if (attrs.italic) node = /* @__PURE__ */ jsx9("em", { children: node });
-  if (attrs.underline) node = /* @__PURE__ */ jsx9("u", { children: node });
-  if (attrs.strike) node = /* @__PURE__ */ jsx9("s", { children: node });
+  if (attrs.bold) node = /* @__PURE__ */ jsx10("strong", { children: node });
+  if (attrs.italic) node = /* @__PURE__ */ jsx10("em", { children: node });
+  if (attrs.underline) node = /* @__PURE__ */ jsx10("u", { children: node });
+  if (attrs.strike) node = /* @__PURE__ */ jsx10("s", { children: node });
   const styleParts = {};
   if (attrs.color) styleParts.color = attrs.color;
   if (attrs.highlight) styleParts.backgroundColor = attrs.highlight;
   if (attrs.fontFamily) styleParts.fontFamily = attrs.fontFamily;
   if (attrs.fontSize) styleParts.fontSize = attrs.fontSize;
   if (Object.keys(styleParts).length > 0) {
-    node = /* @__PURE__ */ jsx9("span", { style: styleParts, children: node });
+    node = /* @__PURE__ */ jsx10("span", { style: styleParts, children: node });
   }
   if (attrs.link?.href) {
-    node = /* @__PURE__ */ jsx9(
+    node = /* @__PURE__ */ jsx10(
       "a",
       {
         href: attrs.link.href,
@@ -2550,7 +3048,7 @@ function wrap(text, attrs) {
     );
   }
   if (attrs.comment?.markId) {
-    node = /* @__PURE__ */ jsx9("span", { "data-comment-id": attrs.comment.markId, className: "ed-comment", children: node });
+    node = /* @__PURE__ */ jsx10("span", { "data-comment-id": attrs.comment.markId, className: "ed-comment", children: node });
   }
   return node;
 }
@@ -2595,21 +3093,30 @@ function sliceDelta(delta, start, end) {
 
 // src/TableResizeOverlay.tsx
 import {
-  useCallback as useCallback4,
-  useEffect as useEffect7,
+  useCallback as useCallback5,
+  useEffect as useEffect8,
   useLayoutEffect as useLayoutEffect3,
-  useRef as useRef6,
-  useState as useState7
+  useRef as useRef7,
+  useState as useState8
 } from "react";
-import { Fragment as Fragment4, jsx as jsx10 } from "react/jsx-runtime";
-function TableResizeOverlay({ tableRef, blockIndex, cols }) {
+import { MIN_LINHA_PX, normalizarLarguras } from "@sofereditor/core";
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function deltaPctDoArrasto(dxPx, larguraTabelaPx) {
+  if (!(larguraTabelaPx > 0)) return 0;
+  return dxPx / larguraTabelaPx * 100;
+}
+function distribuirAltura(base, deltaPx) {
+  if (base.length === 0) return base;
+  const fatia = deltaPx / base.length;
+  return base.map((h) => Math.max(MIN_LINHA_PX, Math.round(h + fatia)));
+}
+function TableResizeOverlay({ tableRef, blockIndex, cols, rows }) {
   const editor = useEditorContext();
-  const [positions, setPositions] = useState7(null);
-  const [layout, setLayout] = useState7(null);
-  const draggingRef = useRef6(null);
-  const measure = useCallback4(() => {
+  const [layout, setLayout] = useState8(null);
+  const arrastoRef = useRef7(null);
+  const measureNow = useCallback5(() => {
     const table = tableRef.current;
-    if (!table) return;
+    if (!table) return null;
     const tableRect = table.getBoundingClientRect();
     const cgCols = table.querySelectorAll("colgroup > col");
     let rights = [];
@@ -2632,55 +3139,160 @@ function TableResizeOverlay({ tableRef, blockIndex, cols }) {
       });
     }
     if (rights.length !== cols) {
-      setLayout(null);
-      return;
+      return null;
     }
-    setLayout({ rights, height: tableRect.height });
-  }, [cols, tableRef]);
+    const trs = table.querySelectorAll("tbody > tr");
+    const bottoms = [];
+    let accY = 0;
+    trs.forEach((tr) => {
+      accY += tr.getBoundingClientRect().height;
+      bottoms.push(accY);
+    });
+    return {
+      rights,
+      bottoms: trs.length === rows ? bottoms : [],
+      width: tableRect.width,
+      height: tableRect.height
+    };
+  }, [cols, rows, tableRef]);
+  const measure = useCallback5(() => {
+    setLayout(measureNow());
+  }, [measureNow]);
   useLayoutEffect3(() => {
     measure();
   }, [measure]);
-  useEffect7(() => {
+  useEffect8(() => {
     const table = tableRef.current;
     if (!table) return;
     const ro = new ResizeObserver(() => measure());
     ro.observe(table);
     return () => ro.disconnect();
   }, [measure, tableRef]);
-  const onPointerDown = useCallback4(
-    (col) => (e) => {
+  const onPointerUp = useCallback5(
+    (e) => {
+      arrastoRef.current = null;
+      measure();
+      try {
+        e.currentTarget.releasePointerCapture(e.pointerId);
+      } catch {
+      }
+    },
+    [measure]
+  );
+  const onPointerMove = useCallback5(
+    (e) => {
+      const d = arrastoRef.current;
+      if (!d) return;
+      switch (d.tipo) {
+        case "coluna": {
+          const dPct = deltaPctDoArrasto(e.clientX - d.startX, d.tableWidthPx);
+          editor.setColumnBoundary(blockIndex, d.boundary, dPct, d.baseWidths);
+          break;
+        }
+        case "larguraTotal": {
+          const dPct = deltaPctDoArrasto(e.clientX - d.startX, d.utilPx);
+          editor.setTableWidth(blockIndex, d.baseWidthPct + dPct);
+          break;
+        }
+        case "linha": {
+          editor.setRowHeight(blockIndex, d.row, d.baseHeightPx + (e.clientY - d.startY));
+          break;
+        }
+        case "alturaTotal": {
+          editor.setRowHeights(blockIndex, distribuirAltura(d.baseHeights, e.clientY - d.startY));
+          break;
+        }
+        case "canto": {
+          const dPct = deltaPctDoArrasto(e.clientX - d.startX, d.utilPx);
+          editor.setTableWidth(blockIndex, d.baseWidthPct + dPct);
+          editor.setRowHeights(blockIndex, distribuirAltura(d.baseHeights, e.clientY - d.startY));
+          break;
+        }
+      }
+    },
+    [blockIndex, editor]
+  );
+  const containerWidthPxOf = useCallback5((table, tableWidthPx) => {
+    return table.parentElement?.getBoundingClientRect().width || tableWidthPx;
+  }, []);
+  const onColumnPointerDown = useCallback5(
+    (boundary) => (e) => {
       e.preventDefault();
       e.stopPropagation();
       const table = tableRef.current;
       if (!table) return;
-      const cgCols = table.querySelectorAll("colgroup > col");
-      const startWidth = cgCols[col]?.getBoundingClientRect().width ?? 100;
-      draggingRef.current = { col, startX: e.clientX, startWidth };
-      setPositions({ x: e.clientX, height: layout?.height ?? 0 });
+      const tableWidthPx = table.getBoundingClientRect().width || 1;
+      const attrs = editor.doc.getBlockAttrs(blockIndex);
+      const baseWidths = normalizarLarguras(attrs.colWidths, cols);
+      arrastoRef.current = { tipo: "coluna", boundary, startX: e.clientX, baseWidths, tableWidthPx };
       e.currentTarget.setPointerCapture(e.pointerId);
     },
-    [layout, tableRef]
+    [tableRef, editor, blockIndex, cols]
   );
-  const onPointerMove = useCallback4(
+  const onTableWidthPointerDown = useCallback5(
     (e) => {
-      const d = draggingRef.current;
-      if (!d) return;
-      const dx = e.clientX - d.startX;
-      const next = Math.max(40, d.startWidth + dx);
-      editor.setColumnWidth(blockIndex, d.col, next);
+      e.preventDefault();
+      e.stopPropagation();
+      const table = tableRef.current;
+      if (!table) return;
+      const tableWidthPx = table.getBoundingClientRect().width || 1;
+      const utilPx = containerWidthPxOf(table, tableWidthPx);
+      const attrs = editor.doc.getBlockAttrs(blockIndex);
+      const baseWidthPct = typeof attrs.tableWidth === "number" ? attrs.tableWidth : 100;
+      arrastoRef.current = { tipo: "larguraTotal", startX: e.clientX, baseWidthPct, utilPx };
+      e.currentTarget.setPointerCapture(e.pointerId);
     },
-    [blockIndex, editor]
+    [tableRef, editor, blockIndex, containerWidthPxOf]
+  );
+  const heightsFromBottoms = (bottoms) => bottoms.map((b, i) => b - (i === 0 ? 0 : bottoms[i - 1]));
+  const onRowPointerDown = useCallback5(
+    (row) => (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const m = measureNow();
+      if (!m || m.bottoms.length === 0) return;
+      const baseHeightPx = m.bottoms[row] - (row === 0 ? 0 : m.bottoms[row - 1]);
+      arrastoRef.current = { tipo: "linha", row, startY: e.clientY, baseHeightPx };
+      e.currentTarget.setPointerCapture(e.pointerId);
+    },
+    [measureNow]
+  );
+  const onTableHeightPointerDown = useCallback5(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const m = measureNow();
+      if (!m || m.bottoms.length === 0) return;
+      arrastoRef.current = { tipo: "alturaTotal", startY: e.clientY, baseHeights: heightsFromBottoms(m.bottoms) };
+      e.currentTarget.setPointerCapture(e.pointerId);
+    },
+    [measureNow]
+  );
+  const onCornerPointerDown = useCallback5(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const table = tableRef.current;
+      const m = measureNow();
+      if (!table || !m) return;
+      const tableWidthPx = table.getBoundingClientRect().width || 1;
+      const utilPx = containerWidthPxOf(table, tableWidthPx);
+      const attrs = editor.doc.getBlockAttrs(blockIndex);
+      const baseWidthPct = typeof attrs.tableWidth === "number" ? attrs.tableWidth : 100;
+      arrastoRef.current = {
+        tipo: "canto",
+        startX: e.clientX,
+        startY: e.clientY,
+        baseWidthPct,
+        utilPx,
+        baseHeights: heightsFromBottoms(m.bottoms)
+      };
+      e.currentTarget.setPointerCapture(e.pointerId);
+    },
+    [tableRef, editor, blockIndex, measureNow, containerWidthPxOf]
   );
-  const onPointerUp = useCallback4((e) => {
-    draggingRef.current = null;
-    setPositions(null);
-    try {
-      e.currentTarget.releasePointerCapture(e.pointerId);
-    } catch {
-    }
-  }, []);
   if (!layout) return null;
-  const handleStyle = (x) => ({
+  const colHandleStyle = (x) => ({
     position: "absolute",
     top: 0,
     left: `${x - 3}px`,
@@ -2689,28 +3301,104 @@ function TableResizeOverlay({ tableRef, blockIndex, cols }) {
     cursor: "col-resize",
     zIndex: 5
   });
-  void positions;
-  return /* @__PURE__ */ jsx10(Fragment4, { children: layout.rights.map((x, c) => /* @__PURE__ */ jsx10(
-    "div",
-    {
-      contentEditable: false,
-      className: "ed-col-resize-handle",
-      style: handleStyle(x),
-      onPointerDown: onPointerDown(c),
-      onPointerMove,
-      onPointerUp,
-      "aria-label": `Redimensionar coluna ${c + 1}`,
-      role: "separator"
-    },
-    c
-  )) });
+  const rowHandleStyle = (y) => ({
+    position: "absolute",
+    left: 0,
+    top: `${y - 3}px`,
+    width: `${layout.width}px`,
+    height: "6px",
+    cursor: "row-resize",
+    zIndex: 5
+  });
+  const cornerHandleStyle = {
+    position: "absolute",
+    left: `${layout.width - 5}px`,
+    top: `${layout.height - 5}px`,
+    width: "10px",
+    height: "10px",
+    cursor: "nwse-resize",
+    zIndex: 6
+  };
+  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    layout.rights.map(
+      (x, c) => c < cols - 1 ? /* @__PURE__ */ jsx11(
+        "div",
+        {
+          contentEditable: false,
+          className: "ed-col-resize-handle",
+          style: colHandleStyle(x),
+          onPointerDown: onColumnPointerDown(c),
+          onPointerMove,
+          onPointerUp,
+          "aria-label": `Redimensionar coluna ${c + 1}`,
+          role: "separator"
+        },
+        `col-${c}`
+      ) : /* @__PURE__ */ jsx11(
+        "div",
+        {
+          contentEditable: false,
+          className: "ed-col-resize-handle",
+          style: colHandleStyle(x),
+          onPointerDown: onTableWidthPointerDown,
+          onPointerMove,
+          onPointerUp,
+          "aria-label": "Largura da tabela",
+          role: "separator"
+        },
+        "col-total"
+      )
+    ),
+    layout.bottoms.map(
+      (y, r) => r < rows - 1 ? /* @__PURE__ */ jsx11(
+        "div",
+        {
+          contentEditable: false,
+          className: "ed-row-resize-handle",
+          style: rowHandleStyle(y),
+          onPointerDown: onRowPointerDown(r),
+          onPointerMove,
+          onPointerUp,
+          "aria-label": `Redimensionar linha ${r + 1}`,
+          role: "separator"
+        },
+        `row-${r}`
+      ) : /* @__PURE__ */ jsx11(
+        "div",
+        {
+          contentEditable: false,
+          className: "ed-row-resize-handle",
+          style: rowHandleStyle(y),
+          onPointerDown: onTableHeightPointerDown,
+          onPointerMove,
+          onPointerUp,
+          "aria-label": "Altura da tabela",
+          role: "separator"
+        },
+        "row-total"
+      )
+    ),
+    /* @__PURE__ */ jsx11(
+      "div",
+      {
+        contentEditable: false,
+        className: "ed-table-corner-handle",
+        style: cornerHandleStyle,
+        onPointerDown: onCornerPointerDown,
+        onPointerMove,
+        onPointerUp,
+        "aria-label": "Redimensionar tabela",
+        role: "separator"
+      }
+    )
+  ] });
 }
 
 // src/NodeView.tsx
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 function NodeView({ block, index, children, fragment, tableFragment }) {
   if (block.type === "table") {
-    return /* @__PURE__ */ jsx11(TableView, { block, index, tableFragment });
+    return /* @__PURE__ */ jsx12(TableView, { block, index, tableFragment });
   }
   const inline = fragment ? renderInline(sliceDelta(block.delta, fragment.start, fragment.end), index) : renderInline(block.delta, index);
   const common = commonBlockProps(block.attrs, index, block.type, fragment);
@@ -2718,7 +3406,7 @@ function NodeView({ block, index, children, fragment, tableFragment }) {
     case "heading": {
       const level = clampLevel2(block.attrs.level);
       const Tag = `h${level}`;
-      return /* @__PURE__ */ jsx11(
+      return /* @__PURE__ */ jsx12(
         Tag,
         {
           ...common,
@@ -2728,7 +3416,7 @@ function NodeView({ block, index, children, fragment, tableFragment }) {
       );
     }
     case "blockquote":
-      return /* @__PURE__ */ jsx11(
+      return /* @__PURE__ */ jsx12(
         "blockquote",
         {
           ...common,
@@ -2737,18 +3425,18 @@ function NodeView({ block, index, children, fragment, tableFragment }) {
         }
       );
     case "codeBlock":
-      return /* @__PURE__ */ jsx11(
+      return /* @__PURE__ */ jsx12(
         "pre",
         {
           ...common,
           "data-language": block.attrs.language ?? void 0,
           className: `ed-block ed-codeblock${alignClass(block.attrs.align)}`,
-          children: /* @__PURE__ */ jsx11("code", { children: inline })
+          children: /* @__PURE__ */ jsx12("code", { children: inline })
         }
       );
     case "listItem": {
       const level = clampListLevel(block.attrs.listLevel);
-      return /* @__PURE__ */ jsxs10(
+      return /* @__PURE__ */ jsxs12(
         "li",
         {
           ...common,
@@ -2764,7 +3452,7 @@ function NodeView({ block, index, children, fragment, tableFragment }) {
     }
     case "paragraph":
     default:
-      return /* @__PURE__ */ jsx11(
+      return /* @__PURE__ */ jsx12(
         "div",
         {
           ...common,
@@ -2815,8 +3503,10 @@ function TableView({ block, index, tableFragment }) {
   const rows = clampPositive(block.attrs.rows);
   const cols = clampPositive(block.attrs.cols);
   const cells = block.cells ?? [];
-  const widths = readColWidths(block.attrs.colWidths, cols);
-  const tableRef = useRef7(null);
+  const widths = normalizarLarguras2(block.attrs.colWidths, cols);
+  const tableWidth = block.attrs.tableWidth;
+  const rowHeights = block.attrs.rowHeights;
+  const tableRef = useRef8(null);
   const rowStart = tableFragment?.rowStart ?? 0;
   const rowEnd = tableFragment?.rowEnd ?? rows;
   const isFirstFragment = !tableFragment || tableFragment.index === 0;
@@ -2826,69 +3516,69 @@ function TableView({ block, index, tableFragment }) {
     if (editor.selection.focus.blockIndex !== index) return null;
     return tableRectSelection(editor.doc, editor.selection);
   }, [editor.doc, editor.selection, index]);
-  return /* @__PURE__ */ jsxs10("div", { className: "ed-table-wrap", children: [
-    /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs12("div", { className: "ed-table-wrap", children: [
+    /* @__PURE__ */ jsxs12(
       "table",
       {
         ref: tableRef,
         "data-block-index": index,
         "data-block-type": "table",
         className: "ed-block ed-table",
+        style: typeof tableWidth === "number" ? { width: `${tableWidth}%` } : void 0,
         children: [
-          widths && /* @__PURE__ */ jsx11("colgroup", { children: widths.map((w, c) => /* @__PURE__ */ jsx11("col", { style: w != null ? { width: `${w}px` } : void 0 }, c)) }),
-          /* @__PURE__ */ jsx11("tbody", { children: Array.from({ length: rowEnd - rowStart }, (_, i) => {
+          /* @__PURE__ */ jsx12("colgroup", { children: widths.map((w, c) => /* @__PURE__ */ jsx12("col", { style: { width: `${w}%` } }, c)) }),
+          /* @__PURE__ */ jsx12("tbody", { children: Array.from({ length: rowEnd - rowStart }, (_, i) => {
             const r = rowStart + i;
-            return /* @__PURE__ */ jsx11("tr", { "data-cell-row": r, children: Array.from({ length: cols }, (_2, c) => {
-              const flat = r * cols + c;
-              const cell = cells[flat];
-              if (cell?.attrs.covered === true) return null;
-              const rowspan = spanAttr(cell?.attrs.rowspan);
-              const colspan = spanAttr(cell?.attrs.colspan);
-              const delta = cell?.delta ?? [];
-              const inRect = rect !== null && r >= rect.top && r <= rect.bottom && c >= rect.left && c <= rect.right;
-              return /* @__PURE__ */ jsx11(
-                "td",
-                {
-                  "data-cell-index": flat,
-                  "data-cell-row": r,
-                  "data-cell-col": c,
-                  "data-cell-rowspan": rowspan,
-                  "data-cell-colspan": colspan,
-                  rowSpan: rowspan > 1 ? rowspan : void 0,
-                  colSpan: colspan > 1 ? colspan : void 0,
-                  style: cellStyle(
-                    cell?.attrs,
-                    // rowStart/rowEnd são os limites do FRAGMENTO: numa tabela
-                    // quebrada entre páginas, cada página fecha a própria caixa.
-                    cellBorderStyle(
-                      block.attrs.borderPreset,
-                      { row: r, col: c, rowspan, colspan, cols, rowStart, rowEnd },
-                      "screen",
-                      block.attrs.borderColor
-                    )
-                  ),
-                  className: inRect ? "ed-cell ed-cell--selected" : "ed-cell",
-                  children: renderInline(delta, `t${index}-c${flat}`)
-                },
-                c
-              );
-            }) }, r);
+            return /* @__PURE__ */ jsx12(
+              "tr",
+              {
+                "data-cell-row": r,
+                style: typeof rowHeights?.[r] === "number" ? { height: `${rowHeights[r]}px` } : void 0,
+                children: Array.from({ length: cols }, (_2, c) => {
+                  const flat = r * cols + c;
+                  const cell = cells[flat];
+                  if (cell?.attrs.covered === true) return null;
+                  const rowspan = spanAttr(cell?.attrs.rowspan);
+                  const colspan = spanAttr(cell?.attrs.colspan);
+                  const delta = cell?.delta ?? [];
+                  const inRect = rect !== null && r >= rect.top && r <= rect.bottom && c >= rect.left && c <= rect.right;
+                  return /* @__PURE__ */ jsx12(
+                    "td",
+                    {
+                      "data-cell-index": flat,
+                      "data-cell-row": r,
+                      "data-cell-col": c,
+                      "data-cell-rowspan": rowspan,
+                      "data-cell-colspan": colspan,
+                      rowSpan: rowspan > 1 ? rowspan : void 0,
+                      colSpan: colspan > 1 ? colspan : void 0,
+                      style: cellStyle(
+                        cell?.attrs,
+                        // rowStart/rowEnd são os limites do FRAGMENTO: numa tabela
+                        // quebrada entre páginas, cada página fecha a própria caixa.
+                        cellBorderStyle(
+                          block.attrs.borderPreset,
+                          { row: r, col: c, rowspan, colspan, cols, rowStart, rowEnd },
+                          "screen",
+                          block.attrs.borderColor
+                        )
+                      ),
+                      className: inRect ? "ed-cell ed-cell--selected" : "ed-cell",
+                      children: renderInline(delta, `t${index}-c${flat}`)
+                    },
+                    c
+                  );
+                })
+              },
+              r
+            );
           }) })
         ]
       }
     ),
-    isFirstFragment && /* @__PURE__ */ jsx11(TableResizeOverlay, { tableRef, blockIndex: index, cols })
+    isFirstFragment && /* @__PURE__ */ jsx12(TableResizeOverlay, { tableRef, blockIndex: index, cols, rows })
   ] });
 }
-function readColWidths(raw, cols) {
-  if (!Array.isArray(raw)) return null;
-  const out = [];
-  for (let i = 0; i < cols; i++) {
-    const v = raw[i];
-    out.push(typeof v === "number" && Number.isFinite(v) && v > 0 ? v : null);
-  }
-  return out;
-}
 function spanAttr(v) {
   if (typeof v !== "number" || !Number.isFinite(v) || v < 1) return 1;
   return Math.trunc(v);
@@ -2899,7 +3589,7 @@ function clampPositive(n) {
 }
 
 // src/usePagination.ts
-import { useLayoutEffect as useLayoutEffect4, useRef as useRef8, useState as useState8 } from "react";
+import { useLayoutEffect as useLayoutEffect4, useRef as useRef9, useState as useState9 } from "react";
 var A4_PAGE = {
   width: 794,
   height: 1123,
@@ -2925,9 +3615,9 @@ function defaultPageLayout(topLevelCount) {
   };
 }
 function usePageLayout(rootRef, geometry, topLevelCount, deps) {
-  const [phase, setPhase] = useState8("measure");
-  const [layout, setLayout] = useState8(() => defaultPageLayout(topLevelCount));
-  const lastDepsRef = useRef8(null);
+  const [phase, setPhase] = useState9("measure");
+  const [layout, setLayout] = useState9(() => defaultPageLayout(topLevelCount));
+  const lastDepsRef = useRef9(null);
   useLayoutEffect4(() => {
     const currentDeps = [...deps, topLevelCount, geometry];
     if (lastDepsRef.current !== null && shallowArrayEqual(lastDepsRef.current, currentDeps)) {
@@ -3412,17 +4102,17 @@ function layoutsDeepEqual(a, b) {
 }
 
 // src/useEditor.ts
-import { useCallback as useCallback6, useEffect as useEffect8, useMemo as useMemo3, useRef as useRef10, useState as useState9 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect9, useMemo as useMemo3, useRef as useRef11, useState as useState10 } from "react";
 
 // src/usePageSettings.ts
-import { useCallback as useCallback5, useRef as useRef9, useSyncExternalStore } from "react";
+import { useCallback as useCallback6, useRef as useRef10, useSyncExternalStore } from "react";
 function usePageSettings(doc) {
-  const cacheRef = useRef9(null);
-  const subscribe = useCallback5(
+  const cacheRef = useRef10(null);
+  const subscribe = useCallback6(
     (notify) => doc.observePageSettings(notify),
     [doc]
   );
-  const getSnapshot = useCallback5(() => {
+  const getSnapshot = useCallback6(() => {
     const next = doc.getPageSettings();
     const prev = cacheRef.current;
     if (prev && shallowEqual(prev, next)) return prev;
@@ -3450,8 +4140,10 @@ import {
   mergeSelection as cmdMergeSelection,
   moveEmbedAnchor as cmdMoveEmbedAnchor,
   setBlockAttrAtIndex as cmdSetBlockAttrAtIndex,
-  setColumnWidth as cmdSetColumnWidth,
+  setColumnBoundary as cmdSetColumnBoundary,
   setImageAttrs as cmdSetImageAttrs,
+  setRowHeight as cmdSetRowHeight,
+  setRowHeights as cmdSetRowHeights,
   splitCell as cmdSplitCell,
   tableRectSelection as tableRectSelection2,
   getMarksInRange,
@@ -3460,7 +4152,8 @@ import {
   insertTable as cmdInsertTable,
   insertTableColumn as cmdInsertColumn,
   insertTableRow as cmdInsertRow,
-  isImageEmbed as isImageEmbed2,
+  isFormulaEmbed,
+  isImageEmbed as isImageEmbed4,
   isMarkUniformInRange,
   moveToNextCell as cmdMoveNextCell,
   moveToPrevCell as cmdMovePrevCell,
@@ -3470,28 +4163,28 @@ import {
   setCellAttr as cmdSetCellAttr,
   setBlockType as cmdSetBlockType,
   setMark as cmdSetMark,
+  setTableWidth as cmdSetTableWidth,
   splitListItem as cmdSplitListItem,
   tableLocationOf,
   toggleList as cmdToggleList,
   toggleMark as cmdToggleMark
 } from "@sofereditor/core";
-var MAX_INSERT_WIDTH = 600;
 function useEditor(opts = {}) {
   const doc = useMemo3(() => opts.document ?? new EditorDocument(), [opts.document]);
   const history = useMemo3(() => new EditorHistory(doc), [doc]);
-  const [snapshot, setSnapshot] = useState9(() => doc.toJSON());
-  const [selection, setSelectionState] = useState9(
+  const [snapshot, setSnapshot] = useState10(() => doc.toJSON());
+  const [selection, setSelectionState] = useState10(
     () => collapsedSelection({ blockIndex: 0, offset: 0 })
   );
-  const selectionRef = useRef10(selection);
+  const selectionRef = useRef11(selection);
   selectionRef.current = selection;
-  const pendingMarksRef = useRef10({});
-  const [pendingMarks, setPendingMarksState] = useState9({});
-  const setPendingMarks = useCallback6((next) => {
+  const pendingMarksRef = useRef11({});
+  const [pendingMarks, setPendingMarksState] = useState10({});
+  const setPendingMarks = useCallback7((next) => {
     pendingMarksRef.current = next;
     setPendingMarksState(next);
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     let scheduled = false;
     let cancelled = false;
     let frame = 0;
@@ -3518,8 +4211,8 @@ function useEditor(opts = {}) {
       doc.ydoc.off("afterTransaction", schedule);
     };
   }, [doc]);
-  const getSelection = useCallback6(() => selectionRef.current, []);
-  const setSelection = useCallback6(
+  const getSelection = useCallback7(() => selectionRef.current, []);
+  const setSelection = useCallback7(
     (sel) => {
       const prev = selectionRef.current;
       selectionRef.current = sel;
@@ -3534,16 +4227,16 @@ function useEditor(opts = {}) {
     },
     []
   );
-  const ctxRef = useRef10({ doc, getSelection, setSelection });
+  const ctxRef = useRef11({ doc, getSelection, setSelection });
   ctxRef.current = { doc, getSelection, setSelection };
-  const consumePendingMarks = useCallback6(() => {
+  const consumePendingMarks = useCallback7(() => {
     const current = pendingMarksRef.current;
     if (Object.keys(current).length === 0) return void 0;
     pendingMarksRef.current = {};
     setPendingMarksState({});
     return current;
   }, []);
-  const isMarkActive = useCallback6(
+  const isMarkActive = useCallback7(
     (name, value) => {
       const sel = selectionRef.current;
       const { start, end } = orderedRange(sel);
@@ -3574,7 +4267,7 @@ function useEditor(opts = {}) {
     },
     [doc]
   );
-  const getActiveMarks = useCallback6(() => {
+  const getActiveMarks = useCallback7(() => {
     const sel = selectionRef.current;
     const { start, end } = orderedRange(sel);
     if (start.blockIndex !== end.blockIndex) {
@@ -3588,7 +4281,7 @@ function useEditor(opts = {}) {
     }
     return getMarksInRange(yText, start.offset, end.offset);
   }, [doc]);
-  const toggleMark = useCallback6(
+  const toggleMark = useCallback7(
     (name, value) => {
       const sel = selectionRef.current;
       const { start, end } = orderedRange(sel);
@@ -3608,7 +4301,7 @@ function useEditor(opts = {}) {
     },
     [isMarkActive, setPendingMarks]
   );
-  const setMark = useCallback6(
+  const setMark = useCallback7(
     (name, value) => {
       const sel = selectionRef.current;
       const { start, end } = orderedRange(sel);
@@ -3621,7 +4314,7 @@ function useEditor(opts = {}) {
     },
     [setPendingMarks]
   );
-  const removeMark = useCallback6(
+  const removeMark = useCallback7(
     (name) => {
       const sel = selectionRef.current;
       const { start, end } = orderedRange(sel);
@@ -3634,7 +4327,7 @@ function useEditor(opts = {}) {
     },
     [setPendingMarks]
   );
-  const getBlockType = useCallback6(() => {
+  const getBlockType = useCallback7(() => {
     const sel = selectionRef.current;
     const { start, end } = orderedRange(sel);
     const first = doc.getBlockType(start.blockIndex);
@@ -3644,7 +4337,7 @@ function useEditor(opts = {}) {
     }
     return first;
   }, [doc]);
-  const getBlockAttr = useCallback6(
+  const getBlockAttr = useCallback7(
     (key) => {
       const sel = selectionRef.current;
       const { start, end } = orderedRange(sel);
@@ -3657,57 +4350,57 @@ function useEditor(opts = {}) {
     },
     [doc]
   );
-  const setBlockType = useCallback6((type, attrs) => {
+  const setBlockType = useCallback7((type, attrs) => {
     cmdSetBlockType(ctxRef.current, type, attrs);
   }, []);
-  const setBlockAttr = useCallback6(
+  const setBlockAttr = useCallback7(
     (key, value) => {
       cmdSetBlockAttr(ctxRef.current, key, value);
     },
     []
   );
-  const setAlign = useCallback6((value) => {
+  const setAlign = useCallback7((value) => {
     const sel = selectionRef.current;
     const inCell = sel.focus.cellIndex != null;
     if (inCell) cmdSetCellAttr(ctxRef.current, "align", value);
     else cmdSetBlockAttr(ctxRef.current, "align", value);
   }, []);
-  const getAlign = useCallback6(() => {
+  const getAlign = useCallback7(() => {
     const sel = selectionRef.current;
     if (sel.focus.cellIndex != null && doc.isTable(sel.focus.blockIndex)) {
       return doc.getCellAttrs(sel.focus.blockIndex, sel.focus.cellIndex).align;
     }
     return getBlockAttr("align");
   }, [doc, getBlockAttr]);
-  const setCellBackground = useCallback6((color) => {
+  const setCellBackground = useCallback7((color) => {
     cmdSetCellAttr(ctxRef.current, "bgColor", color);
   }, []);
-  const getCellBackground = useCallback6(() => {
+  const getCellBackground = useCallback7(() => {
     const sel = selectionRef.current;
     if (sel.focus.cellIndex == null || !doc.isTable(sel.focus.blockIndex)) return void 0;
     return doc.getCellAttrs(sel.focus.blockIndex, sel.focus.cellIndex).bgColor;
   }, [doc]);
-  const setTableBorderPreset = useCallback6((preset) => {
+  const setTableBorderPreset = useCallback7((preset) => {
     const sel = selectionRef.current;
     if (!doc.isTable(sel.focus.blockIndex)) return;
     cmdSetBlockAttrAtIndex(ctxRef.current, sel.focus.blockIndex, "borderPreset", preset);
   }, [doc]);
-  const getTableBorderPreset = useCallback6(() => {
+  const getTableBorderPreset = useCallback7(() => {
     const sel = selectionRef.current;
     if (!doc.isTable(sel.focus.blockIndex)) return "all";
     return doc.getBlockAttrs(sel.focus.blockIndex).borderPreset ?? "all";
   }, [doc]);
-  const setTableBorderColor = useCallback6((color) => {
+  const setTableBorderColor = useCallback7((color) => {
     const sel = selectionRef.current;
     if (!doc.isTable(sel.focus.blockIndex)) return;
     cmdSetBlockAttrAtIndex(ctxRef.current, sel.focus.blockIndex, "borderColor", color);
   }, [doc]);
-  const getTableBorderColor = useCallback6(() => {
+  const getTableBorderColor = useCallback7(() => {
     const sel = selectionRef.current;
     if (!doc.isTable(sel.focus.blockIndex)) return void 0;
     return doc.getBlockAttrs(sel.focus.blockIndex).borderColor;
   }, [doc]);
-  const isListActive = useCallback6(
+  const isListActive = useCallback7(
     (kind) => {
       const sel = selectionRef.current;
       const { start, end } = orderedRange(sel);
@@ -3719,119 +4412,128 @@ function useEditor(opts = {}) {
     },
     [doc]
   );
-  const toggleList = useCallback6((kind) => {
+  const toggleList = useCallback7((kind) => {
     cmdToggleList(ctxRef.current, kind);
   }, []);
-  const indentList = useCallback6(() => {
+  const indentList = useCallback7(() => {
     cmdIndentList(ctxRef.current);
   }, []);
-  const dedentList = useCallback6(() => {
+  const dedentList = useCallback7(() => {
     cmdDedentList(ctxRef.current);
   }, []);
-  const splitListItem = useCallback6(() => {
+  const splitListItem = useCallback7(() => {
     return cmdSplitListItem(ctxRef.current);
   }, []);
-  const isInTable = useCallback6(() => {
+  const isInTable = useCallback7(() => {
     return selectionRef.current.focus.cellIndex != null;
   }, []);
-  const getTableLocation = useCallback6(() => {
+  const getTableLocation = useCallback7(() => {
     return tableLocationOf(doc, selectionRef.current.focus);
   }, [doc]);
-  const insertTable = useCallback6((rows, cols) => {
+  const insertTable = useCallback7((rows, cols) => {
     cmdInsertTable(ctxRef.current, rows, cols);
   }, []);
-  const insertAnswerLines = useCallback6((count, spacing) => {
+  const insertAnswerLines = useCallback7((count, spacing) => {
     cmdInsertAnswerLines(ctxRef.current, count, spacing);
   }, []);
-  const deleteTable = useCallback6((blockIndex) => {
+  const deleteTable = useCallback7((blockIndex) => {
     const idx = blockIndex ?? selectionRef.current.focus.blockIndex;
     cmdDeleteTable(ctxRef.current, idx);
   }, []);
-  const insertRowAbove = useCallback6(() => {
+  const insertRowAbove = useCallback7(() => {
     const loc = tableLocationOf(doc, selectionRef.current.focus);
     if (!loc) return;
     cmdInsertRow(ctxRef.current, loc.blockIndex, loc.row, "before");
   }, [doc]);
-  const insertRowBelow = useCallback6(() => {
+  const insertRowBelow = useCallback7(() => {
     const loc = tableLocationOf(doc, selectionRef.current.focus);
     if (!loc) return;
     cmdInsertRow(ctxRef.current, loc.blockIndex, loc.row, "after");
   }, [doc]);
-  const deleteCurrentRow = useCallback6(() => {
+  const deleteCurrentRow = useCallback7(() => {
     const loc = tableLocationOf(doc, selectionRef.current.focus);
     if (!loc) return;
     cmdDeleteRow(ctxRef.current, loc.blockIndex, loc.row);
   }, [doc]);
-  const insertColumnLeft = useCallback6(() => {
+  const insertColumnLeft = useCallback7(() => {
     const loc = tableLocationOf(doc, selectionRef.current.focus);
     if (!loc) return;
     cmdInsertColumn(ctxRef.current, loc.blockIndex, loc.col, "before");
   }, [doc]);
-  const insertColumnRight = useCallback6(() => {
+  const insertColumnRight = useCallback7(() => {
     const loc = tableLocationOf(doc, selectionRef.current.focus);
     if (!loc) return;
     cmdInsertColumn(ctxRef.current, loc.blockIndex, loc.col, "after");
   }, [doc]);
-  const deleteCurrentColumn = useCallback6(() => {
+  const deleteCurrentColumn = useCallback7(() => {
     const loc = tableLocationOf(doc, selectionRef.current.focus);
     if (!loc) return;
     cmdDeleteColumn(ctxRef.current, loc.blockIndex, loc.col);
   }, [doc]);
-  const moveToNextCell = useCallback6(() => {
+  const moveToNextCell = useCallback7(() => {
     cmdMoveNextCell(ctxRef.current);
   }, []);
-  const moveToPrevCell = useCallback6(() => {
+  const moveToPrevCell = useCallback7(() => {
     cmdMovePrevCell(ctxRef.current);
   }, []);
-  const mergeRight = useCallback6(() => {
+  const mergeRight = useCallback7(() => {
     const loc = tableLocationOf(doc, selectionRef.current.focus);
     if (!loc) return false;
     return cmdMergeRight(ctxRef.current, loc.blockIndex, loc.row, loc.col);
   }, [doc]);
-  const mergeDown = useCallback6(() => {
+  const mergeDown = useCallback7(() => {
     const loc = tableLocationOf(doc, selectionRef.current.focus);
     if (!loc) return false;
     return cmdMergeDown(ctxRef.current, loc.blockIndex, loc.row, loc.col);
   }, [doc]);
-  const splitCell = useCallback6(() => {
+  const splitCell = useCallback7(() => {
     const loc = tableLocationOf(doc, selectionRef.current.focus);
     if (!loc) return false;
     return cmdSplitCell(ctxRef.current, loc.blockIndex, loc.row, loc.col);
   }, [doc]);
-  const setColumnWidth = useCallback6(
-    (blockIndex, col, widthPx) => {
-      cmdSetColumnWidth(ctxRef.current, blockIndex, col, widthPx);
+  const setColumnBoundary = useCallback7(
+    (blockIndex, boundary, deltaPct, base) => {
+      cmdSetColumnBoundary(ctxRef.current, blockIndex, boundary, deltaPct, base);
     },
     []
   );
-  const getTableRect = useCallback6(
+  const setTableWidth = useCallback7((blockIndex, pct) => {
+    cmdSetTableWidth(ctxRef.current, blockIndex, pct);
+  }, []);
+  const setRowHeight = useCallback7((blockIndex, row, px) => {
+    cmdSetRowHeight(ctxRef.current, blockIndex, row, px);
+  }, []);
+  const setRowHeights = useCallback7((blockIndex, heights) => {
+    cmdSetRowHeights(ctxRef.current, blockIndex, heights);
+  }, []);
+  const getTableRect = useCallback7(
     () => tableRectSelection2(doc, selectionRef.current),
     [doc]
   );
-  const hasTableRectSelection = useCallback6(() => {
+  const hasTableRectSelection = useCallback7(() => {
     return tableRectSelection2(doc, selectionRef.current) !== null;
   }, [doc]);
-  const mergeSelection = useCallback6(() => {
+  const mergeSelection = useCallback7(() => {
     return cmdMergeSelection(ctxRef.current);
   }, []);
-  const insertImage = useCallback6((embed) => {
+  const insertImage = useCallback7((embed) => {
     cmdInsertImage(ctxRef.current, embed);
   }, []);
-  const setImageAttrs = useCallback6(
+  const setImageAttrs = useCallback7(
     (blockIndex, offset, partial, cellIndex, newOffset) => {
       cmdSetImageAttrs(ctxRef.current, blockIndex, offset, partial, cellIndex, newOffset);
     },
     []
   );
-  const moveEmbedAnchor = useCallback6(
+  const moveEmbedAnchor = useCallback7(
     (from, to, newOffsetX, newOffsetY) => {
       cmdMoveEmbedAnchor(ctxRef.current, from, to, newOffsetX, newOffsetY);
     },
     []
   );
-  const uploadImageRef = useRef10(opts.uploadImage);
+  const uploadImageRef = useRef11(opts.uploadImage);
   uploadImageRef.current = opts.uploadImage;
-  const insertImageFromFile = useCallback6(async (file) => {
+  const insertImageFromFile = useCallback7(async (file) => {
     if (!file.type.startsWith("image/")) return;
     const dataUrl = await readAsDataURL(file);
     const dims = await readImageDimensions(dataUrl);
@@ -3845,7 +4547,7 @@ function useEditor(opts = {}) {
     const src = upload ? await upload(file) : dataUrl;
     cmdInsertImage(ctxRef.current, { type: "image", src, width: w, height: h });
   }, []);
-  const getSelectedEmbed = useCallback6(() => {
+  const getSelectedEmbed = useCallback7(() => {
     const sel = selectionRef.current;
     if (sel.anchor.blockIndex !== sel.focus.blockIndex) return null;
     if ((sel.anchor.cellIndex ?? -1) !== (sel.focus.cellIndex ?? -1)) return null;
@@ -3862,7 +4564,7 @@ function useEditor(opts = {}) {
         cursor += op.insert.length;
         continue;
       }
-      if (cursor === start && isImageEmbed2(op.insert)) {
+      if (cursor === start && isImageEmbed4(op.insert)) {
         return {
           blockIndex: sel.anchor.blockIndex,
           cellIndex: sel.anchor.cellIndex,
@@ -3874,16 +4576,16 @@ function useEditor(opts = {}) {
     }
     return null;
   }, [doc]);
-  const [linkRequest, setLinkRequest] = useState9(null);
-  const linkRequestRef = useRef10(null);
-  const requestLink = useCallback6((initialHref = "") => {
+  const [linkRequest, setLinkRequest] = useState10(null);
+  const linkRequestRef = useRef11(null);
+  const requestLink = useCallback7((initialHref = "") => {
     return new Promise((resolve) => {
       const req = { initialHref, resolve, selection: selectionRef.current };
       linkRequestRef.current = req;
       setLinkRequest(req);
     });
   }, []);
-  const resolveLinkRequest = useCallback6(
+  const resolveLinkRequest = useCallback7(
     (href) => {
       const req = linkRequestRef.current;
       linkRequestRef.current = null;
@@ -3896,26 +4598,26 @@ function useEditor(opts = {}) {
     [setSelection]
   );
   const pageSettings = usePageSettings(doc);
-  const setPageSettings = useCallback6(
+  const setPageSettings = useCallback7(
     (partial) => {
       doc.setPageSettings(partial);
     },
     [doc]
   );
-  const [pageConfigRequest, setPageConfigRequest] = useState9(null);
-  const requestPageConfig = useCallback6(() => {
+  const [pageConfigRequest, setPageConfigRequest] = useState10(null);
+  const requestPageConfig = useCallback7(() => {
     return new Promise((resolve) => {
       setPageConfigRequest({ initial: doc.getPageSettings(), resolve });
     });
   }, [doc]);
-  const resolvePageConfigRequest = useCallback6((applied) => {
+  const resolvePageConfigRequest = useCallback7((applied) => {
     setPageConfigRequest((prev) => {
       if (prev) prev.resolve(applied);
       return null;
     });
   }, []);
-  const [imageCaptionRequest, setImageCaptionRequest] = useState9(null);
-  const requestImageCaption = useCallback6(
+  const [imageCaptionRequest, setImageCaptionRequest] = useState10(null);
+  const requestImageCaption = useCallback7(
     (initialCaption = "", initialAlign = "center") => {
       return new Promise((resolve) => {
         setImageCaptionRequest({ initialCaption, initialAlign, resolve });
@@ -3923,12 +4625,82 @@ function useEditor(opts = {}) {
     },
     []
   );
-  const resolveImageCaptionRequest = useCallback6((result) => {
+  const resolveImageCaptionRequest = useCallback7((result) => {
     setImageCaptionRequest((prev) => {
       if (prev) prev.resolve(result);
       return null;
     });
   }, []);
+  const [formulaRequest, setFormulaRequest] = useState10(null);
+  const requestFormula = useCallback7(
+    (initialLatex = "", initialDisplay = false) => {
+      return new Promise((resolve) => {
+        setFormulaRequest({ initialLatex, initialDisplay, resolve });
+      });
+    },
+    []
+  );
+  const resolveFormulaRequest = useCallback7((result) => {
+    setFormulaRequest((prev) => {
+      if (prev) prev.resolve(result);
+      return null;
+    });
+  }, []);
+  const insertFormula = useCallback7(
+    async (latex, display) => {
+      const selectionAtCall = ctxRef.current.getSelection();
+      const embedAtCall = getSelectedEmbed();
+      let mathModule;
+      try {
+        mathModule = await import("@sofereditor/math");
+      } catch {
+        return;
+      }
+      const { renderLatexToSvg, measureExInPx, svgToDataUrl, svgToPngDataUrl } = mathModule;
+      const r = renderLatexToSvg(latex, display);
+      if (!r.ok) return;
+      const root = document.querySelector(".ed-root");
+      const exPx = root ? measureExInPx(root) : 8;
+      let w = Math.round(r.widthEx * exPx);
+      let h = Math.round(r.heightEx * exPx);
+      let vAlignScale = 1;
+      if (w > MAX_INSERT_WIDTH) {
+        vAlignScale = MAX_INSERT_WIDTH / w;
+        h = Math.round(h * MAX_INSERT_WIDTH / w);
+        w = MAX_INSERT_WIDTH;
+      }
+      const src = svgToDataUrl(r.svg);
+      let svgFallback;
+      try {
+        svgFallback = await svgToPngDataUrl(r.svg, w, h);
+      } catch {
+        svgFallback = void 0;
+      }
+      ctxRef.current.setSelection(selectionAtCall);
+      const inheritedLayout = {};
+      if (isFormulaEmbed(embedAtCall?.embed)) {
+        const prev = embedAtCall.embed;
+        if (prev.layout !== void 0) inheritedLayout.layout = prev.layout;
+        if (prev.offsetX !== void 0) inheritedLayout.offsetX = prev.offsetX;
+        if (prev.offsetY !== void 0) inheritedLayout.offsetY = prev.offsetY;
+      }
+      cmdInsertImage(ctxRef.current, {
+        type: "image",
+        src,
+        width: w,
+        height: h,
+        ...inheritedLayout,
+        ...display ? { align: "center" } : {},
+        formula: {
+          latex,
+          display,
+          ...display ? {} : { vAlign: `${r.vAlignEx * vAlignScale}ex` }
+        },
+        ...svgFallback ? { svgFallback } : {}
+      });
+    },
+    [getSelectedEmbed]
+  );
   return {
     doc,
     history,
@@ -3979,7 +4751,10 @@ function useEditor(opts = {}) {
     mergeRight,
     mergeDown,
     splitCell,
-    setColumnWidth,
+    setColumnBoundary,
+    setTableWidth,
+    setRowHeight,
+    setRowHeights,
     getTableRect,
     hasTableRectSelection,
     mergeSelection,
@@ -3995,7 +4770,12 @@ function useEditor(opts = {}) {
     resolvePageConfigRequest,
     imageCaptionRequest,
     requestImageCaption,
-    resolveImageCaptionRequest
+    resolveImageCaptionRequest,
+    formulaRequest,
+    requestFormula,
+    resolveFormulaRequest,
+    insertFormula,
+    uploadImage: opts.uploadImage
   };
 }
 function readAsDataURL(file) {
@@ -4027,7 +4807,7 @@ function sameValue(a, b) {
 }
 
 // src/Editor.tsx
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 var defaultFooter = ({ pageNumber, pageCount }) => `${pageNumber} / ${pageCount}`;
 function Editor({
   editor: providedEditor,
@@ -4040,14 +4820,15 @@ function Editor({
   const internal = useEditor();
   const editor = providedEditor ?? internal;
   const { doc, history, snapshot, getSelection, setSelection } = editor;
-  const rootRef = useRef11(null);
-  const isComposingRef = useRef11(false);
-  const [hoveredBehind, setHoveredBehind] = useState10(null);
-  const hoveredBehindRef = useRef11(null);
-  const [hoveredLink, setHoveredLink] = useState10(null);
-  const hoveredLinkElRef = useRef11(null);
-  const suppressSelectionSyncRef = useRef11(false);
-  useEffect9(() => {
+  const rootRef = useRef12(null);
+  const isComposingRef = useRef12(false);
+  const pasteInFlightRef = useRef12(false);
+  const [hoveredBehind, setHoveredBehind] = useState11(null);
+  const hoveredBehindRef = useRef12(null);
+  const [hoveredLink, setHoveredLink] = useState11(null);
+  const hoveredLinkElRef = useRef12(null);
+  const suppressSelectionSyncRef = useRef12(false);
+  useEffect10(() => {
     if (!awareness) return;
     const root = rootRef.current;
     if (!root) return;
@@ -4077,11 +4858,11 @@ function Editor({
       awareness.setLocalStateField("cursor", null);
     };
   }, [awareness, doc]);
-  const ctxRef = useRef11({ doc, getSelection, setSelection });
+  const ctxRef = useRef12({ doc, getSelection, setSelection });
   ctxRef.current = { doc, getSelection, setSelection };
-  const historyRef = useRef11(history);
+  const historyRef = useRef12(history);
   historyRef.current = history;
-  const editorRef = useRef11(editor);
+  const editorRef = useRef12(editor);
   editorRef.current = editor;
   useLayoutEffect5(() => {
     const root = rootRef.current;
@@ -4098,7 +4879,7 @@ function Editor({
     suppressSelectionSyncRef.current = true;
     applyDomSelection(root, editor.selection);
   });
-  useEffect9(() => {
+  useEffect10(() => {
     const root = rootRef.current;
     if (!root) return;
     const handler = () => {
@@ -4119,7 +4900,7 @@ function Editor({
     document.addEventListener("selectionchange", handler);
     return () => document.removeEventListener("selectionchange", handler);
   }, [setSelection]);
-  useEffect9(() => {
+  useEffect10(() => {
     const root = rootRef.current;
     if (!root) return;
     let drag = null;
@@ -4190,7 +4971,7 @@ function Editor({
       document.removeEventListener("pointerup", onPointerUp);
     };
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     const root = rootRef.current;
     if (!root) return;
     const onDragOver = (e) => {
@@ -4228,7 +5009,7 @@ function Editor({
       root.removeEventListener("drop", onDrop);
     };
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     const root = rootRef.current;
     if (!root) return;
     const onPointerDown = (e) => {
@@ -4256,7 +5037,27 @@ function Editor({
     root.addEventListener("pointerdown", onPointerDown);
     return () => root.removeEventListener("pointerdown", onPointerDown);
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const onDoubleClick = (e) => {
+      const target = e.target;
+      if (!(target instanceof Element)) return;
+      if (!target.closest('img[data-embed="image"]')) return;
+      const ed = editorRef.current;
+      const sel = ed.getSelectedEmbed();
+      if (!sel || !isFormulaEmbed2(sel.embed)) return;
+      e.preventDefault();
+      const { latex, display } = sel.embed.formula;
+      void ed.requestFormula(latex, display).then((r) => {
+        if (!r) return;
+        void ed.insertFormula(r.latex, r.display);
+      });
+    };
+    root.addEventListener("dblclick", onDoubleClick);
+    return () => root.removeEventListener("dblclick", onDoubleClick);
+  }, []);
+  useEffect10(() => {
     const root = rootRef.current;
     if (!root) return;
     const same = (a, b) => a === b || !!a && !!b && a.blockIndex === b.blockIndex && a.offset === b.offset && (a.cellIndex ?? -1) === (b.cellIndex ?? -1);
@@ -4309,7 +5110,7 @@ function Editor({
       if (raf) cancelAnimationFrame(raf);
     };
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     const root = rootRef.current;
     if (!root) return;
     const clear = () => {
@@ -4344,7 +5145,7 @@ function Editor({
       window.removeEventListener("scroll", clear, true);
     };
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     const root = rootRef.current;
     if (!root) return;
     const handler = (e) => {
@@ -4457,7 +5258,7 @@ function Editor({
     root.addEventListener("beforeinput", handler);
     return () => root.removeEventListener("beforeinput", handler);
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     const root = rootRef.current;
     if (!root) return;
     const writeSlice = (e) => {
@@ -4484,9 +5285,48 @@ function Editor({
       e.preventDefault();
       switch (plan.kind) {
         case "sofer":
-        case "html":
           insertSlice(ctx, plan.slice);
           return;
+        case "html": {
+          if (!sliceHasDataImageEmbeds(plan.slice)) {
+            insertSlice(ctx, plan.slice);
+            return;
+          }
+          if (pasteInFlightRef.current) {
+            console.warn(
+              "[sofereditor] colagem com imagem ainda subindo \u2014 descartando esta colagem concorrente para n\xE3o corromper a posi\xE7\xE3o de inser\xE7\xE3o"
+            );
+            return;
+          }
+          pasteInFlightRef.current = true;
+          const capturedSelection = ctx.getSelection();
+          void (async () => {
+            try {
+              const resolved = await resolvePastedImageUploads(plan.slice, editorRef.current.uploadImage);
+              const liveSelection = ctxRef.current.getSelection();
+              const userMovedAway = !selectionsEqual(liveSelection, capturedSelection);
+              const { blockIndex, cellIndex } = capturedSelection.focus;
+              const targetText = ctxRef.current.doc.textAt(blockIndex, cellIndex);
+              let insertAt = capturedSelection;
+              if (!targetText) {
+                console.error(
+                  "[sofereditor] bloco de destino da colagem sumiu durante o upload da imagem \u2014 inserindo no fim do documento em vez de descartar a colagem"
+                );
+                const lastIndex = Math.max(0, ctxRef.current.doc.blockCount() - 1);
+                const lastText = ctxRef.current.doc.getBlockText(lastIndex);
+                insertAt = collapsedSelection2({ blockIndex: lastIndex, offset: lastText ? lastText.length : 0 });
+              }
+              ctxRef.current.setSelection(insertAt);
+              insertSlice(ctxRef.current, resolved);
+              if (userMovedAway) {
+                ctxRef.current.setSelection(liveSelection);
+              }
+            } finally {
+              pasteInFlightRef.current = false;
+            }
+          })();
+          return;
+        }
         case "images":
           void (async () => {
             for (const f of plan.files) await editorRef.current.insertImageFromFile(f);
@@ -4511,7 +5351,7 @@ function Editor({
       root.removeEventListener("paste", onPaste);
     };
   }, []);
-  const onKeyDown = useCallback7((e) => {
+  const onKeyDown = useCallback8((e) => {
     const ed = editorRef.current;
     const mod = e.metaKey || e.ctrlKey;
     if (e.key === "Tab") {
@@ -4539,6 +5379,17 @@ function Editor({
       }
       return;
     }
+    if (!mod && (e.key === "Backspace" || e.key === "Delete")) {
+      if (isComposingRef.current) return;
+      const direction = e.key === "Backspace" ? "backward" : "forward";
+      const shouldIntercept = ed.getSelectedEmbed() != null || isEmbedAdjacentToCaret(ctxRef.current, direction);
+      if (shouldIntercept) {
+        e.preventDefault();
+        if (direction === "backward") deleteBackward(ctxRef.current);
+        else deleteForward(ctxRef.current);
+      }
+      return;
+    }
     if (!mod) return;
     const key = e.key.toLowerCase();
     if (!e.shiftKey && !e.altKey && key === "z") {
@@ -4585,10 +5436,10 @@ function Editor({
       });
     }
   }, []);
-  const onCompositionStart = useCallback7(() => {
+  const onCompositionStart = useCallback8(() => {
     isComposingRef.current = true;
   }, []);
-  const onCompositionEnd = useCallback7((e) => {
+  const onCompositionEnd = useCallback8((e) => {
     isComposingRef.current = false;
     if (e.data && e.data.length > 0) {
       insertText(ctxRef.current, e.data);
@@ -4636,7 +5487,7 @@ function Editor({
       geom.marginRight
     ]
   );
-  const body = /* @__PURE__ */ jsxs11(
+  const body = /* @__PURE__ */ jsxs13(
     "div",
     {
       ref: rootRef,
@@ -4662,7 +5513,7 @@ function Editor({
           const pageInlineStyle = pi === 0 && geom.firstPageExtraTop ? {
             "--ed-page-margin-top": `${geom.marginTop + geom.firstPageExtraTop}px`
           } : void 0;
-          return /* @__PURE__ */ jsxs11(
+          return /* @__PURE__ */ jsxs13(
             "div",
             {
               className: "ed-page",
@@ -4670,15 +5521,15 @@ function Editor({
               "data-page-total": ctx.pageCount,
               style: pageInlineStyle,
               children: [
-                renderPageHeader && /* @__PURE__ */ jsx12("div", { className: "ed-page-header", contentEditable: false, children: renderPageHeader(ctx) }),
-                /* @__PURE__ */ jsx12("div", { className: "ed-page-content", children: page.slots.map((slot) => renderSlot(slot, topLevels)) }),
-                renderPageFooter && /* @__PURE__ */ jsx12("div", { className: "ed-page-footer", contentEditable: false, children: renderPageFooter(ctx) })
+                renderPageHeader && /* @__PURE__ */ jsx13("div", { className: "ed-page-header", contentEditable: false, children: renderPageHeader(ctx) }),
+                /* @__PURE__ */ jsx13("div", { className: "ed-page-content", children: page.slots.map((slot) => renderSlot(slot, topLevels)) }),
+                renderPageFooter && /* @__PURE__ */ jsx13("div", { className: "ed-page-footer", contentEditable: false, children: renderPageFooter(ctx) })
               ]
             },
             `page-${pi}`
           );
         }) : topLevels.map((t) => renderTopLevel(t)),
-        selectedEmbed && /* @__PURE__ */ jsx12(
+        selectedEmbed && /* @__PURE__ */ jsx13(
           ImageResizeOverlay,
           {
             rootRef,
@@ -4710,7 +5561,7 @@ function Editor({
             )
           }
         ),
-        hoveredBehind && !(selectedEmbed && selectedEmbed.blockIndex === hoveredBehind.blockIndex && selectedEmbed.offset === hoveredBehind.offset && (selectedEmbed.cellIndex ?? -1) === (hoveredBehind.cellIndex ?? -1)) && /* @__PURE__ */ jsx12(
+        hoveredBehind && !(selectedEmbed && selectedEmbed.blockIndex === hoveredBehind.blockIndex && selectedEmbed.offset === hoveredBehind.offset && (selectedEmbed.cellIndex ?? -1) === (hoveredBehind.cellIndex ?? -1)) && /* @__PURE__ */ jsx13(
           BehindImageSelectAffordance,
           {
             rootRef,
@@ -4731,8 +5582,8 @@ function Editor({
             })
           }
         ),
-        hoveredLink && hoveredLink.href && /* @__PURE__ */ jsx12(LinkHoverTooltip, { href: hoveredLink.href, rect: hoveredLink.rect }),
-        awareness && /* @__PURE__ */ jsx12(
+        hoveredLink && hoveredLink.href && /* @__PURE__ */ jsx13(LinkHoverTooltip, { href: hoveredLink.href, rect: hoveredLink.rect }),
+        awareness && /* @__PURE__ */ jsx13(
           RemoteCursorsOverlay,
           {
             rootRef,
@@ -4744,7 +5595,7 @@ function Editor({
       ]
     }
   );
-  return /* @__PURE__ */ jsx12(EditorProvider, { editor, children: body });
+  return /* @__PURE__ */ jsx13(EditorProvider, { editor, children: body });
 }
 function groupTopLevels(snapshot) {
   const out = [];
@@ -4798,7 +5649,7 @@ function renderSlot(slot, topLevels) {
       start: slot.fragment.start,
       end: slot.fragment.end
     };
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       NodeView,
       {
         block: top.block,
@@ -4809,7 +5660,7 @@ function renderSlot(slot, topLevels) {
     );
   }
   if (slot.tableFragment && top.kind === "block" && top.block.type === "table") {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       NodeView,
       {
         block: top.block,
@@ -4829,7 +5680,7 @@ function renderTopLevel(top) {
     const tree = buildListTree(top.items);
     return renderListTree(tree, top, top.ordinalStart, `list-${top.key}`);
   }
-  return /* @__PURE__ */ jsx12(NodeView, { block: top.block, index: top.blockIndex }, top.key);
+  return /* @__PURE__ */ jsx13(NodeView, { block: top.block, index: top.blockIndex }, top.key);
 }
 function renderListFragment(top, frag) {
   const ranges = topLevelItemRanges(top.items);
@@ -4871,9 +5722,9 @@ function buildListTree(items) {
 function renderListTree(tree, top, start, key) {
   const className = `ed-list ed-list-${top.listKind}`;
   const style = top.listStyle ? { listStyleType: top.listStyle } : void 0;
-  const items = tree.map((node) => /* @__PURE__ */ jsx12(NodeView, { block: node.entry.block, index: node.entry.index, children: node.children.length > 0 ? renderNestedListTree(node.children, `nested-${node.entry.index}`) : null }, node.entry.index));
+  const items = tree.map((node) => /* @__PURE__ */ jsx13(NodeView, { block: node.entry.block, index: node.entry.index, children: node.children.length > 0 ? renderNestedListTree(node.children, `nested-${node.entry.index}`) : null }, node.entry.index));
   if (top.listKind === "ordered") {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       "ol",
       {
         className,
@@ -4885,12 +5736,12 @@ function renderListTree(tree, top, start, key) {
       key
     );
   }
-  return /* @__PURE__ */ jsx12("ul", { className, "data-list-kind": "bullet", style, children: items }, key);
+  return /* @__PURE__ */ jsx13("ul", { className, "data-list-kind": "bullet", style, children: items }, key);
 }
 function renderNestedListTree(tree, key) {
   const kind = tree[0]?.entry.block.attrs.listKind === "ordered" ? "ordered" : "bullet";
   const Tag = kind === "ordered" ? "ol" : "ul";
-  return /* @__PURE__ */ jsx12(Tag, { className: `ed-list ed-list-${kind}`, "data-list-kind": kind, children: tree.map((node) => /* @__PURE__ */ jsx12(NodeView, { block: node.entry.block, index: node.entry.index, children: node.children.length > 0 ? renderNestedListTree(node.children, `nested-${node.entry.index}`) : null }, node.entry.index)) }, key);
+  return /* @__PURE__ */ jsx13(Tag, { className: `ed-list ed-list-${kind}`, "data-list-kind": kind, children: tree.map((node) => /* @__PURE__ */ jsx13(NodeView, { block: node.entry.block, index: node.entry.index, children: node.children.length > 0 ? renderNestedListTree(node.children, `nested-${node.entry.index}`) : null }, node.entry.index)) }, key);
 }
 function clampListLevel2(l) {
   if (typeof l !== "number" || !Number.isFinite(l)) return 0;
@@ -4919,13 +5770,80 @@ function caretRangeFromPoint(x, y) {
 
 // src/Toolbar.tsx
 import {
-  useCallback as useCallback8,
-  useEffect as useEffect10,
-  useRef as useRef12,
-  useState as useState11
+  useCallback as useCallback9,
+  useEffect as useEffect11,
+  useRef as useRef13,
+  useState as useState12
 } from "react";
-import { ANSWER_LINE_MAX, TABLE_BORDER_COLOR } from "@sofereditor/core";
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { ANSWER_LINE_MAX, isFormulaEmbed as isFormulaEmbed3, TABLE_BORDER_COLOR } from "@sofereditor/core";
+
+// src/TableBorderPanel.tsx
+import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+var BORDER_PRESETS = [
+  { key: "all", label: "Todas", glyph: "\u229E" },
+  { key: "outer", label: "S\xF3 externas", glyph: "\u25A1" },
+  { key: "horizontal", label: "S\xF3 horizontais", glyph: "\u25A4" },
+  { key: "vertical", label: "S\xF3 verticais", glyph: "\u25A5" },
+  { key: "none", label: "Nenhuma", glyph: "\u2B1A" }
+];
+var BORDER_MENU_GLYPH = "\u229E";
+function TableBorderPanel({
+  preset,
+  color,
+  onPreset,
+  onColor,
+  onResetColor
+}) {
+  return /* @__PURE__ */ jsxs14("div", { className: "ed-border-panel", children: [
+    /* @__PURE__ */ jsx14("div", { className: "ed-border-presets", children: BORDER_PRESETS.map((p) => /* @__PURE__ */ jsxs14(
+      "button",
+      {
+        type: "button",
+        className: "ed-border-preset",
+        "aria-pressed": preset === p.key,
+        title: p.label,
+        onClick: (e) => {
+          e.preventDefault();
+          onPreset(p.key);
+        },
+        children: [
+          /* @__PURE__ */ jsx14("span", { className: "ed-border-glyph", "aria-hidden": true, children: p.glyph }),
+          p.label
+        ]
+      },
+      p.key
+    )) }),
+    /* @__PURE__ */ jsx14("hr", {}),
+    /* @__PURE__ */ jsxs14("label", { className: "ed-toolbar-label ed-border-color", children: [
+      /* @__PURE__ */ jsx14("span", { className: "ed-toolbar-swatch", "aria-hidden": true, style: { background: color } }),
+      "Cor da linha",
+      /* @__PURE__ */ jsx14(
+        "input",
+        {
+          type: "color",
+          value: color,
+          onChange: (e) => onColor(e.target.value),
+          "aria-label": "Cor da linha da borda"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx14(
+      "button",
+      {
+        type: "button",
+        className: "ed-border-reset",
+        onClick: (e) => {
+          e.preventDefault();
+          onResetColor();
+        },
+        children: "Padr\xE3o"
+      }
+    )
+  ] });
+}
+
+// src/Toolbar.tsx
+import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
 var FONT_FAMILIES = ["Arial"];
 var FONT_SIZES = ["8pt", "10pt", "11pt", "12pt", "14pt", "16pt", "18pt", "24pt", "32pt", "48pt"];
 var BLOCK_OPTIONS = [
@@ -5029,14 +5947,14 @@ function Toolbar({ className }) {
     }
     setAlign(value);
   };
-  const onInsertImageClick = useCallback8(
+  const onInsertImageClick = useCallback9(
     (e) => {
       e.preventDefault();
       imageInputRef.current?.click();
     },
     []
   );
-  const onImageInputChange = useCallback8(
+  const onImageInputChange = useCallback9(
     (e) => {
       const file = e.target.files?.[0];
       if (file) void editor.insertImageFromFile(file);
@@ -5044,14 +5962,14 @@ function Toolbar({ className }) {
     },
     [editor]
   );
-  const imageInputRef = useRef12(null);
+  const imageInputRef = useRef13(null);
   const onToggleDir = (e) => {
     e.preventDefault();
     const next = blockDir === "rtl" ? "ltr" : "rtl";
     setBlockAttr("dir", next);
   };
   const linkActive = isMarkActive("link");
-  const onLinkClick = useCallback8(
+  const onLinkClick = useCallback9(
     (e) => {
       e.preventDefault();
       const currentHref = active.link && typeof active.link === "object" && "href" in active.link ? active.link.href : "";
@@ -5082,7 +6000,7 @@ function Toolbar({ className }) {
       sel.cellIndex
     );
   };
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       className: className ?? "ed-toolbar",
@@ -5090,7 +6008,7 @@ function Toolbar({ className }) {
       "aria-label": "Editor toolbar",
       onMouseDown: stop,
       children: [
-        /* @__PURE__ */ jsx13(Group, { children: /* @__PURE__ */ jsxs12(
+        /* @__PURE__ */ jsx15(Group, { children: /* @__PURE__ */ jsxs15(
           "select",
           {
             className: "ed-toolbar-select",
@@ -5099,23 +6017,23 @@ function Toolbar({ className }) {
             onMouseDown: stop,
             "aria-label": "Tipo de bloco",
             children: [
-              blockValue === "" && /* @__PURE__ */ jsx13("option", { value: "", children: "\u2014 (misto)" }),
-              BLOCK_OPTIONS.map((o) => /* @__PURE__ */ jsx13("option", { value: o.value, children: o.label }, o.value))
+              blockValue === "" && /* @__PURE__ */ jsx15("option", { value: "", children: "\u2014 (misto)" }),
+              BLOCK_OPTIONS.map((o) => /* @__PURE__ */ jsx15("option", { value: o.value, children: o.label }, o.value))
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxs12(Group, { children: [
-          /* @__PURE__ */ jsx13(MarkButton, { title: "Negrito (\u2318B)", pressed: isMarkActive("bold"), onClick: onToggle("bold"), children: /* @__PURE__ */ jsx13("strong", { children: "B" }) }),
-          /* @__PURE__ */ jsx13(MarkButton, { title: "It\xE1lico (\u2318I)", pressed: isMarkActive("italic"), onClick: onToggle("italic"), children: /* @__PURE__ */ jsx13("em", { children: "I" }) }),
-          /* @__PURE__ */ jsx13(MarkButton, { title: "Sublinhado (\u2318U)", pressed: isMarkActive("underline"), onClick: onToggle("underline"), children: /* @__PURE__ */ jsx13("u", { children: "U" }) }),
-          /* @__PURE__ */ jsx13(MarkButton, { title: "Tachado (\u2318\u21E7X)", pressed: isMarkActive("strike"), onClick: onToggle("strike"), children: /* @__PURE__ */ jsx13("s", { children: "S" }) })
+        /* @__PURE__ */ jsxs15(Group, { children: [
+          /* @__PURE__ */ jsx15(MarkButton, { title: "Negrito (\u2318B)", pressed: isMarkActive("bold"), onClick: onToggle("bold"), children: /* @__PURE__ */ jsx15("strong", { children: "B" }) }),
+          /* @__PURE__ */ jsx15(MarkButton, { title: "It\xE1lico (\u2318I)", pressed: isMarkActive("italic"), onClick: onToggle("italic"), children: /* @__PURE__ */ jsx15("em", { children: "I" }) }),
+          /* @__PURE__ */ jsx15(MarkButton, { title: "Sublinhado (\u2318U)", pressed: isMarkActive("underline"), onClick: onToggle("underline"), children: /* @__PURE__ */ jsx15("u", { children: "U" }) }),
+          /* @__PURE__ */ jsx15(MarkButton, { title: "Tachado (\u2318\u21E7X)", pressed: isMarkActive("strike"), onClick: onToggle("strike"), children: /* @__PURE__ */ jsx15("s", { children: "S" }) })
         ] }),
-        /* @__PURE__ */ jsxs12(Group, { children: [
-          /* @__PURE__ */ jsxs12("label", { className: "ed-toolbar-label", children: [
-            /* @__PURE__ */ jsx13("span", { className: "ed-toolbar-swatch", "aria-hidden": true, style: { background: colorValue } }),
-            /* @__PURE__ */ jsx13("input", { type: "color", value: colorValue, onChange: onColorChange, onMouseDown: stop, "aria-label": "Cor do texto" })
+        /* @__PURE__ */ jsxs15(Group, { children: [
+          /* @__PURE__ */ jsxs15("label", { className: "ed-toolbar-label", children: [
+            /* @__PURE__ */ jsx15("span", { className: "ed-toolbar-swatch", "aria-hidden": true, style: { background: colorValue } }),
+            /* @__PURE__ */ jsx15("input", { type: "color", value: colorValue, onChange: onColorChange, onMouseDown: stop, "aria-label": "Cor do texto" })
           ] }),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx15(
             "button",
             {
               type: "button",
@@ -5129,8 +6047,8 @@ function Toolbar({ className }) {
               children: "\u232B"
             }
           ),
-          /* @__PURE__ */ jsxs12("label", { className: "ed-toolbar-label", title: "Marca-texto", children: [
-            /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsxs15("label", { className: "ed-toolbar-label", title: "Marca-texto", children: [
+            /* @__PURE__ */ jsx15(
               "span",
               {
                 className: "ed-toolbar-swatch ed-toolbar-swatch--highlight",
@@ -5138,7 +6056,7 @@ function Toolbar({ className }) {
                 style: { background: highlightValue }
               }
             ),
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx15(
               "input",
               {
                 type: "color",
@@ -5149,7 +6067,7 @@ function Toolbar({ className }) {
               }
             )
           ] }),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx15(
             "button",
             {
               type: "button",
@@ -5164,8 +6082,8 @@ function Toolbar({ className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs12(Group, { children: [
-          /* @__PURE__ */ jsxs12(
+        /* @__PURE__ */ jsxs15(Group, { children: [
+          /* @__PURE__ */ jsxs15(
             "select",
             {
               className: "ed-toolbar-select",
@@ -5174,12 +6092,12 @@ function Toolbar({ className }) {
               onMouseDown: stop,
               "aria-label": "Fam\xEDlia da fonte",
               children: [
-                /* @__PURE__ */ jsx13("option", { value: "", children: "Fonte\u2026" }),
-                FONT_FAMILIES.map((f) => /* @__PURE__ */ jsx13("option", { value: f, children: f }, f))
+                /* @__PURE__ */ jsx15("option", { value: "", children: "Fonte\u2026" }),
+                FONT_FAMILIES.map((f) => /* @__PURE__ */ jsx15("option", { value: f, children: f }, f))
               ]
             }
           ),
-          /* @__PURE__ */ jsxs12(
+          /* @__PURE__ */ jsxs15(
             "select",
             {
               className: "ed-toolbar-select",
@@ -5188,13 +6106,13 @@ function Toolbar({ className }) {
               onMouseDown: stop,
               "aria-label": "Tamanho da fonte",
               children: [
-                /* @__PURE__ */ jsx13("option", { value: "", children: "Tamanho\u2026" }),
-                FONT_SIZES.map((s) => /* @__PURE__ */ jsx13("option", { value: s, children: s }, s))
+                /* @__PURE__ */ jsx15("option", { value: "", children: "Tamanho\u2026" }),
+                FONT_SIZES.map((s) => /* @__PURE__ */ jsx15("option", { value: s, children: s }, s))
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx13(Group, { children: ALIGN_OPTIONS.map((a) => /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx15(Group, { children: ALIGN_OPTIONS.map((a) => /* @__PURE__ */ jsx15(
           "button",
           {
             type: "button",
@@ -5207,7 +6125,7 @@ function Toolbar({ className }) {
           },
           a.value
         )) }),
-        /* @__PURE__ */ jsx13(Group, { children: /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx15(Group, { children: /* @__PURE__ */ jsx15(
           "button",
           {
             type: "button",
@@ -5219,8 +6137,8 @@ function Toolbar({ className }) {
             children: blockDir === "rtl" ? "RTL" : "LTR"
           }
         ) }),
-        /* @__PURE__ */ jsxs12(Group, { children: [
-          /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsxs15(Group, { children: [
+          /* @__PURE__ */ jsx15(
             "button",
             {
               type: "button",
@@ -5235,7 +6153,7 @@ function Toolbar({ className }) {
               children: "\u2022"
             }
           ),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx15(
             "button",
             {
               type: "button",
@@ -5250,7 +6168,7 @@ function Toolbar({ className }) {
               children: "1."
             }
           ),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx15(
             "button",
             {
               type: "button",
@@ -5264,7 +6182,7 @@ function Toolbar({ className }) {
               children: "\u21E4"
             }
           ),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx15(
             "button",
             {
               type: "button",
@@ -5279,7 +6197,7 @@ function Toolbar({ className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx13(Group, { children: /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx15(Group, { children: /* @__PURE__ */ jsx15(
           "button",
           {
             type: "button",
@@ -5291,12 +6209,12 @@ function Toolbar({ className }) {
             children: "\u{1F517}"
           }
         ) }),
-        /* @__PURE__ */ jsxs12(Group, { children: [
-          /* @__PURE__ */ jsx13(TableMenu, {}),
-          /* @__PURE__ */ jsx13(AnswerLinesMenu, {})
+        /* @__PURE__ */ jsxs15(Group, { children: [
+          /* @__PURE__ */ jsx15(TableMenu, {}),
+          /* @__PURE__ */ jsx15(AnswerLinesMenu, {})
         ] }),
-        /* @__PURE__ */ jsxs12(Group, { children: [
-          /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsxs15(Group, { children: [
+          /* @__PURE__ */ jsx15(
             "button",
             {
               type: "button",
@@ -5307,7 +6225,7 @@ function Toolbar({ className }) {
               children: "\u{1F5BC}"
             }
           ),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx15(
             "input",
             {
               ref: imageInputRef,
@@ -5316,10 +6234,26 @@ function Toolbar({ className }) {
               hidden: true,
               onChange: onImageInputChange
             }
+          ),
+          /* @__PURE__ */ jsx15(
+            "button",
+            {
+              type: "button",
+              className: "ed-toolbar-btn",
+              title: "Inserir f\xF3rmula",
+              onMouseDown: stop,
+              onClick: (e) => {
+                e.preventDefault();
+                void editor.requestFormula().then((r) => r ? editor.insertFormula(r.latex, r.display) : void 0).catch((err) => {
+                  console.error("Falha ao inserir f\xF3rmula:", err);
+                });
+              },
+              children: "\u221Ax"
+            }
           )
         ] }),
-        selectedEmbed && /* @__PURE__ */ jsxs12(Group, { children: [
-          IMAGE_LAYOUT_OPTIONS.map((opt) => /* @__PURE__ */ jsx13(
+        selectedEmbed && /* @__PURE__ */ jsxs15(Group, { children: [
+          IMAGE_LAYOUT_OPTIONS.map((opt) => /* @__PURE__ */ jsx15(
             "button",
             {
               type: "button",
@@ -5332,7 +6266,25 @@ function Toolbar({ className }) {
             },
             opt.value
           )),
-          /* @__PURE__ */ jsx13(
+          isFormulaEmbed3(selectedEmbed.embed) ? /* @__PURE__ */ jsx15(
+            "button",
+            {
+              type: "button",
+              className: "ed-toolbar-btn",
+              title: "Editar f\xF3rmula",
+              onMouseDown: stop,
+              onClick: (e) => {
+                e.preventDefault();
+                if (!isFormulaEmbed3(selectedEmbed.embed)) return;
+                const f = selectedEmbed.embed.formula;
+                void editor.requestFormula(f.latex, f.display).then((r) => {
+                  if (!r) return;
+                  void editor.insertFormula(r.latex, r.display);
+                });
+              },
+              children: "Editar f\xF3rmula"
+            }
+          ) : /* @__PURE__ */ jsx15(
             "button",
             {
               type: "button",
@@ -5362,7 +6314,7 @@ function Toolbar({ className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx13(Group, { children: /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx15(Group, { children: /* @__PURE__ */ jsx15(
           "button",
           {
             type: "button",
@@ -5382,11 +6334,11 @@ function Toolbar({ className }) {
 }
 function AnswerLinesMenu() {
   const editor = useEditorContext();
-  const [open, setOpen] = useState11(false);
-  const [count, setCount] = useState11(5);
-  const [spacing, setSpacing] = useState11(1.5);
-  const rootRef = useRef12(null);
-  useEffect10(() => {
+  const [open, setOpen] = useState12(false);
+  const [count, setCount] = useState12(5);
+  const [spacing, setSpacing] = useState12(1.5);
+  const rootRef = useRef13(null);
+  useEffect11(() => {
     if (!open) return;
     const onDown = (e) => {
       if (!rootRef.current) return;
@@ -5397,8 +6349,8 @@ function AnswerLinesMenu() {
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
   const clamped = Math.max(1, Math.min(ANSWER_LINE_MAX, Math.trunc(count) || 1));
-  return /* @__PURE__ */ jsxs12("div", { ref: rootRef, className: "ed-toolbar-tablemenu", children: [
-    /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs15("div", { ref: rootRef, className: "ed-toolbar-tablemenu", children: [
+    /* @__PURE__ */ jsx15(
       "button",
       {
         type: "button",
@@ -5413,7 +6365,7 @@ function AnswerLinesMenu() {
         children: "\u2630"
       }
     ),
-    open && /* @__PURE__ */ jsxs12(
+    open && /* @__PURE__ */ jsxs15(
       "div",
       {
         className: "ed-table-popover ed-answerlines-popover",
@@ -5422,9 +6374,9 @@ function AnswerLinesMenu() {
           if (!keepsOwnMouseDown(e.target)) e.preventDefault();
         },
         children: [
-          /* @__PURE__ */ jsxs12("label", { className: "ed-toolbar-label", children: [
+          /* @__PURE__ */ jsxs15("label", { className: "ed-toolbar-label", children: [
             "Quantidade",
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx15(
               "input",
               {
                 type: "number",
@@ -5436,23 +6388,23 @@ function AnswerLinesMenu() {
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs12("label", { className: "ed-toolbar-label", children: [
+          /* @__PURE__ */ jsxs15("label", { className: "ed-toolbar-label", children: [
             "Entrelinha",
-            /* @__PURE__ */ jsxs12(
+            /* @__PURE__ */ jsxs15(
               "select",
               {
                 value: String(spacing),
                 onChange: (e) => setSpacing(Number(e.target.value)),
                 "aria-label": "Entrelinha",
                 children: [
-                  /* @__PURE__ */ jsx13("option", { value: "1", children: "Simples" }),
-                  /* @__PURE__ */ jsx13("option", { value: "1.5", children: "1,5" }),
-                  /* @__PURE__ */ jsx13("option", { value: "2", children: "Duplo" })
+                  /* @__PURE__ */ jsx15("option", { value: "1", children: "Simples" }),
+                  /* @__PURE__ */ jsx15("option", { value: "1.5", children: "1,5" }),
+                  /* @__PURE__ */ jsx15("option", { value: "2", children: "Duplo" })
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs12(
+          /* @__PURE__ */ jsxs15(
             "button",
             {
               type: "button",
@@ -5476,9 +6428,10 @@ function AnswerLinesMenu() {
 function TableMenu() {
   const editor = useEditorContext();
   const inTable = editor.isInTable();
-  const [open, setOpen] = useState11(false);
-  const rootRef = useRef12(null);
-  useEffect10(() => {
+  const [open, setOpen] = useState12(false);
+  const [bordersOpen, setBordersOpen] = useState12(false);
+  const rootRef = useRef13(null);
+  useEffect11(() => {
     if (!open) return;
     const onDown = (e) => {
       if (!rootRef.current) return;
@@ -5488,8 +6441,11 @@ function TableMenu() {
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  return /* @__PURE__ */ jsxs12("div", { ref: rootRef, className: "ed-toolbar-tablemenu", children: [
-    /* @__PURE__ */ jsx13(
+  useEffect11(() => {
+    if (!open) setBordersOpen(false);
+  }, [open]);
+  return /* @__PURE__ */ jsxs15("div", { ref: rootRef, className: "ed-toolbar-tablemenu", children: [
+    /* @__PURE__ */ jsx15(
       "button",
       {
         type: "button",
@@ -5504,7 +6460,7 @@ function TableMenu() {
         children: "\u25A6"
       }
     ),
-    open && /* @__PURE__ */ jsxs12(
+    open && /* @__PURE__ */ jsxs15(
       "div",
       {
         className: "ed-table-popover",
@@ -5513,7 +6469,7 @@ function TableMenu() {
           if (!keepsOwnMouseDown(e.target)) e.preventDefault();
         },
         children: [
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx15(
             TableSizePicker,
             {
               onPick: (rows, cols) => {
@@ -5522,34 +6478,34 @@ function TableMenu() {
               }
             }
           ),
-          inTable && /* @__PURE__ */ jsxs12("div", { className: "ed-table-actions", children: [
-            /* @__PURE__ */ jsx13("hr", {}),
-            /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => {
+          inTable && /* @__PURE__ */ jsxs15("div", { className: "ed-table-actions", children: [
+            /* @__PURE__ */ jsx15("hr", {}),
+            /* @__PURE__ */ jsx15("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.insertRowAbove();
             }, children: "Inserir linha acima" }),
-            /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ jsx15("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.insertRowBelow();
             }, children: "Inserir linha abaixo" }),
-            /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ jsx15("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.insertColumnLeft();
             }, children: "Inserir coluna \xE0 esquerda" }),
-            /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ jsx15("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.insertColumnRight();
             }, children: "Inserir coluna \xE0 direita" }),
-            /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ jsx15("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.deleteCurrentRow();
             }, children: "Excluir linha" }),
-            /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ jsx15("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.deleteCurrentColumn();
             }, children: "Excluir coluna" }),
-            /* @__PURE__ */ jsx13("hr", {}),
-            editor.hasTableRectSelection() && /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx15("hr", {}),
+            editor.hasTableRectSelection() && /* @__PURE__ */ jsx15(
               "button",
               {
                 type: "button",
@@ -5560,21 +6516,21 @@ function TableMenu() {
                 children: "Mesclar c\xE9lulas selecionadas"
               }
             ),
-            /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ jsx15("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.mergeRight();
             }, children: "Mesclar com c\xE9lula \xE0 direita" }),
-            /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ jsx15("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.mergeDown();
             }, children: "Mesclar com c\xE9lula abaixo" }),
-            /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ jsx15("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.splitCell();
             }, children: "Dividir c\xE9lulas mescladas" }),
-            /* @__PURE__ */ jsx13("hr", {}),
-            /* @__PURE__ */ jsxs12("label", { className: "ed-toolbar-label ed-table-bgcolor", children: [
-              /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx15("hr", {}),
+            /* @__PURE__ */ jsxs15("label", { className: "ed-toolbar-label ed-table-bgcolor", children: [
+              /* @__PURE__ */ jsx15(
                 "span",
                 {
                   className: "ed-toolbar-swatch",
@@ -5583,7 +6539,7 @@ function TableMenu() {
                 }
               ),
               "Cor de fundo da c\xE9lula",
-              /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx15(
                 "input",
                 {
                   type: "color",
@@ -5593,62 +6549,39 @@ function TableMenu() {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ jsx15("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.setCellBackground(null);
             }, children: "Remover cor de fundo" }),
-            /* @__PURE__ */ jsx13("hr", {}),
-            /* @__PURE__ */ jsxs12("label", { className: "ed-toolbar-label", children: [
-              "Bordas",
-              /* @__PURE__ */ jsxs12(
-                "select",
-                {
-                  value: editor.getTableBorderPreset(),
-                  onChange: (e) => editor.setTableBorderPreset(e.target.value),
-                  "aria-label": "Bordas da tabela",
-                  children: [
-                    /* @__PURE__ */ jsx13("option", { value: "all", children: "Todas" }),
-                    /* @__PURE__ */ jsx13("option", { value: "outer", children: "S\xF3 externas" }),
-                    /* @__PURE__ */ jsx13("option", { value: "horizontal", children: "S\xF3 horizontais" }),
-                    /* @__PURE__ */ jsx13("option", { value: "vertical", children: "S\xF3 verticais" }),
-                    /* @__PURE__ */ jsx13("option", { value: "none", children: "Nenhuma" })
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs12("label", { className: "ed-toolbar-label ed-table-bgcolor", children: [
-              /* @__PURE__ */ jsx13(
-                "span",
-                {
-                  className: "ed-toolbar-swatch",
-                  "aria-hidden": true,
-                  style: { background: editor.getTableBorderColor() ?? TABLE_BORDER_COLOR }
-                }
-              ),
-              "Cor da borda",
-              /* @__PURE__ */ jsx13(
-                "input",
-                {
-                  type: "color",
-                  value: editor.getTableBorderColor() ?? TABLE_BORDER_COLOR,
-                  onChange: (e) => editor.setTableBorderColor(e.target.value),
-                  "aria-label": "Cor da borda"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx15("hr", {}),
+            /* @__PURE__ */ jsx15(
               "button",
               {
                 type: "button",
-                onClick: () => {
-                  setOpen(false);
-                  editor.setTableBorderColor(null);
+                className: "ed-border-toggle",
+                "aria-pressed": bordersOpen,
+                "aria-expanded": bordersOpen,
+                title: "Bordas da tabela",
+                "aria-label": "Bordas da tabela",
+                onClick: (e) => {
+                  e.preventDefault();
+                  setBordersOpen((v) => !v);
                 },
-                children: "Restaurar cor padr\xE3o"
+                children: BORDER_MENU_GLYPH
+              }
+            ),
+            bordersOpen && /* @__PURE__ */ jsx15(
+              TableBorderPanel,
+              {
+                preset: editor.getTableBorderPreset(),
+                color: editor.getTableBorderColor() ?? TABLE_BORDER_COLOR,
+                onPreset: (p) => editor.setTableBorderPreset(p),
+                onColor: (c) => editor.setTableBorderColor(c),
+                onResetColor: () => editor.setTableBorderColor(null)
               }
             ),
-            /* @__PURE__ */ jsx13("hr", {}),
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx15("hr", {}),
+            /* @__PURE__ */ jsx15(
               "button",
               {
                 type: "button",
@@ -5669,11 +6602,11 @@ function TableMenu() {
 var PICKER_MAX_ROWS = 8;
 var PICKER_MAX_COLS = 10;
 function TableSizePicker({ onPick }) {
-  const [hover, setHover] = useState11(null);
+  const [hover, setHover] = useState12(null);
   const label = hover ? `${hover.r + 1} \xD7 ${hover.c + 1}` : "Inserir tabela";
-  return /* @__PURE__ */ jsxs12("div", { className: "ed-table-picker", children: [
-    /* @__PURE__ */ jsx13("div", { className: "ed-table-picker-label", children: label }),
-    /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs15("div", { className: "ed-table-picker", children: [
+    /* @__PURE__ */ jsx15("div", { className: "ed-table-picker-label", children: label }),
+    /* @__PURE__ */ jsx15(
       "div",
       {
         className: "ed-table-picker-grid",
@@ -5686,7 +6619,7 @@ function TableSizePicker({ onPick }) {
           { length: PICKER_MAX_ROWS },
           (_, r) => Array.from({ length: PICKER_MAX_COLS }, (_2, c) => {
             const filled = hover != null && r <= hover.r && c <= hover.c;
-            return /* @__PURE__ */ jsx13(
+            return /* @__PURE__ */ jsx15(
               "button",
               {
                 type: "button",
@@ -5716,10 +6649,10 @@ function blockSelectValue(type, level) {
   return type;
 }
 function Group({ children }) {
-  return /* @__PURE__ */ jsx13("div", { className: "ed-toolbar-group", children });
+  return /* @__PURE__ */ jsx15("div", { className: "ed-toolbar-group", children });
 }
 function MarkButton({ title, pressed, onClick, children }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx15(
     "button",
     {
       type: "button",
@@ -5736,6 +6669,7 @@ export {
   A4_PAGE,
   Editor,
   EditorProvider,
+  FormulaDialog,
   ImageCaptionDialog,
   LinkDialog,
   NodeView,