add option to paste image

Author: Basu Jindal

README.md

@@ -100,8 +100,15 @@ Move to `/blogs/` when ready to publish.
 
 ## To Do 
 
-- [ ] Add like and comment option to blogs similar to thoughts but allow anonymous or github login 
+- [ ] Move logout button to the bottom
+- [ ] Login at blog return no blog selected nad login is not successful
+- [ ] Update comments UI
 - [ ] Visit count for all pages (blogs, thoughts, diffchecker, photos) on login just visible to basujindal
+- [ ] Display the blog posts and like and views in admin portal
+- [ ] Show full preview
+- [ ] Make blog like not anon?
+- [ ] Check how multiple images are posted
+- [ ] Split large files into smaller, eespcially thoughts.js and any files greater than 500 lines
 - [ ] Keep deleted posts and edit history for thoughts just in database
-- [ ] No need to display exact time on hover on post in thoughts, just date is good
-
+- [x] Add like and comment option to blogs similar to thoughts but allow anonymous or github login 
+- [x] No need to display exact time on hover on post in thoughts, just date is good

js/thoughts.js

@@ -159,6 +159,10 @@
       imageInput.addEventListener('change', handleImageSelect);
     }
 
+    if (composeTextarea) {
+      composeTextarea.addEventListener('paste', handlePaste);
+    }
+
     if (lightbox) {
       lightbox.addEventListener('click', (e) => {
         if (e.target === lightbox || e.target.classList.contains('image-lightbox-close')) {
@@ -973,8 +977,34 @@
   // Handle image selection
   function handleImageSelect(e) {
     const files = Array.from(e.target.files);
-    const MAX_FILE_SIZE = 20 * 1024 * 1024;
+    processImageFiles(files);
+    e.target.value = '';
+  }
 
+  // Handle paste event for images
+  function handlePaste(e) {
+    const items = e.clipboardData?.items;
+    if (!items) return;
+
+    const files = [];
+    for (const item of items) {
+      if (item.type.startsWith('image/')) {
+        const file = item.getAsFile();
+        if (file) {
+          files.push(file);
+        }
+      }
+    }
+
+    if (files.length > 0) {
+      e.preventDefault();
+      processImageFiles(files);
+    }
+  }
+
+  // Process image files (shared by file input and paste)
+  function processImageFiles(files) {
+    const MAX_FILE_SIZE = 20 * 1024 * 1024;
     const remaining = 4 - selectedImages.length;
     const newFiles = files.slice(0, remaining);
 
@@ -994,7 +1024,6 @@
     });
 
     updateSubmitButton();
-    e.target.value = '';
   }
 
   // Add image preview