From 62d1b9ada2f27ef3e623b8fbf5d9e2f36072a3c8 Mon Sep 17 00:00:00 2001 From: abdullahalam123 Date: Thu, 4 Dec 2025 15:29:01 +0530 Subject: [PATCH] feat: add new Edit PDF tool with dedicated page and logic, and update build configuration --- src/js/config/pdf-tools.ts | 1 + src/js/config/tools.ts | 4 +- src/js/handlers/fileHandler.ts | 44 +------ src/js/logic/edit-pdf-page.ts | 127 ++++++++++++++++++++ src/pages/compress-pdf.html | 5 +- src/pages/edit-pdf.html | 211 +++++++++++++++++++++++++++++++++ src/pages/merge-pdf.html | 3 +- src/pages/split-pdf.html | 3 +- vite.config.ts | 1 + 9 files changed, 351 insertions(+), 48 deletions(-) create mode 100644 src/js/logic/edit-pdf-page.ts create mode 100644 src/pages/edit-pdf.html diff --git a/src/js/config/pdf-tools.ts b/src/js/config/pdf-tools.ts index 8fae854..fb4b01a 100644 --- a/src/js/config/pdf-tools.ts +++ b/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', diff --git a/src/js/config/tools.ts b/src/js/config/tools.ts index d81c640..d8aadf6 100644 --- a/src/js/config/tools.ts +++ b/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: diff --git a/src/js/handlers/fileHandler.ts b/src/js/handlers/fileHandler.ts index 34fef03..3be82b5 100644 --- a/src/js/handlers/fileHandler.ts +++ b/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); } }; diff --git a/src/js/logic/edit-pdf-page.ts b/src/js/logic/edit-pdf-page.ts new file mode 100644 index 0000000..788a53e --- /dev/null +++ b/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(); + } +} diff --git a/src/pages/compress-pdf.html b/src/pages/compress-pdf.html index f4766f9..0b7ea49 100644 --- a/src/pages/compress-pdf.html +++ b/src/pages/compress-pdf.html @@ -59,8 +59,7 @@ -
+
+
+
+
+ + + + +
+
+ + +

PDF Editor

+

+ Annotate, highlight, redact, comment, add shapes/images, search, and view PDFs. +

+ +
+
+ +

Click to select a file or + drag and + drop

+

PDF file

+

Your files never leave your device.

+
+ +
+ +
+ + + +
+
+ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/pages/merge-pdf.html b/src/pages/merge-pdf.html index 8b4f543..278c1eb 100644 --- a/src/pages/merge-pdf.html +++ b/src/pages/merge-pdf.html @@ -62,8 +62,7 @@ -
+