Equation

Equation ElementInline Equation ElementInline Equation Toolbar Button
Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

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

export default function Demo({ id }: { id: string }) {
  const editor = useCreateEditor({
    plugins: [...editorPlugins],
    value: DEMO_VALUES[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

Installation

pnpm add @udecode/plate-math

Usage

import { EquationPlugin, InlineEquationPlugin } from '@udecode/plate-math/react';
const plugins = [
  // ...otherPlugins,
  EquationPlugin,
  InlineEquationPlugin,
]
const components = {
  // ...otherComponents,
  [EquationPlugin.key]: EquationElement,
  [InlineEquationPlugin.key]: InlineEquationElement,
}

Examples

Plate UI

Refer to the preview above.

Plate Plus

Plugins

EquationPlugin

Plugin for block equation elements.

InlineEquationPlugin

Plugin for inline equation elements.

Transforms

editor.tf.insert.equation

OptionsInsertNodesOptions

    Options for the insert nodes transform.

editor.tf.insert.inlineEquation

Inserts an inline equation.

Parameters

Collapse all

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

    Options for the insert nodes transform.

Types

TEquationElement

interface TEquationElement extends TElement {
  texExpression: string;
}