[sergeleger]

PR Goal?

Fixes the issue where the title and sub-title elements would disappear from the page.

Fixes?

Fixes #587

Feedback sought?

That is works as intended. I've verified Safari and Chrome on macOS.

Priority?

Low.

Tests added?

No.

How to test?

This is a web component bug, using the Studio Web editor import an offline HTML file:

• click on the title of the read-along
• "Select all" CTRL-A (CMD-A)
• press delete or backspace
• the element remains and you can type a new title

Confidence?

Medium.

Version change?

[semanticdiff-com]

Review changes with  

Changed Files

File	Status
packages/studio-web/src/app/editor/editor.component.ts	7% smaller
packages/web-component/src/components/read-along-component/read-along.tsx	0% smaller
packages/web-component/src/scss/modules/_slots.scss	Unsupported file format

[github-actions]

PR Preview Action v1.6.3
Preview removed because the pull request was closed.
2026-10-19 21:35 UTC

[joanise]

In the Studio tab, we show these placeholders when there is no text

can we do the same in the Editor tab?

[joanise]

I can confirm it works nicely, though, thanks! I can click in the right place and edit, but it's relying on the user remembering that that's where the title and subtitle go and remembering they can do that.

[joanise]

Also, I'm planning to merge I have merged my Angular 22 migration today, I don't expect that will break this PR, but it'll be worth re-testing.

[joanise]

todo: rebase and retest; check if you can use placeholder text instead of a non-breaking space

[sergeleger]

In Studio Web, the elements are <input placeholder="" /> elements so we get the placeholder functionality for free.

In the web component title and subtitle are <span contenteditable /> elements with no native placeholder functionality. I've recreated placeholder functionality:

but the optimal CSS solution requires the <span /> element be rendered as a "block" element (like a div element), so the focus border is full-width.

I'll rebase and push the new commit so you can try it out.

[joanise]

Very nice. The only minor thing is that now if there is no subtitle, there is a gap between the title and the readalong and that gap is still there in the downloaded artefacts. Ditto if there is no title, or neither, the spaces remain occupied in the downloaded artefacts. Not really an issue for a standalone readalong or a page with just one, but I could see it being frustrating if someone was trying to embed multiple readalongs in one web page, or tried to place their own framing around our component.

[joanise]

Beautiful. Thank you for this fix and the subsequent adjustments to it.

[joanise]

Question: this touches read-along.tsx, which usually means we need to release the updated web-component to npm, but in this case I think it's a change that's only needed when you're running the editor, and therefore we don't actually need to publish the web component just for this change. Is that correct?

Update: I tested a web bundle downloaded using the PR preview, and it works fine with the latest web-component on npmjs, so I'm confident this is correct, there is no need to publish.