Milkdown编辑器标题层级删除行为分析与优化方案

问题现象分析

在Milkdown编辑器中，用户使用Markdown语法创建多级标题时（如三级标题###），当尝试删除标题标记时，编辑器会呈现阶梯式的降级行为：三级标题先降为二级，再降为一级，最后才转为普通段落。这种交互方式与大多数现代编辑器的直觉操作不符，会给用户带来额外的操作负担。

技术背景解析

该行为源于ProseMirror的默认节点处理机制。在底层实现中：

1. 标题节点(Heading)具有level属性标识层级
2. 默认的删除逻辑会逐步减少level值
3. 完全删除需要多次操作才能转为paragraph节点

核心解决方案

通过自定义命令覆盖默认行为，实现直接转换：

function deleteNode(state: EditorState, dispatch?: (tr: Transaction) => void) {
    const { $from } = state.selection;
    const { tr } = state;
    tr.delete($from.before(), $from.after());
    if (dispatch) dispatch(tr);
    return true;
}

export const downgradeHeadingCommand = $command("DowngradeHeading", (ctx) => () => (state, dispatch, view) => {
    const { $from } = state.selection;
    const node = $from.node();

    if (node.type !== headingSchema.type(ctx) || !state.selection.empty || $from.parentOffset !== 0) {
        if ($from.parentOffset === 1) return deleteNode(state, dispatch);
        return false;
    }

    if (node.type === headingSchema.type(ctx) && $from.parentOffset === 0) return deleteNode(state, dispatch);

    return setBlockType(paragraphSchema.type(ctx))(state, dispatch, view);
});

实现原理详解

1. 光标位置检测：通过$from.parentOffset判断光标是否位于标题起始位置
2. 节点类型判断：检查当前节点是否为标题类型
3. 直接转换机制：
   • 当满足条件时直接删除整个标题节点
   • 或转换为段落节点
4. 边界处理：对光标不在行首的特殊情况进行处理

用户体验优化

该方案带来以下改进：

1. 单次操作即可完成标题删除
2. 符合用户对删除行为的心理预期
3. 保持与其它编辑操作的一致性
4. 减少不必要的操作步骤

扩展思考

这种自定义命令的模式可以应用于：

1. 列表项的直接删除
2. 代码块的快速退出
3. 复杂节点的整体操作优化

通过理解底层原理并合理扩展编辑器能力，可以显著提升Markdown编辑体验。