From c6f477e37e4a90977149d69a496ef8475f232131 Mon Sep 17 00:00:00 2001
From: lacksfish <lacksfish@gmail.com>
Date: Wed, 6 Dec 2023 13:59:13 +0100
Subject: [PATCH] add copy-to-clipboard fallback if navigator.clipboard is not
 available

---
 .../shared/directive/clipboard.directive.ts   | 37 +++++++++++++++----
 1 file changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/app/shared/directive/clipboard.directive.ts b/src/app/shared/directive/clipboard.directive.ts
index 9745df08..4ecef579 100644
--- a/src/app/shared/directive/clipboard.directive.ts
+++ b/src/app/shared/directive/clipboard.directive.ts
@@ -13,14 +13,37 @@ export class ClipboardDirective {
   @HostListener('click', ['$event'])
   public onClick(event: MouseEvent): void {
     event.preventDefault();
-    if (!this.payload || !navigator.clipboard) {
-      return;
+
+    if (!this.payload) return;
+
+    if (navigator.clipboard) {
+      this.copyUsingClipboardAPI();
+    } else {
+      this.copyUsingFallbackMethod();
     }
-    navigator.clipboard.writeText(this.payload.toString()).then(() => {
-      this.copied.emit(this.payload.toString());
-    }, (err) => {
-      this.copied.emit('Error could not copy text: ' + JSON.stringify(err));
-    });
   }
 
+  private copyUsingFallbackMethod(): void {
+    const input = document.createElement('textarea');
+    input.innerHTML = this.payload;
+    document.body.appendChild(input);
+    input.select();
+
+    try {
+      const result = document.execCommand('copy');
+      if (result) {
+        this.copied.emit(this.payload.toString());
+      } else {
+        this.copied.emit('Error could not copy text.');
+      }
+    } finally {
+      document.body.removeChild(input);
+    }
+  }
+
+  private copyUsingClipboardAPI(): void {
+    navigator.clipboard.writeText(this.payload.toString())
+      .then(() => this.copied.emit(this.payload.toString()))
+      .catch((error) => this.copied.emit('Error could not copy text: ' + JSON.stringify(error)));
+  }
 }