Copy code to clipboard (hobbyfarm#202)

* Copy code to clipboard

* linting

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({

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>

src/app/hf-markdown/copy-to-clipboard/copy-to-clipboard.component.scss

@@ -0,0 +1,3 @@
+.copy-code {
+  cursor: pointer;
+}

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: 'app-copy-to-clipboard',
+  templateUrl: './copy-to-clipboard.component.html',
+  styleUrls: ['./copy-to-clipboard.component.scss'],
+})
+export class CopyToClipboardComponent {
+  @Input() ctrId: string;
+
+  wasClicked = 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);
+    });
+  }
+}

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,
   ) {
+    let copyCodeDiv = '';
+    if (copyCode) {
+      const id = this.ctrService.registerCode(code);
+      copyCodeDiv = `<app-copy-to-clipboard ctrId='${id}'></app-copy-to-clipboard>`;
+    }
+
     const fileNameTag = fileName
-      ? `<p class="filename" (click)=createFile(code,node)>${fileName}</p>`
-      : `<p class="language">${language}</p>`;
+      ? `<p class="filename">${fileName} ${copyCodeDiv}</p>`
+      : `<p class="language">${language} ${copyCodeDiv}</p>`;
     const classAttr = `language-${language}`;
 
     if (Prism.languages[language]) {

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);