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

[ViktorSvertoka]

Issue

Q&A page crashes for some records where code blocks are stored with code field instead of content.

Current behavior

Renderer expects:

{ "type": "code", "content": "..." }
But DB may contain:

{ "type": "code", "code": "..." }
This causes undefined.trim() in CodeBlock and breaks rendering.

Expected behavior

Code blocks should render safely for both legacy (code) and current (content) formats without runtime errors.

Acceptance criteria

Q&A renderer supports both content and code for type: "code" blocks
CodeBlock does not crash when input is missing/undefined
Existing content format remains fully compatible
No runtime error: Cannot read properties of undefined (reading 'trim')

Notes

Scope is a backward-compatibility bugfix in frontend rendering only.

Closes #412

Summary by CodeRabbit

• Refactor

  • Restructured code block data handling in Q&A sections to improve overall system flexibility.

• Bug Fixes

  • Enhanced stability and robustness of code block rendering throughout the application.
  • Improved copy-to-clipboard functionality with enhanced error handling for better reliability.
  • Strengthened syntax highlighting capabilities to handle various edge cases and content formats effectively.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
devlovers-net	Ignored		Mar 24, 2026 2:18pm

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR adds backward-compatibility support for Q&A code block rendering by allowing both content and code field formats. A resolveCodeContent helper determines which field to use, the CodeBlock component accepts optional code props with safe defaults, and the CodeBlock type definition is updated to reflect both optional fields.

Changes

Cohort / File(s)	Summary
Q&A Type Definitions frontend/components/q&a/types.ts	Updated CodeBlock type to support both content and code fields as optional fields for backward compatibility with legacy answerBlocks format.
Q&A Component Implementation frontend/components/q&a/CodeBlock.tsx, frontend/components/q&a/AccordionList.tsx	Added resolveCodeContent helper in AccordionList to determine code content from either field; updated CodeBlock to accept optional code prop with safe empty-string default for missing/null values; updated syntax highlighting to use sanitized code value preventing trim() errors.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• feat(ui): add syntax highlighted code blocks with theme support and c… #68: Modifies the same Q&A code rendering paths—updates CodeBlock component, types, and AccordionList usage for consistent code content handling.

Suggested reviewers

• AM1007

Poem

🐰 A legacy format hopped into view,
Where code and content both rang true,
We gently support what came before,
No crashes now—safe forevermore! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: fixing a bug where the Q&A code block renderer fails on legacy answerBlocks with the 'code' field instead of 'content'.
Linked Issues check	✅ Passed	All coding requirements from issue #412 are met: supports both content and code fields [#412], CodeBlock safely handles undefined input [#412], maintains compatibility [#412], eliminates trim() runtime errors [#412].
Out of Scope Changes check	✅ Passed	All changes are scoped to frontend rendering: AccordionList resolves code content, CodeBlock accepts optional code prop, types.ts adds optional code field—all directly address backward-compatibility for legacy code field.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix-qa-code-block-legacy-code-field

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

frontend/components/q&a/CodeBlock.tsx (1)

20-25: Consider disabling the copy button when there's no code.

The guard at line 21 silently returns when safeCode is empty, but the "Copy" button remains visible and clickable. Users clicking it would see no feedback.

💡 Optional: Disable button when code is empty

           <button
             onClick={handleCopy}
             aria-label="Copy code"
+            disabled={!safeCode}
             className="absolute top-2 right-3 flex cursor-pointer items-center gap-1 rounded-md bg-white/70 px-2 py-1 text-xs text-gray-400 backdrop-blur transition-colors hover:text-gray-700 dark:bg-black/40 dark:hover:text-gray-200"
           >

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@frontend/components/q`&a/CodeBlock.tsx around lines 20 - 25, The copy handler
handleCopy currently returns early when safeCode is empty but the Copy button
remains active; update the CodeBlock component so the Copy button is disabled
(and optionally styled/aria-disabled) whenever safeCode is falsy. Locate the
handleCopy function and the JSX for the Copy button in CodeBlock.tsx and add a
disabled={Boolean(!safeCode)} prop (or equivalent) and ensure clicks are ignored
when disabled; keep existing setCopied behavior for successful copies.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@frontend/components/q`&a/CodeBlock.tsx:
- Around line 20-25: The copy handler handleCopy currently returns early when
safeCode is empty but the Copy button remains active; update the CodeBlock
component so the Copy button is disabled (and optionally styled/aria-disabled)
whenever safeCode is falsy. Locate the handleCopy function and the JSX for the
Copy button in CodeBlock.tsx and add a disabled={Boolean(!safeCode)} prop (or
equivalent) and ensure clicks are ignored when disabled; keep existing setCopied
behavior for successful copies.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 383f5c64-f850-462e-9881-ff19152e608b

📥 Commits

Reviewing files that changed from the base of the PR and between 7ab6ca2 and 2c3698b.

📒 Files selected for processing (3)

• frontend/components/q&a/AccordionList.tsx
• frontend/components/q&a/CodeBlock.tsx
• frontend/components/q&a/types.ts