// Converts a dropped PDF and hands the result to the caller to store and open. function ImportPage({ onConverted, toast }) { const [busy, setBusy] = React.useState(false); const [note, setNote] = React.useState(''); const [err, setErr] = React.useState(''); const [scale, setScale] = React.useState(2); const [raster, setRaster] = React.useState('png'); const input = React.useRef(null); const [over, setOver] = React.useState(false); async function run(file) { if (!file) return; if (!/\.pdf$/i.test(file.name)) { setErr('That file is not a PDF.'); return; } setErr(''); setBusy(true); setNote('Reading the PDF…'); try { if (!window.PdfConvert) throw new Error('the converter is still loading, try again in a moment'); const out = await window.PdfConvert(file, setNote, { scale: Number(scale), raster }); setNote(''); toast(`Converted "${out.title}".`); onConverted(out); } catch (e) { setErr('Could not convert this PDF: ' + (e && e.message ? e.message : String(e))); } finally { setBusy(false); } } return (
!busy && input.current && input.current.click()} onKeyDown={(e) => { if (busy) return; if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); input.current.click(); } }} onFocus={() => setOver(true)} onBlur={() => setOver(false)} onDragOver={(e) => { e.preventDefault(); setOver(true); }} onDragLeave={(e) => { e.preventDefault(); setOver(false); }} onDrop={(e) => { e.preventDefault(); setOver(false); run(e.dataTransfer.files[0]); }} >
{busy ? (note || 'Working…') : 'Choose a PDF'}
{busy ? 'Converting in this browser. Nothing is uploaded.' : 'or drop one here'}
{ run(e.target.files[0]); e.target.value = ''; }} />
{err &&
{err}
}
What each layer can and cannot do
{[ ['Replica', 'chip-fixed', 'The page exactly as it prints, with the text sitting on it as real, selectable HTML in the PDF’s own fonts. Faithful to the pixel. It does not reflow, and editing a word does not repaint the picture underneath it.'], ['Structure', 'chip-recon', 'Headings, paragraphs and bullets rebuilt from the text runs. Edits, reflows and exports as clean HTML. It carries no layout, so a two-column page comes back as one column of blocks in reading order.'], ].map(([name, cls, body]) => (
{name}

{body}

))}
); } Object.assign(window, { ImportPage });