djoka/bentopdf
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

fix: update supported languages and improve PDF editor functionality with multi file support

Browse Source
This commit is contained in:
alam00000
2026-01-31 15:24:08 +05:30
parent e4a477567b
commit 5c1b00e9d1
5 changed files with 232 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
package-lock.json generated
View File

@@ -7340,15 +7340,6 @@
"integrity": "sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==", "integrity": "sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/hammerjs": {
"version": "2.0.8",
"resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
"integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==",
"license": "MIT",
"engines": {
"node": ">=0.8.0"
}
},
"node_modules/handlebars": { "node_modules/handlebars": {
"version": "4.7.8", "version": "4.7.8",
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz", "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",

2
public/sw.js
View File

@@ -100,7 +100,7 @@ self.addEventListener('fetch', (event) => {
isLocal && isLocal &&
(url.pathname.endsWith('.html') || (url.pathname.endsWith('.html') ||
url.pathname === '/' || url.pathname === '/' ||
/^\/(en|fr|es|de|zh|zh-TW|vi|tr|id|it|pt|nl)(\/|$)/.test(url.pathname)) /^\/(en|fr|es|de|zh|zh-TW|vi|tr|id|it|pt|nl|be)(\/|$)/.test(url.pathname))
) { ) {
event.respondWith(networkFirstStrategy(event.request)); event.respondWith(networkFirstStrategy(event.request));
} }

2
src/js/i18n/i18n.ts
View File

@@ -119,7 +119,7 @@ export const changeLanguage = (lang: SupportedLanguage): void => {
let pagePathWithoutLang = relativePath; let pagePathWithoutLang = relativePath;
const langPrefixMatch = relativePath.match( const langPrefixMatch = relativePath.match(
/^\/(en|fr|es|de|zh|zh-TW|vi|tr|id|it|pt|nl)(\/.*)?$/ /^\/(en|fr|es|de|zh|zh-TW|vi|tr|id|it|pt|nl|be)(\/.*)?$/
); );
if (langPrefixMatch) { if (langPrefixMatch) {
pagePathWithoutLang = langPrefixMatch[2] || '/'; pagePathWithoutLang = langPrefixMatch[2] || '/';

347
src/js/logic/edit-pdf-page.ts
View File

@@ -1,160 +1,271 @@
// Logic for PDF Editor Page // Logic for PDF Editor Page
import { createIcons, icons } from 'lucide'; import { createIcons, icons } from 'lucide';
import { showAlert, showLoader, hideLoader } from '../ui.js'; import { showAlert, showLoader, hideLoader } from '../ui.js';
import { formatBytes } from '../utils/helpers.js'; import { formatBytes, downloadFile } from '../utils/helpers.js';
const embedPdfWasmUrl = new URL( const embedPdfWasmUrl = new URL(
'embedpdf-snippet/dist/pdfium.wasm', 'embedpdf-snippet/dist/pdfium.wasm',
import.meta.url import.meta.url
).href; ).href;
let currentPdfUrl: string | null = null; let viewerInstance: any = null;
let docManagerPlugin: any = null;
let isViewerInitialized = false;
const fileEntryMap = new Map<string, HTMLElement>();
function resetViewer() {
const pdfWrapper = document.getElementById('embed-pdf-wrapper');
const pdfContainer = document.getElementById('embed-pdf-container');
const downloadBtn = document.getElementById('download-edited-pdf');
const fileDisplayArea = document.getElementById('file-display-area');
const fileInput = document.getElementById('file-input') as HTMLInputElement;
if (pdfContainer) pdfContainer.textContent = '';
if (pdfWrapper) pdfWrapper.classList.add('hidden');
if (downloadBtn) downloadBtn.classList.add('hidden');
if (fileDisplayArea) fileDisplayArea.innerHTML = '';
if (fileInput) fileInput.value = '';
viewerInstance = null;
docManagerPlugin = null;
isViewerInitialized = false;
fileEntryMap.clear();
}
function removeFileEntry(documentId: string) {
const entry = fileEntryMap.get(documentId);
if (entry) {
entry.remove();
fileEntryMap.delete(documentId);
}
if (fileEntryMap.size === 0) {
resetViewer();
}
}
if (document.readyState === 'loading') { if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initializePage); document.addEventListener('DOMContentLoaded', initializePage);
} else { } else {
initializePage(); initializePage();
} }
function initializePage() { function initializePage() {
createIcons({ icons }); createIcons({ icons });
const fileInput = document.getElementById('file-input') as HTMLInputElement; const fileInput = document.getElementById('file-input') as HTMLInputElement;
const dropZone = document.getElementById('drop-zone'); const dropZone = document.getElementById('drop-zone');
if (fileInput) { if (fileInput) {
fileInput.addEventListener('change', handleFileUpload); fileInput.addEventListener('change', handleFileUpload);
} }
if (dropZone) { if (dropZone) {
dropZone.addEventListener('dragover', (e) => { dropZone.addEventListener('dragover', (e) => {
e.preventDefault(); e.preventDefault();
dropZone.classList.add('border-indigo-500'); 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);
}
});
fileInput?.addEventListener('click', () => {
if (fileInput) fileInput.value = '';
});
}
document.getElementById('back-to-tools')?.addEventListener('click', () => {
window.location.href = import.meta.env.BASE_URL;
}); });
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);
}
});
fileInput?.addEventListener('click', () => {
if (fileInput) fileInput.value = '';
});
}
document.getElementById('back-to-tools')?.addEventListener('click', () => {
window.location.href = import.meta.env.BASE_URL;
});
} }
async function handleFileUpload(e: Event) { async function handleFileUpload(e: Event) {
const input = e.target as HTMLInputElement; const input = e.target as HTMLInputElement;
if (input.files && input.files.length > 0) { if (input.files && input.files.length > 0) {
await handleFiles(input.files); await handleFiles(input.files);
} }
} }
async function handleFiles(files: FileList) { async function handleFiles(files: FileList) {
const file = files[0]; const pdfFiles = Array.from(files).filter(
if (!file || file.type !== 'application/pdf') { (f) => f.type === 'application/pdf'
showAlert('Invalid File', 'Please upload a valid PDF file.'); );
return; if (pdfFiles.length === 0) {
} showAlert('Invalid File', 'Please upload a valid PDF file.');
return;
}
showLoader('Loading PDF Editor...'); showLoader('Loading PDF Editor...');
try { try {
const pdfWrapper = document.getElementById('embed-pdf-wrapper'); const pdfWrapper = document.getElementById('embed-pdf-wrapper');
const pdfContainer = document.getElementById('embed-pdf-container'); const pdfContainer = document.getElementById('embed-pdf-container');
const uploader = document.getElementById('tool-uploader'); const fileDisplayArea = document.getElementById('file-display-area');
const dropZone = document.getElementById('drop-zone');
const fileDisplayArea = document.getElementById('file-display-area');
if (!pdfWrapper || !pdfContainer || !uploader || !dropZone || !fileDisplayArea) return; if (!pdfWrapper || !pdfContainer || !fileDisplayArea) return;
if (!isViewerInitialized) {
const firstFile = pdfFiles[0];
const firstBuffer = await firstFile.arrayBuffer();
fileDisplayArea.innerHTML = ''; pdfContainer.textContent = '';
const fileDiv = document.createElement('div'); pdfWrapper.classList.remove('hidden');
fileDiv.className = 'flex items-center justify-between bg-gray-700 p-3 rounded-lg';
const infoContainer = document.createElement('div'); const { default: EmbedPDF } = await import('embedpdf-snippet');
infoContainer.className = 'flex flex-col flex-1 min-w-0'; viewerInstance = EmbedPDF.init({
type: 'container',
target: pdfContainer,
worker: true,
wasmUrl: embedPdfWasmUrl,
export: {
defaultFileName: firstFile.name,
},
documentManager: {
maxDocuments: 10,
},
tabBar: 'always',
});
const nameSpan = document.createElement('div'); const registry = await viewerInstance.registry;
nameSpan.className = 'truncate font-medium text-gray-200 text-sm mb-1'; docManagerPlugin = registry.getPlugin('document-manager').provides();
nameSpan.textContent = file.name;
const metaSpan = document.createElement('div'); docManagerPlugin.onDocumentClosed((data: any) => {
metaSpan.className = 'text-xs text-gray-400'; const docId = data?.id || data;
metaSpan.textContent = formatBytes(file.size); removeFileEntry(docId);
});
infoContainer.append(nameSpan, metaSpan); docManagerPlugin.onDocumentOpened((data: any) => {
const docId = data?.id;
const removeBtn = document.createElement('button'); const docName = data?.name;
removeBtn.className = 'ml-4 text-red-400 hover:text-red-300 flex-shrink-0'; if (!docId) return;
removeBtn.innerHTML = '<i data-lucide="trash-2" class="w-4 h-4"></i>'; const pendingEntry = fileDisplayArea.querySelector(
removeBtn.onclick = () => { `[data-pending-name="${CSS.escape(docName)}"]`
if (currentPdfUrl) { ) as HTMLElement;
URL.revokeObjectURL(currentPdfUrl); if (pendingEntry) {
currentPdfUrl = null; pendingEntry.removeAttribute('data-pending-name');
} fileEntryMap.set(docId, pendingEntry);
pdfContainer.textContent = ''; const removeBtn = pendingEntry.querySelector(
pdfWrapper.classList.add('hidden'); '[data-remove-btn]'
fileDisplayArea.innerHTML = ''; ) as HTMLElement;
const fileInput = document.getElementById('file-input') as HTMLInputElement; if (removeBtn) {
if (fileInput) fileInput.value = ''; removeBtn.onclick = () => {
}; docManagerPlugin.closeDocument(docId);
};
fileDiv.append(infoContainer, removeBtn); }
fileDisplayArea.appendChild(fileDiv);
createIcons({ icons });
pdfContainer.textContent = '';
if (currentPdfUrl) {
URL.revokeObjectURL(currentPdfUrl);
} }
pdfWrapper.classList.remove('hidden'); });
const fileURL = URL.createObjectURL(file); addFileEntries(fileDisplayArea, pdfFiles);
currentPdfUrl = fileURL;
const { default: EmbedPDF } = await import('embedpdf-snippet'); docManagerPlugin.openDocumentBuffer({
EmbedPDF.init({ buffer: firstBuffer,
type: 'container', name: firstFile.name,
target: pdfContainer, autoActivate: true,
src: fileURL, });
worker: true,
wasmUrl: embedPdfWasmUrl, for (let i = 1; i < pdfFiles.length; i++) {
const buffer = await pdfFiles[i].arrayBuffer();
docManagerPlugin.openDocumentBuffer({
buffer,
name: pdfFiles[i].name,
autoActivate: false,
}); });
}
// Update back button to reset state isViewerInitialized = true;
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', () => { let downloadBtn = document.getElementById('download-edited-pdf');
if (currentPdfUrl) { if (!downloadBtn) {
URL.revokeObjectURL(currentPdfUrl); downloadBtn = document.createElement('button');
currentPdfUrl = null; downloadBtn.id = 'download-edited-pdf';
} downloadBtn.className = 'btn-gradient w-full mt-6';
window.location.href = import.meta.env.BASE_URL; downloadBtn.textContent = 'Download Edited PDF';
}); pdfWrapper.appendChild(downloadBtn);
}
downloadBtn.classList.remove('hidden');
downloadBtn.onclick = async () => {
try {
const exportPlugin = registry.getPlugin('export').provides();
const arrayBuffer = await exportPlugin.saveAsCopy().toPromise();
const blob = new Blob([arrayBuffer], { type: 'application/pdf' });
downloadFile(blob, 'edited-document.pdf');
} catch (err) {
console.error('Error downloading PDF:', err);
showAlert('Error', 'Failed to download the edited PDF.');
} }
};
} catch (error) { const backBtn = document.getElementById('back-to-tools');
console.error('Error loading PDF Editor:', error); if (backBtn) {
showAlert('Error', 'Failed to load the PDF Editor.'); const newBackBtn = backBtn.cloneNode(true);
} finally { backBtn.parentNode?.replaceChild(newBackBtn, backBtn);
hideLoader();
newBackBtn.addEventListener('click', () => {
window.location.href = import.meta.env.BASE_URL;
});
}
} else {
addFileEntries(fileDisplayArea, pdfFiles);
for (const file of pdfFiles) {
const buffer = await file.arrayBuffer();
docManagerPlugin.openDocumentBuffer({
buffer,
name: file.name,
autoActivate: true,
});
}
} }
} catch (error) {
console.error('Error loading PDF Editor:', error);
showAlert('Error', 'Failed to load the PDF Editor.');
} finally {
hideLoader();
}
}
function addFileEntries(fileDisplayArea: HTMLElement, files: File[]) {
for (const file of files) {
const fileDiv = document.createElement('div');
fileDiv.className =
'flex items-center justify-between bg-gray-700 p-3 rounded-lg';
fileDiv.setAttribute('data-pending-name', file.name);
const infoContainer = document.createElement('div');
infoContainer.className = 'flex flex-col flex-1 min-w-0';
const nameSpan = document.createElement('div');
nameSpan.className = 'truncate font-medium text-gray-200 text-sm mb-1';
nameSpan.textContent = file.name;
const metaSpan = document.createElement('div');
metaSpan.className = 'text-xs text-gray-400';
metaSpan.textContent = formatBytes(file.size);
infoContainer.append(nameSpan, metaSpan);
const removeBtn = document.createElement('button');
removeBtn.className = 'ml-4 text-red-400 hover:text-red-300 flex-shrink-0';
removeBtn.innerHTML = '<i data-lucide="trash-2" class="w-4 h-4"></i>';
removeBtn.setAttribute('data-remove-btn', 'true');
removeBtn.onclick = () => {
fileDiv.remove();
if (fileDisplayArea.children.length === 0) {
resetViewer();
}
};
fileDiv.append(infoContainer, removeBtn);
fileDisplayArea.appendChild(fileDiv);
}
createIcons({ icons });
} }

1
vite.config.ts
View File

@@ -25,6 +25,7 @@ const SUPPORTED_LANGUAGES = [
'tr', 'tr',
'fr', 'fr',
'pt', 'pt',
'nl',
] as const; ] as const;
const LANG_REGEX = new RegExp( const LANG_REGEX = new RegExp(
`^/(${SUPPORTED_LANGUAGES.join('|')})(?:/(.*))?$` `^/(${SUPPORTED_LANGUAGES.join('|')})(?:/(.*))?$`