feat: Enhance PDF tools with new reorder and watermark removal functionalities

- Added tests for rotating PDFs, removing watermarks, and reordering pages in the backend.
- Implemented frontend logic to read page counts from uploaded PDFs and validate page orders.
- Updated internationalization files to include new strings for reorder and watermark removal features.
- Improved user feedback during page count reading and validation in the Reorder PDF component.
- Ensured that the reorder functionality requires a complete permutation of pages.
This commit is contained in:
Your Name
2026-03-11 14:21:25 +02:00
parent e4e3b9fe2d
commit e06e64f85f
8 changed files with 641 additions and 69 deletions

View File

@@ -2,6 +2,8 @@ import { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Helmet } from 'react-helmet-async';
import { ArrowUpDown } from 'lucide-react';
import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist';
import pdfWorker from 'pdfjs-dist/build/pdf.worker.min.mjs?url';
import FileUploader from '@/components/shared/FileUploader';
import ProgressBar from '@/components/shared/ProgressBar';
import DownloadButton from '@/components/shared/DownloadButton';
@@ -11,10 +13,15 @@ import { useTaskPolling } from '@/hooks/useTaskPolling';
import { generateToolSchema } from '@/utils/seo';
import { useFileStore } from '@/stores/fileStore';
GlobalWorkerOptions.workerSrc = pdfWorker;
export default function ReorderPdf() {
const { t } = useTranslation();
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
const [pageOrder, setPageOrder] = useState('');
const [pageCount, setPageCount] = useState<number | null>(null);
const [pageCountError, setPageCountError] = useState<string | null>(null);
const [isReadingPageCount, setIsReadingPageCount] = useState(false);
const {
file, uploadProgress, isUploading, taskId,
@@ -38,13 +45,130 @@ export default function ReorderPdf() {
if (storeFile) { selectFile(storeFile); clearStoreFile(); }
}, []); // eslint-disable-line react-hooks/exhaustive-deps
useEffect(() => {
let cancelled = false;
let loadingTask: ReturnType<typeof getDocument> | null = null;
async function detectPageCount(selectedFile: File) {
setIsReadingPageCount(true);
setPageCount(null);
setPageCountError(null);
try {
const data = new Uint8Array(await selectedFile.arrayBuffer());
loadingTask = getDocument({ data });
const pdf = await loadingTask.promise;
if (!cancelled) {
setPageCount(pdf.numPages);
}
} catch {
if (!cancelled) {
setPageCountError(t('tools.reorderPdf.pageCountFailed'));
}
} finally {
if (!cancelled) {
setIsReadingPageCount(false);
}
void loadingTask?.destroy();
}
}
if (!file) {
setPageCount(null);
setPageCountError(null);
setIsReadingPageCount(false);
return undefined;
}
void detectPageCount(file);
return () => {
cancelled = true;
void loadingTask?.destroy();
};
}, [file, t]);
const getPageOrderError = (): string | null => {
if (!pageOrder.trim()) {
return null;
}
if (isReadingPageCount) {
return t('tools.reorderPdf.readingPageCount');
}
if (pageCountError) {
return pageCountError;
}
if (pageCount === null) {
return null;
}
const parts = pageOrder
.split(',')
.map((part) => part.trim())
.filter(Boolean);
if (parts.length === 0 || parts.some((part) => !/^\d+$/.test(part))) {
return t('tools.reorderPdf.orderInvalidFormat');
}
const values = parts.map((part) => Number(part));
const outOfRange = [...new Set(values.filter((page) => page < 1 || page > pageCount))];
const seen = new Set<number>();
const duplicates: number[] = [];
for (const page of values) {
if (seen.has(page) && !duplicates.includes(page)) {
duplicates.push(page);
}
seen.add(page);
}
const missing: number[] = [];
for (let page = 1; page <= pageCount; page += 1) {
if (!seen.has(page)) {
missing.push(page);
}
}
if (outOfRange.length === 0 && duplicates.length === 0 && missing.length === 0 && values.length === pageCount) {
return null;
}
const details: string[] = [];
if (outOfRange.length > 0) {
details.push(t('tools.reorderPdf.orderOutOfRange', { pages: outOfRange.join(', ') }));
}
if (missing.length > 0) {
details.push(t('tools.reorderPdf.orderMissingPages', { pages: missing.join(', ') }));
}
if (duplicates.length > 0) {
details.push(t('tools.reorderPdf.orderDuplicatePages', { pages: duplicates.join(', ') }));
}
return `${t('tools.reorderPdf.orderMustIncludeAllPages', { count: pageCount })} ${details.join(' ')}`.trim();
};
const pageOrderError = getPageOrderError();
const canSubmit = Boolean(file && pageOrder.trim() && !pageOrderError && !isUploading);
const handleUpload = async () => {
if (!pageOrder.trim()) return;
if (!canSubmit) return;
const id = await startUpload();
if (id) setPhase('processing');
};
const handleReset = () => { reset(); setPhase('upload'); setPageOrder(''); };
const handleReset = () => {
reset();
setPhase('upload');
setPageOrder('');
setPageCount(null);
setPageCountError(null);
setIsReadingPageCount(false);
};
const schema = generateToolSchema({
name: t('tools.reorderPdf.title'),
@@ -96,8 +220,23 @@ export default function ReorderPdf() {
<p className="mt-2 text-xs text-slate-400 dark:text-slate-500">
{t('tools.reorderPdf.orderHint')}
</p>
{isReadingPageCount && (
<p className="mt-2 text-xs text-slate-500 dark:text-slate-400">
{t('tools.reorderPdf.readingPageCount')}
</p>
)}
{!isReadingPageCount && pageCount !== null && (
<p className="mt-2 text-xs text-slate-500 dark:text-slate-400">
{t('tools.reorderPdf.pageCount', { count: pageCount })}
</p>
)}
{pageOrderError && (
<div className="mt-3 rounded-xl bg-red-50 p-3 ring-1 ring-red-200 dark:bg-red-900/20 dark:ring-red-800">
<p className="text-sm text-red-700 dark:text-red-400">{pageOrderError}</p>
</div>
)}
</div>
<button onClick={handleUpload} disabled={!pageOrder.trim()}
<button onClick={handleUpload} disabled={!canSubmit}
className="btn-primary w-full disabled:opacity-50 disabled:cursor-not-allowed">
{t('tools.reorderPdf.shortDesc')}
</button>