[{"data":1,"prerenderedAt":509},["ShallowReactive",2],{"msfe-doc:\u002Fen\u002Fextensions\u002Fcontainers":3},{"id":4,"title":5,"body":6,"description":496,"extension":497,"keywords":498,"locale":502,"meta":503,"navigation":284,"order":52,"path":504,"section":505,"seo":506,"stem":507,"__hash__":508},"docs\u002Fextensions\u002Fcontainers.en.md","Containers and nested blocks",{"type":7,"value":8,"toc":488},"minimark",[9,14,31,35,39,55,228,259,263,312,315,318,325,329,358,361,374,378,396,451,457,461,474,477,484],[10,11,13],"h2",{"id":12},"complete-example","Complete example",[15,16,17,18,22,23,26,27,30],"p",{},"This example registers a ",[19,20,21],"code",{},"decision"," container, nests a ",[19,24,25],{},"warning",", and supplies a QuireKit disclosure button for ",[19,28,29],{},"details",". Source mode edits all body content. Folding does not rewrite Markdown. The source tab includes registration, styles, controls and mounting.",[32,33],"msfe-demo",{"name":34},"containers\u002Feditor",[10,36,38],{"id":37},"install-and-register","Install and register",[40,41,46],"pre",{"className":42,"code":43,"language":44,"meta":45,"style":45},"language-sh shiki shiki-themes github-light github-light github-dark","pnpm add '@quirekit\u002Fmsfe-markdown-extras@workspace:*'\n","sh","",[19,47,48],{"__ignoreMap":45},[49,50,53],"span",{"class":51,"line":52},"line",1,[49,54,43],{},[40,56,60],{"className":57,"code":58,"language":59,"meta":45,"style":45},"language-ts shiki shiki-themes github-light github-light github-dark","import { CustomContainer } from '@quirekit\u002Fmsfe-markdown-extras'\nconst Containers = CustomContainer.configure({\n  types: ['info', 'note', 'tip', 'important', 'warning', 'danger', 'caution', 'details', 'decision'],\n  detailsOpen: false,\n  toggleLabel: (expanded, title) => `${expanded ? 'Collapse' : 'Expand'} ${title}`,\n})\n\u002F\u002F Include Containers alongside StarterKit in extensions.\n","ts",[19,61,62,79,102,155,167,215,221],{"__ignoreMap":45},[49,63,64,68,72,75],{"class":51,"line":52},[49,65,67],{"class":66},"sDD9d","import",[49,69,71],{"class":70},"sVPnS"," { CustomContainer } ",[49,73,74],{"class":66},"from",[49,76,78],{"class":77},"s-HEn"," '@quirekit\u002Fmsfe-markdown-extras'\n",[49,80,82,85,89,92,95,99],{"class":51,"line":81},2,[49,83,84],{"class":66},"const",[49,86,88],{"class":87},"sUNQB"," Containers",[49,90,91],{"class":66}," =",[49,93,94],{"class":70}," CustomContainer.",[49,96,98],{"class":97},"sgQzM","configure",[49,100,101],{"class":70},"({\n",[49,103,105,108,111,114,117,119,122,124,127,129,132,134,137,139,142,144,147,149,152],{"class":51,"line":104},3,[49,106,107],{"class":70},"  types: [",[49,109,110],{"class":77},"'info'",[49,112,113],{"class":70},", ",[49,115,116],{"class":77},"'note'",[49,118,113],{"class":70},[49,120,121],{"class":77},"'tip'",[49,123,113],{"class":70},[49,125,126],{"class":77},"'important'",[49,128,113],{"class":70},[49,130,131],{"class":77},"'warning'",[49,133,113],{"class":70},[49,135,136],{"class":77},"'danger'",[49,138,113],{"class":70},[49,140,141],{"class":77},"'caution'",[49,143,113],{"class":70},[49,145,146],{"class":77},"'details'",[49,148,113],{"class":70},[49,150,151],{"class":77},"'decision'",[49,153,154],{"class":70},"],\n",[49,156,158,161,164],{"class":51,"line":157},4,[49,159,160],{"class":70},"  detailsOpen: ",[49,162,163],{"class":87},"false",[49,165,166],{"class":70},",\n",[49,168,170,173,176,180,182,185,188,191,194,196,199,202,205,208,210,213],{"class":51,"line":169},5,[49,171,172],{"class":97},"  toggleLabel",[49,174,175],{"class":70},": (",[49,177,179],{"class":178},"sde8i","expanded",[49,181,113],{"class":70},[49,183,184],{"class":178},"title",[49,186,187],{"class":70},") ",[49,189,190],{"class":66},"=>",[49,192,193],{"class":77}," `${",[49,195,179],{"class":70},[49,197,198],{"class":66}," ?",[49,200,201],{"class":77}," 'Collapse'",[49,203,204],{"class":66}," :",[49,206,207],{"class":77}," 'Expand'} ${",[49,209,184],{"class":70},[49,211,212],{"class":77},"}`",[49,214,166],{"class":70},[49,216,218],{"class":51,"line":217},6,[49,219,220],{"class":70},"})\n",[49,222,224],{"class":51,"line":223},7,[49,225,227],{"class":226},"sqmzS","\u002F\u002F Include Containers alongside StarterKit in extensions.\n",[15,229,230,231,113,234,113,237,113,240,113,243,113,245,113,248,251,252,254,255,258],{},"Defaults include ",[19,232,233],{},"info",[19,235,236],{},"note",[19,238,239],{},"tip",[19,241,242],{},"important",[19,244,25],{},[19,246,247],{},"danger",[19,249,250],{},"caution"," and ",[19,253,29],{},". The ",[19,256,257],{},"types"," array replaces the defaults, so retain standard roles you still need. Names start with a lowercase letter and may contain digits and hyphens.",[10,260,262],{"id":261},"syntax-and-nesting","Syntax and nesting",[40,264,268],{"className":265,"code":266,"language":267,"meta":45,"style":45},"language-markdown shiki shiki-themes github-light github-light github-dark",":::: decision Release decision\nContent can include **emphasis**, lists, tables and fenced code.\n\n::: warning Before release\n- Check the rollback plan\n- Check the version\n:::\n::::\n","markdown",[19,269,270,275,280,286,291,296,301,306],{"__ignoreMap":45},[49,271,272],{"class":51,"line":52},[49,273,274],{},":::: decision Release decision\n",[49,276,277],{"class":51,"line":81},[49,278,279],{},"Content can include **emphasis**, lists, tables and fenced code.\n",[49,281,282],{"class":51,"line":104},[49,283,285],{"emptyLinePlaceholder":284},true,"\n",[49,287,288],{"class":51,"line":157},[49,289,290],{},"::: warning Before release\n",[49,292,293],{"class":51,"line":169},[49,294,295],{},"- Check the rollback plan\n",[49,297,298],{"class":51,"line":217},[49,299,300],{},"- Check the version\n",[49,302,303],{"class":51,"line":223},[49,304,305],{},":::\n",[49,307,309],{"class":51,"line":308},8,[49,310,311],{},"::::\n",[15,313,314],{},"An opening fence has at least three colons, whitespace and a registered type. Remaining header text is a literal title, not executable HTML or separately rendered inline Markdown.",[15,316,317],{},"A closing fence must contain at least as many colons as its opener. Use a longer outer fence when nesting, such as four outside and three inside. The inner close then cannot terminate the outer block. Indentation follows Markdown block context; four-space indentation in ordinary top-level content is code.",[15,319,320,321,324],{},"Unknown names and unclosed containers retain source. The same Markdown parser owns nested body blocks. This does not imply arbitrary editable HTML children or compatibility with custom ",[19,322,323],{},"markdown-it-container"," HTML renderers.",[10,326,328],{"id":327},"reuse-complete-prose-blocks","Reuse complete Prose blocks",[15,330,331,332,335,336,339,340,343,344,113,347,251,350,353,354,357],{},"This example uses ",[19,333,334],{},"createMdEditorExtensions()"," from ",[19,337,338],{},"@quirekit\u002Fmd-editor"," to combine source capabilities with public Prose presentation. The document uses ",[19,341,342],{},"qk-prose","; containers share ",[19,345,346],{},"qk-prose-container",[19,348,349],{},"qk-prose-container__header",[19,351,352],{},"qk-prose-container__body"," with ",[19,355,356],{},"QuireProseContainer",". The component library owns their surfaces, full outlines, padding and nested spacing.",[15,359,360],{},"Containers are real nested DOM wrappers around the original CodeMirror lines. There is still one editor, selection and source document. Customize public Prose styles and semantic theme tokens instead of painting every line separately or overriding overlapping ancestor classes.",[15,362,363,364,367,368,373],{},"The headless ",[19,365,366],{},"CustomContainer"," continues to own source semantics, disclosure state and replaceable controls. Applications using QuireKit's design can consume the product preset directly. See the ",[369,370,372],"a",{"href":371},"\u002Fen\u002Fmd-editor","standalone MD Editor example"," for editing, source and Prose reading views.",[10,375,377],{"id":376},"replace-disclosure-controls","Replace disclosure controls",[15,379,380,383,384,387,388,391,392,395],{},[19,381,382],{},"controls"," accepts ",[19,385,386],{},"ComponentViewRenderer\u003CContainerControlProps>",". Vue uses ",[19,389,390],{},"VueComponentViewRenderer(Toggle)"," and the component receives ",[19,393,394],{},"view",".",[397,398,399,412],"table",{},[400,401,402],"thead",{},[403,404,405,409],"tr",{},[406,407,408],"th",{},"Property",[406,410,411],{},"Usage",[413,414,415,428,441],"tbody",{},[403,416,417,422],{},[418,419,420],"td",{},[19,421,179],{},[418,423,424,425],{},"Visual state and ",[19,426,427],{},"aria-expanded",[403,429,430,435],{},[418,431,432],{},[19,433,434],{},"label",[418,436,437,438],{},"Localized accessible action from ",[19,439,440],{},"toggleLabel",[403,442,443,448],{},[418,444,445],{},[19,446,447],{},"toggle()",[418,449,450],{},"Request source-neutral disclosure",[15,452,453,454,456],{},"This entry currently controls ",[19,455,29],{},"; it cannot replace the editable container body. Disclosure survives mode changes and resets on document replacement. Selection and search reveal folded content through runtime behavior. Readonly readers may fold because source stays unchanged.",[10,458,460],{"id":459},"header-editing-export-and-verification","Header editing, export and verification",[15,462,463,464,251,467,469,470,473],{},"The built-in codec reads ",[19,465,466],{},"name",[19,468,184],{}," but does not offer a generic header patch. Calling ",[19,471,472],{},"updateAttributes('customContainer', ...)"," does not create a title editor. A custom title form needs a precise header codec with indentation, nesting, CRLF, history and stale-intent tests; do not regenerate the whole body.",[15,475,476],{},"Saving preserves colon syntax. Your HTML export pipeline must interpret registered roles independently; editor components do not automatically participate in export.",[15,478,479,480,395],{},"Verify unknown\u002Funclosed fallback, nested closing, source selection, readonly folding, undo, search into hidden content, both themes and document-reset behavior. See ",[369,481,483],{"href":482},"\u002Fen\u002Fapi\u002Fextensions","Extension 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":45,"searchDepth":81,"depth":81,"links":489},[490,491,492,493,494,495],{"id":12,"depth":81,"text":13},{"id":37,"depth":81,"text":38},{"id":261,"depth":81,"text":262},{"id":327,"depth":81,"text":328},{"id":376,"depth":81,"text":377},{"id":459,"depth":81,"text":460},"Register business containers, style native content and provide disclosure controls.","md",[366,499,29,500,382,501],"container","nested","CSS","en",{},"\u002Fen\u002Fextensions\u002Fcontainers","Extensions",{"title":5,"description":496},"extensions\u002Fcontainers.en","x8Q_FqRwUGDRQxXzSPEzSLjW03hZKov4Si1SWTh-HgY",1793046312431]