feat(notes): add copy to clipboard when encountering markdown in notes

Author: adirochs

apps/codever-ui/src/app/shared/directive/copy-code-button.directive.ts

@@ -0,0 +1,88 @@
+import { AfterViewChecked, Directive, ElementRef } from '@angular/core';
+
+@Directive({
+  selector: '[appCopyCodeButton]',
+})
+export class CopyCodeButtonDirective implements AfterViewChecked {
+  private static stylesInjected = false;
+
+  constructor(private el: ElementRef) {
+    CopyCodeButtonDirective.injectStyles();
+  }
+
+  ngAfterViewChecked(): void {
+    const preElements = this.el.nativeElement.querySelectorAll('pre');
+    preElements.forEach((pre: HTMLElement) => {
+      if (pre.getAttribute('data-copy-btn-added') === 'true') {
+        return;
+      }
+
+      pre.setAttribute('data-copy-btn-added', 'true');
+      pre.style.position = 'relative';
+
+      const button = document.createElement('button');
+      button.className = 'copy-code-btn';
+      button.title = 'Copy code';
+      button.innerHTML = '<i class="far fa-copy"></i>';
+
+      button.addEventListener('click', () => {
+        const code = pre.querySelector('code');
+        const text = code ? code.textContent : pre.textContent;
+        navigator.clipboard.writeText(text || '').then(() => {
+          button.innerHTML = '<i class="fas fa-check"></i>';
+          setTimeout(() => {
+            button.innerHTML = '<i class="far fa-copy"></i>';
+          }, 1500);
+        });
+      });
+
+      pre.appendChild(button);
+    });
+  }
+
+  private static injectStyles(): void {
+    if (CopyCodeButtonDirective.stylesInjected) {
+      return;
+    }
+    CopyCodeButtonDirective.stylesInjected = true;
+
+    const style = document.createElement('style');
+    style.textContent = `
+      pre[data-copy-btn-added="true"] {
+        position: relative;
+      }
+
+      .copy-code-btn {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        padding: 0;
+        border: 1px solid rgba(0, 0, 0, 0.15);
+        border-radius: 4px;
+        background: rgba(255, 255, 255, 0.9);
+        color: #555;
+        font-size: 14px;
+        cursor: pointer;
+        z-index: 10;
+        transition: background-color 0.15s ease, color 0.15s ease;
+      }
+
+      .copy-code-btn:hover {
+        background: #fff;
+        color: #000;
+        border-color: rgba(0, 0, 0, 0.3);
+      }
+
+      pre[data-copy-btn-added="true"]:hover .copy-code-btn {
+        display: flex;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+}
+

apps/codever-ui/src/app/shared/note-details/note-card-body/note-content.component.html

@@ -1,6 +1,6 @@
 
 
-<div #noteContentDiv appMarkedImageWidth>
+<div #noteContentDiv appMarkedImageWidth appCopyCodeButton>
   <div *ngIf="partOfList && viewHeight > maxNoteHeightInList && !isFullScreen; else wholeText">
     <div [ngClass]="{ more_text: showMoreText, less_text_note: !showMoreText }">
       <p [innerHtml]="note.content | md2html"></p>

apps/codever-ui/src/app/shared/shared.module.ts

@@ -41,6 +41,7 @@ import { NoteDetailsComponent } from './note-details/note-details.component';
 import { NoteContentComponent } from './note-details/note-card-body/note-content.component';
 import { AsyncNoteListComponent } from './async-note-list/async-note-list.component';
 import { MarkedImageWidthDirective } from './directive/marked-image-width.directive';
+import { CopyCodeButtonDirective } from './directive/copy-code-button.directive';
 import { SnippetSocialShareDialogComponent } from './dialog/snippet-social-share-dialog/snippet-social-share-dialog.component';
 import { SnippetSocialShareDialogContentComponent } from './dialog/snippet-social-share-dialog/snippet-social-share-dialog-content/snippet-social-share-dialog-content.component';
 import { HighLightPipe } from '../common/pipes/highlight.pipe';
@@ -79,6 +80,7 @@ import { OpenInNewTabDirective } from './directive/open-in-new-tab.directive';
     TagsValidatorDirective,
     OpenInNewTabDirective,
     MarkedImageWidthDirective,
+    CopyCodeButtonDirective,
     DeleteResourceDialogComponent,
     SocialShareDialogComponent,
     SnippetSocialShareDialogComponent,