自定义样式类型

除了 BlockNote 提供的默认样式类型之外，您还可以使用 React 组件创建自己的自定义样式。请查看下面的演示，在其中我们向 BlockNote 编辑器添加了自定义字体样式，以及一个用于设置该样式的自定义格式工具栏按钮。

创建自定义样式类型

使用 createReactStyleSpec 函数来创建自定义样式类型。该函数接收两个参数：

function createReactStyleSpec(
  styleConfig: CustomStyleConfig,
  styleImplementation: ReactStyleImplementation,
): StyleSpec;

它会返回您的自定义内联内容实例，或者一个 StyleSpec。该 StyleSpec 将传递给您的BlockNote 架构，以便向编辑器添加该样式。

让我们来看演示中的自定义字体样式，并逐一解释每个字段的作用：

export const Font = createReactStyleSpec(
  {
    type: "font",
    propSchema: "string",
  },
  {
    render: (props) => (
      <span style={{ fontFamily: props.value }} ref={props.contentRef} />
    ),
  }
);

样式配置（CustomStyleConfig）

样式配置描述了自定义样式的结构。使用它来指定类型，以及样式是否应该接受字符串值：

type CustomStyleConfig = {
  type: string;
  readonly propSchema: "boolean" | "string";
};

type: 定义自定义样式的标识符。

propSchema: propSchema 指定样式是仅能切换开启/关闭的（"boolean"），还是可以接受字符串值的（"string"）。支持字符串值对于例如设置样式的颜色非常有用。

样式实现（ReactCustomStyleImplementation）

样式实现定义了样式如何被呈现为 HTML。

type ReactCustomStyleImplementation = {
  render: React.FC<{
    value?: string;
    contentRef: (node: HTMLElement | null) => void;
  }>;
  toExternalHTML?: React.FC<{
    value?: string;
    contentRef: (node: HTMLElement | null) => void;
  }>;
  parse?: (element: HTMLElement) => string | true | undefined;
};

render: 这是您的 React 组件，用于定义自定义样式的渲染方式，并接受两个 React 属性：

• value: 样式的字符串值，仅当您的样式配置包含 propSchema: "string" 时可用。

• contentRef: 一个 React ref，用于标记可编辑元素。

toExternalHTML?: 这个组件用于当样式导出为 HTML 供 BlockNote 之外使用时，例如复制到剪贴板。如果未定义，BlockNote 默认使用 render 进行 HTML 转换。接收与 render 相同的属性。

parse?: parse 函数定义了如何将 HTML 内容解析为您的样式，例如在从剪贴板粘贴内容时。如果该元素应该被解析为您的自定义样式，则返回一个 string 或 true。如果 propSchema 是 "string"，则应返回字符串值，否则返回 true。返回 undefined 表示不从此 HTML 元素解析样式。它接收一个参数：

• element：当前正在解析的 HTML 元素。

将自定义样式添加到编辑器

最后，使用您的自定义样式定义来创建一个 BlockNoteSchema：

const schema = BlockNoteSchema.create({
  styleSpecs: {
    // 如有需要，可启用默认样式
    ...defaultStyleSpecs,

    // 添加您自己的自定义样式：
    font: Font,
  },
});

接下来，您可以使用这个自定义的 schema 来实例化您的编辑器，具体说明请参见自定义架构页面。