BlockNote项目中自定义行内组件导出值的实现方案

在基于BlockNote编辑器进行二次开发时，开发者经常需要实现自定义的行内组件，并控制其导出格式。本文将以实现一个@mention功能为例，深入讲解如何通过createReactInlineContentSpec创建自定义组件，并实现渲染内容与导出内容的差异化处理。

核心需求分析

在实际业务场景中，我们通常需要：

1. 在编辑器中显示友好的用户标识（如@username）
2. 导出时转换为特定的数据格式（如）
3. 保持编辑体验与数据存储的分离

技术实现详解

1. 创建自定义Mention组件

通过createReactInlineContentSpec定义组件规范：

const Mention = createReactInlineContentSpec({
  type: "mention",
  propSchema: {
    path: { default: "No path" },  // 显示用名称
    data: { default: "No data" }    // 实际存储数据
  },
  content: "none"
}, {
  render: ({ inlineContent }) => (
    <span style={{ backgroundColor: "#8400ff33" }}>
      @{inlineContent.props.path}
    </span>
  )
});

关键点说明：

• propSchema定义了两个属性：path用于显示，data用于存储
• content设置为"none"表示这是不可编辑的原子组件
• render方法控制可视化呈现，这里添加了背景色突出显示

2. 自定义Markdown导出逻辑

BlockNote默认的blocksToMarkdownLossy可能无法满足定制需求，需要手动实现转换：

const customExporter = (blocks) => blocks.reduce((acc, block) => {
  let content = "";
  
  // 处理标题块
  if (block.type === "heading") {
    content += "#".repeat(block.props.level) + " ";
  }
  
  // 处理行内内容
  content += block.content?.reduce((str, inline) => {
    if (inline.type === "text") return str + inline.text;
    if (inline.type === "mention") return str + `<${inline.props.data}>`;
    return str;
  }, "") || "";
  
  return acc + content + "\n\n";
}, "");

转换逻辑特点：

• 保持标题的Markdown语法（#号数量对应级别）
• 普通文本直接输出
• Mention组件转换为格式
• 添加适当的换行保证可读性

高级应用场景

双向转换处理

完整的解决方案还应考虑从Markdown导入时的逆向转换：

1. 解析格式的标记
2. 查询用户系统获取显示名称
3. 重新构建为Mention组件

性能优化建议

对于大型文档：

• 使用memoization缓存转换结果
• 实现增量导出机制
• 考虑Web Worker处理耗时操作

总结

BlockNote的灵活架构允许开发者通过createReactInlineContentSpec深度定制行内组件。通过分离显示属性(path)和数据属性(data)，我们可以实现编辑时友好显示与导出时规范格式的统一。自定义导出逻辑时需要注意保持Markdown的语法规范，同时确保特殊标记的可逆转换。

这种模式不仅适用于@mention功能，还可以扩展到各种需要特殊渲染和存储的业务场景，如商品链接、文档引用等复杂元素的处理。