prosemirror-math

请不要犹豫 报告问题或提出特写请求! 欢迎捐款!

概览

这个 prosemirror-math 软件包为舒适地书写数学提供了图案和插件 表达器。在 TypeScript 中写入,数学渲染由 卡特克语Name您可以安装 npm 软件包 或使用此寄存器作为您自己的插件的起点。 该项目的重要档案有:

• lib/math-schema.ts:一个支持内线并显示数学节点的最小ProseMirror schema.
• lib/math-nodeview.ts页:1 NodeView 负责渲染和编辑数学节点.
• public/prosemirror-math.css: 包含数学节点正确显示所需的所有样式。 此文件可以很容易地被修改以实现您想要的外观 .

基本使用量(你自己试试看!(中文(简体) )

不同于其他编辑器, 此插件 将数学作为文本本身的一部分,而不是作为一个只能通过对话框编辑的"原子". 例如,可以通过将光标带入其中直接编辑内线数学节点:

显示数学支持多行编辑, 如下所示 :

要创建新的数学表达式, 只需将 LaTeX 数学符号附加在美元符号中, 例如 $x+y=5$。当您完成打入时,将自动创建一个新的数学节点:

要开始显示数学块, 请创建空白行和类型 $$ 然后是空间。 多行编辑器将出现 。 要离开街区,按 Ctrl-Enter 或导航鼠标或箭头键.

数学节点在使用箭头键时表现为正则文本或 Backspace。您可以选择、复制和粘贴数学节点,就像普通文本一样! 从数学节点内按 Ctrl-Backspace 删除整个节点.

提普: 您可以用 \providecommand{\cmd}{...}来啊!

见 KATeX 文档列表 支持的 LaTeX 命令未来, prosemirror-math 还会接受一个自定义的回调,用于引用 MathJax 等替代渲染器.

安装和设置

请注意: prosemirror-math 建在顶部 表达器,它本身有一个陡峭的学习曲线。 至少,你必须明白 Schema 财务报告和审定财务报表 Plugins 合并 prosemirror-math 进入你的项目。 从安装开始 npm 软件包 :

npm install @benrbray/prosemirror-math

支助科

首先,确保您包含 CSS 文件 prosemirror-math 财务报告和审定财务报表 katex 在任何需要的页面上。 它们可通过以下途径找到:

node_modules/katex/dist/katex.min.css
node_modules/@benrbray/prosemirror-math/dist/prosemirror-math.css

如果你在使用一个捆绑机 vite 或者说 webpack,您也许可以包含这样的 CSS 文件 :

import "@benrbray/prosemirror-math/dist/prosemirror-math.css";
import "katex/dist/katex.min.css";

司马

添加 math_inline 财务报告和审定财务报表 math_display 您的节点 prosemirror 文档计划。 这些名字很重要! 如果您修改了方案, 请注意不要更改标记的值 important! 否则你可能会遇到出乎意料的行为!

import { Schema } from "prosemirror-model";

let schema = new Schema({
    nodes: {
        doc: {
            content: "block+"
        },
        paragraph: {
            content: "inline*",
            group: "block",
            parseDOM: [{ tag: "p" }],
            toDOM() { return ["p", 0]; }
        },
        math_inline: {               // important!
            group: "inline math",
            content: "text*",        // important!
            inline: true,            // important!
            atom: true,              // important!
            toDOM: () => ["math-inline", { class: "math-node" }, 0],
            parseDOM: [{
                tag: "math-inline"   // important!
            }]
        },
        math_display: {              // important!
            group: "block math",
            content: "text*",        // important!
            atom: true,              // important!
            code: true,              // important!
            toDOM: () => ["math-display", { class: "math-node" }, 0],
            parseDOM: [{
                tag: "math-display"  // important!
            }]
        },
        text: {
            group: "inline"
        }
    }
});

输入规则

如果您希望用户能够通过打入轻松添加新的数学节点 $...$ 用于内置数学或 $$ 后面是块数学的空格,您需要创建 InputRule 实例。 您可以自行写作,也可以使用由 prosemirror-math。 。 。 .

责备: 确保 NodeType您为每个输入规则提供了属于您传递给您的 ProseMirror 的相同的计划实例 EditorView 举个例子 否则你就会在控制台上看到奇怪的错误!

import {
    makeBlockMathInputRule, makeInlineMathInputRule,
    REGEX_INLINE_MATH_DOLLARS, REGEX_BLOCK_MATH_DOLLARS
} from "@benrbray/prosemirror-math";

// create input rules (using default regex)
let inlineMathInputRule = makeInlineMathInputRule(REGEX_INLINE_MATH_DOLLARS, editorSchema.nodes.math_inline);
let blockMathInputRule = makeBlockMathInputRule(REGEX_BLOCK_MATH_DOLLARS, editorSchema.nodes.math_display);

插件

从下面的列表中选择您需要的插件, 并将其传递到您的 EditorState 实例,以及您创建的输入规则.

• mathPlugin (必须) 提供 prosemirror-math。 。 。 .
• mathBackspaceCmd (建议) 当包含在您的 键盘映射 联 合 国 "Backspace" 键,按下数学节点右边界的后空格,可将光标放入数学节点,而不是删除.
• insertMathCmd(nodeType: NodeType) (可选) 用于创建命令的帮助器函数,用于在当前文档位置插入数学节点.
• mathSerializer (建议) 附 录 clipboardTextSerializer 您编辑器的道具 。 粘贴从 a 选择 prosemirror-math 编辑器到纯文本编辑器,确保粘贴的数学表达式由 $...$ 财务报告和审定财务报表 $$...$$。 。 。 .

建议设置如下:

import { mathPlugin, mathBackspaceCmd, insertMathCmd, mathSerializer } from "@benrbray/prosemirror-math";

// prosemirror imports
import { EditorView } from "prosemirror-view";
import { EditorState, Plugin } from "prosemirror-state";
import { chainCommands, deleteSelection, selectNodeBackward, joinBackward, Command } from "prosemirror-commands";
import { keymap } from "prosemirror-keymap";
import { inputRules } from "prosemirror-inputrules";

// plugins (order matters)
let plugins:Plugin[] = [
    mathPlugin,
    keymap({
        "Mod-Space" : insertMathCmd(schema.nodes.math_inline),
        // modify the default keymap chain for backspace
        "Backspace": chainCommands(deleteSelection, mathBackspaceCmd, joinBackward, selectNodeBackward),
    }),
    inputRules({ rules: [ inlineMathInputRule, blockMathInputRule ] })
];

// create prosemirror state
let state = EditorState.create({
    schema: editorSchema,
    plugins: plugins,
    doc: /* ... */
})

// create prosemirror view
let view = new EditorView(editorElt, {
    state,
    clipboardTextSerializer: (slice) => { return mathSerializer.serializeSlice(slice) },
})

发展

清除此寄存器并安装必要的依赖性 :

git clone [email protected]:benrbray/prosemirror-math.git
cd prosemirror-math
npm install

从根目录中可以运行脚本 package.json。 。 。 .

• 使用 npm run build 用于建设 prosemirror-math 软件包
• 使用 npm run build:site 生成静态演示网站
• 使用 npm run dev 启动本地开发服务器

释放

(本节为帮助我回忆出版新版所需步骤)

制作供测试的预发版本:

# begin a prerelease
npm version premajor --preid=rc # from 1.0.0 to 2.0.0-rc.0
npm version preminor --preid=rc # from 1.0.0 to 1.1.0-rc.0
npm version prepatch --preid=rc # from 1.0.0 to 1.0.1-rc.0

# increment the prerelease version number
npm version prerelease # from 2.0.0-rc.0 to 2.0.0-rc.1

# promote the prerelease version
npm version major # from 2.0.0-rc.1 to 2.0.0
npm version minor # from 1.1.0-beta.0 to 1.1.0
npm version patch # from 1.0.1-alpha.0 to 1.0.1