Equation

Equation adds block and inline void nodes for LaTeX expressions. Both nodes store source in texExpression and render through KaTeX. This page covers kit setup, block versus inline ownership, insertion, input rules, Markdown serialization, and registry UI behavior.

Features

• Block equation element.
• Inline void inline_equation element.
• Bound editor.tf.insert.equation and editor.tf.insert.inlineEquation transforms.
• Direct insertEquation and insertInlineEquation helpers.
• KaTeX rendering in editable and static UI.
• $...$ inline input rule and $$ block input rule.
• Markdown round-trip for inline math and block math.

Fast Path

Add The Kit

MathKit installs both equation plugins, their registry components, and the default math input rules.

import { createPlateEditor } from 'platejs/react';

import { MathKit } from '@/components/editor/plugins/math-kit';

export const editor = createPlateEditor({
  plugins: MathKit,
});

Render The Nodes

equation-node owns the block equation, inline equation, editable popover, textarea input, KaTeX render target, static elements, and DOCX fallback elements.

Add The Toolbar Button

equation-toolbar-button inserts an inline equation with insertInlineEquation(editor).

Ownership

Block and inline equations share the TEquationElement shape, but they are different node types with different plugin keys.

Manual Setup

Install Package

npm install @platejs/math

Add Plugins

Use both React plugins when your editor supports block and inline equations.

import { MathRules } from '@platejs/math';
import {
  EquationPlugin,
  InlineEquationPlugin,
} from '@platejs/math/react';
import { createPlateEditor } from 'platejs/react';

import {
  EquationElement,
  InlineEquationElement,
} from '@/components/ui/equation-node';

export const editor = createPlateEditor({
  plugins: [
    InlineEquationPlugin.configure({
      inputRules: [MathRules.markdown({ variant: '$' })],
      node: { component: InlineEquationElement },
    }),
    EquationPlugin.configure({
      inputRules: [MathRules.markdown({ on: 'break', variant: '$$' })],
      node: { component: EquationElement },
    }),
  ],
});

Add Static Rendering

Use the base kit when rendering read-only output with platejs/static.

Insert Equations

Use plugin-bound transforms when you already have a configured editor.

editor.tf.insert.equation({ select: true });
editor.tf.insert.inlineEquation('E = mc^2', { select: true });

Use package helpers directly from toolbar, slash-command, or app-local action code.

import { insertEquation, insertInlineEquation } from '@platejs/math';

insertEquation(editor, { select: true });
insertInlineEquation(editor, 'E = mc^2', { select: true });

Value Shape

Both equation nodes store source in texExpression. The child text is only the Slate-required child for a void element.

const value = [
  {
    children: [
      { text: 'Mass-energy equivalence: ' },
      {
        children: [{ text: '' }],
        texExpression: 'E = mc^2',
        type: 'inline_equation',
      },
      { text: '.' },
    ],
    type: 'p',
  },
  {
    children: [{ text: '' }],
    texExpression: '\\\\int_{a}^{b} f(x) \\\\, dx = F(b) - F(a)',
    type: 'equation',
  },
];

Input Rules

MathRules.markdown creates editor input rules. It is separate from Markdown serialization.

Math input rules are disabled inside code blocks, block equations, and inline equations.

Rendering

The registry components render KaTeX and keep source editing in a popover.

KaTeX is configured with throwOnError: false, strict: 'warn', and trust: false in the registry UI.

Markdown

Markdown math support comes from @platejs/markdown plus remark-math, as configured by the registry MarkdownKit.

Inline $x+1$ math

$$
x+1
$$

Inline math deserializes to inline_equation. Block math deserializes to equation. Serialization writes the same Markdown math shapes from texExpression.

Plate Plus

API Reference