feat: add new Edit PDF tool with dedicated page and logic, and update build configuration

src/js/config/pdf-tools.ts

@@ -7,6 +7,7 @@ export const singlePdfLoadTools = [
   'pdf-to-png',
   'pdf-to-webp',
   'pdf-to-greyscale',
+  'edit',
   'edit-metadata',
   'remove-metadata',
 

src/js/config/tools.ts

@@ -28,7 +28,7 @@ export const categories = [
         subtitle: 'Reduce the file size of your PDF.',
       },
       {
-        id: 'edit',
+        href: '/src/pages/edit-pdf.html',
         name: 'PDF Editor',
         icon: 'pocket-knife',
         subtitle:
@@ -76,7 +76,7 @@ export const categories = [
     name: 'Edit & Annotate',
     tools: [
       {
-        id: 'edit',
+        href: '/src/pages/edit-pdf.html',
         name: 'PDF Editor',
         icon: 'pocket-knife',
         subtitle:

src/js/handlers/fileHandler.ts

@@ -624,9 +624,11 @@ async function handleMultiFileUpload(toolId) {
     }
   }
 
-  if (toolId === 'merge') {
-    toolLogic.merge.setup();
-  } else if (toolId === 'alternate-merge') {
+  // if (toolId === 'merge') {
+  //   toolLogic.merge.setup();
+  // }
+
+  if (toolId === 'alternate-merge') {
     toolLogic['alternate-merge'].setup();
   } else if (toolId === 'image-to-pdf') {
     const imageList = document.getElementById('image-list');
@@ -829,42 +831,6 @@ export function setupFileInputHandler(toolId) {
           }
         };
       }
-    } else if (toolId === 'edit') {
-      const file = state.files[0];
-      if (!file) return;
-
-      const pdfWrapper = document.getElementById('embed-pdf-wrapper');
-      const pdfContainer = document.getElementById('embed-pdf-container');
-
-      pdfContainer.textContent = ''; // Clear safely
-
-      if (state.currentPdfUrl) {
-        URL.revokeObjectURL(state.currentPdfUrl);
-      }
-      pdfWrapper.classList.remove('hidden');
-      const fileURL = URL.createObjectURL(file);
-      state.currentPdfUrl = fileURL;
-
-      const script = document.createElement('script');
-      script.type = 'module';
-      script.textContent = `
-                import EmbedPDF from 'https://snippet.embedpdf.com/embedpdf.js';
-                EmbedPDF.init({
-                    type: 'container',
-                    target: document.getElementById('embed-pdf-container'),
-                    src: '${fileURL}',
-                    theme: 'dark',
-                });
-            `;
-      document.head.appendChild(script);
-
-      const backBtn = document.getElementById('back-to-grid');
-      const urlRevoker = () => {
-        URL.revokeObjectURL(fileURL);
-        state.currentPdfUrl = null;
-        backBtn.removeEventListener('click', urlRevoker);
-      };
-      backBtn.addEventListener('click', urlRevoker);
     }
   };
 

src/js/logic/edit-pdf-page.ts

@@ -0,0 +1,127 @@
+// Logic for PDF Editor Page
+import { createIcons, icons } from 'lucide';
+import { showAlert, showLoader, hideLoader } from '../ui.js';
+
+let currentPdfUrl: string | null = null;
+
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializePage);
+} else {
+    initializePage();
+}
+
+function initializePage() {
+    createIcons({ icons });
+
+    const fileInput = document.getElementById('file-input') as HTMLInputElement;
+    const dropZone = document.getElementById('drop-zone');
+
+    if (fileInput) {
+        fileInput.addEventListener('change', handleFileUpload);
+    }
+
+    if (dropZone) {
+        dropZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            dropZone.classList.add('border-indigo-500');
+        });
+
+        dropZone.addEventListener('dragleave', () => {
+            dropZone.classList.remove('border-indigo-500');
+        });
+
+        dropZone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            dropZone.classList.remove('border-indigo-500');
+            const files = e.dataTransfer?.files;
+            if (files && files.length > 0) {
+                handleFiles(files);
+            }
+        });
+
+        dropZone.addEventListener('click', () => {
+            fileInput?.click();
+        });
+    }
+
+    document.getElementById('back-to-tools')?.addEventListener('click', () => {
+        window.location.href = '/';
+    });
+}
+
+async function handleFileUpload(e: Event) {
+    const input = e.target as HTMLInputElement;
+    if (input.files && input.files.length > 0) {
+        await handleFiles(input.files);
+    }
+    input.value = '';
+}
+
+async function handleFiles(files: FileList) {
+    const file = files[0];
+    if (!file || file.type !== 'application/pdf') {
+        showAlert('Invalid File', 'Please upload a valid PDF file.');
+        return;
+    }
+
+    showLoader('Loading PDF Editor...');
+
+    try {
+        const pdfWrapper = document.getElementById('embed-pdf-wrapper');
+        const pdfContainer = document.getElementById('embed-pdf-container');
+        const uploader = document.getElementById('tool-uploader');
+        const dropZone = document.getElementById('drop-zone');
+
+        if (!pdfWrapper || !pdfContainer || !uploader || !dropZone) return;
+
+        // Hide uploader elements but keep the container
+        dropZone.classList.add('hidden');
+
+        // Clear previous content
+        pdfContainer.textContent = '';
+        if (currentPdfUrl) {
+            URL.revokeObjectURL(currentPdfUrl);
+        }
+
+        // Show editor container
+        pdfWrapper.classList.remove('hidden');
+
+        const fileURL = URL.createObjectURL(file);
+        currentPdfUrl = fileURL;
+
+        // Dynamically load EmbedPDF script
+        const script = document.createElement('script');
+        script.type = 'module';
+        script.textContent = `
+        import EmbedPDF from 'https://snippet.embedpdf.com/embedpdf.js';
+        EmbedPDF.init({
+            type: 'container',
+            target: document.getElementById('embed-pdf-container'),
+            src: '${fileURL}',
+        });
+    `;
+        document.head.appendChild(script);
+
+        // Update back button to reset state
+        const backBtn = document.getElementById('back-to-tools');
+        if (backBtn) {
+            // Clone to remove old listeners
+            const newBackBtn = backBtn.cloneNode(true);
+            backBtn.parentNode?.replaceChild(newBackBtn, backBtn);
+
+            newBackBtn.addEventListener('click', () => {
+                if (currentPdfUrl) {
+                    URL.revokeObjectURL(currentPdfUrl);
+                    currentPdfUrl = null;
+                }
+                window.location.href = '/';
+            });
+        }
+
+    } catch (error) {
+        console.error('Error loading PDF Editor:', error);
+        showAlert('Error', 'Failed to load the PDF Editor.');
+    } finally {
+        hideLoader();
+    }
+}