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.