feat(markdown): render heading levels four through six (#82)

renderBlock only matched '#', '##' and '###', so a '#### Title' block fell
through to the paragraph branch and rendered its hashes as literal text. One
ATX regex now covers levels one through six; '##' still owns TOC anchoring.

Adds runtime and shadcn CSS for h4-h6, and a heading section to the component
tour so the preview exercises them.

Author: vltansky

examples/component-tour.html

@@ -231,6 +231,16 @@
   1. A numbered list nested under a bullet
   2. Its second entry
 
+## Headings
+
+### Level three sets up a topic
+
+#### Level four splits it into steps
+
+##### Level five carries a detail
+
+###### Level six closes it out
+
 ## Markdown and HTML images
 
 ![Mountain landscape](https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=800 "Rendered from Markdown")

packages/htmdx/src/components/shadcn/shared/theme.ts

@@ -129,6 +129,22 @@ htmdx-code {
   font-weight: 600;
   margin: 1rem 0 0.5rem;
 }
+.htmdx-doc-section-card h4:not([data-slot]) {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 1rem 0 0.375rem;
+}
+.htmdx-doc-section-card h5:not([data-slot]) {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  margin: 0.875rem 0 0.375rem;
+}
+.htmdx-doc-section-card h6:not([data-slot]) {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--muted-foreground);
+  margin: 0.875rem 0 0.375rem;
+}
 .htmdx-doc-section-card p:not([data-slot]) {
   font-size: 0.875rem;
   line-height: 1.6;

packages/htmdx/src/index.ts

@@ -1475,6 +1475,30 @@ const RUNTIME_CSS = `
   .htmdx-doc-section-card > h3:first-child:not([data-slot]) {
     margin-top: 0;
   }
+  .htmdx-doc-section-card h4:not([data-slot]) {
+    font-family: var(--md-ref-typeface-brand);
+    font-size: 1.25rem;
+    line-height: 1.5rem;
+    font-weight: 500;
+    color: var(--md-sys-color-on-surface);
+    margin: 18px 0 8px;
+  }
+  .htmdx-doc-section-card h5:not([data-slot]) {
+    font-family: var(--md-ref-typeface-brand);
+    font-size: 1.05rem;
+    line-height: 1.4rem;
+    font-weight: 500;
+    color: var(--md-sys-color-on-surface);
+    margin: 16px 0 6px;
+  }
+  .htmdx-doc-section-card h6:not([data-slot]) {
+    font-family: var(--md-ref-typeface-brand);
+    font-size: 0.95rem;
+    line-height: 1.35rem;
+    font-weight: 500;
+    color: var(--md-sys-color-on-surface-variant);
+    margin: 16px 0 6px;
+  }
   .htmdx-doc-section-card > p,
   .htmdx-doc-section-card > ul,
   .htmdx-doc-section-card > div > p,

packages/htmdx/src/react/markdown.tsx

@@ -17,6 +17,7 @@ import { MermaidDiagram } from './mermaid';
 
 const INLINE = /\*\*([^*]+)\*\*|`([^`]+)`|\[([^\]]+)\]\(([^)]+)\)/g;
 const HTML_TAG = /<\/?([A-Za-z][A-Za-z0-9]*)(?:\s[^>]*)?\/?>/g;
+const ATX_HEADING = /^(#{1,6}) /;
 const LIST_BLOCK = /^(?:-|\d{1,9}[.)])\s/;
 const LIST_ITEM = /^(\s*)(?:-|(\d{1,9})[.)])\s+(.*)$/;
 // Indentation is author-controlled, so a document with runaway indentation would
@@ -102,20 +103,20 @@ function renderBlock(
   if (fencedCode) {
     return fencedCode;
   }
-  if (block.startsWith('### ')) {
-    return createElement('h3', { key }, renderInline(block.slice(4), html));
-  }
-  if (block.startsWith('## ')) {
-    const label = block.slice(3);
+  const heading = ATX_HEADING.exec(block);
+  if (heading) {
+    const level = heading[1].length;
+    const label = block.slice(level + 1);
+    // Only `##` anchors the table of contents; deeper levels are body structure.
+    if (level !== 2) {
+      return createElement(`h${level}`, { key }, renderInline(label, html));
+    }
     const id = context ? uniqueSlug(label, context) : slugify(label);
     if (context) {
       context.headings.push({ id, label });
     }
     return createElement('h2', { key, id }, renderInline(label, html));
   }
-  if (block.startsWith('# ')) {
-    return createElement('h1', { key }, renderInline(block.slice(2), html));
-  }
   if (isListBlock(block)) {
     return createElement(Fragment, { key }, ...renderLists(parseList(block), 'list', html));
   }

packages/htmdx/test/markdown-headings.spec.ts

@@ -0,0 +1,60 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, test } from 'vitest';
+import { compileToReact } from '../src/react';
+
+function article(source: string) {
+  const container = document.createElement('div');
+  container.innerHTML = renderToStaticMarkup(compileToReact(source));
+  return container;
+}
+
+describe('atx headings', () => {
+  test.each([
+    ['#', 'h1'],
+    ['##', 'h2'],
+    ['###', 'h3'],
+    ['####', 'h4'],
+    ['#####', 'h5'],
+    ['######', 'h6'],
+  ])('renders %s as %s', (hashes, tag) => {
+    const container = article(`${hashes} Interaction`);
+    const heading = container.querySelector(tag);
+
+    expect(heading?.textContent).toBe('Interaction');
+    expect(container.textContent).not.toContain('#');
+  });
+
+  test('renders inline markup inside a deep heading', () => {
+    const container = article('#### 1. `capture` **native** selection');
+
+    expect(container.querySelector('h4 code')?.textContent).toBe('capture');
+    expect(container.querySelector('h4 strong')?.textContent).toBe('native');
+  });
+
+  test('anchors h2 for the table of contents and leaves deeper levels unanchored', () => {
+    const container = article('## Case\n\n#### Deep\n\n##### Deeper');
+
+    expect(container.querySelector('h2')?.getAttribute('id')).toBe('case');
+    expect(container.querySelector('h4')?.hasAttribute('id')).toBe(false);
+    expect(container.querySelector('h5')?.hasAttribute('id')).toBe(false);
+  });
+
+  test('leaves a seventh level as prose, the way CommonMark does', () => {
+    const container = article('####### Too deep');
+
+    expect(container.querySelector('p')?.textContent).toBe('####### Too deep');
+  });
+
+  test('leaves a hash without a space as prose', () => {
+    const container = article('####Tight');
+
+    expect(container.querySelector('p')?.textContent).toBe('####Tight');
+  });
+
+  test('keeps a hash line inside a fence literal', () => {
+    const container = article('```text\n#### Not a heading\n```');
+
+    expect(container.querySelector('h4')).toBeNull();
+    expect(container.querySelector('pre')?.textContent).toBe('#### Not a heading');
+  });
+});