monkeytypegame / monkeytypegame/monkeytype
Bug: HTML entity replacements missing semicolons (</>) — sliced entities render as garbage text in typed-word overlay
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 20.7k
- Forks
- 3.3k
- PR merge metrics
- No merged PRs in 30d
Description
Did you clear cache before opening an issue?
- I have cleared my cache
Is there an existing issue for this?
- I have searched the existing open and closed issues
Does the issue happen when logged in?
Yes
Does the issue happen when logged out?
Yes
Does the issue happen in incognito mode when logged in?
Yes
Does the issue happen in incognito mode when logged out?
Yes
Issue details
Current Behavior
Two spots replace < / > with HTML entities but omit the trailing semicolon, producing non-standard references that interact badly with .slice():
// frontend/src/ts/test/result-word-highlight.ts:314-319
inputWordEl.innerHTML = userInputString
.replace(/\t/g, "_")
.replace(/</g, "<") // no semicolon
.replace(/>/g, ">") // no semicolon
.slice(0, wordEl.childElementCount);
// frontend/src/ts/test/test-ui.ts:1405-1409 — same pattern
Because the slice happens after replacement, input ending in < gets truncated mid-entity (e.g. &l), which then renders as literal garbage text instead of <. Legacy-style semicolon-less entities also double-decode oddly when adjacent entity-like text exists in the typed string.
Expected Behavior
Replace before slicing with proper entities (or escape after slicing):
.replace(/</g, "<")
.replace(/>/g, ">")
Ideally both call sites would share one escaping helper (e.g. reuse Misc.escapeHTML from utils/misc.ts:137-145, which already escapes correctly).
Steps To Reproduce
- Type a word containing
<such that the input length exceeds the word length so.slice()cuts inside the appended entity (e.g. typeabc<against wordxyz). - Observe raw
&lfragments rendered in the input overlay instead of the<character.
Environment
- OS: Any
- Browser: Any
- Found via source review of
master@ 91bd24bb8
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading the two call sites in frontend/src/ts/test/result-word-highlight.ts and frontend/src/ts/test/test-ui.ts, then inspect Misc.escapeHTML in utils/misc.ts:137-145. Ensure both overlay paths escape the angle brackets before slicing without producing truncated entity text, and verify the reproduction no longer renders raw fragments such as &l.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 84/100