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 @@ + 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..dcacc758 --- /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: '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); + }); + } +} diff --git a/src/app/hf-markdown/hf-markdown.component.ts b/src/app/hf-markdown/hf-markdown.component.ts index 6660c365..21357126 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)}`; + >${this.renderHighlightedCode(code, language, filename, false)}`; }, 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 = ``; + } + const fileNameTag = fileName - ? `

${fileName}

` - : `

${language}

`; + ? `

${fileName} ${copyCodeDiv}

` + : `

${language} ${copyCodeDiv}

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