Customizing background colors for text links

[johnjohndoe]

Environment

• multiplatform-markdown-renderer 0.30.0
• Android app (Kotlin 2.1.0, Compose UI 2024.12.01)

Context

• I am migration from XML based layout to Compose UI.
• The Markdown text contains inline links and "standalone" links.
• Links are correctly marked up in the source, e.g. [Example link](https://example.com).
• multiplatform-markdown-renderer correctly detects links, applies color and makes them clickable.

Use case

• I want to be able to set a background color for text links when they are pressed to provide visual feedback to users.
• This improves accessibility and allows to notice which link is pressed in cases when they are close to each other.
• Example (still XML based):

Screen_recording_20250130_173923.mp4

Feature request

• Allow to define background colors for text links.
  • A background color per interaction state seems reasonable to me: normal, focused, hovered, pressed (see TextLinkStyles).

Related

• androidx.compose.ui.text.TextLinkStyles
• Make links in text stylable via the MarkdownTypography class #217
• Suggested code rendering improvements #132
• Add background for inline code blocks #81

[mikepenz]

You can provide background color via the link textStyle:

Markdown(
                MARKDOWN,
                imageTransformer = Coil3ImageTransformerImpl,
                typography = markdownTypography(
                    link = MaterialTheme.typography.body1.copy(
                        fontWeight = FontWeight.Bold,
                        textDecoration = TextDecoration.Underline,
                        background = Color.Red
                    ),
                ),
                extendedSpans = markdownExtendedSpans {
                    remember {
                        ExtendedSpans(
                            RoundedCornerSpanPainter(),
                        )
                    }
                },
            )

setting background will also then result in the RoundedCornerSpanPainter making the background get rounded corners

[johnjohndoe]

Thank you for the hint. Is there a way to apply the background only when the link is pressed?

[mikepenz]

The links are styled purely with an annotated string. I don't believe TextStyle or SpanStyle do support that directly

[johnjohndoe]

Would you be open to change the implementation to TextLinkStyles?

[mikepenz]

Oh that was added in compose 1.7.x - that's quite a nice API addition, however it also means some significant refactoring as all the link handling right now is based on logic required prior to compose 1.6.x and I think most of it can probably now be dropped.

However it also does not play well with the extended spans feature, so I first need to add compatiblity

[johnjohndoe]

Thank you for the clarification. Please take your time.
If I can be of any help (pull request review, testing a draft, ...) let me know.

[mikepenz]

just completed the rework of the extended-spans to support it. It won't support different interactions at this time - so your usecase will only be supported without the use of the squiggly underline.

[mikepenz]

PR opened here: #294

[johnjohndoe]

It works like a charm. I successfully tested the feature with version 0.31.0-b03. Thank you very much for the quick implementation.

I am looking forward to the release version.