Milkdown编辑器HTML节点自定义方案解析

背景与问题场景

在基于Milkdown构建的Crepe编辑器中，开发者遇到一个典型需求：需要让HTML标签节点（如<TabGroup>）在编辑器中默认可编辑。这类需求常见于需要混合Markdown与自定义标签的富文本场景，例如实现可编辑的组件化文档结构。

技术实现难点

通过分析issue中的技术讨论，我们可以梳理出三个核心挑战：

1. Schema覆盖问题：原始方案尝试在React的useEffect中动态替换schema，这种方式在编辑器生命周期管理上存在缺陷。Milkdown的插件系统要求在初始化阶段完成所有配置。

2. HTML节点特性：HTML节点在ProseMirror中默认被定义为atom类型（不可分割的独立单元），这种设计导致其内容无法直接编辑。这是ProseMirror为防止HTML结构破坏而做的安全限制。

3. 内容安全校验：直接开放HTML编辑可能产生非法标签或结构，破坏文档完整性。这与Latex公式节点的处理面临相似挑战。

最佳实践方案

方案一：Latex式输入框模式（推荐）

参考Latex节点的实现方式：

const htmlSchema = $nodeSchema('html', (ctx) => ({
  atom: true,
  group: 'inline',
  attrs: { value: { default: '' } },
  parseDOM: [{ tag: 'span[data-type="html"]' }],
  toDOM: (node) => [
    'span', 
    { 
      'data-type': 'html',
      'class': 'html-node',
      'data-value': node.attrs.value
    },
    ['input', { 
      type: 'text',
      value: node.attrs.value,
      class: 'html-input'
    }]
  ]
}))

特点：

• 保持原子性避免结构破坏
• 通过专用输入框保障编辑安全
• 可添加语法高亮等增强功能

方案二：纯文本模式（简易版）

对于不需要即时渲染的场景：

const textHtmlSchema = $nodeSchema('html', () => ({
  group: 'inline',
  parseMarkdown: {
    match: (node) => node.type === 'html',
    runner: (state, node, type) => {
      state.addNode(type, { value: node.value })
    }
  },
  toDOM: (node) => ['span', { contentEditable: true }, node.attrs.value]
}))

注意事项：

• 需关闭原子性(atom: false)
• 可能需配合自定义解析器处理MDX
• 需要后置校验保证HTML有效性

工程化建议

1. 初始化时机：所有schema修改应在useEditor回调中同步完成
2. 样式隔离：为HTML节点添加特定class便于样式控制
3. 扩展考虑：
   • 添加HTML语法校验逻辑
   • 实现标签自动补全功能
   • 开发专用预览组件

总结