Dev.ap/text overlay

[roedoejet]

PR Goal?

The goal of this PR is to see how far we can get with a text overlay in solving some outstanding issues with the studio.

Namely:

1. Localized g2p error handling
2. Better paragraph/page boundary highlighting
3. Ability to add do-not-align spans

Fixes?

Feedback sought?

Functionality mostly - I've only implemented the first 2 (and haven't done DNA spans yet). It's finnicky since we're relating word indices from tokenized XML back to plain text and the highlighting has to persist even when the tokenization changes (e.g. as a user is fixing the text). I think this would be easier with a rich text editor since we could update the structured text and then map it all to XML when we upload to the API, but it seems possible this way, without the bloat, but maybe with some extra cognitive overhead.

Priority?

medium

Tests added?

Lots of spec tests for various scenarios

How to test?

npx nx test:once studio-web

Confidence?

medium. I got a lot of help from Claude Sonnet ( after planning it all out with @joanise) and some of the overlay css and alignment logic I'm just "trusting" with the help of spec tests and my own personal use of the site.

TODO

• We can change the CSS for page/paragraph boundaries to be a little less loud. maybe also allow us to toggle it off
• I think we can remove the existing info button for page/paragraph boundaries and update it with add paragraph/page buttons
• I think the gutter icons for page/paragraph can be interactive (click to change/remove)
• We'll have to update the tour accordingly
• Add do-not-align segment UX
• Change and/or translate new toast message asking user to look at underlined g2p errored words

Version change?

[semanticdiff-com]

Review changes with  

Changed Files

File	Status
packages/studio-web/src/app/upload/upload.component.html	62% smaller
packages/studio-web/src/app/shared/shared.module.ts	58% smaller
packages/studio-web/src/app/shared/textarea-overlay/blank-line-runs.spec.ts	0% smaller
packages/studio-web/src/app/shared/textarea-overlay/blank-line-runs.ts	0% smaller
packages/studio-web/src/app/shared/textarea-overlay/document-words.spec.ts	0% smaller
packages/studio-web/src/app/shared/textarea-overlay/document-words.ts	0% smaller
packages/studio-web/src/app/shared/textarea-overlay/textarea-gutter.component.html	0% smaller
packages/studio-web/src/app/shared/textarea-overlay/textarea-gutter.component.sass	Unsupported file format
packages/studio-web/src/app/shared/textarea-overlay/textarea-gutter.component.spec.ts	0% smaller
packages/studio-web/src/app/shared/textarea-overlay/textarea-gutter.component.ts	0% smaller
packages/studio-web/src/app/shared/textarea-overlay/textarea-overlay.component.html	0% smaller
packages/studio-web/src/app/shared/textarea-overlay/textarea-overlay.component.sass	Unsupported file format
packages/studio-web/src/app/shared/textarea-overlay/textarea-overlay.component.spec.ts	0% smaller
packages/studio-web/src/app/shared/textarea-overlay/textarea-overlay.component.ts	0% smaller
packages/studio-web/src/app/shared/textarea-overlay/textarea-overlay.service.spec.ts	0% smaller
packages/studio-web/src/app/shared/textarea-overlay/textarea-overlay.service.ts	0% smaller
packages/studio-web/src/app/studio/studio.service.ts	0% smaller
packages/studio-web/src/app/upload/g2p-error-mapping.spec.ts	0% smaller
packages/studio-web/src/app/upload/g2p-error-mapping.ts	0% smaller
packages/studio-web/src/app/upload/upload.component.sass	Unsupported file format
packages/studio-web/src/app/upload/upload.component.spec.ts	0% smaller
packages/studio-web/src/app/upload/upload.component.ts	0% smaller

[github-actions]

PR Preview Action v1.6.3
🚀 View preview at https://ReadAlongs.github.io/Studio-Web/pr-preview/pr-583/
Built to branch gh-pages at 2026-07-03 15:41 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[joanise]

Some thoughts based on a first pass of testing

• I love the underline for g2p errors. That's clear and effective, just what we want.
• Agreed, the para and page styling need to be more muted. Red says error to me, and that's not what we want. Maybe grey for a paragraph and blue for a page?
• the paragraph and page markers show up too soon: if I type:
  • text + enter + text: I get a P marker as soon as I hit enter before I start writing the second sentence. But the result has not paragraph break because I entered text.
  • text + enter + enter + text: I get a page marker displayed before I start typing the second text
• instead, the P marker should show only only after typing text + enter + enter, and the page marker only after text + 3x enter. Maybe the simplest way to get there is to ignore the last document-final blank line, if any.
• tested on my phone, and it's really unstable, the cursor is not shown where it is logically located once there is a paragraph break.