Added copy to clipboard button

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;

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>

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;

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;
@@ -694,3 +700,22 @@ footer p
 {
     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;
+}