Skip to content

feat: import custom text from PDFs and images (@RamChetanRCR) - #8471

Open
RamChetanRCR wants to merge 6 commits into
monkeytypegame:masterfrom
RamChetanRCR:feat/custom-text-pdf-image-import
Open

RamChetanRCR wants to merge 6 commits into
monkeytypegame:masterfrom
RamChetanRCR:feat/custom-text-pdf-image-import

Conversation

@RamChetanRCR

Copy link
Copy Markdown

Title:
feat: import custom text from PDFs and images (@RamChetanRCR)

Body:

Description

Custom text mode currently only accepts text you type or paste. If your source
is a PDF or an image (a scanned page, a screenshot, a document), there's no way
to practice typing it without copying it out by hand. This PR lets you import
that text directly.

Approach

All extraction runs in the browser — the file never leaves the device and
nothing is uploaded:

  • PDFs with a real text layer are read with pdf.js.
  • Images and scanned PDF pages (no text layer) are run through tesseract.js OCR.
  • The runtime files these libraries need (worker, wasm, language data, cmaps,
    standard fonts) are copied out of node_modules and served from our own
    origin via a small Vite plugin (frontend/vite-plugins/vendor-assets.ts), so
    nothing is requested from a third-party CDN. They're lazy-loaded only when a
    file is actually imported, and cached immutably (/vendor/**).

Extracted text is cleaned up for typing: wrapped lines are joined back into
paragraphs, running headers/footers and page numbers are removed, and
paragraphs are separated by a blank line. Source code in text-layer PDFs is
detected and kept with its line breaks and indentation instead of being
reflowed.

How to use it

  • "open file" button in the Custom Text modal — lets you review/edit before
    starting.
  • "upload" button next to the mode buttons — imports and starts a custom test
    immediately.

The modal also has tools to tidy imported text: keep/remove selection (trim to
a highlight, or delete highlighted chunks one at a time), convert to lowercase,
a live word count, and a short tip.

Supported types: .txt, .pdf, .png, .jpg/.jpeg, .webp, .bmp.

Notes / tradeoffs

  • Adds three dependencies: pdfjs-dist, tesseract.js, @tesseract.js-data/eng.
  • The OCR assets (tesseract core wasm + English language data, ~6 MB) download
    only the first time a user OCRs an image/scanned PDF, then stay cached.
    Text-layer PDFs never load them.
  • Imported code keeps its indentation in the text box, but the typing test
    itself collapses whitespace (word-based engine), so code isn't typed with
    live indentation — I considered that out of scope here.

Testing

  • Unit tests for the extraction/cleanup and the code-detection/layout logic.
  • Frontend lint, type-check and the full test suite pass.

RamChetanRCR and others added 6 commits October 6, 2026 00:48
- add an "upload" button beside the custom mode for direct pdf/image import
- add a "convert to lowercase" text tool in the custom text modal
- document the pdf/image import feature and its on-device stats

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- add keep/remove selection tools so users can trim imported text
  (remove supports clearing multiple scattered sections one at a time)
- show a live word count and an always-visible tip in the custom text modal
- auto-detect source code in text-layer PDFs and preserve line breaks and
  indentation instead of reflowing it
- separate paragraphs with a blank line so documents stay readable
- keep paragraph breaks when importing via the direct upload button
- render the typing words larger for file-imported custom text
- add test-pdf-import script and tests for code detection / layout

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- looksLikeCode now requires structural evidence (braces, line-final ;,
  operators, whole-line calls, preprocessor/import lines); code keywords and
  indentation only strengthen it, so technical prose with words like "class"
  or "return" is no longer misclassified
- add negative tests (technical prose, parentheticals) and multi-language
  positive tests (C), plus layout tests for large offsets and per-page indent
- clear customTextFromFile on paste (incl. mouse-only) via TextareaField onPaste
- document that reconstructed indentation is approximate and per-page
- document mixed text-layer/scanned PDF fallback behaviour

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Keep the typing font at the normal fontSize for file-imported custom text,
matching the rest of the test. Removes the customTextFromFile signal and all
its wiring (TestConfig, modal import/edit/paste handlers, TextareaField
onPaste).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@monkeytypegeorge monkeytypegeorge added frontend User interface or web stuff local dev Related to the build process or dependencies docs Related to Markdown files and documentation labels Oct 16, 2026
@socket-security

Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security
Vulnerability Quality Maintenance License
Added@​tesseract.js-data/​eng@​1.0.0621005679100
Addedpdfjs-dist@​4.10.3897100829580
Addedtesseract.js@​7.0.09310010085100

View full report

@RamChetanRCR RamChetanRCR changed the title Feat/custom text pdf image import feat: import custom text from PDFs and images (@RamChetanRCR) Oct 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs Related to Markdown files and documentation frontend User interface or web stuff local dev Related to the build process or dependencies

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants