From cea647be13ab9ee536add2255250bbeb95cec027 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 1 Jun 2026 09:17:50 +0000 Subject: [PATCH 1/2] Fix markdown editor crash on existing code blocks when withCodeBlocks is off The post background-information / notebook markdown / group description fields render MarkdownEditor without withCodeBlocks, but content authored elsewhere may still contain ``` fences. With no codeBlockPlugin registered, MDXEditor throws "Parsing of the following markdown structure failed: {type: code, name: N/A}". Always register codeBlockPlugin with the read-only Prism descriptor so existing fences parse; withCodeBlocks now only gates the insert-code-block toolbar affordance and the rich CodeMirror editing path. --- .../__tests__/initialized_editor.test.tsx | 17 +++++++++++++++++ .../markdown_editor/initialized_editor.tsx | 10 +++++----- 2 files changed, 22 insertions(+), 5 deletions(-) diff --git a/front_end/src/components/markdown_editor/__tests__/initialized_editor.test.tsx b/front_end/src/components/markdown_editor/__tests__/initialized_editor.test.tsx index 07e7fb86d4..629e5de5b7 100644 --- a/front_end/src/components/markdown_editor/__tests__/initialized_editor.test.tsx +++ b/front_end/src/components/markdown_editor/__tests__/initialized_editor.test.tsx @@ -172,6 +172,23 @@ describe("InitializedMarkdownEditor", () => { }); }); + describe("code blocks", () => { + it("renders existing code blocks in write mode when withCodeBlocks is false", async () => { + // Given + const markdown = "Before\n\n```\nconsole.log('hi');\n```\n\nAfter"; + + // When / Then — must not throw "Parsing of the following markdown + // structure failed: {type: code, name: N/A}". + await renderWithAct( + + ); + + const editor = screen.getByLabelText(EDITOR_LABEL); + expect(editor).toHaveTextContent("Before"); + expect(editor).toHaveTextContent("After"); + }); + }); + describe("html tags", () => { it("properly preserves HTML tags with custom attributes", async () => { // Given diff --git a/front_end/src/components/markdown_editor/initialized_editor.tsx b/front_end/src/components/markdown_editor/initialized_editor.tsx index 834a556fac..be96fd1764 100644 --- a/front_end/src/components/markdown_editor/initialized_editor.tsx +++ b/front_end/src/components/markdown_editor/initialized_editor.tsx @@ -257,11 +257,11 @@ const InitializedMarkdownEditor: FC< equationPlugin(), ]; - if (!withCodeBlocks) { - return common; - } - - if (mode === "read") { + // Always register codeBlockPlugin so pre-existing ``` fences in the source + // markdown parse — otherwise MDXEditor throws on unknown "code" nodes. + // `withCodeBlocks` only gates the insert-code-block toolbar affordance and + // the rich CodeMirror editing experience. + if (!withCodeBlocks || mode === "read") { return [ ...common, codeBlockPlugin({ From 70c4417efab24e9977ed2b418309b989837fbd31 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 15 Jul 2026 12:38:24 +0000 Subject: [PATCH 2/2] Prevent code blocks from stretching markdown editor horizontally `overflow-x: auto` on the 
 only clips when every ancestor up to the
content-editable is width-bounded. In write mode, Lexical wraps decorator
blocks in intermediate spans/divs that default to intrinsic width, so a
long code line pushed the whole editor sideways past its container.

Cap the wrapper and 
 at the container width, and force min-width: 0
on Lexical decorator wrappers inside the editor so overflow-x-auto
actually engages.
---
 .../src/components/markdown_editor/editor.css    | 16 ++++++++++++++++
 .../markdown_editor/initialized_editor.tsx       |  8 ++++----
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/front_end/src/components/markdown_editor/editor.css b/front_end/src/components/markdown_editor/editor.css
index fa8d7a5c16..f9706512bb 100644
--- a/front_end/src/components/markdown_editor/editor.css
+++ b/front_end/src/components/markdown_editor/editor.css
@@ -131,6 +131,22 @@
 div:has(.prism-code) + p:has(> br:only-child) {
   display: none;
 }
+
+/*
+ * Keep fenced code blocks from stretching the editor horizontally.
+ * `overflow-x: auto` on the 
 only clips when every ancestor up to the
+ * content-editable is width-bounded — Lexical wraps decorator blocks in
+ * intermediate spans/divs that default to intrinsic width, so we force
+ * min-width: 0 on the wrappers and cap the 
 at 100% of its container.
+ */
+.mdx-content-editable pre {
+  max-width: 100%;
+}
+.mdx-content-editable [data-lexical-decorator],
+.mdx-content-editable [data-lexical-decorator] > * {
+  min-width: 0;
+  max-width: 100%;
+}
 @media (min-width: 1024px) {
   .markdown-editor.markdown-editor-read .tweets-wrapper {
     display: block;
diff --git a/front_end/src/components/markdown_editor/initialized_editor.tsx b/front_end/src/components/markdown_editor/initialized_editor.tsx
index acc825e4fa..8ef5e93fa0 100644
--- a/front_end/src/components/markdown_editor/initialized_editor.tsx
+++ b/front_end/src/components/markdown_editor/initialized_editor.tsx
@@ -81,8 +81,8 @@ const PrismCodeBlock: FC<{ code?: string; language?: string }> = ({
   // Handle plain text without syntax highlighting
   if (normalizedLang === "text") {
     return (
-      

-        
+      

+        
           {codeTrimmed}
         

       

@@ -92,7 +92,7 @@ const PrismCodeBlock: FC<{ code?: string; language?: string }> = ({
   const prismLang = CANONICAL_TO_PRISM[normalizedLang] ?? "tsx";
 
   return (
-    

+    

        = ({
       >
         {({ className, tokens, getLineProps, getTokenProps }) => (
           
             {tokens.map((line, i) => (