BlockNote格式化工具栏双击行尾崩溃问题分析与解决方案

问题背景

在BlockNote富文本编辑器的使用过程中，开发者发现当用户在使用自定义格式化工具栏时，若在行尾位置进行双击操作，会导致编辑器完全崩溃。该问题表现为控制台抛出"Uncaught TypeError: Cannot read properties of undefined (reading 'type')"错误，编辑器界面变为不可用状态。

技术分析

通过问题追踪发现，该崩溃源于格式化工具栏组件内部的文本对齐按钮逻辑处理缺陷。具体问题出现在以下代码段：

const textAlignment = useMemo(() => {
  const block = selectedBlocks[0];
  if (checkBlockHasDefaultProp("textAlignment", block, editor)) {
    return block.props.textAlignment;
  }
  return;
}, [editor, selectedBlocks]);

当用户在行尾双击时，selectedBlocks数组可能为空或未正确初始化，导致block变量为undefined。此时直接尝试访问block.props属性自然会引发类型错误。

解决方案演进

初始解决方案尝试

有开发者建议采用FormattingToolbarController组件进行包装：

<FormattingToolbarController
  formattingToolbar={() => (<FormattingToolbar />)}
/>

然而，这种方案并不适用于所有场景，特别是当开发者需要完全控制工具栏位置和可见性时。

根本解决方案

在BlockNote 0.22.0版本中，开发团队修复了这个问题。修复方式可能包括：

1. 增加对selectedBlocks数组长度的检查
2. 添加对block变量的空值判断
3. 完善双击事件的处理逻辑

最佳实践建议

1. 版本升级：建议所有用户升级至BlockNote 0.22.0或更高版本

2. 自定义工具栏实现：

   • 若需要完全控制工具栏，仍可采用直接使用<FormattingToolbar>的方式
   • 但需注意处理所有可能的边界情况

3. 错误处理：

   • 在自定义组件中建议添加错误边界处理
   • 对可能为undefined的变量进行安全访问

总结

BlockNote作为一款现代化的富文本编辑器，在提供高度自定义能力的同时，也不可避免地会存在一些边界情况下的问题。这次的行尾双击崩溃问题很好地展示了前端组件开发中防御性编程的重要性。通过版本升级和合理的错误处理，开发者可以构建出更健壮的富文本编辑体验。