BlockNote Docs特性扩展

扩展

BlockNote 包含一个扩展系统,允许你扩展编辑器的行为。扩展可以包含以下任意功能:

创建扩展

你可以使用 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({ ... })
  ],
);