From d38f171058d021674b5f71a932ec79ca973cfb5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jing=20Hui=20PANG=20=28=E5=BD=AD=E7=AB=9E=E8=BE=89=29?=
 <enkr99@gmail.com>
Date: Sun, 22 Mar 2026 02:58:27 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(submission):=20add=20copy=20co?=
 =?UTF-8?q?de=20button=20for=20programming=20files=20in=20grading=20view?=
 =?UTF-8?q?=20(#4387)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ReadOnlyEditor/index.jsx       |  6 +++-
 .../answers/Programming/CopyCodeButton.tsx    | 33 +++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 client/app/bundles/course/assessment/submission/components/answers/Programming/CopyCodeButton.tsx

diff --git a/client/app/bundles/course/assessment/submission/components/ReadOnlyEditor/index.jsx b/client/app/bundles/course/assessment/submission/components/ReadOnlyEditor/index.jsx
index e94e905f6f0..8ce262a9b86 100644
--- a/client/app/bundles/course/assessment/submission/components/ReadOnlyEditor/index.jsx
+++ b/client/app/bundles/course/assessment/submission/components/ReadOnlyEditor/index.jsx
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 
 import { annotationShape, fileShape } from '../../propTypes';
 import translations from '../../translations';
+import CopyCodeButton from '../answers/Programming/CopyCodeButton';
 import ProgrammingFileDownloadChip from '../answers/Programming/ProgrammingFileDownloadChip';
 
 import NarrowEditor from './NarrowEditor';
@@ -212,7 +213,10 @@ class ReadOnlyEditor extends Component {
     return (
       <>
         <div className="flex items-center justify-between mt-2">
-          <ProgrammingFileDownloadChip file={file} />
+          <div className="flex items-center gap-2">
+            <ProgrammingFileDownloadChip file={file} />
+            <CopyCodeButton file={file} />
+          </div>
           <div>
             {this.renderShowCommentsPanel()}
             {this.renderExpandAllToggle()}
diff --git a/client/app/bundles/course/assessment/submission/components/answers/Programming/CopyCodeButton.tsx b/client/app/bundles/course/assessment/submission/components/answers/Programming/CopyCodeButton.tsx
new file mode 100644
index 00000000000..df396308f98
--- /dev/null
+++ b/client/app/bundles/course/assessment/submission/components/answers/Programming/CopyCodeButton.tsx
@@ -0,0 +1,33 @@
+import { FC } from 'react';
+import { ContentCopy } from '@mui/icons-material';
+import { Chip } from '@mui/material';
+import { ProgrammingContent } from 'types/course/assessment/submission/answer/programming';
+
+import toast from 'lib/hooks/toast';
+
+interface Props {
+  file: ProgrammingContent;
+}
+
+const CopyCodeButton: FC<Props> = (props) => {
+  const { file } = props;
+
+  const handleCopy = (): void => {
+    navigator.clipboard.writeText(file.content).then(() => {
+      toast.success('Copied to clipboard');
+    });
+  };
+
+  return (
+    <Chip
+      className="copy-code-button"
+      icon={<ContentCopy />}
+      label="Copy"
+      onClick={handleCopy}
+      size="small"
+      variant="outlined"
+    />
+  );
+};
+
+export default CopyCodeButton;