From 183f70fa47fe4cc575b9d7413c9f026455b39d5a Mon Sep 17 00:00:00 2001
From: Krafpy <nazar.misyats@gmail.com>
Date: Mon, 2 Jan 2023 17:25:14 +0100
Subject: [PATCH] Added copy to clipboard button

---
 dist/main/editor/draggable-text.js |  2 ++
 index.html                         |  8 ++++++--
 src/main/editor/draggable-text.ts  |  2 ++
 style.css                          | 29 +++++++++++++++++++++++++++--
 4 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/dist/main/editor/draggable-text.js b/dist/main/editor/draggable-text.js
index 7c4a6c9..fb18767 100644
--- a/dist/main/editor/draggable-text.js
+++ b/dist/main/editor/draggable-text.js
@@ -13,6 +13,8 @@ export class DraggableTextbox {
         textarea.value = content;
         const closeBtn = div.getElementsByClassName("draggable-close-btn")[0];
         closeBtn.onclick = () => div.remove();
+        const copyBtn = div.getElementsByClassName("draggable-copy-btn")[0];
+        copyBtn.onclick = () => navigator.clipboard.writeText(content);
         let pos1, pos2, pos3, pos4;
         const dragMouseDown = (e) => {
             e = e || window.event;
diff --git a/index.html b/index.html
index c6c9236..056b0c3 100644
--- a/index.html
+++ b/index.html
@@ -469,10 +469,14 @@
     </div>
 
     <!-- template -->
+    <!-- hidden style="display: none;" -->
     <div id="draggable-text-template" class="draggable-text-box" hidden style="display: none;">
         <div class="draggable-text-header">
-            <h3 class="draggable-text-title">Some title</h3>
-            <button class="draggable-close-btn"><i class="fa fa-close"></i></button>
+            <h3 class="draggable-text-title"></h3>
+            <div>
+                <button class="draggable-copy-btn"><i class="fa-regular fa-clipboard"></i></button>
+                <button class="draggable-close-btn"><i class="fa fa-close"></i></button>
+            </div>
         </div>
         <textarea name="draggable-textaera" cols="70" rows="30" readonly></textarea>
     </div>
diff --git a/src/main/editor/draggable-text.ts b/src/main/editor/draggable-text.ts
index 7a7566b..71b8e89 100644
--- a/src/main/editor/draggable-text.ts
+++ b/src/main/editor/draggable-text.ts
@@ -20,6 +20,8 @@ export class DraggableTextbox {
 
         const closeBtn = div.getElementsByClassName("draggable-close-btn")[0] as HTMLButtonElement;
         closeBtn.onclick = () => div.remove();
+        const copyBtn = div.getElementsByClassName("draggable-copy-btn")[0] as HTMLButtonElement;
+        copyBtn.onclick = () => navigator.clipboard.writeText(content);
 
         // from: https://www.w3schools.com/howto/howto_js_draggable.asp
         let pos1: number, pos2: number, pos3: number, pos4: number;
diff --git a/style.css b/style.css
index 9d2f9c0..3e3bfce 100644
--- a/style.css
+++ b/style.css
@@ -667,17 +667,23 @@ footer p
     box-sizing: border-box;
 }
 
-.draggable-close-btn
+
+.draggable-close-btn, .draggable-copy-btn
 {
     color: white;
     border-radius: 5px;
     height: 28px;
     width: 28px;
     border: 1px solid rgb(54, 54, 54);
-    background-color: #3e1515;
     font-size: 16px;
 }
 
+/* Close button */
+.draggable-close-btn
+{
+    background-color: #3e1515;
+}
+
 .draggable-close-btn:hover
 {
     cursor: pointer;
@@ -693,4 +699,23 @@ footer p
 .draggable-close-btn:disabled
 {
     cursor: default;
+}
+
+
+/* Copy to clipboard button */
+.draggable-copy-btn
+{
+    background-color: #344c67;
+}
+
+.draggable-copy-btn:hover
+{
+    cursor: pointer;
+    background-color: #4c6786;
+}
+
+.draggable-copy-btn:active
+{
+    cursor: pointer;
+    background-color: #22354d;
 }
\ No newline at end of file