From 6ca5ef4f6a7b71e342a6c4776414706c0e07378a Mon Sep 17 00:00:00 2001
From: Myles Scolnick <myles@marimo.io>
Date: Thu, 23 Oct 2025 11:28:06 -0400
Subject: [PATCH 1/2] fix: copy code block inside accordion

Updated the CopyableCode component to utilize useRef instead of useId so copying works inside ShadowDoms
---
 frontend/src/plugins/core/RenderHTML.tsx      |  8 ++--
 .../markdown/codeblocks_in_accodion.py        | 46 +++++++++++++++++++
 2 files changed, 50 insertions(+), 4 deletions(-)
 create mode 100644 marimo/_smoke_tests/markdown/codeblocks_in_accodion.py

diff --git a/frontend/src/plugins/core/RenderHTML.tsx b/frontend/src/plugins/core/RenderHTML.tsx
index 33b1b1408f6..6865e7e5c34 100644
--- a/frontend/src/plugins/core/RenderHTML.tsx
+++ b/frontend/src/plugins/core/RenderHTML.tsx
@@ -9,8 +9,8 @@ import React, {
   isValidElement,
   type JSX,
   type ReactNode,
-  useId,
   useMemo,
+  useRef,
 } from "react";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 import { sanitizeHtml, useSanitizeHtml } from "./sanitize";
@@ -122,9 +122,9 @@ const addCopyButtonToCodehilite: TransformFn = (
 };
 
 const CopyableCode = ({ children }: { children: ReactNode }) => {
-  const id = useId();
+  const ref = useRef<HTMLDivElement>(null);
   return (
-    <div className="relative group codehilite-wrapper" id={id}>
+    <div className="relative group codehilite-wrapper" ref={ref}>
       {children}
 
       <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
@@ -132,7 +132,7 @@ const CopyableCode = ({ children }: { children: ReactNode }) => {
           tooltip={false}
           className="p-1"
           value={() => {
-            const codeElement = document.getElementById(id)?.firstChild;
+            const codeElement = ref.current?.firstChild;
             if (codeElement) {
               return codeElement.textContent || "";
             }
diff --git a/marimo/_smoke_tests/markdown/codeblocks_in_accodion.py b/marimo/_smoke_tests/markdown/codeblocks_in_accodion.py
new file mode 100644
index 00000000000..ff60d949312
--- /dev/null
+++ b/marimo/_smoke_tests/markdown/codeblocks_in_accodion.py
@@ -0,0 +1,46 @@
+import marimo
+
+__generated_with = "0.17.0"
+app = marimo.App(width="medium")
+
+
+@app.cell(hide_code=True)
+def _(mo):
+    mo.md(r"""## Issue #6894""")
+    return
+
+
+@app.cell
+def _():
+    import marimo as mo
+
+
+    def box(text):
+        return mo.md(
+            f"""
+            {text}:
+            ```
+            {text}
+            ```
+            """
+        )
+
+
+    mo.vstack(
+        [
+            box("Box A: Copying from this box works"),
+            mo.accordion(
+                {
+                    "Accordibox": mo.vstack(
+                        [box("Box B: Copying from this box doesn't work")]
+                    )
+                },
+                lazy=True,
+            ),
+        ]
+    )
+    return (mo,)
+
+
+if __name__ == "__main__":
+    app.run()

From 7f0070222ebe9c21ab60436031293fc5eb0b6721 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Thu, 23 Oct 2025 15:29:24 +0000
Subject: [PATCH 2/2] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 .../markdown/codeblocks_in_accodion.py        | 46 -------------------
 1 file changed, 46 deletions(-)
 delete mode 100644 marimo/_smoke_tests/markdown/codeblocks_in_accodion.py

diff --git a/marimo/_smoke_tests/markdown/codeblocks_in_accodion.py b/marimo/_smoke_tests/markdown/codeblocks_in_accodion.py
deleted file mode 100644
index ff60d949312..00000000000
--- a/marimo/_smoke_tests/markdown/codeblocks_in_accodion.py
+++ /dev/null
@@ -1,46 +0,0 @@
-import marimo
-
-__generated_with = "0.17.0"
-app = marimo.App(width="medium")
-
-
-@app.cell(hide_code=True)
-def _(mo):
-    mo.md(r"""## Issue #6894""")
-    return
-
-
-@app.cell
-def _():
-    import marimo as mo
-
-
-    def box(text):
-        return mo.md(
-            f"""
-            {text}:
-            ```
-            {text}
-            ```
-            """
-        )
-
-
-    mo.vstack(
-        [
-            box("Box A: Copying from this box works"),
-            mo.accordion(
-                {
-                    "Accordibox": mo.vstack(
-                        [box("Box B: Copying from this box doesn't work")]
-                    )
-                },
-                lazy=True,
-            ),
-        ]
-    )
-    return (mo,)
-
-
-if __name__ == "__main__":
-    app.run()