Spell Check
Spell checking for the Compose Text Editor: red squiggle underlines on misspelled words, tap-for-suggestions, and a pluggable checker backend. The editor's per-edit change stream means only the words you actually touch get re-checked.
**Try it live: ** open the Spell Check demo on Wasm »
implementation("com.darkrockstudios:composetexteditor-spellcheck:2.0.0")Recipe
Provide an EditorSpellChecker, build a SpellCheckState with rememberSpellCheckState, and use SpellCheckingTextEditor in place of TextEditor:
@Composable
fun SpellCheckedEditor(spellChecker: EditorSpellChecker) {
val state = rememberSpellCheckState(
spellChecker = spellChecker,
enableSpellChecking = true,
spellCheckMode = SpellCheckMode.Word,
)
SpellCheckingTextEditor(
state = state,
modifier = Modifier.fillMaxSize(),
)
}SpellCheckingTextEditor draws the squiggles and wires misspelled-word taps to a suggestion menu for you. Toggle checking at runtime with state.setSpellCheckingEnabled(...), or fetch suggestions yourself via state.getSuggestions(word).
Choosing a backend
EditorSpellChecker is the platform-agnostic contract the editor talks to. This module ships two adapters:
SymSpellEditorSpellChecker— backed by the SymSpell library. Pure Kotlin, works on every target (including Wasm); you supply the dictionary.PlatformEditorSpellChecker— delegates to the operating system's native spell checker (desktop, Android, iOS).
Construct whichever fits the target and pass it in:
// SymSpell, anywhere:
val symSpell = SymSpell(SpellCheckSettings(topK = 5)).apply { /* load a dictionary */ }
val checker: EditorSpellChecker = SymSpellEditorSpellChecker(symSpell)
// Or the OS checker on desktop / Android / iOS:
val checker: EditorSpellChecker = PlatformEditorSpellChecker(platformSpellChecker)With Markdown
To combine spell checking with Markdown import/export, wrap the state with SpellCheckState.withMarkdown and load content through importMarkdown so block elements are parsed:
val state = rememberSpellCheckState(spellChecker = spellChecker)
val markdown = remember(state) { state.withMarkdown() }
LaunchedEffect(markdown) { markdown.importMarkdown(source) }Spell checking for the Compose Text Editor: red squiggle underlines on misspelled words, tap-for-suggestions, and a pluggable checker backend. The editor's per-edit change stream means only the words you actually touch get re-checked.
**Try it live: ** open the Spell Check demo on Wasm »
implementation("com.darkrockstudios:composetexteditor-spellcheck:2.0.0")Recipe
Provide an EditorSpellChecker, build a SpellCheckState with rememberSpellCheckState, and use SpellCheckingTextEditor in place of TextEditor:
@Composable
fun SpellCheckedEditor(spellChecker: EditorSpellChecker) {
val state = rememberSpellCheckState(
spellChecker = spellChecker,
enableSpellChecking = true,
spellCheckMode = SpellCheckMode.Word,
)
SpellCheckingTextEditor(
state = state,
modifier = Modifier.fillMaxSize(),
)
}SpellCheckingTextEditor draws the squiggles and wires misspelled-word taps to a suggestion menu for you. Toggle checking at runtime with state.setSpellCheckingEnabled(...), or fetch suggestions yourself via state.getSuggestions(word).
Choosing a backend
EditorSpellChecker is the platform-agnostic contract the editor talks to. This module ships two adapters:
SymSpellEditorSpellChecker— backed by the SymSpell library. Pure Kotlin, works on every target (including Wasm); you supply the dictionary.PlatformEditorSpellChecker— delegates to the operating system's native spell checker (desktop, Android, iOS).
Construct whichever fits the target and pass it in:
// SymSpell, anywhere:
val symSpell = SymSpell(SpellCheckSettings(topK = 5)).apply { /* load a dictionary */ }
val checker: EditorSpellChecker = SymSpellEditorSpellChecker(symSpell)
// Or the OS checker on desktop / Android / iOS:
val checker: EditorSpellChecker = PlatformEditorSpellChecker(platformSpellChecker)With Markdown
To combine spell checking with Markdown import/export, wrap the state with SpellCheckState.withMarkdown and load content through importMarkdown so block elements are parsed:
val state = rememberSpellCheckState(spellChecker = spellChecker)
val markdown = remember(state) { state.withMarkdown() }
LaunchedEffect(markdown) { markdown.importMarkdown(source) }Spell checking for the Compose Text Editor: red squiggle underlines on misspelled words, tap-for-suggestions, and a pluggable checker backend. The editor's per-edit change stream means only the words you actually touch get re-checked.
**Try it live: ** open the Spell Check demo on Wasm »
implementation("com.darkrockstudios:composetexteditor-spellcheck:2.0.0")Recipe
Provide an EditorSpellChecker, build a SpellCheckState with rememberSpellCheckState, and use SpellCheckingTextEditor in place of TextEditor:
@Composable
fun SpellCheckedEditor(spellChecker: EditorSpellChecker) {
val state = rememberSpellCheckState(
spellChecker = spellChecker,
enableSpellChecking = true,
spellCheckMode = SpellCheckMode.Word,
)
SpellCheckingTextEditor(
state = state,
modifier = Modifier.fillMaxSize(),
)
}SpellCheckingTextEditor draws the squiggles and wires misspelled-word taps to a suggestion menu for you. Toggle checking at runtime with state.setSpellCheckingEnabled(...), or fetch suggestions yourself via state.getSuggestions(word).
Choosing a backend
EditorSpellChecker is the platform-agnostic contract the editor talks to. This module ships two adapters:
SymSpellEditorSpellChecker— backed by the SymSpell library. Pure Kotlin, works on every target (including Wasm); you supply the dictionary.PlatformEditorSpellChecker— delegates to the operating system's native spell checker (desktop, Android, iOS).
Construct whichever fits the target and pass it in:
// SymSpell, anywhere:
val symSpell = SymSpell(SpellCheckSettings(topK = 5)).apply { /* load a dictionary */ }
val checker: EditorSpellChecker = SymSpellEditorSpellChecker(symSpell)
// Or the OS checker on desktop / Android / iOS:
val checker: EditorSpellChecker = PlatformEditorSpellChecker(platformSpellChecker)With Markdown
To combine spell checking with Markdown import/export, wrap the state with SpellCheckState.withMarkdown and load content through importMarkdown so block elements are parsed:
val state = rememberSpellCheckState(spellChecker = spellChecker)
val markdown = remember(state) { state.withMarkdown() }
LaunchedEffect(markdown) { markdown.importMarkdown(source) }Packages
The spell-checking editor: SpellCheckingTextEditor, the SpellCheckState holder and its rememberSpellCheckState factory, and the SpellCheckMode (word vs. sentence) selector.
Ready-made EditorSpellChecker implementations: a SymSpell-backed checker and an OS-backed platform checker.
The backend contract: EditorSpellChecker and its value types (Correction, Suggestion). Implement this interface to plug in any spell-checking engine.
SpellCheckState.withMarkdown — adds Markdown import/export to a spell-checked editor.