[{"data":1,"prerenderedAt":509},["ShallowReactive",2],{"msfe-doc:\u002Fextensions\u002Fcontainers":3},{"id":4,"title":5,"body":6,"description":496,"extension":497,"keywords":498,"locale":502,"meta":503,"navigation":82,"order":50,"path":504,"section":505,"seo":506,"stem":507,"__hash__":508},"docs\u002Fextensions\u002Fcontainers.zh-CN.md","容器与嵌套块",{"type":7,"value":8,"toc":488},"minimark",[9,13,30,34,37,53,233,264,267,313,316,319,326,330,359,362,374,377,395,451,457,461,474,477,484],[10,11,12],"h2",{"id":12},"完整示例",[14,15,16,17,21,22,25,26,29],"p",{},"此例安装 ",[18,19,20],"code",{},"decision"," 业务容器，在其中嵌套 ",[18,23,24],{},"warning","，并用 QuireKit 按钮控制 ",[18,27,28],{},"details","。切换源码模式可以编辑任何正文；展开和收起不会改写 Markdown。接入代码包含注册、样式、控件和挂载。",[31,32],"msfe-demo",{"name":33},"containers\u002Feditor",[10,35,36],{"id":36},"安装与注册",[38,39,44],"pre",{"className":40,"code":41,"language":42,"meta":43,"style":43},"language-sh shiki shiki-themes github-light github-light github-dark","pnpm add '@quirekit\u002Fmsfe-markdown-extras@workspace:*'\n","sh","",[18,45,46],{"__ignoreMap":43},[47,48,51],"span",{"class":49,"line":50},"line",1,[47,52,41],{},[38,54,58],{"className":55,"code":56,"language":57,"meta":43,"style":43},"language-ts shiki shiki-themes github-light github-light github-dark","import { CustomContainer } from '@quirekit\u002Fmsfe-markdown-extras'\n\nconst Containers = CustomContainer.configure({\n  types: ['info', 'note', 'tip', 'important', 'warning', 'danger', 'caution', 'details', 'decision'],\n  detailsOpen: false,\n  toggleLabel: (expanded, title) => `${expanded ? '收起' : '展开'} ${title}`,\n})\n\u002F\u002F Include Containers alongside StarterKit in extensions.\n","ts",[18,59,60,77,84,107,160,172,220,226],{"__ignoreMap":43},[47,61,62,66,70,73],{"class":49,"line":50},[47,63,65],{"class":64},"sDD9d","import",[47,67,69],{"class":68},"sVPnS"," { CustomContainer } ",[47,71,72],{"class":64},"from",[47,74,76],{"class":75},"s-HEn"," '@quirekit\u002Fmsfe-markdown-extras'\n",[47,78,80],{"class":49,"line":79},2,[47,81,83],{"emptyLinePlaceholder":82},true,"\n",[47,85,87,90,94,97,100,104],{"class":49,"line":86},3,[47,88,89],{"class":64},"const",[47,91,93],{"class":92},"sUNQB"," Containers",[47,95,96],{"class":64}," =",[47,98,99],{"class":68}," CustomContainer.",[47,101,103],{"class":102},"sgQzM","configure",[47,105,106],{"class":68},"({\n",[47,108,110,113,116,119,122,124,127,129,132,134,137,139,142,144,147,149,152,154,157],{"class":49,"line":109},4,[47,111,112],{"class":68},"  types: [",[47,114,115],{"class":75},"'info'",[47,117,118],{"class":68},", ",[47,120,121],{"class":75},"'note'",[47,123,118],{"class":68},[47,125,126],{"class":75},"'tip'",[47,128,118],{"class":68},[47,130,131],{"class":75},"'important'",[47,133,118],{"class":68},[47,135,136],{"class":75},"'warning'",[47,138,118],{"class":68},[47,140,141],{"class":75},"'danger'",[47,143,118],{"class":68},[47,145,146],{"class":75},"'caution'",[47,148,118],{"class":68},[47,150,151],{"class":75},"'details'",[47,153,118],{"class":68},[47,155,156],{"class":75},"'decision'",[47,158,159],{"class":68},"],\n",[47,161,163,166,169],{"class":49,"line":162},5,[47,164,165],{"class":68},"  detailsOpen: ",[47,167,168],{"class":92},"false",[47,170,171],{"class":68},",\n",[47,173,175,178,181,185,187,190,193,196,199,201,204,207,210,213,215,218],{"class":49,"line":174},6,[47,176,177],{"class":102},"  toggleLabel",[47,179,180],{"class":68},": (",[47,182,184],{"class":183},"sde8i","expanded",[47,186,118],{"class":68},[47,188,189],{"class":183},"title",[47,191,192],{"class":68},") ",[47,194,195],{"class":64},"=>",[47,197,198],{"class":75}," `${",[47,200,184],{"class":68},[47,202,203],{"class":64}," ?",[47,205,206],{"class":75}," '收起'",[47,208,209],{"class":64}," :",[47,211,212],{"class":75}," '展开'} ${",[47,214,189],{"class":68},[47,216,217],{"class":75},"}`",[47,219,171],{"class":68},[47,221,223],{"class":49,"line":222},7,[47,224,225],{"class":68},"})\n",[47,227,229],{"class":49,"line":228},8,[47,230,232],{"class":231},"sqmzS","\u002F\u002F Include Containers alongside StarterKit in extensions.\n",[14,234,235,236,239,240,239,243,239,246,239,249,239,251,239,254,239,257,259,260,263],{},"默认支持 ",[18,237,238],{},"info","、",[18,241,242],{},"note",[18,244,245],{},"tip",[18,247,248],{},"important",[18,250,24],{},[18,252,253],{},"danger",[18,255,256],{},"caution",[18,258,28],{},"。",[18,261,262],{},"types"," 是完整替换的数组，新增业务名时保留需要的标准类型。类型名使用小写字母开头，后续可包含数字和连字符。",[10,265,266],{"id":266},"语法与嵌套规则",[38,268,272],{"className":269,"code":270,"language":271,"meta":43,"style":43},"language-markdown shiki shiki-themes github-light github-light github-dark",":::: decision 发布决策\n正文可以包含 **强调**、列表、表格和代码块。\n\n::: warning 发布前检查\n- 确认回滚方案\n- 确认版本\n:::\n::::\n","markdown",[18,273,274,279,284,288,293,298,303,308],{"__ignoreMap":43},[47,275,276],{"class":49,"line":50},[47,277,278],{},":::: decision 发布决策\n",[47,280,281],{"class":49,"line":79},[47,282,283],{},"正文可以包含 **强调**、列表、表格和代码块。\n",[47,285,286],{"class":49,"line":86},[47,287,83],{"emptyLinePlaceholder":82},[47,289,290],{"class":49,"line":109},[47,291,292],{},"::: warning 发布前检查\n",[47,294,295],{"class":49,"line":162},[47,296,297],{},"- 确认回滚方案\n",[47,299,300],{"class":49,"line":174},[47,301,302],{},"- 确认版本\n",[47,304,305],{"class":49,"line":222},[47,306,307],{},":::\n",[47,309,310],{"class":49,"line":228},[47,311,312],{},"::::\n",[14,314,315],{},"开围栏至少三个冒号，随后必须有空白及已注册类型，余下内容作为字面标题。标题不是可执行 HTML，也不按内联 Markdown 重新渲染。",[14,317,318],{},"关闭围栏的冒号数量至少与当前打开围栏相同。嵌套时使用更长的外层围栏（外层四个、内层三个），让内层闭合不提前结束外层。围栏的缩进必须符合 Markdown 块上下文；普通正文中四空格缩进是代码，不能当作顶层容器。",[14,320,321,322,325],{},"未知类型或未闭合容器保留源码。正文由同一个 Markdown 解析器处理，可以嵌套普通块；这不等于支持任意富文本子树、任意 HTML 属性或 ",[18,323,324],{},"markdown-it-container"," 的自定义 HTML renderer。",[10,327,329],{"id":328},"复用-prose-的完整块样式","复用 Prose 的完整块样式",[14,331,332,333,336,337,340,341,344,345,348,349,239,352,239,355,358],{},"这个示例使用 ",[18,334,335],{},"@quirekit\u002Fmd-editor"," 的 ",[18,338,339],{},"createMdEditorExtensions()"," 组合源码能力与公共 Prose 呈现。编辑区直接消费 ",[18,342,343],{},"qk-prose","，容器使用与 ",[18,346,347],{},"QuireProseContainer"," 相同的 ",[18,350,351],{},"qk-prose-container",[18,353,354],{},"qk-prose-container__header",[18,356,357],{},"qk-prose-container__body","。背景、完整边框、内边距和嵌套间距都由组件库拥有。",[14,360,361],{},"这里的容器是真实的嵌套 DOM 包装，正文仍是同一个 CodeMirror 中的原始行，没有嵌套第二个编辑器。应通过公共 Prose 样式和语义主题定制它，不再给每一行分别涂色，也不用判断一行同时具有多少外层角色。",[14,363,364,365,368,369,259],{},"纯 headless ",[18,366,367],{},"CustomContainer"," 仍提供源码语义、折叠状态和可替换控件；采用 QuireKit 设计的应用可以直接使用产品组合。完整编辑、源码与 Prose 阅读对照见 ",[370,371,373],"a",{"href":372},"\u002Fmd-editor","MD Editor 独立示例",[10,375,376],{"id":376},"自定义折叠控件",[14,378,379,382,383,386,387,390,391,394],{},[18,380,381],{},"controls"," 接受 ",[18,384,385],{},"ComponentViewRenderer\u003CContainerControlProps>","，Vue 使用 ",[18,388,389],{},"VueComponentViewRenderer(Toggle)","，组件接收 ",[18,392,393],{},"view"," 属性。",[396,397,398,411],"table",{},[399,400,401],"thead",{},[402,403,404,408],"tr",{},[405,406,407],"th",{},"属性",[405,409,410],{},"用法",[412,413,414,427,441],"tbody",{},[402,415,416,421],{},[417,418,419],"td",{},[18,420,184],{},[417,422,423,424],{},"显示状态并绑定 ",[18,425,426],{},"aria-expanded",[402,428,429,434],{},[417,430,431],{},[18,432,433],{},"label",[417,435,436,437,440],{},"使用 ",[18,438,439],{},"toggleLabel"," 生成的本地化无障碍名称",[402,442,443,448],{},[417,444,445],{},[18,446,447],{},"toggle()",[417,449,450],{},"请求源码中立的展开或收起",[14,452,453,454,456],{},"当前该入口用于 ",[18,455,28],{}," 的折叠控制，不能替换容器的可编辑正文。折叠状态在模式切换间保留，换文档时重置；选区和搜索进入折叠内容会按运行时规则显露它。只读阅读允许折叠，因为它不改源码。",[10,458,460],{"id":459},"修改标题导出和验证","修改标题、导出和验证",[14,462,463,464,239,467,469,470,473],{},"当前内置容器 codec 读取 ",[18,465,466],{},"name",[18,468,189],{},"，没有通用字段写回：",[18,471,472],{},"updateAttributes('customContainer', ...)"," 不会自动成为标题编辑器。需要标题表单时，实现自己的精确 header patch，并测试缩进、嵌套、CRLF、撤销和过期意图；不要重建整个容器文本。",[14,475,476],{},"保存输出仍为原始冒号语法。HTML 导出由宿主自己的 Markdown 管线解释注册类型，不能假设编辑器组件会自动参与导出。",[14,478,479,480,259],{},"验收时至少检查：未知\u002F未闭合回退、内层闭合、源码选区、只读折叠、撤销、搜索到隐藏正文、两种主题，以及切换文档后的折叠重置。协议见 ",[370,481,483],{"href":482},"\u002Fapi\u002Fextensions","扩展 API",[485,486,487],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sDD9d, html code.shiki .sDD9d{--shiki-default:#D73A49;--shiki-light:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVPnS, html code.shiki .sVPnS{--shiki-default:#24292E;--shiki-light:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s-HEn, html code.shiki .s-HEn{--shiki-default:#032F62;--shiki-light:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sUNQB, html code.shiki .sUNQB{--shiki-default:#005CC5;--shiki-light:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sgQzM, html code.shiki .sgQzM{--shiki-default:#6F42C1;--shiki-light:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sde8i, html code.shiki .sde8i{--shiki-default:#E36209;--shiki-light:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sqmzS, html code.shiki .sqmzS{--shiki-default:#6A737D;--shiki-light:#6A737D;--shiki-dark:#6A737D}",{"title":43,"searchDepth":79,"depth":79,"links":489},[490,491,492,493,494,495],{"id":12,"depth":79,"text":12},{"id":36,"depth":79,"text":36},{"id":266,"depth":79,"text":266},{"id":328,"depth":79,"text":329},{"id":376,"depth":79,"text":376},{"id":459,"depth":79,"text":460},"注册业务容器、定义样式、嵌套正文并接入自己的折叠控件。","md",[367,499,28,500,381,501],"container","nested","CSS","zh-CN",{},"\u002Fextensions\u002Fcontainers","扩展开发",{"title":5,"description":496},"extensions\u002Fcontainers.zh-CN","fNGcFl1Tr_-8sqw3sR0RNnAIPlQp0Hbc3Y9Fc8_ap94",1793046311419]