Browsers include built-in support for spell checking, but this is not exposed to the web application through any programmatic way. Spell checking is activated by default for `<textarea>`s and elements marked as [[ContentEditable]], and can be opted into or out of by setting `spellcheck="{true,false}"`. # Differences Between Browsers Not all browsers implement spell checking the same way. Firefox will check the text in an element immediately when rendered, but Chrome and Safari usually won't. Instead, they'll check when typing or when interacting with a word. This means that you won't always see misspelled words on Chrome or Safari immediately, but this is browser behavior and not something that can be worked around. This can be seen even in a `<textarea>`. # Event Handling Applications will get `beforeinput` events before spelling corrections (or grammar changes, or AI text replacement/generation) are applied to the element. This allows for some form of interception or blocking, as needed. This event will receive the ranges that are being replaced/inserted. This is accessible via [InputEvent.getTargetRanges](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent/getTargetRanges). New text can then be retrieved using: ```javascript const newText = evt.data ?? evt.dataTransfer?.getData('text') ?? null; if (newText === null) { /* We couldn't retrieve the text. There's nothing to do. */ return; } ``` Offsets then need to be calculated. This involves a fair amount of work. An implementation of this is here: **GitHub:** [codemirror-speak-and-spell/src/cm5/cmUtils.ts](https://github.com/beanbaginc/codemirror-speak-and-spell/blob/master/src/cm5/cmUtils.ts) # Implementations ## Native-Integrating Spell Checking * [[CodeMirror Speak-and-Spell]] (by us at Beanbag) ## Non-Native Spell Checking * [WASM Spell Checking Plugin](https://github.com/justinwilaby/spellchecker-wasm) * Used by https://discuss.codemirror.net/t/showing-off-spellchecking-in-cm6-without-tricks/3254/3 for CodeMirror. * [CodeMirror-Spell-Checker](https://github.com/sparksuite/codemirror-spell-checker)