Merge branch 'ThiagoBussola-feat-clipboard'

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

@@ -0,0 +1,8 @@
+<button
+  class="clipboard"
+  [class.copied]="copied"
+  (click)="onCopy()"
+>
+  <mat-icon>{{ copied ? 'check': 'content_copy' }}</mat-icon>
+</button>
+<ng-content></ng-content>

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

@@ -0,0 +1,27 @@
+:host {
+  display: block;
+  position: relative;
+  
+  .clipboard {
+    color: #dfdfdf;
+    cursor: pointer;
+    background: transparent;
+    border: none;
+    padding: 10px;
+    position: absolute;
+    right: 10px;
+    top: 65px;
+    z-index: 10;
+    opacity: 0.7;
+    
+    &:hover:not(.copied) {
+      opacity: 1;
+    }
+
+    & > * {
+      width: 18px;
+      height: 18px;
+      font-size: 18px;
+    }
+  }  
+}

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

@@ -0,0 +1,20 @@
+import { Component, ElementRef, inject } from '@angular/core';
+
+@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 copied = false;
+
+  onCopy() {
+    const preRef = this.elRef.nativeElement.querySelector('pre:not(.hide)');
+    if (!preRef) {
+      return;
+    }
+    navigator.clipboard.writeText(preRef.firstChild.textContent);
+    this.copied = true;
+  }
+}

src/app/shared/shared.module.ts

@@ -12,9 +12,12 @@ 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';
+import { MatIconModule } from '@angular/material/icon';
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [CommonModule, ClipboardModule, MatIconModule],
   declarations: [
     ExtensionPipe,
     TabsComponent,
@@ -27,6 +30,7 @@ import { ExtensionPipe } from './pipes/extension.pipe';
     BannerDevtoolsComponent,
     BannerCoursesAuthComponent,
     ThemeModeToggleComponent,
+    CopyButtonComponent,
   ],
   exports: [
     ExtensionPipe,
@@ -40,6 +44,7 @@ import { ExtensionPipe } from './pipes/extension.pipe';
     BannerDevtoolsComponent,
     BannerCoursesAuthComponent,
     ThemeModeToggleComponent,
+    CopyButtonComponent
   ],
   providers: [StorageService],
 })

tools/transforms/content-package/services/renderer/code.renderer.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;
   };
 }