ProseMirror Tbcaption扩展处理混合内容时文本丢失问题求助

问题定位 #

你的Tbcaption节点在转换<p class="Captiontitle">为<caption>时丢失开头的<strong>块，核心原因集中在两点：

• HTML解析规则未匹配目标<p>标签，导致节点转换时内容未完整迁移
• 解析过程中开头的inline节点可能因空白字符/属性冲突被隐性过滤

具体解决方案 #

1. 修正parseHTML配置，匹配目标<p>标签 #

当前parseHTML仅识别<caption>标签，但实际输入是带特定class的<p>，需添加对应解析规则，确保ProseMirror能正确将其转换为Tbcaption节点：

parseHTML() {
  return [
    { tag: "caption" },
    // 匹配带Captiontitle类的p标签，作为Tbcaption的解析源
    { 
      tag: "p",
      getAttrs: (dom) => {
        const classAttr = dom.getAttribute("class");
        // 仅当class包含Captiontitle时才解析为Tbcaption
        return classAttr?.includes("Captiontitle") ? {} : false;
      }
    }
  ];
}

2. 确保Inline节点组包含所有需要的元素 #

保持content: "inline*"即可（允许任意数量的inline节点），但需确认你的schema中<strong>对应的节点（比如bold标记）已被正确归入inline组：

// 示例：注册bold标记并归入inline组
const Bold = Mark.create({
  name: "bold",
  group: "inline",
  parseHTML: [{ tag: "strong" }],
  renderHTML: () => ["strong", 0]
});

3. 调整属性解析逻辑，避免覆盖输入值 #

默认的class属性设置会强制使用tb-caption，可能干扰原有属性的继承，修改addAttributes让class支持合并输入值：

addAttributes() {
  return {
    class: {
       default: "tb-caption",
       // 合并DOM中的class与默认值
       parseDOM: (dom) => `${dom.getAttribute("class") || ""} tb-caption`.trim()
    },
    id: {
      default: null,
      // 同时读取data-id和id属性
      parseDOM: (dom) => dom.getAttribute("data-id") || dom.getAttribute("id")
    },
  };
}

4. 调试解析过程（可选） #

如果问题仍存在，可在解析阶段添加日志，确认子节点是否被正确读取：

// 在parseHTML的getAttrs中临时添加日志
getAttrs: (dom) => {
  console.log("待解析子节点:", dom.children);
  const classAttr = dom.getAttribute("class");
  return classAttr?.includes("Captiontitle") ? {} : false;
}

若日志中能看到第一个<strong>节点，说明解析逻辑正常，问题可能出在渲染或其他扩展冲突上。

验证结果 #

修改后重新测试，转换后的<caption>应完整保留所有子节点：

<caption class="Captiontitle tb-caption" data-id="caption">
    <strong>Table&nbsp;1. Simulation Results: Number of Clusters </strong>
    <inline-formula>
        <tex-math>
            $\mathbf{\mathit{ρ}}_{2}=0.05$
        </tex-math>
    </inline-formula>
    <strong>
        and
    </strong>
    <inline-formula>
        <tex-math>
            $\mathbf{\mathit{ρ}}_{3}=0.003$
        </tex-math>
    </inline-formula>
</caption>

内容的提问来源于stack exchange，提问作者Karthik