[annieappflowy]

Math equations now support Flutter's block and inline editing flows in Web, with the editor and action menus rebuilt against the Figma math showcase. Pasting math Markdown creates equations while preserving the original TeX.

Changes

• Match the block component spacing: 12 px left inset, 8 px vertical/right insets, 8 px between formula and the 28 px action button, and no extra KaTeX display margins. Correct the previous 4 px formula/action gap while retaining automatic block height.
• Name display equations “Block equation” throughout the English block UI, supporting math equation, me, blk, be, and eqn as slash-menu aliases alongside existing math/TeX search terms. The shared eqn alias also finds Inline equation while preserving its existing search terms.
• Match the compact 400 × 180 editor, expanded 560 × 360 dialog, inline editor, icons, colors, and six-dot menu. Bound editor height to the viewport and scroll long TeX input. Rendered blocks grow and shrink with the formula; place vertical padding inside the scroll container so KaTeX glyph overhang does not create a vertical scrollbar, while retaining horizontal scrolling for wide equations. Clear the block hover background on pointer exit, and highlight the entire selected block while the six-dot menu is open.
• Share equation actions between the six-dot and ellipsis menus. Anchor the six-dot menu to the left of its handle, centered vertically, using the same placement as other blocks; preserve the ellipsis menu placement. Place Turn into and Ask AI submenus beside the parent menu with right arrows; keep Ask AI open on repeated clicks, allow direct switching between submenus, dismiss the submenu first on Escape, and disable Explain/Check for empty equations using the current document state. Match the Ask AI menu design, use red Delete text/icons with the normal neutral hover background, label the child-page conversion “Page”, and hide Comment.
• Resolve copied equation block mentions from the stored TeX using standard mention styling, truncation, and navigation. Same-page mentions derive their formula label directly from current document state. Cross-page mentions retain the page-title prefix, update from document subscriptions, ignore obsolete loads, and release subscriptions on cleanup without reloading on cursor movement. Empty or deleted equations fall back to the page title. Preserve equation-to-page conversion.
• Match Flutter’s multiline cases placeholder and monospace TeX input. Focus the TeX input immediately after typing $$, including while the toolbar bundle is still loading or the converted block DOM is committing. Release Slate’s focus state while the TeX input is active so saving returns keyboard focus to the document and repeated $$ insertion works; keep other block popover contents loaded on demand. Port inline/block shortcuts, whole-string IME input, selection-toolbar formatting, Cmd/Ctrl+Shift+E, inline error previews, continued typing, undo/redo, and read-only behavior. Inline editing explicitly hands focus from Slate to the popover. Cancellation keeps editor mutations outside React state updaters and unmounts the popover focus trap before restoring the cursor; tracked ranges are released on cancellation and unmount.
• Support Flutter's math examples, including multiline equations, align/split, matrices, arrays, cases, tags, and unfinished environments. Recognize dollar and Flutter alternate delimiters during typing and pasting without converting code, links, or ordinary brackets; preserve TeX through clipboard, reload, and conversion to a child page. Memoize block and inline math rendering so selection or menu updates do not reparse unchanged TeX; formula edits and error recovery still rerender.
• Keep AI entry points in the equation action menus; hide them in the compact and expanded TeX editors. Add AI generation, explanation, and checking using the existing completion API, with model selection, streaming, retry, stop, explicit insertion, and protection against late responses and collaborator edits.
• Match Flutter’s AI loading row: replace the prompt while generating with a fading label, three 4 px colored dots in a staggered 1-second wave, and a Stop control using Flutter’s 24 px icon (~22 px visible circle) inside a 32 px button with 4 px padding and a transparent hover background. Honor reduced motion, focus Stop during generation, support Escape cancellation, and return focus to the prompt afterward.
• Render equation AI responses as formatted Markdown with headings, emphasis, nested lists, tasks, quotes, code, safe links, tables, and inline/display KaTeX. Reuse the document parser and mark styles in a lightweight read-only preview. Convert latex, tex, and math fences to equations for both preview and insertion, including nested Markdown math wrappers; retain explicit Insert and late-response/collaborator guards.

Validation

• The Stop control size correction passed Chromium light/dark AI generation checks, verifying the 32 px button, 24 px SVG, 4 px padding, and ~22 px visible circle, together with integration TypeScript and changed-component ESLint.
• After the AI loading/Markdown update, 236 unit tests across 12 suites passed, covering the real Markdown/KaTeX renderer, shared parsers, streaming updates, completion, errors, retry, Stop/Escape, stale callbacks, and preview/insertion consistency. 10 focused browser checks passed across Chromium light/dark, including all three AI actions, loading dot geometry/colors/timing, reduced motion, keyboard focus, formatted responses, retry/insertion, empty actions, and collaborator protection. Two additional light/dark checks passed for AI generation with math wrappers inside a TeX code fence. Web/integration TypeScript, changed-source ESLint, and the production build passed.
• Figma spacing was checked against rendered DOM geometry; the existing 20 px More icon matches the Figma asset geometry. Ten targeted light/dark browser checks and changed-component ESLint passed after the spacing correction.
• Equation height regression reproduced a 6 px internal vertical overflow before the fix. Ten targeted Chromium light/dark checks passed afterward, covering formula growth/shrinkage, horizontal overflow, hover cleanup, read-only rendering, and editor size bounds. Verified the reported formula in the signed-in localhost app without internal vertical overflow; integration TypeScript and changed-component ESLint passed.
• After the Block equation rename, eight slash-menu unit tests and two targeted Chromium scenarios passed for insertion, editing, persistence, and block actions.
• 1,667 tests passed across 127 Jest suites covering editor/Slate/KaTeX and database rich text. This includes 104 cases in dedicated math suites, plus equation-to-page conversion, block-title extraction, and Strict Mode inline cancellation/range cleanup.
• 54 Playwright checks passed across Chromium light and dark themes: immediate and repeated $$ typing, inline cancellation and continued typing, exact dimensions and viewport bounds, hover/selection cleanup, parent/submenu placement and dismissal, empty AI actions, copied-block mentions, paste/reload, toolbar/keyboard conversion, undo/redo, and mocked AI streaming/insertion.
• Three targeted Firefox checks passed for inline slash insertion/error editing, cancellation with continued typing, and immediate $$ typing.
• React regression tests cover stale mention responses, request counts during cursor movement, live formula updates/deletion, subscription cleanup, unchanged-TeX parse counts, and recovery from invalid TeX.
• Web and integration-fixture TypeScript checks, changed-source ESLint, git diff --check, and production build passed.
• Manual checks in the signed-in localhost app at port 3014 covered editing/expanded mode, repeated $$ insertion and focus restoration, six-dot positioning against other blocks, save/reload, and hover cleanup. A subsequent live Explain equation request through the configured test-cloud backend returned HTTP 200 and rendered 61 equations and 16 list items without TeX errors or horizontal overflow. The response area remained bounded at 440 px. Browser automation uses controlled AI responses; the live check reviewed the response without inserting it into the user’s document. Console observations were limited to the existing disabled-tooltip warning and the hover-control “No range and node found” warning; no AI rendering error was observed.

Compatibility and limits

• Flutter code and the shared stored formula schema are unchanged. Source TeX is preserved; KaTeX normalization happens when rendering.
• Insert commits and Cancel discards the block editor draft, following the Figma/Web interaction. Flutter's current editor autosaves changes.
• Comment is hidden, and the TeX editor has no AI button, as requested. Ask AI remains available from the equation action menus.

Closed-issue audit

Reviewed the 13 closed editor issues returned by the equation search. The tested scenarios in AppFlowy #8312, #6053, #7399, #6411, #6986, #7279, #7331, and #1066 are supported.

Remaining limitations:

• #1849: Markdown file import preserves display math but drops inline formula attributes; a separate audit probe reproduced $x_1$ becoming a plain $. Pasting the same Markdown preserves both forms. This import-path gap is not fixed here.
• #5552: Multiline equations, align/matrix environments, and render-time closing of unfinished environments work. The input does not insert closing environment tags, and there is no document-wide “convert all TeX” command requested in the issue comments.
• #1795: Clipboard serialization preserves math Markdown, but the Web Share menu only exposes PDF export; Markdown file export is not available.
• #6839: Typst is unsupported; this issue was closed as not planned. This PR uses TeX/KaTeX.
• #5667: The general selection-menu redesign is outside this equation PR.

[sourcery-ai]

Sorry @annieappflowy, your pull request is larger than the review limit of 150,000 diff characters