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

问题现象描述

在Milkdown编辑器中，当用户使用三级标题(###)时，按下退格键(Backspace)会出现不符合预期的行为。具体表现为：第一次按退格键会将三级标题降级为二级标题，第二次按退格键会降级为一级标题，第三次按退格键才会将光标移动到上一行。

这种渐进式的标题降级行为给用户带来了操作上的不便，特别是当用户想要快速删除整个标题时，需要多次按键才能达到预期效果。

技术背景分析

Milkdown是一个基于ProseMirror构建的现代化Markdown编辑器。在ProseMirror的架构中，文档结构被建模为一个节点树，每个节点都有特定的类型和属性。标题(heading)节点通常包含一个表示级别的属性(如level: 1, 2, 3等)。

默认情况下，ProseMirror对标题节点的处理逻辑是逐步降低标题级别，这与Markdown编辑器的常见用户预期不符。大多数Markdown编辑器在处理标题删除时，会直接将标题转换为普通段落或完全删除节点。

解决方案设计

针对这个问题，我们可以设计一个自定义命令来优化标题的删除行为。核心思路是：

1. 检测当前光标位置是否在标题节点开头
2. 如果是，则直接删除整个标题节点或转换为段落
3. 如果不是标题节点或不在开头，则执行默认行为

实现代码解析

以下是优化后的实现代码：

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. 节点删除逻辑：deleteNode函数通过获取当前选择位置的前后边界，使用事务(Transaction)删除整个节点范围。

2. 条件判断：

   • 首先检查当前节点是否为标题类型
   • 检查选择是否为空选择(避免影响文本选择)
   • 检查光标是否在节点开头

3. 特殊处理：当光标位于标题第二个字符位置时(如"# "后面)，也执行直接删除操作。

4. 回退行为：如果不符合上述条件，则执行默认的转换为段落行为。

用户体验优化

这种实现方式相比原来的渐进式降级有以下优势：

1. 操作效率：用户只需一次退格键即可删除整个标题，减少了按键次数。

2. 行为一致：符合大多数Markdown编辑器的操作习惯，降低用户学习成本。

3. 边界处理：考虑了光标在不同位置的合理行为，避免产生意外结果。

扩展思考

这种自定义命令的模式可以推广到其他类似场景：

1. 列表项的删除行为优化
2. 代码块的快速退出
3. 引用块的整段删除

通过分析用户操作习惯和预期，我们可以为各种块级元素设计更符合直觉的编辑行为，从而提升整体编辑体验。

总结

Milkdown作为一款现代化的编辑器框架，通过自定义命令机制提供了强大的扩展能力。针对标题删除行为的优化展示了如何利用ProseMirror的API来改善用户体验。开发者可以借鉴这种思路，为编辑器添加更多符合用户预期的交互行为。