An original lab worksheet explains a dilution ratio. Its author needs c_1 V_1 = c_2 V_2 inside a sentence and a separate displayed calculation beneath it. A reviewer must be able to revise the formula later, without reconstructing it from an image.
Register math nodes and their renderer styles
Install compatible versions of @tiptap/extension-mathematics and katex in the application's existing Tiptap project. Add this extension entry alongside the normal document, paragraph, text, and other required extensions:
import { Mathematics } from '@tiptap/extension-mathematics';
import 'katex/dist/katex.min.css';
const worksheetMath = Mathematics.configure({
katexOptions: { throwOnError: false }
});
This fragment configures the feature; it does not initialize an entire editor. Preserve the existing loading, menus, and storage integration. Missing KaTeX CSS can leave a formula poorly displayed even when its underlying math node exists.
throwOnError: false changes how rendering handles invalid LaTeX. It does not establish that an equation is mathematically correct. Keep the source available to the author and give invalid expressions a clear correction path.
Insert inline and block expressions deliberately
With editor referring to the initialized worksheet editor, insert the inline expression at the intended selection:
editor.chain().focus().insertInlineMath({
latex: 'c_1 V_1 = c_2 V_2'
}).run();
A displayed expression uses the block command:
editor.chain().focus().insertBlockMath({
latex: '\\frac{c_1 V_1}{V_2} = c_2'
}).run();
The doubled backslash is JavaScript string escaping; the LaTeX value contains \frac. Do not add $ delimiters to these node values merely because a different math-writing tool uses them around plain text.
The commands operate on the current selection unless a supported position is supplied. An external formula dialog must preserve the author's intended node or insertion point. The extension's inlineOptions.onClick and blockOptions.onClick callbacks provide the clicked node and its position for such a dialog. Use the current node's latex attribute to populate it, then apply the matching update command when the author confirms.
Preserve the source when saving and rendering
Capture the document through the application's established representation, for example:
const worksheetSnapshot = editor.getJSON();
This is a snapshot in memory. Persist it through the actual application service and reload it with the math extensions still registered. A custom reader renderer must support those nodes and include the required rendering assets too. Rendering correctly in the editing surface does not prove the receiving page can display them.
Keep the surrounding explanation in readable text. The lab worksheet needs to define what the concentration and volume symbols mean; a visually attractive fraction cannot supply those units or validate the dilution procedure.
If your editor previously represented math with decorations, review its stored records before upgrading. Current documentation provides migrateMathStrings for converting recognized math strings to nodes. In collaborative editing, wait until the initial document has loaded before migration. Apply it to a recoverable copy first and inspect ordinary dollar-denominated text so a conversion rule does not capture content that was never a formula.
Reopen the expression before approving the worksheet
In the running application, insert both forms, edit the displayed expression, and save the worksheet. Reopen it and inspect each math node's retained LaTeX. Then inspect the reader page with its normal stylesheet and renderer.
The ProseMirror schema guide explains why a saved structural node needs matching parsing and rendering support. For this worksheet, read the reopened sentence around the inline ratio and the displayed rearrangement below it. Both expressions must remain editable, and their definitions must still describe the same concentration and volume units.