// Reads the plain text of a rich-text node in the document model.
function textOf(rich) {
if (!rich || !Array.isArray(rich.runs)) return '';
return rich.runs.map((r) => r.text || '').join('');
}
// Replaces the text of a rich-text node, keeping the node shape.
function setText(rich, value) {
return { runs: [{ ...(rich && rich.runs && rich.runs[0] ? rich.runs[0] : {}), text: value }] };
}
// Renders the reconstructed blocks as an editable, reflowable HTML document.
function structureHtml(doc) {
const esc = (s) => String(s ?? '').replace(/[&<>]/g, (c) => ({ '&': '&', '<': '<', '>': '>' }[c]));
const block = (b) => {
if (b.type === 'section') {
return `${esc(textOf(b.title))} \n${(b.body || []).map(block).join('\n')}\n${b.items.map((i) => ` ${esc(textOf(i))} `).join('\n')}\n `;
}
return `${esc(textOf(b.content))}
`;
};
const pages = doc.pages.map((p) => `\n${p.blocks.map(block).join('\n')}\n `).join('\n');
return `
${esc(doc.title)}
${pages}
`;
}
// Saves a string to a file the browser downloads.
function saveAs(text, name, type) {
const blob = new Blob([text], { type: type || 'text/html' });
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = name;
a.click();
setTimeout(() => URL.revokeObjectURL(a.href), 1000);
}
// Edits one block of the structure in place.
function BlockEditor({ block, onChange }) {
if (block.type === 'section') {
return (
Heading
onChange({ ...block, title: setText(block.title, e.target.textContent) })}>
{textOf(block.title)}
{!!(block.body || []).length && (
{block.body.map((child, i) => (
{
const body = block.body.slice();
body[i] = next;
onChange({ ...block, body });
}} />
))}
)}
);
}
if (block.type === 'bullets') {
return (
List
{block.items.map((item, i) => (
{
const items = block.items.slice();
items[i] = setText(item, e.target.textContent);
onChange({ ...block, items });
}}>
{textOf(item)}
))}
);
}
return (
onChange({ ...block, content: setText(block.content, e.target.textContent) })}>
{textOf(block.content)}
);
}
// Shows one converted document as a replica, as editable structure, or both.
function DocumentPage({ record, onSave, toast }) {
const [view, setView] = React.useState('replica');
const [doc, setDoc] = React.useState(record.doc);
const [dirty, setDirty] = React.useState(false);
React.useEffect(() => { setDoc(record.doc); setDirty(false); setView('replica'); }, [record.id]);
const s = record.stats || {};
const measured = s.runs ? Math.round((s.measuredRuns / s.runs) * 100) : 0;
function editBlock(pageIndex, blockIndex, next) {
const pages = doc.pages.slice();
const blocks = pages[pageIndex].blocks.slice();
blocks[blockIndex] = next;
pages[pageIndex] = { ...pages[pageIndex], blocks };
const updated = { ...doc, pages };
setDoc(updated);
setDirty(true);
}
function save() {
onSave({ ...record, doc });
setDirty(false);
toast('Saved.');
}
return (
saveAs(record.html, record.title + '.html')}>
Replica .html
saveAs(structureHtml(doc), record.title + '-structure.html')}>
Structure .html
{dirty ? 'Save changes' : 'Saved'}
}
/>
= 90 ? 'success' : measured >= 50 ? 'warning' : 'danger'} />
{measured < 100 && (
{s.runs - s.measuredRuns} of {s.runs} runs were placed from a fallback ascent rather than
the embedded face. Those baselines are approximate.
)}
{(record.warnings || []).map((w, i) => (
{w}
))}
{[['replica', 'Replica'], ['structure', 'Structure']].map(([id, name]) => (
setView(id)}>{name}
))}
{view === 'replica' && (
The page as it prints, with the text lifted onto it. Press Onionskin inside the frame to
fade the picture back and read what was actually recovered.
)}
{view === 'structure' && (
Click any block to edit it. This is a reconstruction, so it carries reading order and not
layout; the replica is unaffected by what you change here.
{doc.pages.map((page, pi) => (
Page {page.n}
{page.blocks.map((b, bi) => (
editBlock(pi, bi, next)} />
))}
{!page.blocks.length && (
No block was reconstructed from this page. That happens when the page carries no
text layer, which is what a scan looks like.
)}
))}
)}
);
}
Object.assign(window, { DocumentPage, structureHtml, saveAs });