feat: Add copy and select accessibility

assets/js/app.js

@@ -13,3 +13,16 @@ import "../css/app.css";
 //     import socket from "./socket"
 //
 import "phoenix_html";
+
+// Import Katbin modules
+import { ClipboardManager } from "./clipboard";
+import { KeyboardShortcuts } from "./keyboard-shortcuts";
+
+// Initialize modules when DOM is ready
+document.addEventListener("DOMContentLoaded", function() {
+  KeyboardShortcuts.init();
+  ClipboardManager.init();
+});
+
+// Export for global access if needed
+window.ClipboardManager = ClipboardManager;

assets/js/clipboard.js

@@ -0,0 +1,117 @@
+// Clipboard functionality for Katbin
+export class ClipboardManager {
+  static copyContent(content) {
+    if (navigator.clipboard && window.isSecureContext) {
+      return navigator.clipboard.writeText(content)
+        .then(() => this.showFeedback(true))
+        .catch(() => this.fallbackCopy(content));
+    } else {
+      return this.fallbackCopy(content);
+    }
+  }
+
+  static copyFromTextarea(textarea) {
+    if (!textarea) return Promise.reject('Textarea not found');
+
+    if (navigator.clipboard && window.isSecureContext) {
+      return navigator.clipboard.writeText(textarea.value)
+        .then(() => this.showFeedback(true))
+        .catch(() => this.fallbackCopyFromTextarea(textarea));
+    } else {
+      return this.fallbackCopyFromTextarea(textarea);
+    }
+  }
+
+  static fallbackCopy(content) {
+    const textArea = document.createElement('textarea');
+    textArea.value = content;
+    textArea.style.position = 'fixed';
+    textArea.style.left = '-999999px';
+    textArea.style.top = '-999999px';
+    document.body.appendChild(textArea);
+
+    textArea.select();
+
+    try {
+      const successful = document.execCommand('copy');
+      this.showFeedback(successful);
+      return successful ? Promise.resolve() : Promise.reject();
+    } catch (err) {
+      this.showFeedback(false);
+      return Promise.reject(err);
+    } finally {
+      document.body.removeChild(textArea);
+    }
+  }
+
+  static fallbackCopyFromTextarea(textarea) {
+    textarea.select();
+    textarea.setSelectionRange(0, 99999);
+
+    try {
+      const successful = document.execCommand('copy');
+      this.showFeedback(successful);
+      return successful ? Promise.resolve() : Promise.reject();
+    } catch (err) {
+      this.showFeedback(false);
+      return Promise.reject(err);
+    }
+  }
+
+  static showFeedback(success) {
+    const buttons = document.querySelectorAll('[data-clipboard-copy], [data-clipboard-button]');
+
+    buttons.forEach(button => {
+      const originalTitle = button.title;
+      const originalOpacity = button.style.opacity;
+
+      button.title = success ? 'Copied!' : 'Copy failed';
+      button.style.opacity = '0.7';
+
+      setTimeout(() => {
+        button.title = originalTitle;
+        button.style.opacity = originalOpacity || '1';
+      }, 1000);
+    });
+  }
+
+  // Initialize clipboard functionality
+  static init() {
+    // Handle copy buttons with data-clipboard-copy attribute
+    document.addEventListener('click', (e) => {
+      if (e.target.closest('[data-clipboard-copy]')) {
+        e.preventDefault();
+        this.handleCopyClick(e.target.closest('[data-clipboard-copy]'));
+      }
+    });
+  }
+
+  static handleCopyClick(button) {
+    const copyType = button.dataset.clipboardCopy;
+
+    if (copyType === 'paste-content') {
+      // Copy from global paste data
+      const pasteData = window.PASTE_DATA;
+      if (pasteData) {
+        this.copyContent(pasteData);
+      }
+    } else if (copyType === 'textarea') {
+      // Copy from form textarea
+      const textarea = document.querySelector('textarea[name="paste[content]"]');
+      this.copyFromTextarea(textarea);
+    }
+  }
+}
+
+// Global functions for backward compatibility
+window.copyPasteContent = function() {
+  const pasteData = window.PASTE_DATA;
+  if (pasteData) {
+    ClipboardManager.copyContent(pasteData);
+  }
+};
+
+window.copyToClipboard = function() {
+  const textarea = document.querySelector('textarea[name="paste[content]"]');
+  ClipboardManager.copyFromTextarea(textarea);
+};

assets/js/keyboard-shortcuts.js

@@ -0,0 +1,52 @@
+// Keyboard shortcuts for Katbin
+export class KeyboardShortcuts {
+  static init() {
+    document.addEventListener("keydown", this.handleKeydown.bind(this), false);
+
+    // Initialize form submission handling
+    this.initFormSubmission();
+  }
+
+  static handleKeydown(e) {
+    if ((window.navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) && e.keyCode == 83) {
+      e.preventDefault();
+      this.submitForm();
+    }
+
+    if ((window.navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) && e.keyCode == 65 && this.isTextareaFocused()) {
+      e.preventDefault();
+      this.selectAllInTextarea();
+    }
+  }
+
+  static initFormSubmission() {
+    document.addEventListener('click', (e) => {
+      if (e.target.closest('[data-submit-form]')) {
+        const form = document.getElementById(e.target.closest('[data-submit-form]').dataset.submitForm);
+        if (form) {
+          form.submit();
+        }
+      }
+    });
+  }
+
+  static submitForm() {
+    const form = document.getElementById("page_form");
+    if (form) {
+      form.submit();
+    }
+  }
+
+  static isTextareaFocused() {
+    const activeElement = document.activeElement;
+    return activeElement && activeElement.tagName.toLowerCase() === 'textarea';
+  }
+
+  static selectAllInTextarea() {
+    const textarea = document.activeElement;
+    if (textarea && textarea.tagName.toLowerCase() === 'textarea') {
+      textarea.select();
+      textarea.setSelectionRange(0, textarea.value.length);
+    }
+  }
+}

lib/ketbin_web/templates/page/form.html.heex

@@ -27,6 +27,18 @@
                 <%= text_input f, :custom_url, [class: "px-2 mr-2 outline-none text-black px-2 py-1", placeholder: "Custom URL"]  %>
             </div>
             <% end %>
+
+            <button type="button" 
+                    data-clipboard-copy="textarea" 
+                    class="mr-2" 
+                    title="CopyClipboard">
+                <svg 
+                                    class="h-6 w-6 cursor-pointer fill-current text-white hover:text-amber"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 24 24">
+                    <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
+                </svg>
+            </button>
             <button type="submit">
                 <svg
 									class="h-6 w-6 cursor-pointer fill-current text-white hover:text-amber"

lib/ketbin_web/templates/page/show.html.heex

@@ -1,5 +1,13 @@
 <div class="flex relative flex-col w-full h-full">
 	<div class="flex absolute top-0 right-0 p-4">
+		<button type="button" 
+		        data-clipboard-copy="paste-content" 
+		        class="mr-2 text-white hover:text-amber" 
+		        title="CopyClipboard">
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-6 w-6 cursor-pointer fill-current">
+				<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
+			</svg>
+		</button>
 		<%= if @show_edit do%>
 			<a href={ Routes.page_path(@conn, :edit, @paste.id) } class="text-white hover:text-amber">
 			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-6 w-6 cursor-pointer fill-current">