Editor Autocomplete And Diagnostics

The Payload field uses CodeMirror for Markdown editing.

Directive Autocomplete

Typing or invoking completion around ::: offers public directives from the directive registry:

• :::section
• :::2col
• :::3col
• :::cell
• :::callout
• :::details
• :::toc
• :::steps
• :::cards
• :::card
• :::buttons
• :::tabs
• :::tab

Typing or invoking completion around ::button offers the leaf button directive and its attributes.

Button completion may also show shortcut labels such as ::button_icon and ::button_full. These are autocomplete variants only. Selecting them inserts canonical ::button[...] Markdown; ::button_icon and ::button_full are not valid directive names in source.

Common button completions:

• ::button inserts a compact button with href and variant
• ::button_icon inserts canonical ::button with an icon attribute included
• ::button_full inserts canonical ::button with the common button attributes filled in

Snippets insert directive skeletons and use CodeMirror placeholders/tabstops, so placeholder content such as Content can be overwritten immediately.

Snippet Examples

Steps snippets include normal and card-based layouts:

1:::steps2 3### Step title4 5Content6 7:::

1:::steps{2  variant="cards"3  layout="grid"4  columns="2"5  numbered6}7 8### First step9 10Content11 12### Second step13 14Content15 16:::

Tabs snippets include child tab panels and code fences:

1:::tabs{2  default="pnpm"3}4 5:::tab[pnpm]{value="pnpm"}6```bash7pnpm add package-name8```9:::10 11:::tab[npm]{value="npm"}12```bash13npm install package-name14```15:::16 17:::

Button snippets use the leaf directive form:

1::button[Label]{2  href="/docs"3  variant="primary"4}

Expanded multiline attributes are preferred for readability:

1:::card[Fast Setup]{2  icon="@fa-duotone/bolt"3  theme="glass"4}5Install, configure, ship.6:::

For visible directive headings, [Label] is preferred over title="". Existing title="" content remains compatible.

If both [Label] and title are present, the renderer uses [Label]. Matching values do not warn; differing values produce a non-fatal diagnostic so authors can remove the ambiguity.

Syntax Highlighting

Directive highlighting distinguishes supported pieces where the active theme can style them:

• leaf directives such as ::button
• container directives such as :::card
• directive labels such as [Fast Setup]
• argument names such as href=
• argument values such as "/docs" or true
• nested directive boundaries and closing markers

The editor now handles directive highlighting more robustly across nested blocks and after partially edited or non-clean previous lines.

Closing Labels

Nested directives can be hard to scan when several ::: closers appear in a row. The editor adds lightweight visual labels beside plain closers, such as endcard or endbuttons, without changing the stored Markdown.

1:::cards{2  columns="2"3}4 5:::card[First Card]6Content.7:::8 9:::card[Second Card]10Content.11:::12 13:::

The source remains plain Markdown. In the editor, the three closing markers are decorated so authors can see which card or cards block each closer ends. Explicit layout closers such as :::endcol and :::endsection are also highlighted as closing labels.

Attribute Completion

Inside directive attribute braces, the editor suggests valid attributes where the registry knows them:

1:::card[Fast Setup]{2  theme=""3}

Theme-aware attributes include:

• theme
• cardTheme
• cellTheme
• stepTheme
• tabTheme

Known attribute values are suggested for supported attributes such as:

• callout variant
• toc depth
• steps variant
• steps layout
• steps columns
• steps numbered
• card and container theme names
• tabs and tab panel theme names

Theme Completion Limits

Theme value completions are registry-backed. Built-in theme names are available in the editor.

Custom theme names can still be typed manually. Editor-side completion and linting may not know collection-scoped custom themes in every context, so treat editor suggestions as assistance rather than the source of truth. Render-time theme resolution uses the resolved plugin and collection config and falls back safely when unknown values are used.

Diagnostics

The editor provides lightweight, non-fatal directive diagnostics for issues such as:

• unknown directive names
• malformed directive attributes
• unknown attributes
• unsupported callout variants
• invalid TOC depth
• invalid steps variant, layout, columns, or numbered value
• invalid cards columns
• invalid tabs defaults or duplicate tab values
• unknown theme, cardTheme, cellTheme, stepTheme, or tabTheme
• obvious unclosed directives

Diagnostics do not block rendering. The renderer falls back to safe defaults where possible.