From 81946e1a02636d96f72def11a83ff51ca43f804e Mon Sep 17 00:00:00 2001
From: PerikiyoXD <pedroluis200198@hotmail.es>
Date: Wed, 9 Oct 2024 22:38:56 +0200
Subject: [PATCH 1/3] Implement ASM Diff contents Copy Button (#1357)

* Implement diff copy button

* Make vercel deployment happy

* Make vercel deployment happier

* Just remove the alert

* Tweak styles

* Retrigger deployments

* Lazy loaded and refactored CopyButton component logic
---
 frontend/src/components/Diff/Diff.module.scss | 17 +++++++++
 frontend/src/components/Diff/Diff.tsx         | 35 ++++++++++++++++++-
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Diff/Diff.module.scss b/frontend/src/components/Diff/Diff.module.scss
index 3b2d34bb..71b3b1dc 100644
--- a/frontend/src/components/Diff/Diff.module.scss
+++ b/frontend/src/components/Diff/Diff.module.scss
@@ -181,3 +181,20 @@
 .highlightable {
     cursor: pointer;
 }
+
+.copyButton {
+    cursor: pointer;
+    border-radius: 4px;
+    width: 2em;
+    height: 2em;
+
+    &:hover {
+        background-color: var(--a50);
+    }
+}
+
+.copyButton svg {
+    width: 1em;
+    height: 1em;
+    display: grid;
+}
diff --git a/frontend/src/components/Diff/Diff.tsx b/frontend/src/components/Diff/Diff.tsx
index d03bcf96..928d39af 100644
--- a/frontend/src/components/Diff/Diff.tsx
+++ b/frontend/src/components/Diff/Diff.tsx
@@ -2,7 +2,7 @@
 
 import { createContext, CSSProperties, forwardRef, HTMLAttributes, MutableRefObject, useRef, useState } from "react"
 
-import { VersionsIcon } from "@primer/octicons-react"
+import { VersionsIcon, CopyIcon } from "@primer/octicons-react"
 import { EditorView } from "codemirror"
 import { DiffResult } from "objdiff-wasm"
 import AutoSizer from "react-virtualized-auto-sizer"
@@ -20,6 +20,36 @@ import * as Objdiff from "./DiffRowObjdiff"
 import DragBar from "./DragBar"
 import { useHighlighers } from "./Highlighter"
 
+const copyDiffContentsToClipboard = (diff: api.DiffOutput, kind: string) => {
+    // kind is either "base", "current", or "previous"
+    const contents = diff.rows.map(row => {
+        let text = ""
+        if (kind === "base" && row.base) {
+            text = row.base.text.map(t => t.text).join("")
+        } else if (kind === "current" && row.current) {
+            text = row.current.text.map(t => t.text).join("")
+        } else if (kind === "previous" && row.previous) {
+            text = row.previous.text.map(t => t.text).join("")
+        }
+        return text
+    })
+
+    navigator.clipboard.writeText(contents.join("\n"))
+}
+
+// Small component for the copy button
+function CopyButton({ diff, kind }: { diff: api.DiffOutput, kind: string }) {
+    return (
+        <button
+            className={styles.copyButton} // Add a new style for the button
+            onClick={() => copyDiffContentsToClipboard(diff, kind)}
+            title="Copy content"
+        >
+            <CopyIcon size={16} />
+        </button>
+    )
+}
+
 // https://github.com/bvaughn/react-window#can-i-add-padding-to-the-top-and-bottom-of-a-list
 const innerElementType = forwardRef<HTMLUListElement, HTMLAttributes<HTMLUListElement>>(({ style, ...rest }, ref) => {
     return <ul
@@ -176,14 +206,17 @@ export default function Diff({ diff, diffLabel, isCompiling, isCurrentOutdated,
         <div className={styles.headers}>
             <div className={styles.header}>
                 Target
+                <CopyButton diff={diff as api.DiffOutput} kind="base" />
             </div>
             <div className={styles.header}>
                 Current
+                <CopyButton diff={diff as api.DiffOutput} kind="current" />
                 {isCompiling && <Loading width={20} height={20} />}
                 {!threeWayDiffEnabled && threeWayButton}
             </div>
             {threeWayDiffEnabled && <div className={styles.header}>
                 {threeWayDiffBase === ThreeWayDiffBase.SAVED ? "Saved" : "Previous"}
+                <CopyButton diff={diff as api.DiffOutput} kind="previous" />
                 {threeWayButton}
             </div>}
         </div>

From fa4e22c4dc408d7a0e0a2e38d0f52b89d45be8df Mon Sep 17 00:00:00 2001
From: PerikiyoXD <perikiyoxd@gmail.com>
Date: Thu, 10 Oct 2024 11:28:49 +0200
Subject: [PATCH 2/3] Allow scratch name to be highlighted and copied for
 non-owners (#1359)

* Add scratchName class to allow highlighting and copying the scratch name

* Use .name to allow selecting scratch name
---
 frontend/src/components/Scratch/ScratchToolbar.module.scss | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Scratch/ScratchToolbar.module.scss b/frontend/src/components/Scratch/ScratchToolbar.module.scss
index cb311339..61f82c08 100644
--- a/frontend/src/components/Scratch/ScratchToolbar.module.scss
+++ b/frontend/src/components/Scratch/ScratchToolbar.module.scss
@@ -51,9 +51,8 @@ $padding: 4px;
 
     text-align: center;
 
-    &.editable {
-        cursor: text;
-    }
+    cursor: text;
+    user-select: text;
 
     &[contenteditable] {
         text-overflow: initial;

From b1ae8c5c5cd5fdbc3b9e3f7795a9c3cff89afb13 Mon Sep 17 00:00:00 2001
From: PerikiyoXD <perikiyoxd@gmail.com>
Date: Thu, 10 Oct 2024 19:17:02 +0200
Subject: [PATCH 3/3] Properly center the copy button icon

---
 frontend/src/components/Diff/Diff.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Diff/Diff.module.scss b/frontend/src/components/Diff/Diff.module.scss
index 71b3b1dc..4ac19fe1 100644
--- a/frontend/src/components/Diff/Diff.module.scss
+++ b/frontend/src/components/Diff/Diff.module.scss
@@ -196,5 +196,5 @@
 .copyButton svg {
     width: 1em;
     height: 1em;
-    display: grid;
+    margin: 0.5em;
 }