Containers and nested blocks

Complete example

This example registers a decision container, nests a warning, and supplies a QuireKit disclosure button for details. Source mode edits all body content. Folding does not rewrite Markdown. The source tab includes registration, styles, controls and mounting.

Install and register

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 ? 'Collapse' : 'Expand'} ${title}`,
})
// Include Containers alongside StarterKit in extensions.

Defaults include info, note, tip, important, warning, danger, caution and details. The types array replaces the defaults, so retain standard roles you still need. Names start with a lowercase letter and may contain digits and hyphens.

Syntax and nesting

:::: decision Release decision
Content can include **emphasis**, lists, tables and fenced code.

::: warning Before release
- Check the rollback plan
- Check the version
:::
::::

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.

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.

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 markdown-it-container HTML renderers.

Reuse complete Prose blocks

This example uses createMdEditorExtensions() from @quirekit/md-editor to combine source capabilities with public Prose presentation. The document uses qk-prose; containers share qk-prose-container, qk-prose-container__header and qk-prose-container__body with QuireProseContainer. The component library owns their surfaces, full outlines, padding and nested spacing.

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.

The headless CustomContainer continues to own source semantics, disclosure state and replaceable controls. Applications using QuireKit's design can consume the product preset directly. See the standalone MD Editor example for editing, source and Prose reading views.

Replace disclosure controls

controls accepts ComponentViewRenderer<ContainerControlProps>. Vue uses VueComponentViewRenderer(Toggle) and the component receives view.

This entry currently controls details; 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.

Header editing, export and verification

The built-in codec reads name and title but does not offer a generic header patch. Calling 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.

Saving preserves colon syntax. Your HTML export pipeline must interpret registered roles independently; editor components do not automatically participate in export.

Verify unknown/unclosed fallback, nested closing, source selection, readonly folding, undo, search into hidden content, both themes and document-reset behavior. See Extension API.