Skip to content

Address slow responsiveness in CodeEditText #21

@dgmltn

Description

@dgmltn

Thanks a lot for your contribution to Compose MP!

Have you given any thought to performance? For instance, CodeEditText with the onValueChange -> highlights loop builds a new Highlights object on every keypress. This takes a long time, especially if code is long. But even if code is short, it is still too slow. Here's a video, trying to type "world":

Screen.Recording.2024-01-25.at.12.27.47.mov

One solution is to have a separate coroutine applying color to the new text after it has changed. The coroutine would be cancelled if the text changed again quickly, before the last round of colorization finished. But that's ok!

I might call it like this:

@Composable
fun CodeEditor2(
    code: String,
    onCodeChanged: (String) -> Unit,
    modifier: Modifier = Modifier,
) {
    val highlightBuilder = Highlights
        .Builder(
            language = SyntaxLanguage.JAVASCRIPT,
            theme = SyntaxThemes.darcula(true),
        )
    CodeEditText(
        modifier = modifier,
        code = code,
        onValueChange = onCodeChanged,
        highlightBuilder = highlightBuilder,
        colors = TextFieldDefaults.colors(),
    )
}

and the HighlightBuilder could be used internally, inside CodeEditText. At first I would expect new keys I type to just use a default color, and then after a short delay, their color might change.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions