feat: separate AGPL libraries and add dynamic WASM loading
- Add WASM settings page for configuring external AGPL modules - Implement dynamic loading for PyMuPDF, Ghostscript, and CoherentPDF - Add Cloudflare Worker proxy for serving WASM files with CORS - Update all affected tool pages to check WASM availability - Add showWasmRequiredDialog for missing module configuration Documentation: - Update README, licensing.html, and docs to clarify AGPL components are not bundled and must be configured separately - Add WASM-PROXY.md deployment guide with recommended source URLs - Rename "CPDF" to "CoherentPDF" for consistency
This commit is contained in:
alam00000
@@ -1,252 +1,280 @@
|
||||
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
||||
import { downloadFile, formatBytes } from '../utils/helpers.js';
|
||||
import { createIcons, icons } from 'lucide';
|
||||
import { PyMuPDF } from '@bentopdf/pymupdf-wasm';
|
||||
import { getWasmBaseUrl } from '../config/wasm-cdn-config.js';
|
||||
import { isWasmAvailable, getWasmBaseUrl } from '../config/wasm-cdn-config.js';
|
||||
import { showWasmRequiredDialog } from '../utils/wasm-provider.js';
|
||||
import { loadPyMuPDF, isPyMuPDFAvailable } from '../utils/pymupdf-loader.js';
|
||||
|
||||
let files: File[] = [];
|
||||
let currentMode: 'upload' | 'text' = 'upload';
|
||||
|
||||
// RTL character detection pattern (Arabic, Hebrew, Persian, etc.)
|
||||
const RTL_PATTERN = /[\u0590-\u05FF\u0600-\u06FF\u0700-\u074F\u0750-\u077F\u0780-\u07BF\u07C0-\u07FF\u08A0-\u08FF\uFB1D-\uFB4F\uFB50-\uFDFF\uFE70-\uFEFF]/;
|
||||
const RTL_PATTERN =
|
||||
/[\u0590-\u05FF\u0600-\u06FF\u0700-\u074F\u0750-\u077F\u0780-\u07BF\u07C0-\u07FF\u08A0-\u08FF\uFB1D-\uFB4F\uFB50-\uFDFF\uFE70-\uFEFF]/;
|
||||
|
||||
function hasRtlCharacters(text: string): boolean {
|
||||
return RTL_PATTERN.test(text);
|
||||
return RTL_PATTERN.test(text);
|
||||
}
|
||||
|
||||
const updateUI = () => {
|
||||
const fileDisplayArea = document.getElementById('file-display-area');
|
||||
const fileControls = document.getElementById('file-controls');
|
||||
const dropZone = document.getElementById('drop-zone');
|
||||
const fileDisplayArea = document.getElementById('file-display-area');
|
||||
const fileControls = document.getElementById('file-controls');
|
||||
const dropZone = document.getElementById('drop-zone');
|
||||
|
||||
if (!fileDisplayArea || !fileControls || !dropZone) return;
|
||||
if (!fileDisplayArea || !fileControls || !dropZone) return;
|
||||
|
||||
fileDisplayArea.innerHTML = '';
|
||||
fileDisplayArea.innerHTML = '';
|
||||
|
||||
if (files.length > 0 && currentMode === 'upload') {
|
||||
dropZone.classList.add('hidden');
|
||||
fileControls.classList.remove('hidden');
|
||||
if (files.length > 0 && currentMode === 'upload') {
|
||||
dropZone.classList.add('hidden');
|
||||
fileControls.classList.remove('hidden');
|
||||
|
||||
files.forEach((file, index) => {
|
||||
const fileDiv = document.createElement('div');
|
||||
fileDiv.className = 'flex items-center justify-between bg-gray-700 p-3 rounded-lg text-sm';
|
||||
files.forEach((file, index) => {
|
||||
const fileDiv = document.createElement('div');
|
||||
fileDiv.className =
|
||||
'flex items-center justify-between bg-gray-700 p-3 rounded-lg text-sm';
|
||||
|
||||
const infoSpan = document.createElement('span');
|
||||
infoSpan.className = 'truncate font-medium text-gray-200';
|
||||
infoSpan.textContent = file.name;
|
||||
const infoSpan = document.createElement('span');
|
||||
infoSpan.className = 'truncate font-medium text-gray-200';
|
||||
infoSpan.textContent = file.name;
|
||||
|
||||
const sizeSpan = document.createElement('span');
|
||||
sizeSpan.className = 'text-gray-400 text-xs ml-2';
|
||||
sizeSpan.textContent = `(${formatBytes(file.size)})`;
|
||||
const sizeSpan = document.createElement('span');
|
||||
sizeSpan.className = 'text-gray-400 text-xs ml-2';
|
||||
sizeSpan.textContent = `(${formatBytes(file.size)})`;
|
||||
|
||||
const removeBtn = document.createElement('button');
|
||||
removeBtn.className = 'ml-4 text-red-400 hover:text-red-300';
|
||||
removeBtn.innerHTML = '<i data-lucide="trash-2" class="w-4 h-4"></i>';
|
||||
removeBtn.onclick = () => {
|
||||
files = files.filter((_, i) => i !== index);
|
||||
updateUI();
|
||||
};
|
||||
const removeBtn = document.createElement('button');
|
||||
removeBtn.className = 'ml-4 text-red-400 hover:text-red-300';
|
||||
removeBtn.innerHTML = '<i data-lucide="trash-2" class="w-4 h-4"></i>';
|
||||
removeBtn.onclick = () => {
|
||||
files = files.filter((_, i) => i !== index);
|
||||
updateUI();
|
||||
};
|
||||
|
||||
fileDiv.append(infoSpan, sizeSpan, removeBtn);
|
||||
fileDisplayArea.appendChild(fileDiv);
|
||||
});
|
||||
createIcons({ icons });
|
||||
} else {
|
||||
dropZone.classList.remove('hidden');
|
||||
fileControls.classList.add('hidden');
|
||||
}
|
||||
fileDiv.append(infoSpan, sizeSpan, removeBtn);
|
||||
fileDisplayArea.appendChild(fileDiv);
|
||||
});
|
||||
createIcons({ icons });
|
||||
} else {
|
||||
dropZone.classList.remove('hidden');
|
||||
fileControls.classList.add('hidden');
|
||||
}
|
||||
};
|
||||
|
||||
const resetState = () => {
|
||||
files = [];
|
||||
const fileInput = document.getElementById('file-input') as HTMLInputElement;
|
||||
const textInput = document.getElementById('text-input') as HTMLTextAreaElement;
|
||||
if (fileInput) fileInput.value = '';
|
||||
if (textInput) textInput.value = '';
|
||||
updateUI();
|
||||
files = [];
|
||||
const fileInput = document.getElementById('file-input') as HTMLInputElement;
|
||||
const textInput = document.getElementById(
|
||||
'text-input'
|
||||
) as HTMLTextAreaElement;
|
||||
if (fileInput) fileInput.value = '';
|
||||
if (textInput) textInput.value = '';
|
||||
updateUI();
|
||||
};
|
||||
|
||||
async function convert() {
|
||||
const fontSize = parseInt((document.getElementById('font-size') as HTMLInputElement).value) || 12;
|
||||
const pageSizeKey = (document.getElementById('page-size') as HTMLSelectElement).value;
|
||||
const fontName = (document.getElementById('font-family') as HTMLSelectElement)?.value || 'helv';
|
||||
const textColor = (document.getElementById('text-color') as HTMLInputElement)?.value || '#000000';
|
||||
const fontSize =
|
||||
parseInt(
|
||||
(document.getElementById('font-size') as HTMLInputElement).value
|
||||
) || 12;
|
||||
const pageSizeKey = (
|
||||
document.getElementById('page-size') as HTMLSelectElement
|
||||
).value;
|
||||
const fontName =
|
||||
(document.getElementById('font-family') as HTMLSelectElement)?.value ||
|
||||
'helv';
|
||||
const textColor =
|
||||
(document.getElementById('text-color') as HTMLInputElement)?.value ||
|
||||
'#000000';
|
||||
|
||||
if (currentMode === 'upload' && files.length === 0) {
|
||||
showAlert('No Files', 'Please select at least one text file.');
|
||||
return;
|
||||
if (currentMode === 'upload' && files.length === 0) {
|
||||
showAlert('No Files', 'Please select at least one text file.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (currentMode === 'text') {
|
||||
const textInput = document.getElementById(
|
||||
'text-input'
|
||||
) as HTMLTextAreaElement;
|
||||
if (!textInput.value.trim()) {
|
||||
showAlert('No Text', 'Please enter some text to convert.');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
showLoader('Loading engine...');
|
||||
|
||||
try {
|
||||
const pymupdf = await loadPyMuPDF();
|
||||
|
||||
let textContent = '';
|
||||
|
||||
if (currentMode === 'upload') {
|
||||
for (const file of files) {
|
||||
const text = await file.text();
|
||||
textContent += text + '\n\n';
|
||||
}
|
||||
} else {
|
||||
const textInput = document.getElementById(
|
||||
'text-input'
|
||||
) as HTMLTextAreaElement;
|
||||
textContent = textInput.value;
|
||||
}
|
||||
|
||||
if (currentMode === 'text') {
|
||||
const textInput = document.getElementById('text-input') as HTMLTextAreaElement;
|
||||
if (!textInput.value.trim()) {
|
||||
showAlert('No Text', 'Please enter some text to convert.');
|
||||
return;
|
||||
}
|
||||
}
|
||||
showLoader('Creating PDF...');
|
||||
|
||||
showLoader('Loading engine...');
|
||||
const pdfBlob = await pymupdf.textToPdf(textContent, {
|
||||
fontSize,
|
||||
pageSize: pageSizeKey as 'a4' | 'letter' | 'legal' | 'a3' | 'a5',
|
||||
fontName: fontName as 'helv' | 'tiro' | 'cour' | 'times',
|
||||
textColor,
|
||||
margins: 72,
|
||||
});
|
||||
|
||||
try {
|
||||
const pymupdf = new PyMuPDF(getWasmBaseUrl('pymupdf'));
|
||||
await pymupdf.load();
|
||||
downloadFile(pdfBlob, 'text_to_pdf.pdf');
|
||||
|
||||
let textContent = '';
|
||||
|
||||
if (currentMode === 'upload') {
|
||||
for (const file of files) {
|
||||
const text = await file.text();
|
||||
textContent += text + '\n\n';
|
||||
}
|
||||
} else {
|
||||
const textInput = document.getElementById('text-input') as HTMLTextAreaElement;
|
||||
textContent = textInput.value;
|
||||
}
|
||||
|
||||
showLoader('Creating PDF...');
|
||||
|
||||
const pdfBlob = await pymupdf.textToPdf(textContent, {
|
||||
fontSize,
|
||||
pageSize: pageSizeKey as 'a4' | 'letter' | 'legal' | 'a3' | 'a5',
|
||||
fontName: fontName as 'helv' | 'tiro' | 'cour' | 'times',
|
||||
textColor,
|
||||
margins: 72
|
||||
});
|
||||
|
||||
downloadFile(pdfBlob, 'text_to_pdf.pdf');
|
||||
|
||||
showAlert('Success', 'Text converted to PDF successfully!', 'success', () => {
|
||||
resetState();
|
||||
});
|
||||
} catch (e: any) {
|
||||
console.error('[TxtToPDF] Error:', e);
|
||||
showAlert('Error', `Failed to convert text to PDF. ${e.message || ''}`);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
showAlert(
|
||||
'Success',
|
||||
'Text converted to PDF successfully!',
|
||||
'success',
|
||||
() => {
|
||||
resetState();
|
||||
}
|
||||
);
|
||||
} catch (e: any) {
|
||||
console.error('[TxtToPDF] Error:', e);
|
||||
showAlert('Error', `Failed to convert text to PDF. ${e.message || ''}`);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
}
|
||||
|
||||
// Update textarea direction based on RTL detection
|
||||
function updateTextareaDirection(textarea: HTMLTextAreaElement) {
|
||||
const text = textarea.value;
|
||||
if (hasRtlCharacters(text)) {
|
||||
textarea.style.direction = 'rtl';
|
||||
textarea.style.textAlign = 'right';
|
||||
} else {
|
||||
textarea.style.direction = 'ltr';
|
||||
textarea.style.textAlign = 'left';
|
||||
}
|
||||
const text = textarea.value;
|
||||
if (hasRtlCharacters(text)) {
|
||||
textarea.style.direction = 'rtl';
|
||||
textarea.style.textAlign = 'right';
|
||||
} else {
|
||||
textarea.style.direction = 'ltr';
|
||||
textarea.style.textAlign = 'left';
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const fileInput = document.getElementById('file-input') as HTMLInputElement;
|
||||
const dropZone = document.getElementById('drop-zone');
|
||||
const addMoreBtn = document.getElementById('add-more-btn');
|
||||
const clearFilesBtn = document.getElementById('clear-files-btn');
|
||||
const processBtn = document.getElementById('process-btn');
|
||||
const backBtn = document.getElementById('back-to-tools');
|
||||
const uploadModeBtn = document.getElementById('txt-mode-upload-btn');
|
||||
const textModeBtn = document.getElementById('txt-mode-text-btn');
|
||||
const uploadPanel = document.getElementById('txt-upload-panel');
|
||||
const textPanel = document.getElementById('txt-text-panel');
|
||||
const textInput = document.getElementById('text-input') as HTMLTextAreaElement;
|
||||
const fileInput = document.getElementById('file-input') as HTMLInputElement;
|
||||
const dropZone = document.getElementById('drop-zone');
|
||||
const addMoreBtn = document.getElementById('add-more-btn');
|
||||
const clearFilesBtn = document.getElementById('clear-files-btn');
|
||||
const processBtn = document.getElementById('process-btn');
|
||||
const backBtn = document.getElementById('back-to-tools');
|
||||
const uploadModeBtn = document.getElementById('txt-mode-upload-btn');
|
||||
const textModeBtn = document.getElementById('txt-mode-text-btn');
|
||||
const uploadPanel = document.getElementById('txt-upload-panel');
|
||||
const textPanel = document.getElementById('txt-text-panel');
|
||||
const textInput = document.getElementById(
|
||||
'text-input'
|
||||
) as HTMLTextAreaElement;
|
||||
|
||||
// Back to Tools
|
||||
if (backBtn) {
|
||||
backBtn.addEventListener('click', () => {
|
||||
window.location.href = import.meta.env.BASE_URL;
|
||||
});
|
||||
// Back to Tools
|
||||
if (backBtn) {
|
||||
backBtn.addEventListener('click', () => {
|
||||
window.location.href = import.meta.env.BASE_URL;
|
||||
});
|
||||
}
|
||||
|
||||
// Mode switching
|
||||
if (uploadModeBtn && textModeBtn && uploadPanel && textPanel) {
|
||||
uploadModeBtn.addEventListener('click', () => {
|
||||
currentMode = 'upload';
|
||||
uploadModeBtn.classList.remove('bg-gray-700', 'text-gray-300');
|
||||
uploadModeBtn.classList.add('bg-indigo-600', 'text-white');
|
||||
textModeBtn.classList.remove('bg-indigo-600', 'text-white');
|
||||
textModeBtn.classList.add('bg-gray-700', 'text-gray-300');
|
||||
uploadPanel.classList.remove('hidden');
|
||||
textPanel.classList.add('hidden');
|
||||
});
|
||||
|
||||
textModeBtn.addEventListener('click', () => {
|
||||
currentMode = 'text';
|
||||
textModeBtn.classList.remove('bg-gray-700', 'text-gray-300');
|
||||
textModeBtn.classList.add('bg-indigo-600', 'text-white');
|
||||
uploadModeBtn.classList.remove('bg-indigo-600', 'text-white');
|
||||
uploadModeBtn.classList.add('bg-gray-700', 'text-gray-300');
|
||||
textPanel.classList.remove('hidden');
|
||||
uploadPanel.classList.add('hidden');
|
||||
});
|
||||
}
|
||||
|
||||
// RTL auto-detection for textarea
|
||||
if (textInput) {
|
||||
textInput.addEventListener('input', () => {
|
||||
updateTextareaDirection(textInput);
|
||||
});
|
||||
}
|
||||
|
||||
// File handling
|
||||
const handleFileSelect = (newFiles: FileList | null) => {
|
||||
if (!newFiles || newFiles.length === 0) return;
|
||||
const validFiles = Array.from(newFiles).filter(
|
||||
(file) =>
|
||||
file.name.toLowerCase().endsWith('.txt') || file.type === 'text/plain'
|
||||
);
|
||||
|
||||
if (validFiles.length < newFiles.length) {
|
||||
showAlert(
|
||||
'Invalid Files',
|
||||
'Some files were skipped. Only text files are allowed.'
|
||||
);
|
||||
}
|
||||
|
||||
// Mode switching
|
||||
if (uploadModeBtn && textModeBtn && uploadPanel && textPanel) {
|
||||
uploadModeBtn.addEventListener('click', () => {
|
||||
currentMode = 'upload';
|
||||
uploadModeBtn.classList.remove('bg-gray-700', 'text-gray-300');
|
||||
uploadModeBtn.classList.add('bg-indigo-600', 'text-white');
|
||||
textModeBtn.classList.remove('bg-indigo-600', 'text-white');
|
||||
textModeBtn.classList.add('bg-gray-700', 'text-gray-300');
|
||||
uploadPanel.classList.remove('hidden');
|
||||
textPanel.classList.add('hidden');
|
||||
});
|
||||
|
||||
textModeBtn.addEventListener('click', () => {
|
||||
currentMode = 'text';
|
||||
textModeBtn.classList.remove('bg-gray-700', 'text-gray-300');
|
||||
textModeBtn.classList.add('bg-indigo-600', 'text-white');
|
||||
uploadModeBtn.classList.remove('bg-indigo-600', 'text-white');
|
||||
uploadModeBtn.classList.add('bg-gray-700', 'text-gray-300');
|
||||
textPanel.classList.remove('hidden');
|
||||
uploadPanel.classList.add('hidden');
|
||||
});
|
||||
if (validFiles.length > 0) {
|
||||
files = [...files, ...validFiles];
|
||||
updateUI();
|
||||
}
|
||||
};
|
||||
|
||||
// RTL auto-detection for textarea
|
||||
if (textInput) {
|
||||
textInput.addEventListener('input', () => {
|
||||
updateTextareaDirection(textInput);
|
||||
});
|
||||
}
|
||||
if (fileInput && dropZone) {
|
||||
fileInput.addEventListener('change', (e) => {
|
||||
handleFileSelect((e.target as HTMLInputElement).files);
|
||||
});
|
||||
|
||||
// File handling
|
||||
const handleFileSelect = (newFiles: FileList | null) => {
|
||||
if (!newFiles || newFiles.length === 0) return;
|
||||
const validFiles = Array.from(newFiles).filter(
|
||||
(file) => file.name.toLowerCase().endsWith('.txt') || file.type === 'text/plain'
|
||||
);
|
||||
dropZone.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.add('bg-gray-700');
|
||||
});
|
||||
|
||||
if (validFiles.length < newFiles.length) {
|
||||
showAlert('Invalid Files', 'Some files were skipped. Only text files are allowed.');
|
||||
}
|
||||
dropZone.addEventListener('dragleave', (e) => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.remove('bg-gray-700');
|
||||
});
|
||||
|
||||
if (validFiles.length > 0) {
|
||||
files = [...files, ...validFiles];
|
||||
updateUI();
|
||||
}
|
||||
};
|
||||
dropZone.addEventListener('drop', (e) => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.remove('bg-gray-700');
|
||||
handleFileSelect(e.dataTransfer?.files ?? null);
|
||||
});
|
||||
|
||||
if (fileInput && dropZone) {
|
||||
fileInput.addEventListener('change', (e) => {
|
||||
handleFileSelect((e.target as HTMLInputElement).files);
|
||||
});
|
||||
fileInput.addEventListener('click', () => {
|
||||
fileInput.value = '';
|
||||
});
|
||||
}
|
||||
|
||||
dropZone.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.add('bg-gray-700');
|
||||
});
|
||||
if (addMoreBtn && fileInput) {
|
||||
addMoreBtn.addEventListener('click', () => {
|
||||
fileInput.click();
|
||||
});
|
||||
}
|
||||
|
||||
dropZone.addEventListener('dragleave', (e) => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.remove('bg-gray-700');
|
||||
});
|
||||
if (clearFilesBtn) {
|
||||
clearFilesBtn.addEventListener('click', () => {
|
||||
files = [];
|
||||
updateUI();
|
||||
});
|
||||
}
|
||||
|
||||
dropZone.addEventListener('drop', (e) => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.remove('bg-gray-700');
|
||||
handleFileSelect(e.dataTransfer?.files ?? null);
|
||||
});
|
||||
if (processBtn) {
|
||||
processBtn.addEventListener('click', convert);
|
||||
}
|
||||
|
||||
fileInput.addEventListener('click', () => {
|
||||
fileInput.value = '';
|
||||
});
|
||||
}
|
||||
|
||||
if (addMoreBtn && fileInput) {
|
||||
addMoreBtn.addEventListener('click', () => {
|
||||
fileInput.click();
|
||||
});
|
||||
}
|
||||
|
||||
if (clearFilesBtn) {
|
||||
clearFilesBtn.addEventListener('click', () => {
|
||||
files = [];
|
||||
updateUI();
|
||||
});
|
||||
}
|
||||
|
||||
if (processBtn) {
|
||||
processBtn.addEventListener('click', convert);
|
||||
}
|
||||
|
||||
createIcons({ icons });
|
||||
createIcons({ icons });
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user