Math plugin
@nextgensoftwares/folio-plugin-math makes equations editable. Without it you can insert mathInline / mathBlock nodes (their LaTeX lives in the latex attr), but not change them.
import katex from 'katex';
import { composePlugins } from '@nextgensoftwares/folio-editor';
import { mathPlugin } from '@nextgensoftwares/folio-plugin-math';
const renderMath = (latex: string, display: boolean) =>
katex.renderToString(latex || '\\square', { displayMode: display, throwOnError: false, output: 'html' });
const composed = composePlugins(standardSchema, [mathPlugin({ katex, renderMath })]);<FolioToolbar editor={editor} ui={composed.ui} renderMath={renderMath} />
<FolioView editor={editor} ui={composed.ui} painters={composed.painters} input={composed.input} renderMath={renderMath} />
const editor = new FolioEditor({ ..., keymap: composed.keymap, plugins: composed.pmPlugins });The popover renders in <FolioView>'s overlay slot, so passing composed.ui to the view is all the wiring it needs.
Editing
- Click an equation to select it (inline equations too; a 3px band at each edge still places the caret beside it). The selection gets an outline, and the bubble bar shows Edit equation, Display equation and Copy LaTeX.
- Double-click, Enter, or Edit equation opens the editor popover under the equation: a monospace LaTeX source, a live preview, and the error for invalid LaTeX with the bad token highlighted (click it to select it in the source). The last valid render stays, dimmed, while the source is broken.
- Enter or Mod-Enter applies; Shift-Enter adds a line in display math; Escape cancels. Clicking outside applies a valid change. Invalid LaTeX is never written: Enter jumps to the error instead.
- Inline / Display in the popover switches the type on apply. Display → inline makes a paragraph holding the equation; inline → display splits the paragraph around it.
- Applying is one transaction, so one undo step. Empty LaTeX deletes the equation.
- Arrow keys step over an inline equation as one character. Backspace/Delete next to an equation select it first; the next press deletes it (as in Google Docs).
Inserting
| How | What |
|---|---|
type $x^2$ | the closing $ turns it into inline math ($5 and $10, \$, $$ and code are left alone) |
$$ alone in a paragraph, then Enter | opens the editor for a display equation in its place |
/equation, /inline equation | slash items (the plugin's "Equation" replaces the built-in one) |
| Mod-Shift-M | inline equation at the caret; selected text becomes its LaTeX |
| Toolbar ▸ Insert ▸ Equation | Inline / Display (replaces the built-in equation control) |
paste …$a^2$… or $$…$$ | plain-text paste becomes math |
Insertions open the editor first: nothing reaches the document (or the undo history) until you apply.
Symbol palette
Symbols in the popover opens tabs of templates (fractions, roots, sums, products, integrals, limits, binomials, matrices, cases, accents), Greek letters, operators and arrows, a search box (sum, greek omega, arrow) and the symbols you used recently. A click inserts at the source's caret; templates wrap the selected text and put the caret in their first slot.
Routing the actions
The edit actions are surface-neutral ui.items in group math.edit, shown on the bubble bar and the context menu by default. Send them elsewhere with a route, e.g. to the toolbar only:
const app: FolioPlugin = { name: 'app', ui: { route: { 'math.edit': ['toolbar'] } } };Validation
With katex passed, validation renders with throwOnError and reports KaTeX's message and position. With only renderMath, it reads KaTeX's inline error marker (katex-error) from the HTML. plugin.check(latex, display) is the same function.
Layout and export
An edit changes one node's latex attr: only that block is re-measured (the layout's MathMeasurer is called for the new LaTeX only) and pagination resumes from its page. Exporters read the latex attr, so edited equations export to PDF and DOCX (OMML) unchanged.