LiveBlocks React-BlockNote 配置传递问题解析

问题背景

在LiveBlocks与BlockNote的集成使用过程中，开发者发现通过useCreateBlockNoteWithLiveblocks钩子传递的BlockNote配置选项无法正常工作。具体表现为当尝试配置uploadFile属性时，该功能并未按预期生效。

技术分析

配置传递机制

LiveBlocks的@liveblocks/react-blocknote包提供了一个特殊的钩子useCreateBlockNoteWithLiveblocks，旨在将BlockNote编辑器与LiveBlocks的实时协作功能集成。该钩子接受BlockNote的配置选项作为参数，理论上应该将这些配置传递给底层的BlockNote编辑器。

问题根源

经过代码审查发现，withLiveblocksEditorOptions函数在处理配置时存在逻辑缺陷。该函数的主要职责是：

1. 处理LiveBlocks特有的扩展和模式
2. 禁用历史记录扩展
3. 合并用户提供的BlockNote配置

然而，当前实现仅保留了schema、_extensions和disableExtensions三个属性，其他所有用户提供的BlockNote配置选项都被丢弃，导致如uploadFile等重要功能无法正常工作。

影响范围

这一问题影响了所有需要通过useCreateBlockNoteWithLiveblocks传递的BlockNote配置选项，包括但不限于：

• 文件上传功能(uploadFile)
• 自定义块模式
• 内联内容模式
• 样式模式
• 各种编辑器行为配置

解决方案

修复思路

正确的实现应该保留用户提供的所有BlockNote配置选项，同时仅对LiveBlocks需要特殊处理的选项进行修改。具体来说：

1. 解构用户配置时，将LiveBlocks需要处理的属性单独提取
2. 保留其他所有属性
3. 在返回的新配置中合并这些保留的属性

修复代码示例

export const withLiveblocksEditorOptions = <
  B extends BlockSchema = DefaultBlockSchema,
  I extends InlineContentSchema = DefaultInlineContentSchema,
  S extends StyleSchema = DefaultStyleSchema,
>(
  liveblocksExtension: Extension,
  blocknoteOptions: Partial<BlockNoteEditorOptions<B, I, S>> = {},
  liveblocksOptions: Partial<{ mentions: boolean }> = {}
): Partial<BlockNoteEditorOptions<B, I, S>> => {
  const {
    schema: blocknoteSchema,
    _extensions: blocknoteExtensions,
    disableExtensions: blocknoteDisableExtensions,
    ...extraBlocknoteOptions
  } = blocknoteOptions;

  return {
    schema: withLiveblocksSchema(blocknoteSchema, liveblocksOptions),
    _extensions: { liveblocksExtension, ...blocknoteExtensions },
    disableExtensions: ["history", ...(blocknoteDisableExtensions || [])],
    ...extraBlocknoteOptions,
  };
};

最佳实践建议

配置使用指南

在使用useCreateBlockNoteWithLiveblocks时，开发者可以像使用原生BlockNote的useCreateBlockNote一样传递所有支持的配置选项。修复后的实现将确保这些配置正确传递给底层编辑器。

调试技巧

如果在集成过程中遇到配置不生效的情况，可以：

1. 检查useCreateBlockNoteWithLiveblocks返回的编辑器实例
2. 验证所需配置属性是否存在于编辑器选项中
3. 确认没有其他扩展或配置覆盖了你的设置

总结

LiveBlocks与BlockNote的集成提供了强大的实时协作编辑能力，但在配置传递机制上存在缺陷。通过正确保留和合并所有用户配置选项，可以确保编辑器的完整功能集可用。这一修复对于需要自定义编辑器行为或添加如文件上传等功能的开发者尤为重要。