Equation

PreviousNext
PlusEquation ElementEquation Toolbar Button
Loading...
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { createValue } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: createValue(id),
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

Features

  • LaTeX syntax support for complex mathematical expressions.
  • Both inline and block equation formats.
  • Real-time rendering of equations using KaTeX.
  • Easy editing and navigation within equations.
  • Markdown shortcuts: type $...$ to create an inline equation, or $$ then Enter to create a block equation.

Kit Usage

Installation

The fastest way to add equation functionality is with the MathKit, which includes the EquationPlugin and InlineEquationPlugin with Plate UI components, along with the $...$ and $$ Markdown shortcuts.

'use client';
 
import { MathRules } from '@platejs/math';
import { EquationPlugin, InlineEquationPlugin } from '@platejs/math/react';
 
import {
  EquationElement,
  InlineEquationElement,
} from '@/components/ui/equation-node';
 
export const MathKit = [
  InlineEquationPlugin.configure({
    inputRules: [MathRules.markdown({ variant: '$' })],
    node: {
      component: InlineEquationElement,
    },
  }),
  EquationPlugin.configure({
    inputRules: [MathRules.markdown({ on: 'break', variant: '$$' })],
    node: {
      component: EquationElement,
    },
  }),
];

Add Kit

Add the kit to your plugins:

import { createPlateEditor } from 'platejs/react';
import { MathKit } from '@/components/editor/plugins/math-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...MathKit,
  ],
});

Manual Usage

Installation

pnpm add @platejs/math

Add Plugins

Include the equation plugins in your Plate plugins array when creating the editor.

import { MathRules } from '@platejs/math';
import {
  EquationPlugin,
  InlineEquationPlugin,
} from '@platejs/math/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    EquationPlugin,
    InlineEquationPlugin,
  ],
});

Configure Plugins

Configure the plugins with custom components to render equation elements.

import {
  EquationPlugin,
  InlineEquationPlugin,
} from '@platejs/math/react';
import { createPlateEditor } from 'platejs/react';
import { EquationElement, InlineEquationElement } from '@/components/ui/equation-node';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    InlineEquationPlugin.configure({
      inputRules: [MathRules.markdown({ variant: '$' })],
      node: {
        component: InlineEquationElement,
      },
    }),
    EquationPlugin.configure({
      inputRules: [MathRules.markdown({ on: 'break', variant: '$$' })],
      node: {
        component: EquationElement,
      },
    }),
  ],
});
  • node.component: Assigns EquationElement to render block equations and InlineEquationElement to render inline equations.
  • MathRules.markdown({ variant: '$' }): Enables the inline markdown shortcut.
  • MathRules.markdown({ variant: '$$', on: 'break' | 'match' }): Enables the block markdown shortcut and makes the trigger explicit.

Add Toolbar Button

You can add EquationToolbarButton to your Toolbar to insert equations.

Plate Plus

  • Mark text as equation from the toolbar
  • Insert equation from slash command
  • Beautifully crafted UI

Plugins

EquationPlugin

Plugin for block equation elements.

InlineEquationPlugin

Plugin for inline equation elements.

Transforms

tf.insert.equation

OptionsInsertNodesOptions

    Options for the insert nodes transform.

tf.insert.inlineEquation

Inserts an inline equation.

Parameters

    The LaTeX expression to insert. Empty equation if not provided.

    Options for the insert nodes transform.

Types

TEquationElement

interface TEquationElement extends TElement {
  texExpression: string;
}
DateLink