(SP: 3) [Frontend] Q&A: Code block renderer fails on legacy answerBlocks

frontend/components/q&a/AccordionList.tsx

@@ -191,9 +191,21 @@ function renderTextNodes(
   return nodes.map((node, i) => renderTextNode(node, i, highlight));
 }
 
+function resolveCodeContent(
+  block: Pick<CodeBlockEntry, 'content' | 'code'>
+): string {
+  if (typeof block.content === 'string') return block.content;
+  if (typeof block.code === 'string') return block.code;
+  return '';
+}
+
 function renderCodeBlock(block: CodeBlockEntry, index: number): ReactNode {
   return (
-    <CodeBlock key={index} code={block.content} language={block.language} />
+    <CodeBlock
+      key={index}
+      code={resolveCodeContent(block)}
+      language={block.language}
+    />
   );
 }
 
@@ -236,7 +248,11 @@ function renderListItemChildren(
 
     if ('type' in child && child.type === 'code') {
       return (
-        <CodeBlock key={i} code={child.content} language={child.language} />
+        <CodeBlock
+          key={i}
+          code={resolveCodeContent(child)}
+          language={child.language}
+        />
       );
     }
 

frontend/components/q&a/CodeBlock.tsx

@@ -6,25 +6,27 @@ import { Highlight, themes } from 'prism-react-renderer';
 import { useState } from 'react';
 
 type Props = {
-  code: string;
+  code?: string | null;
   language?: string | null;
 };
 
 export default function CodeBlock({ code, language }: Props) {
   const { resolvedTheme } = useTheme();
   const [copied, setCopied] = useState(false);
+  const safeCode = typeof code === 'string' ? code : '';
 
   const theme = resolvedTheme === 'dark' ? themes.nightOwl : themes.github;
 
   const handleCopy = async () => {
-    await navigator.clipboard.writeText(code);
+    if (!safeCode) return;
+    await navigator.clipboard.writeText(safeCode);
     setCopied(true);
     setTimeout(() => setCopied(false), 1500);
   };
 
   return (
     <Highlight
-      code={code.trim()}
+      code={safeCode.trim()}
       language={(language ?? 'markup') as any}
       theme={theme}
     >

frontend/components/q&a/types.ts

@@ -18,7 +18,8 @@ export type TextNode = {
 export type CodeBlock = {
   type: 'code';
   language: string | null;
-  content: string;
+  content?: string;
+  code?: string;
 };
 
 export type ListEntry = ListItemBlock | ListItemChild;