fix: add copy button to every js and ts snippet

Author: kamilmysliwiec

src/app/homepage/pages/faq/faq.module.ts

@@ -71,6 +71,7 @@ const routes: Routes = [
     RequestLifecycleComponent,
     ErrorsComponent,
     ServerlessComponent,
+    RawBodyComponent,
   ],
 })
 export class FaqModule {}

src/app/homepage/pages/graphql/graphql.module.ts

@@ -18,7 +18,7 @@ import { QuickStartComponent } from './quick-start/quick-start.component';
 import { ResolversMapComponent } from './resolvers-map/resolvers-map.component';
 import { ScalarsComponent } from './scalars/scalars.component';
 import { SchemaGeneratorComponent } from './schema-generator/schema-generator.component';
-import { SharingModelsComponent } from "./sharing-models/sharing-models.component";
+import { SharingModelsComponent } from './sharing-models/sharing-models.component';
 import { SubscriptionsComponent } from './subscriptions/subscriptions.component';
 import { UnionsAndEnumsComponent } from './unions-and-enums/unions.component';
 
@@ -121,7 +121,7 @@ const routes: Routes = [
   {
     path: 'sharing-models',
     component: SharingModelsComponent,
-    data: { title: "GraphQL + TypeScript - Sharing models"}
+    data: { title: 'GraphQL + TypeScript - Sharing models' },
   },
   {
     path: 'mapped-types',
@@ -161,6 +161,7 @@ const routes: Routes = [
     ExtensionsComponent,
     FieldMiddlewareComponent,
     MigrationComponent,
+    InterfacesComponent,
   ],
 })
 export class GraphqlModule {}

src/app/homepage/pages/openapi/openapi.module.ts

@@ -71,6 +71,7 @@ const routes: Routes = [
     IntroductionComponent,
     DecoratorsComponent,
     CliPluginComponent,
+    OpenApiSecurityComponent,
   ],
 })
 export class OpenApiModule {}

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

@@ -1,8 +1,8 @@
 <button
   class="clipboard"
+  [class.copied]="copied"
   (click)="onCopy()"
-  [cdkCopyToClipboard]="elRef.nativeElement.lastElementChild.textContent"
 >
-  <mat-icon>{{ buttonIcon | async }}</mat-icon>
+  <mat-icon>{{ copied ? 'check': 'content_copy' }}</mat-icon>
 </button>
 <ng-content></ng-content>

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

@@ -7,15 +7,17 @@
     cursor: pointer;
     background: transparent;
     border: none;
-    font-weight: 600;
-    padding: 12px;
-    box-sizing: border-box;
-    -webkit-box-sizing: border-box;
+    padding: 10px;
     position: absolute;
     right: 10px;
-    top: 60px;
+    top: 65px;
     z-index: 10;
+    opacity: 0.7;
 
+    &:hover:not(.copied) {
+      opacity: 1;
+    }
+
     & > * {
       width: 18px;
       height: 18px;

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

@@ -1,20 +1,20 @@
 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']
+  styleUrls: ['./copy-button.component.scss'],
 })
 export class CopyButtonComponent {
   public elRef = inject<ElementRef<HTMLElement>>(ElementRef<HTMLElement>);
-  public buttonIcon = new BehaviorSubject<string>('content_copy');
-
+  public copied = false;
 
   onCopy() {
-    this.buttonIcon.next('check');
-    timer(2000).pipe(take(1)).subscribe(() => {
-      this.buttonIcon.next('content_copy');
-    });
+    const preRef = this.elRef.nativeElement.querySelector('pre:not(.hide)');
+    if (!preRef) {
+      return;
+    }
+    navigator.clipboard.writeText(preRef.firstChild.textContent);
+    this.copied = true;
   }
 }

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

@@ -26,25 +26,28 @@ export function applyCodeRenderer(renderer: Renderer) {
     language: string,
     isEscaped: boolean,
     switcherKey?: string,
+    skipCopyButton?: boolean,
   ) {
     const filenameKey = '@@filename';
     const filenameIndex = code.indexOf(filenameKey);
     if (filenameIndex >= 0) {
-      return replaceFilename(
+      const output = replaceFilename(
         (text, directiveRef) =>
           // @ts-ignore
-          renderer.code(text, language, isEscaped, directiveRef),
+          renderer.code(text, language, isEscaped, directiveRef, true),
         code,
         filenameKey,
         filenameIndex,
       );
+
+      return `<app-copy-button>${output}</app-copy-button>`;
     }
 
     const switchKey = '@@switch';
     const switchIndex = code.indexOf(switchKey);
     if (switchIndex >= 0) {
       const result = parseSwitcher(
-        (text, lang) => renderer.code(text, lang, isEscaped),
+        (text, lang) => renderer.code(text, lang, isEscaped, undefined, true),
         code,
         switchKey,
         switchIndex,
@@ -59,6 +62,14 @@ export function applyCodeRenderer(renderer: Renderer) {
       isEscaped,
     );
     output = switcherKey ? output : appendEmptyLine(output);
-    return escapeAts(escapeBrackets(output));
+
+    const escaped = escapeAts(escapeBrackets(output));
+    if (language === 'typescript' || language === 'ts') {
+      if (!skipCopyButton) {
+        return `<app-copy-button>${escaped}</app-copy-button>`;
+      }
+      return escaped;
+    }
+    return escaped;
   };
 }

tools/transforms/content-package/services/renderer/code.renderer.ts

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