容器与嵌套块

完整示例

此例安装 decision 业务容器，在其中嵌套 warning，并用 QuireKit 按钮控制 details。切换源码模式可以编辑任何正文；展开和收起不会改写 Markdown。接入代码包含注册、样式、控件和挂载。

安装与注册

pnpm add '@quirekit/msfe-markdown-extras@workspace:*'

import { CustomContainer } from '@quirekit/msfe-markdown-extras'

const Containers = CustomContainer.configure({
  types: ['info', 'note', 'tip', 'important', 'warning', 'danger', 'caution', 'details', 'decision'],
  detailsOpen: false,
  toggleLabel: (expanded, title) => `${expanded ? '收起' : '展开'} ${title}`,
})
// Include Containers alongside StarterKit in extensions.

默认支持 info、note、tip、important、warning、danger、caution、details。types 是完整替换的数组，新增业务名时保留需要的标准类型。类型名使用小写字母开头，后续可包含数字和连字符。

语法与嵌套规则

:::: decision 发布决策
正文可以包含 **强调**、列表、表格和代码块。

::: warning 发布前检查
- 确认回滚方案
- 确认版本
:::
::::

开围栏至少三个冒号，随后必须有空白及已注册类型，余下内容作为字面标题。标题不是可执行 HTML，也不按内联 Markdown 重新渲染。

关闭围栏的冒号数量至少与当前打开围栏相同。嵌套时使用更长的外层围栏（外层四个、内层三个），让内层闭合不提前结束外层。围栏的缩进必须符合 Markdown 块上下文；普通正文中四空格缩进是代码，不能当作顶层容器。

未知类型或未闭合容器保留源码。正文由同一个 Markdown 解析器处理，可以嵌套普通块；这不等于支持任意富文本子树、任意 HTML 属性或 markdown-it-container 的自定义 HTML renderer。

复用 Prose 的完整块样式

这个示例使用 @quirekit/md-editor 的 createMdEditorExtensions() 组合源码能力与公共 Prose 呈现。编辑区直接消费 qk-prose，容器使用与 QuireProseContainer 相同的 qk-prose-container、qk-prose-container__header、qk-prose-container__body。背景、完整边框、内边距和嵌套间距都由组件库拥有。

这里的容器是真实的嵌套 DOM 包装，正文仍是同一个 CodeMirror 中的原始行，没有嵌套第二个编辑器。应通过公共 Prose 样式和语义主题定制它，不再给每一行分别涂色，也不用判断一行同时具有多少外层角色。

纯 headless CustomContainer 仍提供源码语义、折叠状态和可替换控件；采用 QuireKit 设计的应用可以直接使用产品组合。完整编辑、源码与 Prose 阅读对照见 MD Editor 独立示例。

自定义折叠控件

controls 接受 ComponentViewRenderer<ContainerControlProps>，Vue 使用 VueComponentViewRenderer(Toggle)，组件接收 view 属性。

当前该入口用于 details 的折叠控制，不能替换容器的可编辑正文。折叠状态在模式切换间保留，换文档时重置；选区和搜索进入折叠内容会按运行时规则显露它。只读阅读允许折叠，因为它不改源码。

修改标题、导出和验证

当前内置容器 codec 读取 name、title，没有通用字段写回：updateAttributes('customContainer', ...) 不会自动成为标题编辑器。需要标题表单时，实现自己的精确 header patch，并测试缩进、嵌套、CRLF、撤销和过期意图；不要重建整个容器文本。

保存输出仍为原始冒号语法。HTML 导出由宿主自己的 Markdown 管线解释注册类型，不能假设编辑器组件会自动参与导出。

验收时至少检查：未知/未闭合回退、内层闭合、源码选区、只读折叠、撤销、搜索到隐藏正文、两种主题，以及切换文档后的折叠重置。协议见 扩展 API。