自定义内联内容类型

除了 BlockNote 提供的默认内联内容类型外，您还可以使用 React 组件创建自己的自定义内联内容。请看下面的示例演示，我们在 BlockNote 编辑器中添加了一个自定义提及标签，以及一个自定义的 建议菜单 用于插入它。

创建自定义内联内容类型

使用 createReactInlineContentSpec 函数来创建自定义内联内容类型。该函数接受两个参数：

function createReactInlineContentSpec(
  blockConfig: CustomInlineContentConfig,
  blockImplementation: ReactInlineContentImplementation,
);

让我们看看演示中的自定义提及标签，并逐个字段解释其作用：

const Mention = createReactInlineContentSpec(
  {
    type: "mention",
    propSchema: {
      user: {
        default: "Unknown",
      },
    },
    content: "none",
  } as const,
  {
    render: (props) => (
      ...
    ),
  }
);

内联内容配置 (CustomInlineContentConfig)

内联内容配置描述你的自定义内联内容的结构。用它来指定自定义内联内容应该支持的类型、属性（props）和内容：

type CustomInlineContentConfig = {
  type: string;
  content: "styled" | "none";
  readonly propSchema: PropSchema;
  draggable?: boolean;
};

type

定义自定义内联内容的标识符。

content

如果你的自定义内联内容应包含 StyledText，则设置为 styled；如果不包含，则为 none。

在提及示例中，我们希望每个提及是一个单独的、不可编辑的元素，所以设置为 "none"。

propSchema

PropSchema 指定内联内容支持的 props。内联内容的 props（属性）是在文档中随内联内容存储的数据，可以用来定制其外观或行为。

type PropSchema<PrimitiveType extends "boolean" | "number" | "string"> = Record<
  string,
  {
    default: PrimitiveType;
    values?: PrimitiveType[];
  }
>;

[key: string] 是 prop 的名称，值是包含两个字段的对象：

• default：指定该 prop 的默认值

• values（可选）：指定该 prop 可以取的值的数组，例如限制该值为预定义字符串列表。如果未定义 values，BlockNote 认为该 prop 可以是任何 PrimitiveType 的值

在提及演示中，我们添加了一个 user prop，用于指定被提及的用户。

内联内容实现 (ReactCustomInlineContentImplementation)

内联内容实现定义了内联内容如何渲染为 HTML。

type ReactCustomInlineContentImplementation = {
  render: React.FC<{
    inlineContent: InlineContent;
    contentRef?: (node: HTMLElement | null) => void;
    draggable?: boolean;
  }>;
};

render

这是你的 React 组件，用于定义自定义内联内容的渲染方式，接受两个 React props：

inlineContent: 需要渲染的内联内容。其类型和 props 会匹配内联内容配置中定义的类型和 PropSchema。

contentRef: React ref，用于标记内联内容中可编辑的元素，仅当你的内联内容配置中包含 content: "styled" 时提供。

draggable: 指定该内联内容是否可以在编辑器内拖动。如果设置为 true，该内联内容将可拖动。若未指定，默认值为 false。如果为 true，你应当将 data-drag-handle 添加到应作为拖动句柄的 DOM 元素上。

注意，由于内联内容定义上就是内联元素，你的组件也应该返回一个 HTML 内联元素。

向编辑器添加自定义内联内容

最后，使用你自定义内联内容的定义创建一个 BlockNoteSchema：

const schema = BlockNoteSchema.create({
  inlineContentSpecs: {
    // 如果需要，可以启用默认内联内容
    ...defaultInlineContentSpecs,

    // 添加你自己的自定义内联内容：
    mention: Mention,
  },
});

然后你可以使用此自定义 schema 实例化你的编辑器，具体方法请参见 自定义 Schema 页面。