扩展
BlockNote 包含一个扩展系统,允许你扩展编辑器的行为。扩展可以包含以下任意功能:
- 键盘快捷键
- 输入规则
- ProseMirror 插件
- TipTap 扩展
创建扩展
你可以使用 createExtension 函数来创建扩展:
type Extension = {
key: string;
keyboardShortcuts?: Record<
string,
(ctx: { editor: BlockNoteEditor; }) => boolean
>;
inputRules?: {
find: RegExp;
replace: (props: {
match: RegExpMatchArray;
range: { from: number; to: number };
editor: BlockNoteEditor;
}) => PartialBlock | undefined;
}[];
plugins?: Plugin[];
tiptapExtensions?: AnyExtension[];
}
const CustomExtension = createExtension({
key: "customBlockExtension",
keyboardShortcuts: ...,
inputRules: ...,
plugins: ...,
tiptapExtensions: ...,
});下面是可以传入 createExtension 的选项说明:
key: 扩展的名称。
keyboardShortcuts?: 键盘快捷键用于在编辑器中按下某键组合时执行代码。键名与 KeyboardEvent.key 属性 中使用的一致。接受一个对象,该对象将键名组合(例如 Meta+Shift+ArrowDown)映射到函数,函数在处理该按键事件时返回 true ,否则返回 false。函数只有一个参数:
ctx:包含 BlockNote 编辑器实例的对象。
inputRules?: 输入规则用于在检测到指定正则表达式时更新区块。接受一个对象数组。每个对象包含 find 字段,用于指定要查找的正则表达式,以及 replace 字段,用于指定匹配时要执行的函数。该函数应返回一个 PartialBlock,用于指定区块应该如何更新,或者不执行更新。函数也有一个参数:
props:一个对象,包含正则匹配的结果、匹配范围对应的 Prosemirror 位置索引,以及 BlockNote 编辑器实例。
plugins?: 一个 ProseMirror 插件 数组。
tiptapExtensions?: 一个 TipTap 扩展 数组。
向编辑器添加扩展
扩展可以单独通过 编辑器选项 添加到编辑器中,或者作为 自定义区块 的一部分添加。
直接添加到编辑器
extensions 编辑器选项 接受一个扩展数组,用于添加到编辑器中:
const editor = useCreateBlockNote({
extensions: [
// 在此添加扩展:
createExtension({ ... })
],
});添加到自定义区块
创建 自定义区块 时,使用 createReactBlockSpec,你可以将扩展数组作为第三个参数传入:
const createCustomBlock = createReactBlockSpec(
{
// 区块配置
...
},
{
// 区块实现
...
}
[
// 在此添加扩展:
createExtension({ ... })
],
);