数学公式 - Plate

功能特性

支持LaTeX语法编写复杂数学表达式
提供行内公式和块级公式两种格式
使用KaTeX实时渲染公式
便捷的公式编辑和导航功能

</PackageInfo>

套件使用

<Steps>

安装

最快捷的方式是使用MathKit套件，它包含预配置的EquationPlugin和InlineEquationPlugin、对应的 $...$ 与 $$ input rules，以及Plate UI组件。

EquationElement: 渲染块级公式元素
InlineEquationElement: 渲染行内公式元素

添加套件

将套件添加到插件中:

tsx

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

const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    ...MathKit,
  ],
});

</Steps>

手动配置

<Steps>

安装

bash

npm install @platejs/math

添加插件

在创建编辑器时将公式插件包含到Plate插件数组中。

tsx

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

const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    EquationPlugin,
    InlineEquationPlugin,
  ],
});

配置插件

使用自定义组件和 input rules 配置插件来渲染公式元素。

tsx

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';

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

node.component：指定EquationElement渲染块级公式，InlineEquationElement渲染行内公式。
MathRules.markdown({ variant: '$' })：启用行内公式 Markdown 快捷输入。
MathRules.markdown({ variant: '$$', on: 'break' | 'match' })：启用块级公式 Markdown 快捷输入，并显式选择提交时机。

完整运行时模型请参阅 Plugin Input Rules。

添加工具栏按钮

您可以在工具栏中添加EquationToolbarButton来插入公式。

</Steps>

Plate Plus

插件

`EquationPlugin`

用于块级公式元素的插件。

`InlineEquationPlugin`

用于行内公式元素的插件。

转换方法

`tf.insert.equation`

<API name="insert.equation"> <APIOptions type="InsertNodesOptions"> 插入节点的转换选项 </APIOptions> </API>

`tf.insert.inlineEquation`

插入一个行内公式。

<API name="insert.inlineEquation"> <APIParameters> <APIItem name="texExpression" type="string" optional> 要插入的LaTeX表达式。如未提供则为空公式。 </APIItem> <APIItem name="options" type="InsertNodesOptions" optional> 插入节点的转换选项 </APIItem> </APIParameters> </API>

类型定义

`TEquationElement`

typescript

interface TEquationElement extends TElement {
  texExpression: string;
}