Merge pull request #49 from openai/bjd/rich-text-decoration

Dotted and dashed underline support for annotated links

Author: bjdodson-openai

android-sample/src/main/java/com/zachklipp/richtext/sample/Demo.kt

@@ -13,6 +13,8 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.TextLinkStyles
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.halilibo.richtext.ui.BlockQuote
@@ -32,6 +34,13 @@ import com.halilibo.richtext.ui.RichTextStyle
 import com.halilibo.richtext.ui.Table
 import com.halilibo.richtext.ui.WithStyle
 import com.halilibo.richtext.ui.material3.RichText
+import com.halilibo.richtext.ui.string.LinkDecoration
+import com.halilibo.richtext.ui.string.RichTextDecorations
+import com.halilibo.richtext.ui.string.RichTextString
+import com.halilibo.richtext.ui.string.Text as RichTextText
+import com.halilibo.richtext.ui.string.UnderlineStyle
+import com.halilibo.richtext.ui.string.richTextString
+import com.halilibo.richtext.ui.string.withFormat
 
 @Preview(widthDp = 300, heightDp = 1000)
 @Composable fun RichTextDemoOnWhite() {
@@ -61,6 +70,36 @@ import com.halilibo.richtext.ui.material3.RichText
     Text("Simple paragraph.")
     Text("Paragraph with\nmultiple lines.")
     Text("Paragraph with really long line that should be getting wrapped.")
+    val bodyTextColor = LocalContentColor.current
+    val dottedLinkDecorations = RichTextDecorations(
+      linkDecorations = listOf(
+        LinkDecoration(
+          matcher = { destination, _ -> destination.contains("dotted") },
+          underlineStyle = UnderlineStyle.Dotted(),
+          linkStyleOverride = { base ->
+            TextLinkStyles(
+              style = (base?.style ?: SpanStyle()).copy(color = bodyTextColor),
+              focusedStyle = base?.focusedStyle?.copy(color = bodyTextColor),
+              hoveredStyle = base?.hoveredStyle?.copy(color = bodyTextColor),
+              pressedStyle = base?.pressedStyle?.copy(color = bodyTextColor),
+            )
+          },
+        ),
+      ),
+    )
+    val dottedUnderlineText = richTextString {
+      append("Dotted underline with wrapping: ")
+      withFormat(RichTextString.Format.Link("https://example.com/dotted")) {
+        append(
+          "This is a long link that should wrap across multiple lines to show the " +
+              "dotted underline.",
+        )
+      }
+    }
+    RichTextText(
+      text = dottedUnderlineText,
+      decorations = dottedLinkDecorations,
+    )
     TextPreview()
 
     Heading(0, "Lists")

android-sample/src/main/java/com/zachklipp/richtext/sample/MarkdownSample.kt

@@ -48,7 +48,10 @@ import com.halilibo.richtext.ui.RichTextStyle
 import com.halilibo.richtext.ui.material3.RichText
 import com.halilibo.richtext.ui.resolveDefaults
 import com.halilibo.richtext.ui.string.MarkdownAnimationState
+import com.halilibo.richtext.ui.string.LinkDecoration
+import com.halilibo.richtext.ui.string.RichTextDecorations
 import com.halilibo.richtext.ui.string.RichTextRenderOptions
+import com.halilibo.richtext.ui.string.UnderlineStyle
 
 @Preview
 @Composable private fun MarkdownSamplePreview() {
@@ -125,13 +128,31 @@ import com.halilibo.richtext.ui.string.RichTextRenderOptions
           val astNode = remember(parser) {
             parser.parse(sampleMarkdown)
           }
+          val richTextDecorations = remember {
+            RichTextDecorations(
+              linkDecorations = listOf(
+                LinkDecoration(
+                  matcher = { destination, _ -> destination.contains("dotted") },
+                  underlineStyle = UnderlineStyle.Dotted(),
+                ),
+                LinkDecoration(
+                  matcher = { destination, _ -> destination.contains("dashed") },
+                  underlineStyle = UnderlineStyle.Dashed(),
+                ),
+              ),
+            )
+          }
 
           ProvideToastUriHandler(context) {
             RichText(
               style = richTextStyle,
               modifier = Modifier.padding(8.dp),
             ) {
-              BasicMarkdown(astNode, astBlockNodeComposer = HeadingAstBlockNodeComposer)
+              BasicMarkdown(
+                astNode = astNode,
+                richTextDecorations = richTextDecorations,
+                astBlockNodeComposer = HeadingAstBlockNodeComposer,
+              )
             }
           }
         }
@@ -150,6 +171,7 @@ val HeadingAstBlockNodeComposer = object : AstBlockNodeComposer {
     contentOverride: ContentOverride?,
     inlineContentOverride: InlineContentOverride?,
     richTextRenderOptions: RichTextRenderOptions,
+    richTextDecorations: RichTextDecorations,
     markdownAnimationState: MarkdownAnimationState,
     visitChildren: @Composable (AstNode) -> Unit
   ) {
@@ -186,6 +208,11 @@ private val sampleMarkdown = """
   # Demo
   Based on [this cheatsheet][cheatsheet]
 
+  ## Link underline styles
+  - [Dotted underline example](https://example.com/dotted)
+  - [Dashed underline example](https://example.com/dashed)
+  - [Default underline example](https://example.com/solid)
+
   ---
 
   ## Headers

richtext-commonmark/src/commonMain/kotlin/com/halilibo/richtext/commonmark/Markdown.kt

@@ -12,7 +12,7 @@ import com.halilibo.richtext.markdown.ContentOverride
 import com.halilibo.richtext.markdown.InlineContentOverride
 import com.halilibo.richtext.markdown.node.AstNode
 import com.halilibo.richtext.ui.RichTextScope
-import com.halilibo.richtext.ui.string.MarkdownAnimationState
+import com.halilibo.richtext.ui.string.RichTextDecorations
 import com.halilibo.richtext.ui.string.RichTextRenderOptions
 import org.commonmark.node.Node
 
@@ -29,6 +29,7 @@ public fun RichTextScope.Markdown(
   content: String,
   markdownParseOptions: CommonMarkdownParseOptions = CommonMarkdownParseOptions.Default,
   richtextRenderOptions: RichTextRenderOptions = RichTextRenderOptions.Default,
+  richTextDecorations: RichTextDecorations = RichTextDecorations(),
   contentOverride: ContentOverride? = null,
   inlineContentOverride: InlineContentOverride? = null,
   astBlockNodeComposer: AstBlockNodeComposer? = null
@@ -51,6 +52,7 @@ public fun RichTextScope.Markdown(
       contentOverride = contentOverride,
       inlineContentOverride = inlineContentOverride,
       richTextRenderOptions = richtextRenderOptions,
+      richTextDecorations = richTextDecorations,
       astBlockNodeComposer = astBlockNodeComposer,
     )
   }
@@ -66,6 +68,7 @@ public fun RichTextScope.Markdown(
 public fun RichTextScope.Markdown(
   content: Node,
   richtextRenderOptions: RichTextRenderOptions = RichTextRenderOptions.Default,
+  richTextDecorations: RichTextDecorations = RichTextDecorations(),
   contentOverride: ContentOverride? = null,
   inlineContentOverride: InlineContentOverride? = null,
   astBlockNodeComposer: AstBlockNodeComposer? = null
@@ -76,6 +79,7 @@ public fun RichTextScope.Markdown(
     contentOverride,
     inlineContentOverride,
     richtextRenderOptions,
+    richTextDecorations,
     astBlockNodeComposer,
   )
 }

richtext-markdown/src/commonMain/kotlin/com/halilibo/richtext/markdown/BasicMarkdown.kt

@@ -37,6 +37,7 @@ import com.halilibo.richtext.ui.ListType.Unordered
 import com.halilibo.richtext.ui.RichTextScope
 import com.halilibo.richtext.ui.string.InlineContent
 import com.halilibo.richtext.ui.string.MarkdownAnimationState
+import com.halilibo.richtext.ui.string.RichTextDecorations
 import com.halilibo.richtext.ui.string.RichTextRenderOptions
 import com.halilibo.richtext.ui.string.RichTextRenderOptions.Companion
 import com.halilibo.richtext.ui.string.RichTextString
@@ -80,13 +81,15 @@ public fun RichTextScope.BasicMarkdown(
   contentOverride: ContentOverride? = null,
   inlineContentOverride: InlineContentOverride? = null,
   richTextRenderOptions: RichTextRenderOptions = RichTextRenderOptions.Default,
+  richTextDecorations: RichTextDecorations = RichTextDecorations(),
   astBlockNodeComposer: AstBlockNodeComposer? = null,
 ) {
   RecursiveRenderMarkdownAst(
     astNode = astNode,
     contentOverride = contentOverride,
     inlineContentOverride = inlineContentOverride,
     richTextRenderOptions = richTextRenderOptions,
+    richTextDecorations = richTextDecorations,
     markdownAnimationState = remember { MarkdownAnimationState() },
     astNodeComposer = astBlockNodeComposer,
   )
@@ -116,6 +119,7 @@ public interface AstBlockNodeComposer {
     contentOverride: ContentOverride?,
     inlineContentOverride: InlineContentOverride?,
     richTextRenderOptions: RichTextRenderOptions,
+    richTextDecorations: RichTextDecorations,
     markdownAnimationState: MarkdownAnimationState,
     visitChildren: @Composable (AstNode) -> Unit
   )
@@ -152,6 +156,7 @@ internal fun RichTextScope.RecursiveRenderMarkdownAst(
   contentOverride: ContentOverride?,
   inlineContentOverride: InlineContentOverride?,
   richTextRenderOptions: RichTextRenderOptions,
+  richTextDecorations: RichTextDecorations,
   markdownAnimationState: MarkdownAnimationState,
   astNodeComposer: AstBlockNodeComposer?
 ) {
@@ -163,6 +168,7 @@ internal fun RichTextScope.RecursiveRenderMarkdownAst(
         contentOverride,
         inlineContentOverride,
         richTextRenderOptions,
+        richTextDecorations,
         markdownAnimationState,
         astNodeComposer,
       )
@@ -180,13 +186,15 @@ internal fun RichTextScope.RecursiveRenderMarkdownAst(
         contentOverride,
         inlineContentOverride,
         richTextRenderOptions,
+        richTextDecorations,
         markdownAnimationState,
       ) {
         renderChildren(
           node = it,
           contentOverride,
           inlineContentOverride = inlineContentOverride,
           richTextRenderOptions = richTextRenderOptions,
+          richTextDecorations = richTextDecorations,
           markdownAnimationState = markdownAnimationState,
           astNodeComposer = astNodeComposer
         )
@@ -199,13 +207,15 @@ internal fun RichTextScope.RecursiveRenderMarkdownAst(
         contentOverride,
         inlineContentOverride = inlineContentOverride,
         richTextRenderOptions = richTextRenderOptions,
+        richTextDecorations = richTextDecorations,
         markdownAnimationState = markdownAnimationState,
         visitChildren = {
           renderChildren(
             node = it,
             contentOverride,
             inlineContentOverride = inlineContentOverride,
             richTextRenderOptions = richTextRenderOptions,
+            richTextDecorations = richTextDecorations,
             markdownAnimationState = markdownAnimationState,
             astNodeComposer = astNodeComposer
           )
@@ -224,6 +234,7 @@ private val DefaultAstNodeComposer = object : AstBlockNodeComposer {
     contentOverride: ContentOverride?,
     inlineContentOverride: InlineContentOverride?,
     richTextRenderOptions: RichTextRenderOptions,
+    richTextDecorations: RichTextDecorations,
     markdownAnimationState: MarkdownAnimationState,
     visitChildren: @Composable (AstNode) -> Unit
   ) {
@@ -284,6 +295,7 @@ private val DefaultAstNodeComposer = object : AstBlockNodeComposer {
             astNode,
             inlineContentOverride,
             richTextRenderOptions,
+            richTextDecorations,
             markdownAnimationState,
             modifier = Modifier.semantics { heading() },
           )
@@ -324,12 +336,19 @@ private val DefaultAstNodeComposer = object : AstBlockNodeComposer {
           astNode,
           inlineContentOverride,
           richTextRenderOptions,
+          richTextDecorations,
           markdownAnimationState,
         )
       }
 
       is AstTableRoot -> {
-        RenderTable(astNode, inlineContentOverride, richTextRenderOptions, markdownAnimationState)
+        RenderTable(
+          astNode,
+          inlineContentOverride,
+          richTextRenderOptions,
+          richTextDecorations,
+          markdownAnimationState,
+        )
       }
       // This should almost never happen. All the possible text
       // nodes must be under either Heading, Paragraph or CustomNode
@@ -371,6 +390,7 @@ internal fun RichTextScope.renderChildren(
   contentOverride: ContentOverride?,
   inlineContentOverride: InlineContentOverride?,
   richTextRenderOptions: RichTextRenderOptions,
+  richTextDecorations: RichTextDecorations,
   markdownAnimationState: MarkdownAnimationState,
   astNodeComposer: AstBlockNodeComposer?
 ) {
@@ -380,6 +400,7 @@ internal fun RichTextScope.renderChildren(
       contentOverride = contentOverride,
       inlineContentOverride = inlineContentOverride,
       richTextRenderOptions = richTextRenderOptions,
+      richTextDecorations = richTextDecorations,
       markdownAnimationState = markdownAnimationState,
       astNodeComposer = astNodeComposer,
     )

richtext-markdown/src/commonMain/kotlin/com/halilibo/richtext/markdown/MarkdownRichText.kt

@@ -30,6 +30,7 @@ import com.halilibo.richtext.ui.FormattedList
 import com.halilibo.richtext.ui.RichTextScope
 import com.halilibo.richtext.ui.string.InlineContent
 import com.halilibo.richtext.ui.string.MarkdownAnimationState
+import com.halilibo.richtext.ui.string.RichTextDecorations
 import com.halilibo.richtext.ui.string.RichTextRenderOptions
 import com.halilibo.richtext.ui.string.RichTextString
 import com.halilibo.richtext.ui.string.Text
@@ -63,6 +64,7 @@ internal fun RichTextScope.MarkdownRichText(
   astNode: AstNode,
   inlineContentOverride: InlineContentOverride?,
   richTextRenderOptions: RichTextRenderOptions,
+  richTextDecorations: RichTextDecorations,
   markdownAnimationState: MarkdownAnimationState,
   modifier: Modifier = Modifier,
 ) {
@@ -77,6 +79,7 @@ internal fun RichTextScope.MarkdownRichText(
     isLeafText = astNode.isLastInTree(),
     renderOptions = richTextRenderOptions,
     sharedAnimationState = markdownAnimationState,
+    decorations = richTextDecorations,
   )
 }
 

richtext-markdown/src/commonMain/kotlin/com/halilibo/richtext/markdown/RenderTable.kt

@@ -1,7 +1,6 @@
 package com.halilibo.richtext.markdown
 
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.MutableState
 import com.halilibo.richtext.markdown.node.AstNode
 import com.halilibo.richtext.markdown.node.AstTableBody
 import com.halilibo.richtext.markdown.node.AstTableCell
@@ -10,13 +9,15 @@ import com.halilibo.richtext.markdown.node.AstTableRow
 import com.halilibo.richtext.ui.RichTextScope
 import com.halilibo.richtext.ui.Table
 import com.halilibo.richtext.ui.string.MarkdownAnimationState
+import com.halilibo.richtext.ui.string.RichTextDecorations
 import com.halilibo.richtext.ui.string.RichTextRenderOptions
 
 @Composable
 internal fun RichTextScope.RenderTable(
   node: AstNode,
   inlineContentOverride: InlineContentOverride?,
   richtextRenderOptions: RichTextRenderOptions,
+  richTextDecorations: RichTextDecorations,
   markdownAnimationState: MarkdownAnimationState,
 ) {
   Table(
@@ -34,6 +35,7 @@ internal fun RichTextScope.RenderTable(
               tableCell,
               inlineContentOverride,
               richtextRenderOptions,
+              richTextDecorations,
               markdownAnimationState,
             )
           }
@@ -52,11 +54,12 @@ internal fun RichTextScope.RenderTable(
                   tableCell,
                   inlineContentOverride,
                   richtextRenderOptions,
+                  richTextDecorations,
                   markdownAnimationState,
                 )
               }
             }
         }
-      }
+    }
   }
 }