Add onImgClicked for MarkDown

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

@@ -109,6 +109,9 @@ import com.halilibo.richtext.ui.resolveDefaults
                 markdownParseOptions = markdownParseOptions,
                 onLinkClicked = {
                   Toast.makeText(context, it, Toast.LENGTH_SHORT).show()
+                },
+                onImgClicked = {
+                  Toast.makeText(context, it, Toast.LENGTH_SHORT).show()
                 }
               )
             }

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

@@ -82,7 +82,12 @@ fun main(): Unit = singleWindowApplication(
               .verticalScroll(rememberScrollState()),
             style = richTextStyle
           ) {
-            Markdown(content = text)
+            Markdown(
+              content = text,
+              onImgClicked = {
+                println("Click img: $it")
+              }
+            )
           }
         }
       }

richtext-commonmark/src/androidMain/kotlin/com/halilibo/richtext/markdown/RemoteImage.kt

@@ -1,6 +1,7 @@
 package com.halilibo.richtext.markdown
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
@@ -29,7 +30,8 @@ internal actual fun RemoteImage(
   url: String,
   contentDescription: String?,
   modifier: Modifier,
-  contentScale: ContentScale
+  contentScale: ContentScale,
+  onClickImg: ((url: String) -> Unit)?
 ) {
   val painter = rememberAsyncImagePainter(
     ImageRequest.Builder(LocalContext.current)
@@ -72,10 +74,16 @@ internal actual fun RemoteImage(
       }
     }
 
+    val realModifier by remember(onClickImg, url) {
+      derivedStateOf {
+        if (onClickImg == null) sizeModifier else sizeModifier.clickable { onClickImg(url) }
+      }
+    }
+
     Image(
       painter = painter,
       contentDescription = contentDescription,
-      modifier = sizeModifier,
+      modifier = realModifier,
       contentScale = contentScale
     )
   }

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

@@ -46,23 +46,26 @@ import com.halilibo.richtext.ui.string.richTextString
  *
  * @param content Markdown text. No restriction on length.
  * @param markdownParseOptions Options for the Markdown parser.
+ * @param onImgClicked A function to invoke when a picture is clicked from rendered content.
  * @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
+  onImgClicked: ((String) -> Unit)? = null,
+  onLinkClicked: ((String) -> Unit)? = null,
 ) {
   val onLinkClickedState = rememberUpdatedState(onLinkClicked)
+  val onImgClickedState = rememberUpdatedState(onImgClicked)
   // Can't use UriHandlerAmbient.current::openUri here,
   // see https://issuetracker.google.com/issues/172366483
   val realLinkClickedHandler = onLinkClickedState.value ?: LocalUriHandler.current.let {
     remember {
       { url -> it.openUri(url) }
     }
   }
-  CompositionLocalProvider(LocalOnLinkClicked provides realLinkClickedHandler) {
+  CompositionLocalProvider(LocalOnLinkClicked provides realLinkClickedHandler, LocalOnImgClicked provides onImgClickedState.value) {
     val markdownAst = parsedMarkdownAst(text = content, options = markdownParseOptions)
     RecursiveRenderMarkdownAst(astNode = markdownAst)
   }
@@ -206,3 +209,6 @@ internal fun RichTextScope.visitChildren(node: AstNode?) {
  */
 internal val LocalOnLinkClicked =
   compositionLocalOf<(String) -> Unit> { error("OnLinkClicked is not provided") }
+
+internal val LocalOnImgClicked =
+  compositionLocalOf<((String) -> Unit)?> { error("OnImgClicked is not provided") }

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

@@ -58,17 +58,19 @@ import com.halilibo.richtext.ui.string.withFormat
 @Composable
 internal fun RichTextScope.MarkdownRichText(astNode: AstNode, modifier: Modifier = Modifier) {
   val onLinkClicked = LocalOnLinkClicked.current
+  val onImgClicked = LocalOnImgClicked.current
   // Assume that only RichText nodes reside below this level.
-  val richText = remember(astNode, onLinkClicked) {
-    computeRichTextString(astNode, onLinkClicked)
+  val richText = remember(astNode, onLinkClicked, onImgClicked) {
+    computeRichTextString(astNode, onLinkClicked, onImgClicked)
   }
 
   Text(text = richText, modifier = modifier)
 }
 
 private fun computeRichTextString(
   astNode: AstNode,
-  onLinkClicked: (String) -> Unit
+  onLinkClicked: (String) -> Unit,
+  onImgClicked: ((String) -> Unit)?
 ): RichTextString {
   val richTextStringBuilder = RichTextString.Builder()
 
@@ -108,7 +110,8 @@ private fun computeRichTextString(
                 url = currentNodeType.destination,
                 contentDescription = currentNodeType.title,
                 modifier = Modifier.fillMaxWidth(),
-                contentScale = ContentScale.Inside
+                contentScale = ContentScale.Inside,
+                onClickImg = onImgClicked
               )
             }
           )

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

@@ -14,5 +14,6 @@ internal expect fun RemoteImage(
   url: String,
   contentDescription: String?,
   modifier: Modifier = Modifier,
-  contentScale: ContentScale
+  contentScale: ContentScale,
+  onClickImg: ((url: String) -> Unit)?
 )

richtext-commonmark/src/jvmMain/kotlin/com/halilibo/richtext/markdown/RemoteImage.kt

@@ -1,9 +1,12 @@
 package com.halilibo.richtext.markdown
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.produceState
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.asImageBitmap
@@ -24,7 +27,8 @@ internal actual fun RemoteImage(
   url: String,
   contentDescription: String?,
   modifier: Modifier,
-  contentScale: ContentScale
+  contentScale: ContentScale,
+  onClickImg: ((url: String) -> Unit)?
 ) {
   val image by produceState<ImageBitmap?>(null, url) {
     loadFullImage(url)?.let {
@@ -33,10 +37,16 @@ internal actual fun RemoteImage(
   }
 
   if (image != null) {
+    val realModifier by remember(onClickImg, url) {
+      derivedStateOf {
+        if (onClickImg == null) modifier else modifier.clickable { onClickImg(url) }
+      }
+    }
+
     Image(
       bitmap = image!!,
       contentDescription = contentDescription,
-      modifier = modifier,
+      modifier = realModifier,
       contentScale = contentScale
     )
   }