Merge pull request #101 from morrisseyai/feature/autolink-markdown

Add autolink (linkify) functionality to Markdown

Author: halilozercan

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

@@ -28,6 +28,7 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.halilibo.richtext.markdown.Markdown
+import com.halilibo.richtext.markdown.MarkdownParseOptions
 import com.halilibo.richtext.ui.RichTextStyle
 import com.halilibo.richtext.ui.material.MaterialRichText
 import com.halilibo.richtext.ui.resolveDefaults
@@ -41,6 +42,8 @@ import com.halilibo.richtext.ui.resolveDefaults
   var richTextStyle by remember { mutableStateOf(RichTextStyle().resolveDefaults()) }
   var isDarkModeEnabled by remember { mutableStateOf(false) }
   var isWordWrapEnabled by remember { mutableStateOf(true) }
+  var markdownParseOptions by remember { mutableStateOf(MarkdownParseOptions.Default) }
+  var isAutolinkEnabled by remember { mutableStateOf(true) }
 
   LaunchedEffect(isWordWrapEnabled) {
     richTextStyle = richTextStyle.copy(
@@ -49,6 +52,11 @@ import com.halilibo.richtext.ui.resolveDefaults
       )
     )
   }
+  LaunchedEffect(isAutolinkEnabled) {
+    markdownParseOptions = markdownParseOptions.copy(
+      autolink = isAutolinkEnabled
+    )
+  }
 
   val colors = if (isDarkModeEnabled) darkColors() else lightColors()
   val context = LocalContext.current
@@ -75,6 +83,14 @@ import com.halilibo.richtext.ui.resolveDefaults
               label = "Word Wrap"
             )
 
+            CheckboxPreference(
+              onClick = {
+                isAutolinkEnabled = !isAutolinkEnabled
+              },
+              checked = isAutolinkEnabled,
+              label = "Autolink"
+            )
+
             RichTextStyleConfig(
               richTextStyle = richTextStyle,
               onChanged = { richTextStyle = it }
@@ -90,6 +106,7 @@ import com.halilibo.richtext.ui.resolveDefaults
             ) {
               Markdown(
                 content = sampleMarkdown,
+                markdownParseOptions = markdownParseOptions,
                 onLinkClicked = {
                   Toast.makeText(context, it, Toast.LENGTH_SHORT).show()
                 }
@@ -178,6 +195,8 @@ private val sampleMarkdown = """
   [You can use numbers for reference-style link definitions][1]
 
   Or leave it empty and use the [link text itself].
+  
+  Autolink option will detect text links like https://www.google.com and turn them into Markdown links automatically.
 
   ---
 

buildSrc/src/main/kotlin/Dependencies.kt

@@ -52,10 +52,11 @@ object Compose {
 }
 
 object Commonmark {
-  private val version = "0.19.0"
+  private val version = "0.20.0"
   val core = "org.commonmark:commonmark:$version"
   val tables = "org.commonmark:commonmark-ext-gfm-tables:$version"
   val strikethrough = "org.commonmark:commonmark-ext-gfm-strikethrough:$version"
+  val autolink = "org.commonmark:commonmark-ext-autolink:$version"
 }
 
 object AndroidConfiguration {

desktop-sample/src/main/kotlin/com/halilibo/richtext/desktop/Main.kt

@@ -218,6 +218,8 @@ private val sampleMarkdown = """
   [You can use numbers for reference-style link definitions][1]
 
   Or leave it empty and use the [link text itself].
+  
+  Autolink option will detect text links like https://www.google.com and turn them into Markdown links automatically.
 
   ---
 

docs/richtext-commonmark.md

@@ -64,3 +64,18 @@ RichText(
 Which produces something like this:
 
 ![markdown demo](img/markdown-demo.png)
+
+## MarkdownParseOptions
+
+Passing `MarkdownParseOptions` into `Markdown` provides the ability to control some aspects of the markdown parser:
+
+```kotlin
+val markdownParseOptions = MarkdownParseOptions.Default.copy(
+  autolink = false
+)
+
+Markdown(
+  markdownParseOptions = markdownParseOptions,
+  ...
+)
+```

richtext-commonmark/build.gradle.kts

@@ -27,6 +27,7 @@ kotlin {
         implementation(Commonmark.core)
         implementation(Commonmark.tables)
         implementation(Commonmark.strikethrough)
+        implementation(Commonmark.autolink)
       }
     }
 
@@ -39,6 +40,7 @@ kotlin {
         implementation(Commonmark.core)
         implementation(Commonmark.tables)
         implementation(Commonmark.strikethrough)
+        implementation(Commonmark.autolink)
       }
     }
 

richtext-commonmark/src/commonJvmAndroid/kotlin/com/halilibo/richtext/markdown/AstNodeConvert.kt

@@ -35,6 +35,7 @@ import com.halilibo.richtext.markdown.node.AstTableRoot
 import com.halilibo.richtext.markdown.node.AstTableRow
 import com.halilibo.richtext.markdown.node.AstText
 import com.halilibo.richtext.markdown.node.AstThematicBreak
+import org.commonmark.ext.autolink.AutolinkExtension
 import org.commonmark.ext.gfm.strikethrough.Strikethrough
 import org.commonmark.ext.gfm.strikethrough.StrikethroughExtension
 import org.commonmark.ext.gfm.tables.TableBlock
@@ -188,19 +189,20 @@ internal fun convert(
 internal fun Node.convert() = convert(this)
 
 @Composable
-internal actual fun parsedMarkdownAst(text: String): AstNode? {
-  val parser = remember {
+internal actual fun parsedMarkdownAst(text: String, options: MarkdownParseOptions): AstNode? {
+  val parser = remember(options) {
     Parser.builder()
       .extensions(
-        listOf(
+        listOfNotNull(
           TablesExtension.create(),
-          StrikethroughExtension.create()
+          StrikethroughExtension.create(),
+          if (options.autolink) AutolinkExtension.create() else null
         )
       )
       .build()
   }
 
-  val astRootNode by produceState<AstNode?>(null, text) {
+  val astRootNode by produceState<AstNode?>(null, text, parser) {
     value = parser.parse(text).convert()
   }
 

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

@@ -42,11 +42,13 @@ import com.halilibo.richtext.ui.string.richTextString
  * A composable that renders Markdown content using RichText.
  *
  * @param content Markdown text. No restriction on length.
+ * @param markdownParseOptions Options for the Markdown parser.
  * @param onLinkClicked A function to invoke when a link is clicked from rendered content.
  */
 @Composable
 public fun RichTextScope.Markdown(
   content: String,
+  markdownParseOptions: MarkdownParseOptions = MarkdownParseOptions.Default,
   onLinkClicked: ((String) -> Unit)? = null
 ) {
   val onLinkClickedState = rememberUpdatedState(onLinkClicked)
@@ -57,9 +59,8 @@ public fun RichTextScope.Markdown(
       { url -> it.openUri(url) }
     }
   }
-
   CompositionLocalProvider(LocalOnLinkClicked provides realLinkClickedHandler) {
-    val markdownAst = parsedMarkdownAst(text = content)
+    val markdownAst = parsedMarkdownAst(text = content, options = markdownParseOptions)
     RecursiveRenderMarkdownAst(astNode = markdownAst)
   }
 }
@@ -69,9 +70,10 @@ public fun RichTextScope.Markdown(
  * Composable is efficient thanks to remember construct.
  *
  * @param text Markdown text to be parsed.
+ * @param options Options for the Markdown parser.
  */
 @Composable
-internal expect fun parsedMarkdownAst(text: String): AstNode?
+internal expect fun parsedMarkdownAst(text: String, options: MarkdownParseOptions): AstNode?
 
 /**
  * When parsed, markdown content or any other rich text can be represented as a tree.

richtext-commonmark/src/commonMain/kotlin/com/halilibo/richtext/markdown/MarkdownParseOptions.kt

@@ -0,0 +1,16 @@
+package com.halilibo.richtext.markdown
+
+/**
+ * Allows configuration of the Markdown parser
+ *
+ * @param autolink Detect plain text links and turn them into Markdown links.
+ */
+public data class MarkdownParseOptions(
+  val autolink: Boolean
+) {
+  public companion object {
+    public val Default: MarkdownParseOptions = MarkdownParseOptions(
+      autolink = true
+    )
+  }
+}