Fix markdown parsing for code blocks when withCodeBlocks is false

[SylvainChevalier]

Summary

Fixed an issue where MDXEditor would throw a parsing error when encountering code blocks (``` fences) in markdown content when the withCodeBlocks prop is set to `false`. The code block plugin is now always registered to handle parsing of existing code blocks, while the `withCodeBlocks` flag continues to control only the UI affordances (toolbar button and rich editing experience).

Key Changes

• Modified the plugin registration logic in InitializedMarkdownEditor to always include the codeBlockPlugin, regardless of the withCodeBlocks setting
• The withCodeBlocks flag now only gates the insert-code-block toolbar affordance and the CodeMirror editing experience, not the parsing of existing code blocks
• Added a test case to verify that existing code blocks render correctly in write mode when withCodeBlocks is false

Implementation Details

• The plugin registration now uses a conditional that checks !withCodeBlocks || mode === "read" instead of returning early when withCodeBlocks is false
• This ensures that pre-existing ``` fences in source markdown are properly parsed and don't cause MDXEditor to throw an error on unknown "code" nodes
• The change maintains backward compatibility while fixing the parsing issue

https://claude.ai/code/session_01PZkycszwECr7vMhFzQKf56

Summary by CodeRabbit

• Bug Fixes
  • Fixed fenced code blocks in the markdown editor when code-block editing is disabled, preventing Markdown parsing errors.
  • Improved code block rendering in read mode and adjusted code block layout for better wrapping.
  • Prevented editor overflow in flex/grid layouts by capping fenced code width and removing minimum-width stretching.
• Tests
  • Added coverage to confirm existing code blocks and surrounding text render correctly without errors.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 8d37d15e-c0d9-45bc-a0cf-45f080bb8b25

📥 Commits

Reviewing files that changed from the base of the PR and between 70c4417 and 7baf850.

📒 Files selected for processing (2)

• front_end/src/app/(main)/notebooks/[id]/[[...slug]]/page_compotent.tsx
• front_end/src/components/markdown_editor/editor.css

---

📝 Walkthrough

Walkthrough

The markdown editor preserves code-block parsing when rich editing is disabled or in read mode, constrains rendered code blocks horizontally, and tests write-mode rendering around existing fenced code.

Changes

Fenced Code Block Rendering

Layer / File(s)	Summary
Preserve fenced code parsing front_end/src/components/markdown_editor/initialized_editor.tsx, front_end/src/components/markdown_editor/__tests__/initialized_editor.test.tsx	The editor retains codeBlockPlugin in disabled/read configurations, and tests verify write-mode rendering around an existing fenced code block.
Constrain code block layout front_end/src/components/markdown_editor/initialized_editor.tsx, front_end/src/components/markdown_editor/editor.css, front_end/src/app/(main)/notebooks/[id]/[[...slug]]/page_compotent.tsx	Code block wrappers, pre elements, the editor, and the notebook content wrapper receive width constraints across plain-text and highlighted rendering paths.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers: ncarazon

Poem

I’m a bunny with code in my burrow tonight,
Fenced blocks parse cleanly and render just right.
Wide walls now gently keep them in view,
“Before” and “After” hop safely through.
Sniff, test, rejoice—the editor is bright!

🚥 Pre-merge checks | ✅ 4

✅ 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 summarizes the main change: parsing existing code blocks when withCodeBlocks is false.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ 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 claude/determined-carson-71BwF

---

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.}

[github-actions]

🚀 Preview Environment

Your preview environment is ready!

Resource	Details
🌐 Preview URL	https://metaculus-pr-4804-claude-determined-carson-71bwf-preview.mtcl.cc
📦 Docker Image	ghcr.io/metaculus/metaculus:claude-determined-carson-71bwf-7baf850
🗄️ PostgreSQL	NeonDB branch preview/pr-4804-claude-determined-carson-71bwf
⚡ Redis	Fly Redis mtc-redis-pr-4804-claude-determined-carson-71bwf

Details

• Commit: 3eb804992dcb59f3c6cd9b051ecef9c67edaa35d
• Branch: claude/determined-carson-71BwF
• Fly App: metaculus-pr-4804-claude-determined-carson-71bwf

---

ℹ️ Preview Environment Info

Isolation:

• PostgreSQL and Redis are fully isolated from production
• Each PR gets its own database branch and Redis instance
• Changes pushed to this PR will trigger a new deployment

Limitations:

• Background workers and cron jobs are not deployed in preview environments
• If you need to test background jobs, use Heroku staging environments

Cleanup:

• This preview will be automatically destroyed when the PR is closed

[SylvainChevalier]

lgtm.