generated from coulomb/repo-seed
Add Debug text layer toggle for diagnosing PDF selection issues
PDF text selection misbehaviour (some glyphs unselectable, selections
jumping to other positions) is almost always caused by misalignment
between the visible canvas-rendered glyphs and the invisible text
layer that PDF.js overlays for selection. There's no way to see this
without devtools — which makes it hard for end users to tell whether
a specific PDF is OCR-noisy, has bad font fallbacks, or has no text
layer at all.
This adds a developer-facing toggle in the SessionMenu ("Debug text
layer") that:
- paints every text-layer span yellow with a blue outline so it's
obvious where text is selectable and where it isn't, and
- logs every onSelection event to the browser console with the
captured text, page, normalized rects, and the selectors the
pipeline derived from it.
Preference persists in localStorage under
`citation-evidence:debug:textLayer`. Surfaced via a new
`useDebugFlag()` hook in @work so the SessionMenu (app layer) and the
ViewerShell (work layer) can both subscribe without breaching the
boundary plugin.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
24
src/anchor/debug-textlayer.css
Normal file
24
src/anchor/debug-textlayer.css
Normal file
@@ -0,0 +1,24 @@
|
||||
/*
|
||||
* Debug overlay for PDF text layer alignment.
|
||||
*
|
||||
* The text layer is normally invisible (`opacity: 0`) and selectable.
|
||||
* When `.ce-debug-textlayer` is on a parent, every text span becomes a
|
||||
* yellow highlight so it's obvious where text is selectable and where it
|
||||
* isn't — useful for diagnosing OCR misalignment, scan-only PDFs, and
|
||||
* text-layer shift caused by font fallbacks.
|
||||
*
|
||||
* Toggle via the "Debug text layer" entry in SessionMenu.
|
||||
*/
|
||||
|
||||
.ce-debug-textlayer .textLayer {
|
||||
outline: 1px dashed rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.ce-debug-textlayer .textLayer > span,
|
||||
.ce-debug-textlayer .textLayer > br {
|
||||
background: rgba(255, 220, 0, 0.35) !important;
|
||||
color: rgba(0, 0, 100, 0.85) !important;
|
||||
opacity: 1 !important;
|
||||
/* Reveal the per-glyph span borders so misalignment is visible. */
|
||||
outline: 1px solid rgba(0, 100, 255, 0.25);
|
||||
}
|
||||
Reference in New Issue
Block a user