{"id":23158,"date":"2022-12-13T19:21:58","date_gmt":"2022-12-13T19:21:58","guid":{"rendered":"https:\/\/mailinvest.blog\/index.php\/2022\/12\/13\/highlighting-text-input-with-jetpack-compose\/"},"modified":"2022-12-13T19:21:58","modified_gmt":"2022-12-13T19:21:58","slug":"highlighting-text-input-with-jetpack-compose","status":"publish","type":"post","link":"https:\/\/mailinvest.blog\/index.php\/2022\/12\/13\/highlighting-text-input-with-jetpack-compose\/","title":{"rendered":"Highlighting Text Input with Jetpack Compose"},"content":{"rendered":"

<\/a>\n<\/p>\n

\n

We recently launched a new feature at Buffer, called Ideas<\/a>. With Ideas, you can store all your best ideas, tweak them until they\u2019re ready, and drop them straight into your Buffer queue. Now that Ideas has launched in our web and mobile apps, we have some time to share some learnings from the development of this feature. In this blog post, we\u2019ll dive into how we added support for URL highlighting to the Ideas Composer on Android, using Jetpack Compose.<\/p>\n\n

We started adopting Jetpack Compose into our app in 2021 – using it as standard to build all our new features, while gradually adopting it into existing parts of our application. We built the whole of the Ideas feature using Jetpack Compose – so alongside faster feature development and greater predictability within the state of our UI, we had plenty of opportunities to further explore Compose and learn more about how to achieve certain requirements in our app.<\/p>\n

Within the Ideas composer, we support dynamic link highlighting. This means that if you type a URL into the text area, then the link will be highlighted – tapping on this link will then show an \u201cOpen link\u201d pop-up, which will launch the link in the browser when clicked.<\/p>\n

\"\"<\/figure>\n

In this blog post, we\u2019re going to focus on the link highlighting implementation and how this can be achieved in Jetpack Compose using the TextField<\/code> composable.<\/p>\n\n

For the Ideas composer, we\u2019re utilising the TextField<\/code> composable to support text entry. This composable contains an argument, visualTransformation<\/code>, which is used to apply visual changes to the entered text.<\/p>\n

TextField(\n    ...\n    visualTransformation = ...\n)<\/code><\/pre>\n
This argument requires a VisualTransformation<\/code> implementation which is used to apply the visual transformation to the entered text. If we look at the source code for this interface, we\u2019ll notice a filter function which takes the content of the TextField and returns a TransformedText<\/code> reference that contains the modified text.<\/p>\n
@Immutable\nfun interface VisualTransformation {\n    fun filter(text: AnnotatedString): TransformedText\n}<\/code><\/pre>\n
When it comes to this modified text, we are required to provide the implementation that creates a new AnnotatedString<\/code> reference with our applied changes. This changed content then gets bundled in the TransformedText<\/code> type and returned back to the TextField<\/code> for composition.<\/p>\n
So that we can define and apply transformations to the content of our TextField<\/code>, we need to start by creating a new implementation of the VisualTransformation<\/code> interface for which we\u2019ll create a new class, UrlTransformation<\/code>. This class will implement the VisualTransformation<\/code> argument, along with taking a single argument in the form of a Color<\/code>. We define this argument so that we can pass a theme color reference to be applied within our logic, as we are going to be outside of composable scope and won\u2019t have access to our composable theme.<\/p>\n
class UrlTransformation(\n    val color: Color\n) : VisualTransformation {\n\n}<\/code><\/pre>\n
With this class defined, we now need to implement the filter function from the VisualTransformation<\/code> interface. Within this function we\u2019re going to return an instance of the TransformedText<\/code> class – we can jump into the source code for this class and see that there are two properties required when instantiating this class.<\/p>\n
\/**\n * The transformed text with offset offset mapping\n *\/\nclass TransformedText(\n    \/**\n     * The transformed text\n     *\/\n    val text: AnnotatedString,\n\n    \/**\n     * The map used for bidirectional offset mapping from original to transformed text.\n     *\/\n    val offsetMapping: OffsetMapping\n)<\/code><\/pre>\n
Both of these arguments are required, so we\u2019re going to need to provide a value for each when instantiating the TransformedText<\/code> class.<\/p>\n
    \n
  • text<\/strong> – this will be the modified version of the text that is provided to the filter function<\/li>\n
  • offsetMapping<\/strong> – as per the documentation, this is the map used for bidirectional offset mapping from original to transformed text<\/li>\n<\/ul>\n
    class UrlTransformation(\n    val color: Color\n) : VisualTransformation {\n    override fun filter(text: AnnotatedString): TransformedText {\n        return TransformedText(\n            ...,\n            OffsetMapping.Identity\n        )\n    }\n}<\/code><\/pre>\n
    For the offsetMapping<\/code> argument, we simply pass the OffsetMapping.Identity<\/code> value – this is the predefined default value used for the OffsetMapping<\/code> interface, used for when that can be used for the text transformation that does not change the character count. When it comes to the text argument we\u2019ll need to write some logic that will take the current content, apply the highlighting and return it as a new AnnotatedString<\/code> reference to be passed into our TransformedText<\/code> reference. For this logic, we\u2019re going to create a new function, buildAnnotatedStringWithUrlHighlighting<\/code>. This is going to take two arguments – the text that is to be highlighted, along with the color to be used for the highlighting.<\/p>\n
    fun buildAnnotatedStringWithUrlHighlighting(\n    text: String, \n    color: Color\n): AnnotatedString {\n    \n}<\/code><\/pre>\n
    From this function, we need to return an AnnotatedString<\/code> reference, which we\u2019ll create using buildAnnotatedString<\/code>. Within this function, we\u2019ll start by using the append operation to set the textual content of the AnnotatedString<\/code>.<\/p>\n
    fun buildAnnotatedStringWithUrlHighlighting(\n    text: String, \n    color: Color\n): AnnotatedString {\n    return buildAnnotatedString {\n        append(text)\n    }\n}<\/code><\/pre>\n
    Next, we\u2019ll need to take the contents of our string and apply highlighting to any URLs that are present. Before we can do this, we need to identify the URLs in the string. URL detection might vary depending on the use case, so to keep things simple let\u2019s write some example code that will find the URLs in a given piece of text. This code will take the given string and filter the URLs, providing a list of URL strings as the result.<\/p>\n
    text?.split(\"\\\\s+\".toRegex())?.filter { word ->\n    Patterns.WEB_URL.matcher(word).matches()\n}<\/code><\/pre>\n
    Now that we know what URLs are in the string, we\u2019re going to need to apply highlighting to them. This is going to be in the form of an annotated string style, which is applied using the addStyle operation.<\/p>\n
    fun addStyle(style: SpanStyle, start: Int, end: Int)<\/code><\/pre>\n
    When calling this function, we need to pass the SpanStyle<\/code> that we wish to apply, along with the start and end index that this styling should be applied to. We\u2019re going to start by calculating this start and end index \u00a0– to keep things simple, we\u2019re going to assume there are only unique URLs in our string.<\/p>\n
    text?.split(\"\\\\s+\".toRegex())?.filter { word ->\n    Patterns.WEB_URL.matcher(word).matches()\n}.forEach {\n    val startIndex = text.indexOf(it)\n    val endIndex = startIndex + it.length\n}<\/code><\/pre>\n
    Here we locate the start index by using the indexOf<\/code> function, which will give us the starting index of the given URL. We\u2019ll then use this start index and the length of the URL to calculate the end index. We can then pass these values to the corresponding arguments for the addStyle<\/code> function.<\/p>\n
    text?.split(\"\\\\s+\".toRegex())?.filter { word ->\n    Patterns.WEB_URL.matcher(word).matches()\n}.forEach {\n    val startIndex = text.indexOf(it)\n    val endIndex = startIndex + it.length\n    addStyle(\n        start = startIndex, \n        end = endIndex\n    )\n}<\/code><\/pre>\n
    Next, we need to provide the SpanStyle<\/code> that we want to be applied to the given index range. Here we want to simply highlight the text using the provided color, so we\u2019ll pass the color value from our function arguments as the color argument for the SpanStyle<\/code> function.<\/p>\n
    <\/p>\n
    text?.split(\"\\\\s+\".toRegex())?.filter { word ->\n    Patterns.WEB_URL.matcher(word).matches()\n}.forEach {\n    val startIndex = text.indexOf(it)\n    val endIndex = startIndex + it.length\n    addStyle(\n        style = SpanStyle(\n            color = color\n        ),\n        start = startIndex, \n        end = endIndex\n    )\n}\n<\/code><\/pre>\n
    <\/p>\n
    With this in place, we now have a complete function that will take the provided text and highlight any URLs using the provided Color<\/code> reference.<\/p>\n
    fun buildAnnotatedStringWithUrlHighlighting(\n    text: String, \n    color: Color\n): AnnotatedString {\n    return buildAnnotatedString {\n        append(text)\n        text?.split(\"\\\\s+\".toRegex())?.filter { word ->\n            Patterns.WEB_URL.matcher(word).matches()\n        }.forEach {\n            val startIndex = text.indexOf(it)\n            val endIndex = startIndex + it.length\n            addStyle(\n                style = SpanStyle(\n                    color = color,\n                    textDecoration = TextDecoration.None\n                ),\n                start = startIndex, end = endIndex\n            )\n        }\n    }\n}<\/code><\/pre>\n
    We\u2019ll then need to hop back into our UrlTransformation<\/code> class and pass the result of the buildAnnotatedStringWithUrlHighlighting<\/code> function call for the TransformedText<\/code> argument.<\/p>\n
    class UrlTransformation(\n    val color: Color\n) : VisualTransformation {\n    override fun filter(text: AnnotatedString): TransformedText {\n        return TransformedText(\n            buildAnnotatedStringWithUrlHighlighting(text, color),\n            OffsetMapping.Identity\n        )\n    }\n}<\/code><\/pre>\n
    Now that our UrlTransformation<\/code> implementation is complete, we can instantiate this and pass the reference for the visualTransformation<\/code> \u00a0argument of the TextField<\/code> composable. Here we are using the desired color from our MaterialTheme<\/code> reference, which will be used when highlighting the URLs in our TextField<\/code> content.<\/p>\n
    TextField(\n    ...\n    visualTransformation = UrlTransformation(\n        MaterialTheme.colors.secondary)\n)<\/code><\/pre>\n\n
    With the above in place, we now have dynamic URL highlighting support within our TextField<\/code> composable. This means that now whenever the user inserts a URL into the composer for an Idea, we identify this as a URL by highlighting it using a the secondary color from our theme.<\/p>\n
    \"\"<\/figure>\n
    In this post, we\u2019ve learnt how we can apply dynamic URL highlighting to the contents of a TextField<\/code> composable. In the next post, we\u2019ll explore how we added the \u201cOpen link\u201d pop-up when a URL is tapped within the composer input area.<\/p>\n