ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

Milkdown 嵌套列表缩进:Tab 键 3 种调法

2026/9/14 8:23:32 拓冰建站 浏览量
Milkdown 嵌套列表缩进:Tab 键 3 种调法 Milkdown 嵌套列表缩进Tab 键 3 种调法【免费下载链接】milkdown Plugin driven WYSIWYG markdown editor framework.项目地址: https://gitcode.com/GitHub_Trending/mi/milkdownMilkdown 的嵌套列表缩进由 Tab 与 ShiftTab 驱动但同一个 Tab 键背后其实绑定了两套逻辑。本文讲清键位来源并给出 3 种调整方式与可复制的完整配置。列表项里的 Tab有时嵌套有时插空格在 Milkdown 列表项中按 Tab当前项降级为子项在普通段落里按 Tab却只是插入 2 个空格。同一个键出现两种结果看起来像 bug实际上是两个插件各管一段。找到 Tab 的两个键位来源先说结论列表嵌套和插空格是两回事。milkdown/plugin-indent 的职责比很多人想象的窄——它的updateIndent只做一件事在光标处插入空格或制表符完全不感知列表节点。配置接口与默认值定义在 packages/plugins/plugin-indent/src/index.ts 中默认是{ type: space, size: 2 }。真正把列表项降级的键位定义在 preset-commonmark 的 list-item 节点里见 packages/plugins/preset-commonmark/src/node/list-item.tsSinkListItem: { shortcuts: [Tab, Mod-]], command: (ctx) () commands.call(sinkListItemCommand.key), }, LiftListItem: { shortcuts: [Shift-Tab, Mod-[], command: (ctx) () commands.call(liftListItemCommand.key), },以上是listItemKeymap的关键摘录Tab 降级、ShiftTab 升级Mod-]/Mod-[是它们的等效键。两套绑定为何能共存Milkdown 的键位管理器会把同一按键上的所有绑定按优先级串成链式命令第一个返回 true 的生效机制见 packages/core/src/internal-plugin/keymap.ts。sinkListItem只在光标位于列表项时成功列表外按键落空后自然轮到 indent 插件插入空格——这就是两种行为并存的原理。3 种调整缩进行为的方式方式 1直接使用默认键位什么都不用配加载 preset-commonmark 即可用全套键位想程序化触发嵌套直接调用命令import { commandsCtx } from milkdown/core import { sinkListItemCommand } from milkdown/preset-commonmark editor.action((ctx) { ctx.get(commandsCtx).call(sinkListItemCommand.key) })这段代码让光标所在的列表项一键降级。预期效果调用该 action 后当前列表项变成上一项的子项。方式 2改缩进字符与宽度indent 插件配置列表外按 Tab 时插入的空格数由indentConfig决定配置为 4 空格的完整代码import { indent, indentConfig } from milkdown/kit/plugin/indent Editor .make() .config((ctx) { ctx.set(indentConfig.key, { type: space, size: 4 }) }) .use(indent) .create()这段代码把非列表区的缩进单位从默认 2 空格改为 4 空格。type取space或tab偏好制表符时设为{ type: tab, size: 1 }。方式 3把嵌套绑定到任意快捷键团队若习惯用 AltN 嵌套列表可以用$shortcut追加绑定与默认 Tab 键位并行工作import { $shortcut } from milkdown/utils import { commandsCtx } from milkdown/core import { sinkListItemCommand } from milkdown/preset-commonmark const nestShortcut $shortcut((ctx) ({ Alt-n: (state, dispatch) ctx.get(commandsCtx).call(sinkListItemCommand.key)(state, dispatch), })) // Editor.make()... .use(nestShortcut)这段代码给降级命令追加了 Altn 绑定。预期效果列表项内按 Altn 降级列表外无反应Tab 原有行为不受影响。快速参考键位与配置一览键位 / 配置项默认行为或值可调整范围Tab / Mod-]列表内降级列表外插入 2 空格可用$shortcut追加自定义键ShiftTab / Mod-[列表内升级一级同上Enter拆分为新列表项固定Backspace / Delete列表项开头且为唯一子项时退出列表固定indentConfig.typespacespace或tabindentConfig.size2任意正整数只要默认体验选方式 1导出 Markdown 的缩进宽度有团队规范选方式 2需要和内部编辑器键位对齐选方式 3。packages/plugins/【免费下载链接】milkdown Plugin driven WYSIWYG markdown editor framework.项目地址: https://gitcode.com/GitHub_Trending/mi/milkdown创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考