.
-
Implementing a custom spell checker. That's done by companies like Grammarly and WebSpellChecker. They use spellcheck=false to disable the native spell checker globally for the entire editing host and then render some squiggles by adding s do the DOM. The problem here is that you cannot easily integrate your spell checking engine with all (or most) rich text editor at once. Most modern rich text editors have an architecture which does not allow any other JS app to modify that editor's DOM. Modifying their DOM directly either have no effect (the editor reverts that) or crashes that editor. This is a case with Grammarly which had to be disabled in Medium, CKEditor 5, Draft, etc. A solution to that would be if we were able to render squiggles or any other text decoration without actually touching the DOM. I call it "range decoration". I'm not sure how (and if) this can be implemented by browsers – i.e. how to make ranges controlled via CSS. Theoretically, this could work similarly to ::selection, like this:
-
Implementing a custom spell checker. That's done by companies like Grammarly and WebSpellChecker. They use spellcheck=false to disable the native spell checker globally for the entire editing host and then render some squiggles by adding s do the DOM.
The problem here is that you cannot easily integrate your spell checking engine with all (or most) rich text editor at once. Most modern rich text editors have an architecture which does not allow any other JS app to modify that editor's DOM. Modifying their DOM directly either have no effect (the editor reverts that) or crashes that editor. This is a case with Grammarly which had to be disabled in Medium, CKEditor 5, Draft, etc.
A solution to that would be if we were able to render squiggles or any other text decoration without actually touching the DOM. I call it "range decoration". I'm not sure how (and if) this can be implemented by browsers – i.e. how to make ranges controlled via CSS. Theoretically, this could work similarly to ::selection, like this:
- Test Test
-
Test
Test
-
Test
Test
hello
- Test
Test
hello