Milkdown嵌套列表Tab缩进调整指南【免费下载链接】milkdown Plugin driven WYSIWYG markdown editor framework.项目地址: https://gitcode.com/GitHub_Trending/mi/milkdown当你正在用 Milkdown 编辑嵌套列表、想调整某一项的缩进层级时多半会先去找缩进字符其实不需要。Milkdown 里嵌套列表的缩进Indent由按键直接完成在列表项内按 Tab 降级按 ShiftTab 升级。下面先跑通这套默认行为再拆解它背后的 keymap 机制最后讲清文本缩进与列表快捷键的配置方法。用Tab和ShiftTab调整嵌套层级最小可用配置只有两行引入 core 和 commonmark 预设其余什么都不用写。import { Editor, rootCtx } from milkdown/core import { commonmark } from milkdown/preset-commonmark const root document.createElement(div) document.body.append(root) const editor Editor.make() .config((ctx) ctx.set(rootCtx, root)) .use(commonmark) .create()这段代码创建了一个挂载到 root 节点的编辑器commonmark 预设已经把列表节点和快捷键一并注册好。在文档里输入-触发 input rule文本就变成无序列表项回车输入第二项后把光标停在任一项里按键即可按 Tab当前列表项降级变成上一项的子列表。按 ShiftTab当前列表项升级回到上一层。也可以按 Mod-] 和 Mod-[分别对应降级和升级。Mod 在 Mac 上是 Cmd其他平台是 Ctrl。这套快捷键定义在 packages/plugins/preset-commonmark/src/node/list-item.ts 的 listItemKeymap 里属于 commonmark 预设的一部分不需要额外 use 任何插件。⚠️ 注意如果你还加载了 milkdown/plugin-indent它也会监听 Tab用于在光标处插入空格文本。同一按键被多个插件绑定时注册在前的处理器先执行谁先返回 true 谁消费这次按键。所以Tab 到底插文本还是调层级取决于插件加载顺序。Tab如何变成一次列表降级命令你可能会注意到按 Tab 后文档里的缩进并不是真的插入了制表符而是列表结构本身变了。这一步的关键在于 listItemKeymap 把快捷键映射到了命令上源码长这样export const listItemKeymap $useKeymap(listItemKeymap, { // ... SinkListItem: { shortcuts: [Tab, Mod-]], command: (ctx) { const commands ctx.get(commandsCtx) return () commands.call(sinkListItemCommand.key) }, }, LiftListItem: { shortcuts: [Shift-Tab, Mod-[], command: (ctx) { const commands ctx.get(commandsCtx) return () commands.call(liftListItemCommand.key) }, }, // ... })逐块看$useKeymap 接收一张默认快捷键表把它存进一个 ctx slice允许用户后续用 ctx.set 覆盖同时内部调用 $shortcut把每个快捷键注册进全局的 KeymapManager。KeymapManager 在 packages/core/src/internal-plugin/keymap.ts 里实现。它把同一按键下的所有处理器按 priority 排序缺省值为 50再用 chainCommands 串起来依次执行谁先返回 true 谁就消费掉这次按键。sinkListItemCommand 和 liftListItemCommand 只是对 ProseMirror 提供的 sinkListItem、liftListItem 做了包装。以降级为例sinkListItem 找到光标所在的 list_item 节点把它从当前列表拆出包进一个内层列表挂到上一个兄弟项下。换句话说Tab 按下后并没有发生插入字符编辑器改的是文档树节点被移到了更深的父级里序列化成 Markdown 时才体现为两格缩进。默认快捷键一览均定义在 listItemKeymap 中快捷键作用绑定命令Tab / Mod-]列表项降级sinkListItemCommandShift-Tab / Mod-[列表项升级liftListItemCommandBackspace / Delete唯一子项时退出列表liftFirstListItemCommand这里有个容易忽略的细节——列表外的 Tab 不归 commonmark 管此时轮到 indent 插件出场。packages/plugins/plugin-indent/src/index.ts 里的 $shortcut 同样绑定了 TabupdateIndent 会按配置在光标处插入一段空格或一个制表符不改动列表结构。空格还是Tab缩进字符与快捷键的选择这一步的关键在于两个可覆盖的 ctx sliceindentConfig 控制文本缩进listItemKeymap.ctx 控制列表快捷键。它们加上 priority基本就是 Milkdown indent插件配置 与列表 keymap 的全部可调面。缩进字符与尺寸indentConfig默认是{ type: space, size: 2 }即列表外按 Tab 插入 2 个空格。想改成 4 个空格在初始化时这样设置ctx.set(indentConfig.key, { type: space, size: 4, })改动后在列表外按 Tab 会插入 4 个空格。type 换成tab时size 表示制表符个数通常取 1。列表快捷键listItemKeymap.ctx默认绑定可以整表覆盖。比如想让 Tab 只用于文本缩进把列表降级挪到 Mod-]ctx.set(listItemKeymap.ctx.key, { Enter: { shortcuts: Enter }, SinkListItem: { shortcuts: Mod-] }, LiftListItem: { shortcuts: Mod-[ }, LiftFirstListItem: { shortcuts: Backspace }, })注意 ctx.set 是整体替换四个键要写全漏掉的键会丢到 $useKeymap 的默认值之外等于该快捷键失效。优先级priority当多个处理器抢同一个键时可以给某条绑定加 priority数值越大越先执行SinkListItem: { shortcuts: [Tab, Mod-]], priority: 100 }把三项组合起来下面是一份端到端的完整配置。它把列表降级收拢到 Mod-]让 Tab 在全文档内只负责插入一个制表符import { Editor, rootCtx } from milkdown/core import { commonmark, listItemKeymap } from milkdown/preset-commonmark import { indent, indentConfig } from milkdown/plugin-indent const root document.createElement(div) document.body.append(root) Editor.make() .config((ctx) { // 挂载节点 ctx.set(rootCtx, root) // 缩进配置制表符 ctx.set(indentConfig.key, { type: tab, size: 1 }) // 列表快捷键覆盖 ctx.set(listItemKeymap.ctx.key, { Enter: { shortcuts: Enter }, SinkListItem: { shortcuts: [Mod-]], priority: 100 }, LiftListItem: { shortcuts: [Mod-[] }, LiftFirstListItem: { shortcuts: [Backspace] }, }) }) .use(commonmark) .use(indent) .create()运行后输入两个列表项效果如下一级列表项二级列表项光标停在二级列表项中按 Mod-]它会移到上一项之下一级列表项二级列表项此时按 Tab 不再改变层级只在光标处插入一个制表符。到这里结构归 Mod 组合键字符归 Tab嵌套列表的缩进调整就各归其键了。【免费下载链接】milkdown Plugin driven WYSIWYG markdown editor framework.项目地址: https://gitcode.com/GitHub_Trending/mi/milkdown创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考