Find & Replace

A drop-in find & replace UI for the Compose Text Editor: a ready-made search bar, live-updating match highlighting, next/previous navigation, and replace / replace-all.

**Try it live: ** open the Find demo on Wasm »

implementation("com.darkrockstudios:composetexteditor-find:2.0.0")

Recipe

Create a FindState for your editor's state with rememberFindState, show the FindBar, and wire up the standard Ctrl/Cmd+F shortcut with Modifier.findShortcut:

@Composable
fun EditorWithFind() {
    val textState = rememberTextEditorState()
    val findState = rememberFindState(textState)
    var showFind by remember { mutableStateOf(false) }

    Column {
        AnimatedVisibility(visible = showFind) {
            FindBar(
                state = findState,
                onClose = { showFind = false },
            )
        }

        TextEditor(
            state = textState,
            modifier = Modifier
                .fillMaxSize()
                .findShortcut { showFind = !showFind },
        )
    }
}

The highlights update automatically as the user edits the text while a search is active.

Driving search from code

FindState exposes the full feature set if you want to build your own UI:

findState.search("needle")          // also: caseSensitive via toggleCaseSensitive()
findState.findNext()                // and findPrevious()
findState.replaceCurrent("thread")  // replace the active match, advance to the next
val replaced = findState.replaceAll("thread")
findState.clearSearch()

For a headless, one-shot search with no state object, use TextEditorState.findAll, which returns the matching TextEditorRanges in document order.

Packages

com.darkrockstudios.texteditor.find

common

Find & replace for the Compose Text Editor: the FindBar UI, the FindState holder and its rememberFindState factory, the findShortcut modifier, localizable FindBarStrings, and the match highlight styles.