Fix code tabls only handling two grouped blocks

Author: webstackdev

_TODO.md

@@ -147,18 +147,12 @@ See comp images in Breadcrumbs component directory
 
 ## Code Block Problems
 
-- I aliased 'promql' to 'go'. When a code fence using the alias is rendered with the language set to 'promql', it shows as 'go' incorrectly because of the alias.
-
-- We need custom handling for all language names that are displayed:
-1. `html` should be displayed uppercase as `HTML`, `yaml` as `YAML`
-2. `typescript` and its alias `ts` as `TypeScript`, `javascript` and its alias `js` as `JavaScript`
-3. The alias `md` as `Markdown
-4. All languages with their first names uppercased
-
 - The "go" language code block in `src/content/articles/api-versioning-deprecation-sunset-headers-migration/index.mdx` is not being combined with the "typescript", "python", and "ruby" tabbed code block. Same with "python" block in "### Admission Control Strategies" section of `src/content/articles/backpressure-load-shedding-admission-control-overload/index.mdx`, plus the line numbering is weird in the code block.
 
 - The "❌" symbol is not showing in sql code block, it's rendering as a plain "X". But "✅" renders okay. `src/content/articles/database-schema-migrations-continuous-deployment-zero-downtime/index.mdx`
 
+- Need to be able to highlight the title in a code block to copy it, or at least have a "copy" wrapper on it
+
 - Language "haproxy" is not highlighting Shiki, need to adjust allowed languages in config
 
 - add "cel" language to code blocks

src/lib/config/shiki.ts

@@ -1,5 +1,6 @@
 import type { ShikiTransformer } from '@shikijs/types'
 import type { Element } from 'hast'
+import { builtinLanguages } from 'shiki'
 import { createCssVariablesTheme } from 'shiki/core'
 import {
   parseMetaHighlightString,
@@ -124,6 +125,7 @@ export const shikiConfigOptions = {
       fontStyle: true,
     }),
   ],
+  /** MathJax handles math code block rendering, MermaidJS handles mermaid code block rendering */
   excludeLangs: ['mermaid', 'math'],
   langAlias,
   wrap: true,

src/lib/markdown/plugins/rehype-code-tabs/__tests__/three-block-repro.spec.ts

@@ -0,0 +1,187 @@
+/**
+ * Diagnostic test to reproduce the 3-block code-tabs grouping bug.
+ * Run with: npx vitest run src/lib/markdown/plugins/rehype-code-tabs/__tests__/three-block-repro.spec.ts
+ */
+import { describe, it, expect } from 'vitest'
+import type { Root, Element } from 'hast'
+import { remark } from 'remark'
+import remarkRehype from 'remark-rehype'
+import rehypeStringify from 'rehype-stringify'
+import remarkCodeTabs from '@lib/markdown/plugins/remark-code-tabs'
+import rehypeCodeTabs from '@lib/markdown/plugins/rehype-code-tabs'
+import { unified } from 'unified'
+
+describe('3-block code-tabs grouping', () => {
+  it('groups 3 consecutive same-group blocks (remark pipeline)', async () => {
+    const md = [
+      '```typescript [g1:TypeScript]',
+      'const x = 1',
+      '```',
+      '```php [g1:PHP]',
+      '<?php echo 1;',
+      '```',
+      '```python [g1:Python]',
+      'print(1)',
+      '```',
+    ].join('\n')
+
+    const html = String(
+      await remark()
+        .use(remarkCodeTabs)
+        .use(remarkRehype)
+        .use(rehypeCodeTabs)
+        .use(rehypeStringify)
+        .process(md)
+    )
+
+    console.log('HTML output:', html)
+
+    // All 3 should be inside a single <code-tabs>
+    const codeTabsCount = (html.match(/<code-tabs/g) || []).length
+    expect(codeTabsCount, 'Should have exactly 1 <code-tabs> wrapper').toBe(1)
+  })
+
+  it('groups 3 consecutive same-group HAST blocks directly', async () => {
+    const makePre = (tab: string): Element => ({
+      type: 'element',
+      tagName: 'pre',
+      properties: {},
+      children: [{
+        type: 'element',
+        tagName: 'code',
+        properties: {
+          'data-code-tabs-group': 'g1',
+          'data-code-tabs-tab': tab,
+        },
+        children: [{ type: 'text', value: `code for ${tab}` }],
+      }],
+    })
+
+    const tree: Root = {
+      type: 'root',
+      children: [
+        makePre('TypeScript'),
+        { type: 'text', value: '\n' },
+        makePre('PHP'),
+        { type: 'text', value: '\n' },
+        makePre('Python'),
+      ],
+    }
+
+    const processor = unified().use(rehypeCodeTabs)
+    await processor.run(tree as never)
+
+    const elements = tree.children.filter(
+      c => (c as Element).type === 'element'
+    ) as Element[]
+
+    console.log('Elements:', elements.map(e => `${e.tagName}(${e.children?.length})`))
+
+    expect(elements.length, 'Should have exactly 1 top-level element').toBe(1)
+    expect(elements[0].tagName).toBe('code-tabs')
+    expect(elements[0].children.length, 'code-tabs should contain all 3 pre blocks').toBe(3)
+  })
+
+  it('unwraps figure-wrapped grouped code blocks and groups them', async () => {
+    const makePre = (tab: string, lang: string): Element => ({
+      type: 'element',
+      tagName: 'pre',
+      properties: {},
+      children: [{
+        type: 'element',
+        tagName: 'code',
+        properties: {
+          className: [`language-${lang}`],
+          'data-code-tabs-group': 'g1',
+          'data-code-tabs-tab': tab,
+        },
+        children: [{ type: 'text', value: `code for ${tab}` }],
+      }],
+    })
+
+    // Simulate remark-captions wrapping the 3rd code block in <figure>
+    const tree: Root = {
+      type: 'root',
+      children: [
+        makePre('TypeScript', 'typescript'),
+        { type: 'text', value: '\n' },
+        makePre('PHP', 'php'),
+        { type: 'text', value: '\n' },
+        {
+          type: 'element',
+          tagName: 'figure',
+          properties: {},
+          children: [
+            makePre('Python', 'python'),
+            {
+              type: 'element',
+              tagName: 'figcaption',
+              properties: {},
+              children: [{ type: 'text', value: 'Different admission control strategies.' }],
+            },
+          ],
+        } as Element,
+      ],
+    }
+
+    const processor = unified().use(rehypeCodeTabs)
+    await processor.run(tree as never)
+
+    const elements = tree.children.filter(
+      c => (c as Element).type === 'element'
+    ) as Element[]
+
+    expect(elements.length, 'Should have exactly 1 top-level element').toBe(1)
+    expect(elements[0].tagName).toBe('code-tabs')
+    expect(elements[0].children.length, 'code-tabs should contain all 3 pre blocks').toBe(3)
+    // Verify all children are <pre> (not figure)
+    expect(elements[0].children.every(
+      (c: Element) => c.tagName === 'pre'
+    )).toBe(true)
+  })
+
+  it('does NOT unwrap figures containing non-grouped code blocks', async () => {
+    const tree: Root = {
+      type: 'root',
+      children: [
+        {
+          type: 'element',
+          tagName: 'figure',
+          properties: {},
+          children: [
+            {
+              type: 'element',
+              tagName: 'pre',
+              properties: {},
+              children: [{
+                type: 'element',
+                tagName: 'code',
+                properties: { className: ['language-python'] },
+                children: [{ type: 'text', value: 'print(1)' }],
+              }],
+            },
+            {
+              type: 'element',
+              tagName: 'figcaption',
+              properties: {},
+              children: [{ type: 'text', value: 'A standalone caption.' }],
+            },
+          ],
+        } as Element,
+      ],
+    }
+
+    const processor = unified().use(rehypeCodeTabs)
+    await processor.run(tree as never)
+
+    const elements = tree.children.filter(
+      c => (c as Element).type === 'element'
+    ) as Element[]
+
+    // The figure should be left alone (not unwrapped)
+    // The pre inside gets standalone-wrapped in code-tabs
+    expect(elements.length).toBe(1)
+    // The figure stays as-is, and the standalone wrapping happens inside it
+    expect(elements[0].tagName).toBe('figure')
+  })
+})

src/lib/markdown/plugins/rehype-code-tabs/index.ts

@@ -133,6 +133,35 @@ function shouldSkipSingleWrap(pre: Element): boolean {
   return EXCLUDED_SINGLE_WRAP_LANGS.has(lang.toLowerCase())
 }
 
+/**
+ * Replace <figure> wrappers around grouped code blocks with just the <pre> child.
+ *
+ * `remark-captions` wraps code blocks followed by "Code: ..." paragraphs in
+ * `<figure>` elements. When a grouped code block (with `data-code-tabs-group`)
+ * is inside a figure, it breaks adjacency detection in `wrapCodeTabRuns`.
+ * This pre-processing step extracts grouped `<pre>` elements from their figure
+ * wrappers so they can be properly combined into tab groups.
+ */
+function unwrapGroupedFigures(parent: Parent): void {
+  const children = parent.children
+
+  for (let i = 0; i < children.length; i += 1) {
+    const node = children[i]
+    if (!isElement(node) || node.tagName !== 'figure') continue
+
+    const pre = node.children.find(
+      (child): child is Element => isElement(child) && child.tagName === 'pre'
+    )
+    if (!pre) continue
+
+    // Only unwrap if the <pre> belongs to a tab group
+    const info = getTabInfoFromPre(pre)
+    if (!info) continue
+
+    children[i] = pre
+  }
+}
+
 function wrapCodeTabRuns(parent: Parent): void {
   if (isElement(parent) && parent.tagName === 'code-tabs') return
 
@@ -208,12 +237,14 @@ function wrapStandaloneCodeBlocks(parent: Parent): void {
 
 const rehypeCodeTabs: Plugin<[], Root> = () => {
   return tree => {
+    unwrapGroupedFigures(tree as unknown as Parent)
     wrapCodeTabRuns(tree as unknown as Parent)
     wrapStandaloneCodeBlocks(tree as unknown as Parent)
 
     visit(tree, 'element', (node: Element): typeof SKIP | void => {
       if (node.tagName === 'code-tabs') return SKIP
       if (!isParent(node)) return
+      unwrapGroupedFigures(node)
       wrapCodeTabRuns(node)
       wrapStandaloneCodeBlocks(node)
     })