Tiptap富文本编辑器嵌套字体样式解析问题分析与解决方案

在Tiptap富文本编辑器项目中，开发者发现了一个关于嵌套字体样式解析的重要问题。当处理包含嵌套font-weight规则的HTML内容时，编辑器无法正确清除父级标记，导致最终生成的文档结构与预期不符。

问题现象

当输入以下HTML内容时：

<p style="font-weight: 700;">
  <span style="font-weight: 700;">I am Bold</span>
  <span style="font-weight: 400;">I am not Bold</span>
</p>

期望的文档结构应该是：

doc(paragraph(strong("I am Bold "), "I am not Bold"))

但实际得到的却是：

doc(paragraph(bold("I am Bold I am not Bold")))

技术分析

这个问题源于Tiptap在解析CSS font-weight规则时的处理逻辑不够完善。具体表现为：

1. 当遇到嵌套的font-weight样式时，解析器没有正确清除父级标记
2. 400的font-weight值本应清除bold标记，但当前实现未能做到
3. 这与prosemirror-schema-basic包的行为不一致，后者能正确处理这类情况

解决方案

通过扩展Bold扩展的parseHTML方法，可以添加clearMark指令来解决这个问题：

Bold.extend({
  parseHTML() {
    return [
      {
        tag: "strong",
      },
      {
        tag: "b",
        getAttrs: (node) => node.style.fontWeight != "normal" && null,
      },
      {
        style: "font-weight=400",
        clearMark: (mark) => mark.type.name === this.name,
      },
      {
        style: "font-weight",
        getAttrs: (value) => /^(bold(er)?|[5-9]\d{2,})$/.test(value) && null,
      },
    ];
  },
}),

实现原理

这个解决方案的关键点在于：

1. 添加了针对font-weight=400的特殊处理规则
2. 使用clearMark回调函数明确指定要清除的标记类型
3. 保持了与原有解析规则的兼容性
4. 遵循了ProseMirror的标记处理规范

最佳实践建议

对于开发者处理类似问题时，建议：

1. 仔细测试嵌套样式在各种情况下的解析结果
2. 参考底层ProseMirror的实现逻辑
3. 对于自定义标记扩展，确保实现完整的解析规则
4. 在样式解析中明确处理清除标记的情况

该问题已在Tiptap v2.9.0版本中得到修复，建议开发者升级到最新版本以获得最佳体验。