From 9d7f4683e0b1c850d8fb55a835eeeb5856eb5cfc Mon Sep 17 00:00:00 2001
From: Jan-Gerrit Goebel <Jan-Gerrit.Goebel@sva.de>
Date: Wed, 15 May 2024 11:36:42 +0200
Subject: [PATCH 1/2] Copy code to clipboard

---
 src/app/app.module.ts                         |  5 ++++
 .../copy-to-clipboard.component.html          |  4 +++
 .../copy-to-clipboard.component.scss          |  3 +++
 .../copy-to-clipboard.component.ts            | 25 +++++++++++++++++++
 src/app/hf-markdown/hf-markdown.component.ts  | 15 ++++++++---
 src/app/scenario/ctr.service.ts               |  4 +++
 6 files changed, 52 insertions(+), 4 deletions(-)
 create mode 100644 src/app/hf-markdown/copy-to-clipboard/copy-to-clipboard.component.html
 create mode 100644 src/app/hf-markdown/copy-to-clipboard/copy-to-clipboard.component.scss
 create mode 100644 src/app/hf-markdown/copy-to-clipboard/copy-to-clipboard.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index fa9f7fc9..1d10825e 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -33,6 +33,7 @@ import { environment } from 'src/environments/environment';
 import { AppConfigService } from './app-config.service';
 import { AngularSplitModule } from 'angular-split';
 import { HfMarkdownComponent } from './hf-markdown/hf-markdown.component';
+import { CopyToClipboardComponent } from './hf-markdown/copy-to-clipboard/copy-to-clipboard.component';
 import { PrintableComponent } from './printable/printable.component';
 import { GargantuaClientFactory } from './services/gargantua.service';
 import { QuizCheckboxComponent } from './quiz/quiz-checkbox.component';
@@ -77,6 +78,7 @@ import {
   eyeIcon,
   eyeHideIcon,
   clockIcon,
+  copyIcon,
 } from '@cds/core/icon';
 import { QuizLabelComponent } from './quiz/quiz-label.component';
 
@@ -108,6 +110,7 @@ ClarityIcons.addIcons(
   eyeIcon,
   eyeHideIcon,
   clockIcon,
+  copyIcon,
 );
 
 export function tokenGetter() {
@@ -162,6 +165,7 @@ export function jwtOptionsFactory() {
     VMClaimComponent,
     AtobPipe,
     HfMarkdownComponent,
+    CopyToClipboardComponent,
     PrintableComponent,
     IdeWindowComponent,
     TaskProgressComponent,
@@ -189,6 +193,7 @@ export function jwtOptionsFactory() {
         { component: CtrComponent },
         { component: SingleTaskVerificationMarkdownComponent },
         { component: QuizComponent },
+        { component: CopyToClipboardComponent },
       ],
     }),
     JwtModule.forRoot({
diff --git a/src/app/hf-markdown/copy-to-clipboard/copy-to-clipboard.component.html b/src/app/hf-markdown/copy-to-clipboard/copy-to-clipboard.component.html
new file mode 100644
index 00000000..5b41cc34
--- /dev/null
+++ b/src/app/hf-markdown/copy-to-clipboard/copy-to-clipboard.component.html
@@ -0,0 +1,4 @@
+<span class="copy-code" (click)="clicked()" title="Copy to Clipboard"
+  ><cds-icon shape="copy" inverse *ngIf="!wasClicked"></cds-icon
+  ><cds-icon shape="check" inverse *ngIf="wasClicked"></cds-icon
+></span>
diff --git a/src/app/hf-markdown/copy-to-clipboard/copy-to-clipboard.component.scss b/src/app/hf-markdown/copy-to-clipboard/copy-to-clipboard.component.scss
new file mode 100644
index 00000000..3d69cad0
--- /dev/null
+++ b/src/app/hf-markdown/copy-to-clipboard/copy-to-clipboard.component.scss
@@ -0,0 +1,3 @@
+.copy-code {
+  cursor: pointer;
+}
diff --git a/src/app/hf-markdown/copy-to-clipboard/copy-to-clipboard.component.ts b/src/app/hf-markdown/copy-to-clipboard/copy-to-clipboard.component.ts
new file mode 100644
index 00000000..6348ed4a
--- /dev/null
+++ b/src/app/hf-markdown/copy-to-clipboard/copy-to-clipboard.component.ts
@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+import { CtrService } from 'src/app/scenario/ctr.service';
+
+@Component({
+  selector: 'copy-to-clipboard',
+  templateUrl: './copy-to-clipboard.component.html',
+  styleUrls: ['./copy-to-clipboard.component.scss'],
+})
+export class CopyToClipboardComponent {
+  @Input() ctrId: string;
+
+  wasClicked: boolean = false;
+
+  constructor(private ctrService: CtrService) {}
+
+  clicked() {
+    const code = this.ctrService.getCodeById(this.ctrId);
+    navigator.clipboard.writeText(code).then(() => {
+      this.wasClicked = true;
+      setTimeout(() => {
+        this.wasClicked = false;
+      }, 2500);
+    });
+  }
+}
diff --git a/src/app/hf-markdown/hf-markdown.component.ts b/src/app/hf-markdown/hf-markdown.component.ts
index 6660c365..43f24b3d 100644
--- a/src/app/hf-markdown/hf-markdown.component.ts
+++ b/src/app/hf-markdown/hf-markdown.component.ts
@@ -145,7 +145,7 @@ ${token}`;
         ctrId="${id}"
         filename="${filepath}"
         title="Click to create ${filepath} on ${target}"
-      >${this.renderHighlightedCode(code, language, filename)}</ctr>`;
+      >${this.renderHighlightedCode(code, language, filename, false)}</ctr>`;
     },
 
     verifyTask(code: string, target: string, taskName: string) {
@@ -170,10 +170,17 @@ ${token}`;
     code: string,
     language: string,
     fileName?: string,
+    copyCode: boolean = true,
   ) {
-    const fileNameTag = fileName
-      ? `<p class="filename" (click)=createFile(code,node)>${fileName}</p>`
-      : `<p class="language">${language}</p>`;
+    let copyCodeDiv = '';
+    if (copyCode) {
+      const id = this.ctrService.registerCode(code);
+      copyCodeDiv = `<copy-to-clipboard ctrId='${id}'></copy-to-clipboard>`;
+    }
+
+    let fileNameTag = fileName
+      ? `<p class="filename">${fileName} ${copyCodeDiv}</p>`
+      : `<p class="language">${language} ${copyCodeDiv}</p>`;
     const classAttr = `language-${language}`;
 
     if (Prism.languages[language]) {
diff --git a/src/app/scenario/ctr.service.ts b/src/app/scenario/ctr.service.ts
index 7a04d44b..cf0ee953 100644
--- a/src/app/scenario/ctr.service.ts
+++ b/src/app/scenario/ctr.service.ts
@@ -24,6 +24,10 @@ export class CtrService {
     this.ctrstream.next(exec);
   }
 
+  public getCodeById(id: string) {
+    return this.ctrCodes.get(id) ?? '';
+  }
+
   public sendCode(ctr: CodeExec) {
     if (!ctr) return;
     this.ctrstream.next(ctr);

From e4dc270cf7f7d1b3b29bdbc5d2e26cc4348750ba Mon Sep 17 00:00:00 2001
From: Jan-Gerrit Goebel <Jan-Gerrit.Goebel@sva.de>
Date: Wed, 15 May 2024 11:42:33 +0200
Subject: [PATCH 2/2] linting

---
 .../copy-to-clipboard/copy-to-clipboard.component.ts          | 4 ++--
 src/app/hf-markdown/hf-markdown.component.ts                  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/hf-markdown/copy-to-clipboard/copy-to-clipboard.component.ts b/src/app/hf-markdown/copy-to-clipboard/copy-to-clipboard.component.ts
index 6348ed4a..dcacc758 100644
--- a/src/app/hf-markdown/copy-to-clipboard/copy-to-clipboard.component.ts
+++ b/src/app/hf-markdown/copy-to-clipboard/copy-to-clipboard.component.ts
@@ -2,14 +2,14 @@ import { Component, Input } from '@angular/core';
 import { CtrService } from 'src/app/scenario/ctr.service';
 
 @Component({
-  selector: 'copy-to-clipboard',
+  selector: 'app-copy-to-clipboard',
   templateUrl: './copy-to-clipboard.component.html',
   styleUrls: ['./copy-to-clipboard.component.scss'],
 })
 export class CopyToClipboardComponent {
   @Input() ctrId: string;
 
-  wasClicked: boolean = false;
+  wasClicked = false;
 
   constructor(private ctrService: CtrService) {}
 
diff --git a/src/app/hf-markdown/hf-markdown.component.ts b/src/app/hf-markdown/hf-markdown.component.ts
index 43f24b3d..21357126 100644
--- a/src/app/hf-markdown/hf-markdown.component.ts
+++ b/src/app/hf-markdown/hf-markdown.component.ts
@@ -175,10 +175,10 @@ ${token}`;
     let copyCodeDiv = '';
     if (copyCode) {
       const id = this.ctrService.registerCode(code);
-      copyCodeDiv = `<copy-to-clipboard ctrId='${id}'></copy-to-clipboard>`;
+      copyCodeDiv = `<app-copy-to-clipboard ctrId='${id}'></app-copy-to-clipboard>`;
     }
 
-    let fileNameTag = fileName
+    const fileNameTag = fileName
       ? `<p class="filename">${fileName} ${copyCodeDiv}</p>`
       : `<p class="language">${language} ${copyCodeDiv}</p>`;
     const classAttr = `language-${language}`;