add codeblock

Author: JonathanMatthey

cms/scripts/migrate-blog-to-components.ts

@@ -24,6 +24,7 @@ import './sync-mdx/videoEmbedHandler'
 import './sync-mdx/blockquoteHandler'
 import './sync-mdx/calloutTextHandler'
 import './sync-mdx/pdfEmbedHandler'
+import './sync-mdx/codeBlockHandler'
 import './sync-mdx/ambassadorHandler'
 
 import { parseMdxToBlocks, type ParserContext } from './sync-mdx/mdxBlockParser'

cms/scripts/sync-mdx/codeBlockHandler.test.ts

@@ -0,0 +1,135 @@
+import { describe, it, expect } from 'vitest'
+import { parseMdxToBlocks } from './mdxBlockParser'
+import { MdxParserError, ParserErrorCode } from './parserErrors'
+
+// Side-effect import: registers CodeBlock handler
+import './codeBlockHandler'
+
+const ctx = { locale: 'en' }
+
+describe('CodeBlock handler', () => {
+  it('parses language, title, and template literal code', async () => {
+    const blocks = await parseMdxToBlocks(
+      '<CodeBlock language="html" title="test" code={`qwe`} />',
+      ctx
+    )
+
+    expect(blocks).toEqual([
+      {
+        __component: 'blocks.code-block',
+        code: 'qwe',
+        language: 'html',
+        title: 'test'
+      }
+    ])
+  })
+
+  it('parses multiline code from a template literal', async () => {
+    const blocks = await parseMdxToBlocks(
+      `<CodeBlock language="python" title="hello.py" code={\`def hello():
+    print("world")\`} />`,
+      ctx
+    )
+
+    expect(blocks[0]).toMatchObject({
+      __component: 'blocks.code-block',
+      language: 'python',
+      title: 'hello.py',
+      code: 'def hello():\n  print("world")'
+    })
+  })
+
+  it('normalizes 4-space indentation to 2 spaces', async () => {
+    const blocks = await parseMdxToBlocks(
+      `<CodeBlock language="javascript" code={\`function run() {
+    if (true) {
+        return 1
+    }
+}\`} />`,
+      ctx
+    )
+
+    expect((blocks[0] as { code: string }).code).toBe(
+      'function run() {\n  if (true) {\n    return 1\n  }\n}'
+    )
+  })
+
+  it('omits title when not provided', async () => {
+    const blocks = await parseMdxToBlocks(
+      '<CodeBlock language="javascript" code={`const x = 1`} />',
+      ctx
+    )
+
+    expect(blocks[0]).toEqual({
+      __component: 'blocks.code-block',
+      code: 'const x = 1',
+      language: 'javascript'
+    })
+  })
+
+  it('preserves markdown order around CodeBlock', async () => {
+    const blocks = await parseMdxToBlocks(
+      `Intro paragraph.
+
+<CodeBlock language="bash" code={\`echo hi\`} />
+
+Outro paragraph.`,
+      ctx
+    )
+
+    expect(blocks).toHaveLength(3)
+    expect(blocks[0]).toMatchObject({ __component: 'blocks.paragraph' })
+    expect(blocks[1]).toMatchObject({
+      __component: 'blocks.code-block',
+      code: 'echo hi',
+      language: 'bash'
+    })
+    expect(blocks[2]).toMatchObject({ __component: 'blocks.paragraph' })
+  })
+})
+
+describe('CodeBlock handler — errors', () => {
+  it('returns MISSING_REQUIRED_PROP when language is missing', async () => {
+    const result = await parseMdxToBlocks(
+      '<CodeBlock code={`const x = 1`} />',
+      ctx
+    )
+    expect(result).toBeInstanceOf(MdxParserError)
+    expect(result).toMatchObject({
+      code: ParserErrorCode.MISSING_REQUIRED_PROP
+    })
+  })
+
+  it('returns MISSING_REQUIRED_PROP when code is missing', async () => {
+    const result = await parseMdxToBlocks(
+      '<CodeBlock language="javascript" />',
+      ctx
+    )
+    expect(result).toBeInstanceOf(MdxParserError)
+    expect(result).toMatchObject({
+      code: ParserErrorCode.MISSING_REQUIRED_PROP
+    })
+  })
+
+  it('returns INVALID_PROP_VALUE for unsupported language', async () => {
+    const result = await parseMdxToBlocks(
+      '<CodeBlock language="cobol" code={`x`} />',
+      ctx
+    )
+    expect(result).toBeInstanceOf(MdxParserError)
+    expect(result).toMatchObject({
+      code: ParserErrorCode.INVALID_PROP_VALUE
+    })
+  })
+
+  it('returns DYNAMIC_EXPRESSION for template interpolation', async () => {
+    const result = await parseMdxToBlocks(
+      '<CodeBlock language="javascript" code={`hello ${name}`} />',
+      ctx
+    )
+    expect(result).toBeInstanceOf(MdxParserError)
+    expect(result).toMatchObject({
+      code: ParserErrorCode.DYNAMIC_EXPRESSION
+    })
+  })
+})

cms/scripts/sync-mdx/codeBlockHandler.ts

@@ -0,0 +1,72 @@
+import type { CodeBlockBlock, ParsedBlock } from './types.blocks'
+import { getStaticExpressionAttr, getStringAttr } from './jsxExtract'
+import {
+  registerComponentHandler,
+  type JsxBlockNode,
+  type ParserContext
+} from './mdxBlockParser'
+import { MdxParserError, ParserErrorCode, tryCatchParserError } from './parserErrors'
+
+const CODE_BLOCK_LANGUAGES = [
+  'javascript',
+  'typescript',
+  'jsx',
+  'tsx',
+  'html',
+  'css',
+  'bash',
+  'json',
+  'yaml',
+  'python',
+  'rust',
+  'go',
+  'sql',
+  'markdown'
+] as const
+
+type CodeBlockLanguage = (typeof CODE_BLOCK_LANGUAGES)[number]
+
+function normalizeCodeIndent(code: string): string {
+  return code.replace(/^((?: {4})+)/gm, (indent) =>
+    '  '.repeat(indent.length / 4)
+  )
+}
+
+async function handleCodeBlock(
+  node: JsxBlockNode,
+  ctx: ParserContext
+): Promise<ParsedBlock[] | MdxParserError> {
+  return tryCatchParserError(() => {
+    const language = getStringAttr(node, 'language', { required: true })
+    const title = getStringAttr(node, 'title')
+    const code = getStaticExpressionAttr(node, 'code', {
+      required: true,
+      sourceText: ctx.sourceText
+    })
+
+    if (!CODE_BLOCK_LANGUAGES.includes(language as CodeBlockLanguage)) {
+      throw new MdxParserError({
+        code: ParserErrorCode.INVALID_PROP_VALUE,
+        message: `Prop "language" must be one of: ${CODE_BLOCK_LANGUAGES.join(', ')}.`,
+        component: node.name ?? undefined,
+        prop: 'language',
+        line: node.position?.start.line,
+        column: node.position?.start.column
+      })
+    }
+
+    const block: CodeBlockBlock = {
+      __component: 'blocks.code-block',
+      code: normalizeCodeIndent(code),
+      language
+    }
+
+    if (title !== undefined) {
+      block.title = title
+    }
+
+    return [block]
+  })
+}
+
+registerComponentHandler('CodeBlock', handleCodeBlock)

cms/scripts/sync-mdx/config.ts

@@ -21,6 +21,7 @@ import './ctaStripHandler'
 import './paragraphHandler'
 import './pdfEmbedHandler'
 import './videoEmbedHandler'
+import './codeBlockHandler'
 import { createRelationResolver } from './ambassadorHandler'
 import { type ParserContext } from './mdxBlockParser'
 import { MdxParserError, ParserErrorCode } from './parserErrors'