Custom block extractor playground

Custom component extraction playground

This page is a regression and integration test suite for the Showdown pre-processing pipeline that handles Doc:: and Hds:: component blocks in markdown documentation.

Test 1 - pre inside Doc::Layout (original bug)

TEST pre inside Doc::Layout

Test 2 - div inside Doc::Layout

Test 3 - table inside Doc::Layout

Test 4 - multiple block children

block one

block three

Test 5 - Hds::Alert with block params (existing working case)

Test 6 - Hds::Alert with pre inside

Lorem ipsum.

Lorem ipsum.

Test 7 - nested same-prefix Doc::ComponentApi

Test 8 - pre inside Hds:: (block element inside Hds:: namespace)

pre inside Doc::Layout after Alert

Test 9 - simple self-closing (regression guard)

Test 10 - Doc::Banner with block content (uses contentBlocks extension)

Test 11 - Mix & Match of HTML and Ember

example code

Lorem ipsum.

Lorem ipsum.

example code

Lorem ipsum.

Lorem ipsum.

Test 12 - Self-closing tags

Two consecutive custom self-closing tags (the original trigger for the trailing-newline fix):

A custom self-closing tag immediately followed by a plain HTML self-closing tag:

A custom self-closing tag immediately followed by a markdown list (no blank line in source):

• list item one
• list item two

A custom self-closing tag immediately followed by a blockquote:

This is a blockquote after a self-closing component.

A custom self-closing tag at the very end of a section (no trailing content):

Test 13 - same-line nested Hds:: open+close inside a block

<Hds::Link::Inline>text</Hds::Link::Inline> on a single line inside a block caused the inner depth scanner's CLOSETAGRE (line-start anchored) to miss the close tag, leaving the stack unbalanced and eating the rest of the file.

Test 14 - Doc::WcagList self-closing with a Mustache array attribute

A self-closing tag whose attribute contains a Mustache {{array ...}} expression — the real-world pattern from every component's accessibility page.

Support

If any accessibility issues have been found within this component, let us know by submitting an issue.

Test 15 - Doc:: string inside a Mustache expression (should NOT be extracted)

Text referencing {{component "Hds::Alert"}} inline — the extractor should ignore the quoted string inside the Mustache.

Test 16 - Doc:: string inside a @name attribute value (should NOT be extracted)

Test 17 - Doc:: inside a markdown inline code span (should NOT be extracted, rendered as literal text)

Use <Doc::Layout> to wrap items. And <Hds::Alert> for alerts.

Test 18 - Doc:: inside a fenced code block (should NOT be extracted)

<Doc::Layout @spacing="12px">
  <pre>example code</pre>
</Doc::Layout>

Test 19 - self-closing with no space before />

Test 20 - legitimate paragraph content inside a Doc:: component (Pass 1 must NOT strip it)

Test 21 - Doc:: inside a !!! banner block

Test 22 - inline Doc::Badge alongside regular text (must stay inline, not extracted as block)

Here is an inline badge

Test 23 - named blocks (Doc::ComponentApi with named block syntax in attribute)

Test 24 - Pass 2 must NOT eat a legitimate paragraph before non-custom content

Some paragraph text after a self-closing component. This paragraph must not be eaten.

Test 25 - backtick code spans inside C.Property descriptions

Test 26 - markdown links with various content in the link text inside C.Property descriptions

Test 27 - Doc:: component inside a markdown blockquote

inside blockquote

Test 28 - Doc:: component inside a markdown list item

• list item one
• Plain list item
• list item three

Test 29 - Doc:: component inside an HTML table cell

Test 30 - Doc::Badge inline inside a heading

A heading with an inline

Badge

inside it

Test 31 - Doc::Badge inline inside a list item alongside text

• A list item with an inline
  Badge
  alongside text
• Another
  Success
  item

Test 32 - Doc::Layout with all children on a single line

Test 33 - C.Property description with bold, backtick, and br mixed

Test 34 - bold and italic wrapping a backtick span (outside a link)

var foo = "bar"; is bold code, and var foo = "bar"; is italic code.

Test 35 - multi-line self-closing tag with attributes on separate lines

The Doc::TokensList / Doc::IconsList pattern: a self-closing tag whose attributes each appear on their own line, with /> on the final line by itself. processInlineMarkdownInBlock must NOT feed the attribute lines through Showdown.

Test 36 - multi-line opening tag inside an extracted block

A C.Property whose opening tag spans multiple lines (attributes on separate lines, > on the last attribute line). processInlineMarkdownInBlock must keep all attribute lines verbatim — the insideOpenTag flag must engage and disengage correctly without treating @values lines as markdown text runs.

Paragraph after the block — must render normally.