ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Milkdown 嵌套列表缩进完全指南:Tab 键、四空格配置与排错清单

Milkdown 嵌套列表缩进完全指南:Tab 键、四空格配置与排错清单 Milkdown 嵌套列表缩进完全指南Tab 键、四空格配置与排错清单【免费下载链接】milkdown Plugin driven WYSIWYG markdown editor framework.项目地址: https://gitcode.com/GitHub_Trending/mi/milkdown写 Markdown 嵌套列表时最顺手的操作是光标停在上一个列表项末尾按 Tab 把新行缩进一层。Milkdown 里这个按 Tab 就缩进的能力由milkdown/plugin-indent提供核心关键词就两个indentConfig和indentPlugin默认两空格改四空格、改成 tab 符都是几行配置的事。这篇按实际场景走一遍最小接入、参数怎么改、Tab 没反应怎么查、还想换快捷键怎么办。两行代码让 Tab 缩进生效先看最小可用配置装上插件即可不用写任何事件监听import { Editor } from milkdown/core import { indent } from milkdown/kit/plugin/indent Editor.make() .use(indent) .create()装完之后光标停在文本任意位置按 Tab就会在光标处插入一段缩进文本配合手动换行就能把列表项推成子项。这里注意indent导出的是一个数组里面打包了两个东西源码见 packages/plugins/plugin-indent/src/index.tsindentConfig$ctx配置项存用什么字符缩进、缩进多宽indentPlugin$shortcut快捷键插件专门监听 Tab。默认值是{ type: space, size: 2 }也就是两空格。把两空格改成四空格缩进宽度由size控制type控制字符种类。改配置有三种写法按场景选① 整块覆盖——适合从零搭编辑器import { indentConfig } from milkdown/kit/plugin/indent Editor.make() .config((ctx) { ctx.set(indentConfig.key, { type: space, // 用空格缩进 size: 4, // 一次插入 4 个空格 }) }) .use(indent) .create()这行ctx.set把整份配置换成四空格之后每次 Tab 都插入 4 个空格。② 单字段补丁——只改size、保留其他字段用ctx.updatectx.update(indentConfig.key, (value) ({ ...value, size: 4, // 只覆盖宽度type 保持原样 }))③ 链式调用——在make()之后、use(indent)之前加一段.config()就行。顺带一提crepe 走的就是第②种写法它在 packages/crepe/src/core/builder.ts 里用ctx.update把size直接设成 4所以 crepe 默认就是四空格缩进你拿 crepe 搭出来的编辑器不用额外配置。想用制表符缩进改 type 即可团队规范要求用真实 tab 字符而不是空格时把type换成tabctx.set(indentConfig.key, { type: tab, // 用制表符缩进 size: 1, // tab 模式下 size 不起作用一个 Tab 键位只插一个 \t })关键在源码里这一行space模式按size拼 N 个空格tab模式直接返回\t所以 tab 分支里size写了也没用。Tab 键没反应按这个清单查遇到按 Tab 什么都没发生九成是下面四种情况之一从上到下过一遍插件根本没装。确认编辑器初始化链上有.use(indent)。crepe 用户在 packages/crepe/src/core/builder.ts 可以看到它是在基础插件里统一注册的自建编辑器则容易漏掉。光标位置不对。updateIndent对选区有前置检查光标选区TextSelection或全选AllSelection之外一律原样返回一个tr都不产生。所以光标落在节点边界等位置时Tab 看起来就是没反应。Tab 被别的绑定抢了。其他插件或自定义 keymap 如果先处理了 Tab轮不到indentPlugin。最快的验证办法临时在一个干净编辑器里只装indent能缩进就说明存在冲突。配置没生效。运行时打印一下当前值editor.action((ctx) { console.log(当前缩进配置:, ctx.get(indentConfig.key)) return ctx })如果打出来还是{ type: space, size: 2 }说明你的ctx.set没走到通常是注册顺序问题——.config()得在.use(indent)生效前执行。另外说明一点Milkdown 对嵌套列表的层级没有硬限制indent插件本身只做文本插入层级完全由 Markdown 的缩进规则决定能叠多深都行。工程上的建议是控制在三级以内再深就该考虑换用标题分节或表格组织了。想换快捷键比如 Ctrl]indentPlugin只负责 Tab想把缩进挪到别的键上需要自己注册一条 keymap再调 indent 插件内部的更新逻辑import { keymap } from milkdown/prose // 自定义 keymapCtrl-] 执行缩进 Editor.make() .config((ctx) { ctx.set(keymapCtx, [ keymap({ Ctrl-]: indentCommand, // 指向 updateIndent 的封装 }), ]) }) .use(indent) .create()这里注意新增绑定和 Tab 默认行为是并存的想彻底替换 Tab 的用途还得同时给Tab键注册别的处理。crepe 里代码块编辑器就是这么干的packages/crepe/src/feature/code-mirror/index.ts 把 CodeMirror 官方的defaultKeymap.concat(indentWithTab)塞进keymap.of的 extensions给代码块区域单独配了一套 Tab 缩进和正文的indentPlugin互不干扰。写在最后整套缩进逻辑其实就一句话indent插件 Tab 监听器 两个可调参数。默认两空格四空格一行size: 4tab 符一行type: tab排错先查插件、再查光标、最后查键位冲突。配置项的字段定义和插件实现都集中在 packages/plugins/plugin-indent/src/index.ts 一个文件里翻一遍源码比翻文档还快。【免费下载链接】milkdown Plugin driven WYSIWYG markdown editor framework.项目地址: https://gitcode.com/GitHub_Trending/mi/milkdown创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表