feat: copy button

add a copy button in code block

Co-authored-by: Guilherme Siquinelli <[email protected]>

Author: Thiago Bussola

src/app/shared/components/copy-button/copy-button.component.html

@@ -0,0 +1,6 @@
+<button
+  class="clipboard"
+  (click)="onCopy()"
+  [cdkCopyToClipboard]="elRef.nativeElement.lastElementChild.textContent"
+>{{buttonText | async}}</button>
+<ng-content></ng-content>

src/app/shared/components/copy-button/copy-button.component.scss

@@ -0,0 +1,18 @@
+:host {
+  display: block;
+  position: relative;
+  .clipboard {
+    color: #dfdfdf;
+    cursor: pointer;
+    background: transparent;
+    border: none;
+    font-weight: 600;
+    padding: 12px;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    position: absolute;
+    right: 10px;
+    top: 50px;
+    z-index: 10;
+  }  
+}

src/app/shared/components/copy-button/copy-button.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CopyButtonComponent } from './copy-button.component';
+
+describe('CopyButtonComponent', () => {
+  let component: CopyButtonComponent;
+  let fixture: ComponentFixture<CopyButtonComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CopyButtonComponent]
+    });
+    fixture = TestBed.createComponent(CopyButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/copy-button/copy-button.component.ts

@@ -0,0 +1,21 @@
+import { Component, ElementRef, inject } from '@angular/core';
+import { BehaviorSubject, take, timer } from 'rxjs';
+
+@Component({
+  selector: 'app-copy-button',
+  templateUrl: './copy-button.component.html',
+  styleUrls: ['./copy-button.component.scss']
+})
+export class CopyButtonComponent {
+  public elRef = inject<ElementRef<HTMLElement>>(ElementRef<HTMLElement>);
+  public buttonText = new BehaviorSubject<string>('Copy');
+
+
+  onCopy() {
+    this.buttonText.next('Copied!');
+    timer(2000).pipe(take(1)).subscribe(() => {
+      console.log('OI');
+      this.buttonText.next('Copy');
+    });
+  }
+}

src/app/shared/shared.module.ts

@@ -12,9 +12,11 @@ import { TabsComponent } from './components/tabs/tabs.component';
 import { TocComponent } from './components/toc/toc.component';
 import { HeaderAnchorDirective } from './directives/header-anchor.directive';
 import { ExtensionPipe } from './pipes/extension.pipe';
+import { CopyButtonComponent } from './components/copy-button/copy-button.component';
+import { ClipboardModule } from '@angular/cdk/clipboard';
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [CommonModule, ClipboardModule],
   declarations: [
     ExtensionPipe,
     TabsComponent,
@@ -27,6 +29,7 @@ import { ExtensionPipe } from './pipes/extension.pipe';
     BannerDevtoolsComponent,
     BannerCoursesAuthComponent,
     ThemeModeToggleComponent,
+    CopyButtonComponent,
   ],
   exports: [
     ExtensionPipe,
@@ -40,6 +43,7 @@ import { ExtensionPipe } from './pipes/extension.pipe';
     BannerDevtoolsComponent,
     BannerCoursesAuthComponent,
     ThemeModeToggleComponent,
+    CopyButtonComponent,
   ],
   providers: [StorageService],
 })

tools/transforms/shared/utils/markdown-utils.ts

@@ -28,6 +28,7 @@ export function replaceFilename(
   const filename = text.slice(startIndex + 1, endIndex);
   return (
     `
+    <app-copy-button>
 <span class="filename">` +
     (filename.length > 0
       ? `
@@ -36,7 +37,8 @@ export function replaceFilename(
     `
 <app-tabs #${directiveRef}></app-tabs>
 </span>` +
-    renderer(text.slice(endIndex + 1), directiveRef).trim()
+    renderer(text.slice(endIndex + 1), directiveRef).trim() +
+    `</app-copy-button>`
   );
 }