Equation
Enables the insertion and rendering of LaTeX equations in your editor.
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>
);
}
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,
}- EquationElement (Plus)
- InlineEquationElement (Plus)
Examples
Plate UI
Refer to the preview above.
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
editor.tf.insert.equation
editor.tf.insert.inlineEquation
Inserts an inline equation.
Types
TEquationElement
interface TEquationElement extends TElement {
texExpression: string;
}