${escapedXml}`;
+ const pre = document.createElement('pre');
+ pre.className = 'text-xs text-gray-300 whitespace-pre-wrap break-all';
+ pre.textContent = String(rawXmpString);
+ xmpContainer.appendChild(pre);
} else {
- htmlContent += `- No XMP metadata found -
`; + xmpContainer.innerHTML = `- No XMP metadata found -
`; } - htmlContent += `${file.name}
`; + + const img = document.createElement('img'); + img.src = url; + img.className = "w-full h-full object-cover rounded-md border-2 border-gray-600"; + + const p = document.createElement('p'); + p.className = "absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white text-xs text-center truncate p-1"; + p.textContent = file.name; // Safe insertion + + li.append(img, p); imageList.appendChild(li); }); @@ -463,14 +287,12 @@ function handleMultiFileUpload(toolId: any) { } } - -export function setupFileInputHandler(toolId: any) { +export function setupFileInputHandler(toolId) { const fileInput = document.getElementById('file-input'); - const multiFileTools = ['merge', 'pdf-to-zip', 'jpg-to-pdf', 'png-to-pdf', 'webp-to-pdf', 'image-to-pdf', 'svg-to-pdf', 'bmp-to-pdf', 'heic-to-pdf', 'tiff-to-pdf']; const isMultiFileTool = multiFileTools.includes(toolId); let isFirstUpload = true; - const processFiles = async (newFiles: any) => { + const processFiles = async (newFiles) => { if (newFiles.length === 0) return; if (!isMultiFileTool || isFirstUpload) { @@ -478,7 +300,7 @@ export function setupFileInputHandler(toolId: any) { } else { state.files = [...state.files, ...newFiles]; } - isFirstUpload = false; + isFirstUpload = false; const fileDisplayArea = document.getElementById('file-display-area'); if (fileDisplayArea) { @@ -488,20 +310,9 @@ export function setupFileInputHandler(toolId: any) { const fileControls = document.getElementById('file-controls'); if (fileControls) { fileControls.classList.remove('hidden'); - - createIcons({icons}); + createIcons({ icons }); } - const singlePdfLoadTools = ['split', 'organize', 'rotate', 'add-page-numbers', - 'pdf-to-jpg', 'pdf-to-png', 'pdf-to-webp', 'compress', 'pdf-to-greyscale', - 'edit-metadata', 'remove-metadata', 'flatten', 'delete-pages', 'add-blank-page', - 'extract-pages', 'add-watermark', 'add-header-footer', 'invert-colors', 'view-metadata', - 'reverse-pages', 'crop', 'redact', 'pdf-to-bmp', 'pdf-to-tiff', 'split-in-half', - 'page-dimensions', 'n-up', 'duplicate-organize', 'combine-single-page', 'fix-dimensions', 'change-background-color', - 'change-text-color', 'ocr-pdf', 'sign-pdf', 'remove-annotations', 'cropper', 'form-filler', - ]; - const simpleTools = ['encrypt', 'decrypt', 'change-permissions', 'pdf-to-markdown', 'word-to-pdf']; - if (isMultiFileTool) { handleMultiFileUpload(toolId); } else if (singlePdfLoadTools.includes(toolId)) { @@ -512,8 +323,7 @@ export function setupFileInputHandler(toolId: any) { if (optionsDiv) optionsDiv.classList.remove('hidden'); const processBtn = document.getElementById('process-btn'); if (processBtn) { - // @ts-expect-error TS(2339) FIXME: Property 'disabled' does not exist on type 'HTMLEl... Remove this comment to see the full error message - processBtn.disabled = false; + (processBtn as HTMLButtonElement).disabled = false; processBtn.onclick = () => { const logic = toolLogic[toolId]; if (logic) { @@ -522,29 +332,25 @@ export function setupFileInputHandler(toolId: any) { } }; } - } - else if (toolId === 'edit') { + } 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.innerHTML = ''; + 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.innerHTML = ` + script.textContent = ` import EmbedPDF from 'https://snippet.embedpdf.com/embedpdf.js'; EmbedPDF.init({ type: 'container', @@ -558,22 +364,19 @@ export function setupFileInputHandler(toolId: any) { const backBtn = document.getElementById('back-to-grid'); const urlRevoker = () => { URL.revokeObjectURL(fileURL); - state.currentPdfUrl = null; // Clear from state as well + state.currentPdfUrl = null; backBtn.removeEventListener('click', urlRevoker); }; backBtn.addEventListener('click', urlRevoker); } }; - // @ts-expect-error TS(2339) FIXME: Property 'files' does not exist on type 'EventTarg... Remove this comment to see the full error message - fileInput.addEventListener('change', (e) => processFiles(Array.from(e.target.files))); + fileInput.addEventListener('change', (e) => processFiles(Array.from((e.target as HTMLInputElement).files || []))); const setupAddMoreButton = () => { const addMoreBtn = document.getElementById('add-more-btn'); if (addMoreBtn) { - addMoreBtn.addEventListener('click', () => { - fileInput.click(); - }); + addMoreBtn.addEventListener('click', () => fileInput.click()); } }; @@ -583,31 +386,28 @@ export function setupFileInputHandler(toolId: any) { clearBtn.addEventListener('click', () => { state.files = []; isFirstUpload = true; - // @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message - fileInput.value = ''; - + (fileInput as HTMLInputElement).value = ''; + const fileDisplayArea = document.getElementById('file-display-area'); - if (fileDisplayArea) fileDisplayArea.innerHTML = ''; - + if (fileDisplayArea) fileDisplayArea.textContent = ''; + const fileControls = document.getElementById('file-controls'); if (fileControls) fileControls.classList.add('hidden'); - - // Clear tool-specific UI + const toolSpecificUI = ['file-list', 'page-merge-preview', 'image-list']; toolSpecificUI.forEach(id => { const el = document.getElementById(id); - if (el) el.innerHTML = ''; + if (el) el.textContent = ''; }); - + const processBtn = document.getElementById('process-btn'); - // @ts-expect-error TS(2339) FIXME: Property 'disabled' does not exist on type 'HTMLEl... Remove this comment to see the full error message - if (processBtn) processBtn.disabled = true; + if (processBtn) (processBtn as HTMLButtonElement).disabled = true; }); } }; - + setTimeout(() => { setupAddMoreButton(); setupClearButton(); }, 100); -} \ No newline at end of file +} diff --git a/src/js/logic/compare-pdfs.ts b/src/js/logic/compare-pdfs.ts index d7c1d42..ae711b3 100644 --- a/src/js/logic/compare-pdfs.ts +++ b/src/js/logic/compare-pdfs.ts @@ -6,7 +6,7 @@ const state = { pdfDoc1: null, pdfDoc2: null, currentPage: 1, - viewMode: 'overlay', + viewMode: 'overlay', isSyncScroll: true, }; @@ -19,7 +19,7 @@ const state = { */ async function renderPage(pdfDoc: any, pageNum: any, canvas: any, container: any) { const page = await pdfDoc.getPage(pageNum); - + // Calculate scale to fit the container width. const containerWidth = container.clientWidth - 2; // Subtract border width const viewport = page.getViewport({ scale: 1.0 }); @@ -38,15 +38,15 @@ async function renderPage(pdfDoc: any, pageNum: any, canvas: any, container: any async function renderBothPages() { if (!state.pdfDoc1 || !state.pdfDoc2) return; - + showLoader(`Loading page ${state.currentPage}...`); - + const canvas1 = document.getElementById('canvas-compare-1'); const canvas2 = document.getElementById('canvas-compare-2'); const panel1 = document.getElementById('panel-1'); const panel2 = document.getElementById('panel-2'); const wrapper = document.getElementById('compare-viewer-wrapper'); - + // Determine the correct container based on the view mode const container1 = state.viewMode === 'overlay' ? wrapper : panel1; const container2 = state.viewMode === 'overlay' ? wrapper : panel2; @@ -55,7 +55,7 @@ async function renderBothPages() { renderPage(state.pdfDoc1, Math.min(state.currentPage, state.pdfDoc1.numPages), canvas1, container1), renderPage(state.pdfDoc2, Math.min(state.currentPage, state.pdfDoc2.numPages), canvas2, container2) ]); - + updateNavControls(); hideLoader(); } @@ -78,11 +78,26 @@ async function setupFileInput(inputId: any, docKey: any, displayId: any) { const handleFile = async (file: any) => { if (!file || file.type !== 'application/pdf') return showAlert('Invalid File', 'Please select a valid PDF file.'); - + const displayDiv = document.getElementById(displayId); - displayDiv.innerHTML = `${file.name}
`; - createIcons({icons}); - + displayDiv.textContent = ''; + + // 2. Create the icon element + const icon = document.createElement('i'); + icon.setAttribute('data-lucide', 'check-circle'); + icon.className = 'w-10 h-10 mb-3 text-green-500'; + + // 3. Create the paragraph element for the file name + const p = document.createElement('p'); + p.className = 'text-sm text-gray-300 truncate'; + + // 4. Set the file name safely using textContent + p.textContent = file.name; + + // 5. Append the safe elements to the container + displayDiv.append(icon, p); + createIcons({ icons }); + try { showLoader(`Loading ${file.name}...`); const pdfBytes = await readFileAsArrayBuffer(file); @@ -174,7 +189,7 @@ export function setupCompareTool() { const syncToggle = document.getElementById('sync-scroll-toggle'); // @ts-expect-error TS(2339) FIXME: Property 'checked' does not exist on type 'HTMLEle... Remove this comment to see the full error message syncToggle.addEventListener('change', () => { state.isSyncScroll = syncToggle.checked; }); - + let scrollingPanel: any = null; panel1.addEventListener('scroll', () => { if (state.isSyncScroll && scrollingPanel !== panel2) { diff --git a/src/js/logic/duplicate-organize.ts b/src/js/logic/duplicate-organize.ts index 1a189d6..429e877 100644 --- a/src/js/logic/duplicate-organize.ts +++ b/src/js/logic/duplicate-organize.ts @@ -82,7 +82,7 @@ export async function renderDuplicateOrganizeThumbnails() { // @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'. const pdfjsDoc = await pdfjsLib.getDocument({ data: pdfData }).promise; - grid.innerHTML = ''; + grid.textContent = ''; for (let i = 1; i <= pdfjsDoc.numPages; i++) { const page = await pdfjsDoc.getPage(i); @@ -97,20 +97,39 @@ export async function renderDuplicateOrganizeThumbnails() { // @ts-expect-error TS(2322) FIXME: Type 'number' is not assignable to type 'string'. wrapper.dataset.originalPageIndex = i - 1; - wrapper.innerHTML = ` -Signature field: Not supported for direct editing.
Unsupported field type: ${field.constructor.name}
This PDF contains no form fields.
'; + formContainer.innerHTML = 'This PDF contains no form fields.
'; processBtn.classList.add('hidden'); } else { - let formHtml = ''; - fields.forEach((field: any) => { try { - formHtml += createFormFieldHtml(field); + const fieldElement = createFormFieldHtml(field); + formContainer.appendChild(fieldElement); } catch (e: any) { console.error(`Error processing field "${field.getName()}":`, e); - formHtml += `Unsupported field: ${field.getName()}
${e.message}