feat: add copy button for markdown code blocks

frontend/components/CellOutput.js

@@ -617,6 +617,18 @@ export let RawHTMLContainer = ({ body, className = "", persist_js_state = false,
                 } catch (err) {
                     console.warn("Highlighting failed", err)
                 }
+
+                // Find code blocks and add a copy button:
+                try {
+                    if (container.firstElementChild?.matches("div.markdown")) {
+                        container.querySelectorAll("pre > code").forEach((code_element) => {
+                            const pre = code_element.parentElement
+                            generateCopyCodeButton(pre)
+                        })
+                    }
+                } catch (err) {
+                    console.warn("Adding markdown code copy button failed", err)
+                }
             } finally {
                 js_init_set?.delete(container)
             }
@@ -683,3 +695,44 @@ export let highlight = (code_element, language) => {
         }
     }
 }
+
+/**
+ * Generates a copy button for Markdown code blocks and copies them into the clipboard.
+ * @param {HTMLElement | null} pre - The <pre> element containing the code block.
+ */
+export const generateCopyCodeButton = (pre) => {
+    if (!pre) {
+        console.error('Error: pre is null.');
+        return;
+    }
+
+    const copyToClipboard = () => {
+        const range = document.createRange()
+        range.selectNode(pre)
+        const txt = range.startContainer.textContent || ''
+        navigator.clipboard
+            .writeText(txt)
+            .then(() => {
+                console.log("Code copied to clipboard:\n" + txt)
+            })
+            .catch((error) => {
+                console.error("Error copying code to clipboard:", error)
+            })
+    }
+
+    // create copy button
+    const copyCodeButton = document.createElement("button")
+    copyCodeButton.className = "markdown-code-block-copy-code-button"
+    copyCodeButton.addEventListener("click", copyToClipboard)
+
+    // Create copy button image
+    const copyImg = document.createElement("img")
+    copyImg.src = "https://unpkg.com/[email protected]/dist/svg/copy-outline.svg"
+    copyImg.alt = "Copy to Clipboard"
+
+    // Append image to button
+    copyCodeButton.appendChild(copyImg)
+
+    // Append copy button to the code block element
+    pre.appendChild(copyCodeButton)
+}

frontend/editor.css

@@ -3610,3 +3610,22 @@ pluto-cell.hooked_up pluto-output {
     justify-content: flex-end;
     gap: 0.5em;
 }
+
+/*  Styles for mark down copy Button*/
+.markdown-code-block-copy-code-button {
+    position: absolute;
+    top: 10px;
+    right: 20px;
+    cursor: pointer;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+}
+
+.markdown-code-block-copy-code-button > img {
+    width: 14px;
+    height: 14px;
+}