Spellcheck: Live check

[robinbisping]

Relations:

• Resolves: https://app.notion.com/p/livingdocsio/Spellcheck-Live-check-3b3c559571d6811184e3d153c2e7a15f
• Editor PR: https://github.com/livingdocsIO/livingdocs-editor/pull/11445
• Server PR: https://github.com/livingdocsIO/livingdocs-server/pull/9840

Description

Spellchecking needs to underline mistakes in a text, but a mistake is not part of the document. The existing highlighting wraps text in marker elements, which would put the underlines into the content. This adds a second way to highlight, built on the CSS Custom Highlight API. The browser paints the ranges and the DOM stays untouched.

• setCssHighlight({name, ranges}) highlights character ranges under a name. One call can cover ranges in many editables, and it replaces everything held under that name. The look is up to the consumer through the ::highlight() selector.
• deleteCssHighlight({name}) removes the highlights of a name and forgets where they were.
• getCssHighlightText({editableHost}) returns the text of an editable without its markup. This is the text the character offsets count against.
• getCssHighlightCursorOffset({editableHost}) returns the cursor position as a character offset in that text, which tells a caller which highlight the cursor sits in.
• getCssHighlightRects({editableHost, start, end}) returns where a character range sits on screen, so a caller can place a popover next to it.
• replaceCssHighlight({editableHost, start, end, text}) replaces a character range with new text, dispatched like any other edit.

Changelog

• 🎁 New API to highlight character ranges in an editable without changing its content, based on the CSS Custom Highlight API. Highlights survive markup changes such as comments and formatting.

[ajwild]

My main question would be whether something introduced in Firefox in March 2026 is ready for roll-out, I've been thinking about this for comments, but I wasn't sure we could move forward with it until March 2027. I'll try to dig into how things work on older versions of Firefox.

[robinbisping]

My main question would be whether something introduced in Firefox in March 2026 is ready for roll-out, I've been thinking about this for comments, but I wasn't sure we could move forward with it until March 2027. I'll try to dig into how things work on older versions of Firefox.

Ah, I have a misunderstood it then. I thought we discussed this briefly in a team meeting and the conclusion was that we should move forward with CSS highlights even though Firefox just introduced support for it.

Realisticly this feature will only be rolled out beginning of next year anyway. No customer has signed a contract yet. So that makes the Firefox issue a bit less severe. But of course we'd still break our own promise.

What we need for sure is error handling if the feature is not supported. That's still lacking.

Let's discuss in the meeting how to proceed here. :)

[ajwild]

Sorry, you're right, I'd forgotten about that discussion. It's also a great point about the expected roll-out date - we'll be around 1 year of browser support by then anyway. We should just bump the supported browser versions listed on the technical release notes whenever a customer starts to use it.