Milkdown 缩进：三步把 Tab 默认值调到位

Milkdown 缩进：三步把 Tab 默认值调到位

【免费下载链接】milkdown🍼 Plugin driven WYSIWYG markdown editor framework.项目地址: https://gitcode.com/GitHub_Trending/mi/milkdown

你在用 Milkdown 写嵌套列表时发现，Tab 键插出的缩进和导出的 Markdown 对不上：单独用 indent 插件是两个空格，换 Crepe 预设又变成四个。默认值为什么是 2、又为什么会被改，本文会讲清楚，并带你三步把 Tab 缩进改成自己的习惯。

它是怎么工作的

indent 插件由两个片组成：配置片 indentConfig 和快捷键片 indentPlugin，源码在 index.ts。配置片存两个值：type 决定插入空格还是制表符，size 决定空格数量，默认值是{ type: 'space', size: 2 }。快捷键片负责响应 Tab 键。

接下来看执行链路。indentPlugin 是用 $shortcut 可组合器创建的，见 $shortcut.ts：编辑器 keymap 就绪后，它把 Tab 的处理函数注册进 ProseMirror keymap。按下 Tab 时，处理函数从上下文读出 indentConfig，交给 updateIndent 构造事务。

注意一个容易误解的点：updateIndent 不移动列表节点，它只在光标处插入文本。关键源码就两行：const text = options.type === 'space' ? Array(options.size).fill(' ').join('') : '\t'，然后tr.insertText(text, to)。这意味着“缩进”是文本层面的字符，不是节点层面的层级变化。而 Crepe 构建器在内部把 size 更新成了 4，见 builder.ts 中的ctx.update(indentConfig.key, ...)。同一套编辑器在不同入口缩进表现不一致，根源就在这里。

三步跑通

第1步：装上依赖并启用 indent 插件

Tab 缩进不随核心自动生效，插件必须显式挂载。配置如下：

npm install @milkdown/kit

import { Editor } from '@milkdown/kit/core' import { indent } from '@milkdown/kit/plugin/indent' Editor.make().use(indent).create()

验证方法：光标放到行首按 Tab，应插入 2 个空格。

第2步：把空格数改成 4

在 .config() 里用 ctx.set 覆盖配置片，整段如下：

import { indentConfig } from '@milkdown/kit/plugin/indent' Editor .make() .config((ctx) => ctx.set(indentConfig.key, { type: 'space', size: 4 }) ) .use(indent) .create()

验证方法：按 Tab 后导出 Markdown，行首应为 4 个空格。

第3步：换成制表符缩进

如果团队规范用制表符，只改 type 一个字段：

ctx.set(indentConfig.key, { type: 'tab', size: 1 })

验证方法：导出 Markdown，行首是 \t 而不是空格。

把默认值换成你自己的

可配置项一共两个，全部列在这里：

完整配置示例，把缩进单位定为 4 个空格：

import { Editor } from '@milkdown/kit/core' import { indent, indentConfig } from '@milkdown/kit/plugin/indent' const indentRule = { type: 'space', size: 4 } // 每按一次 Tab 插 4 个空格 Editor .make() .config((ctx) => ctx.set(indentConfig.key, indentRule)) .use(indent) .create()

踩坑记录

现象：按 Tab 没有任何反应。原因：编辑器没挂载 indent 插件，Tab 上没有绑定处理函数。 修复：

Editor.make() .use(indent) .create()

现象：type 设成 'tab' 后，size 怎么改都不生效。原因：tab 分支固定插入一个 '\t'，size 只参与空格拼接。 修复：

// 想控制插入数量，只能用空格 ctx.set(indentConfig.key, { type: 'space', size: 4 })

现象：用 Crepe 创建后，默认缩进是 4 空格而不是 2。原因：Crepe 构建器内部把 size 更新成了 4。 修复：

const cur = builder.editor.action(ctx => ctx.get(indentConfig.key) ) console.log(cur) // 先读生效值，再决定要不要覆盖

速查清单

• 用 .use(indent) 启用 indent 插件
• 配置走 ctx.set(indentConfig.key, ...)
• 默认 2 空格，Crepe 下为 4 空格
• Tab 只在光标处插字符，不移动节点
• size 只对空格类型生效

如果想给缩进换一套快捷键，可以结合 ProseMirror 的 keymap 插件再绑一组按键。更多配置说明见 docs/api/plugin-indent.md。

【免费下载链接】milkdown🍼 Plugin driven WYSIWYG markdown editor framework.项目地址: https://gitcode.com/GitHub_Trending/mi/milkdown