highlighted-text-compose

Convenience composable functions to highlight bits of texts

How can i use it?

Just add this to your settings.gradle:

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven { url 'https://jitpack.io' }
    }
}

Then, in your build.gradle:

	dependencies {
	        implementation 'com.github.ygorluizfrazao.highlighted-text-compose:highlighted_text_compose:VERSION_TAG'
	}

What it does?

Have you ever used buildAnnotatedString function? if yes, you know you will have a lot of rework for each spannable you want to build. This lib is a convenience to cover most use cases. For me, it was created to highlight sentences in a random text, like:

There are two functions that you can use to achieve that result:

@Composable
fun HighlightedText(
    text: String,
    highlightedSentences: List<String>,
    normalTextSpanStyle: SpanStyle,
    highlightedSentencesTextSpanStyle: SpanStyle,
    ignoreCase: Boolean = true,
    content: (@Composable (AnnotatedString) -> Unit)
)

Which will pass the result in a lambda Composable block.

And

@Composable
fun highlightedText(
    text: String,
    highlightedSentences: List<String>,
    normalTextSpanStyle: SpanStyle,
    highlightedSentencesTextSpanStyle: SpanStyle,
    ignoreCase: Boolean = true
): AnnotatedString 

Which will return an AnnotatedString.

In the above example, something like this was used:

HighlightedText(
    text = note.text,
    highlightedSentences = highlightSentences,
    normalTextSpanStyle = MaterialTheme.typography.bodyMedium.toSpanStyle(),
    highlightedSentencesTextSpanStyle = MaterialTheme.typography.bodyMedium.copy(
        color = LocalTextSelectionColors.current.handleColor,
        background = LocalTextSelectionColors.current.backgroundColor
    ).toSpanStyle()
) {
    Text(
        modifier = Modifier
            .padding(top = MaterialTheme.spacing.small),
        textAlign = TextAlign.Justify,
        text = it,
        style = MaterialTheme.typography.bodyMedium
    )
}

Clickable Text

It is included a wraper to material3 ClickableText as well, as the submodule depedency:

	dependencies {
	        implementation 'com.github.ygorluizfrazao.highlighted-text-compose:reusable_clickable_text:VARSION_NAME'
	}

Can produce results like this:

with the signature:

@Composable
fun ReusableClickableText(
    modifier: Modifier = Modifier,
    text: String,
    clickableParts: Map<String, (String) -> Unit>,
    normalTextSpanStyle: SpanStyle,
    clickableTextSpanStyle: SpanStyle = normalTextSpanStyle.copy(color = Color.Blue)
)

In the above case, the function is used like this:

ReusableClickableText(
    modifier = Modifier.padding(top = MaterialTheme.spacing.small),
    text = "Click here to clear search query",
    clickableParts = mapOf("here" to { viewModel.clearFilter() }),
    normalTextSpanStyle = LocalTextStyle.current.toSpanStyle()
        .copy(color = LocalContentColor.current)
)

And, that's all, hope it can help you.

Other notes

You can do whatever you see fancy with the code.