From 0655aa960d93659966972c5e1be17a55e8572221 Mon Sep 17 00:00:00 2001 From: liufangcheng Date: Fri, 21 Jul 2023 09:59:24 +0800 Subject: [PATCH 1/2] Add onImgClicked for MarkDown --- .../zachklipp/richtext/sample/MarkdownSample.kt | 3 +++ .../kotlin/com/halilibo/richtext/desktop/Main.kt | 7 ++++++- .../com/halilibo/richtext/markdown/RemoteImage.kt | 12 ++++++++++-- .../com/halilibo/richtext/markdown/Markdown.kt | 9 +++++++-- .../halilibo/richtext/markdown/MarkdownRichText.kt | 11 +++++++---- .../com/halilibo/richtext/markdown/RemoteImage.kt | 3 ++- .../com/halilibo/richtext/markdown/RemoteImage.kt | 14 ++++++++++++-- 7 files changed, 47 insertions(+), 12 deletions(-) diff --git a/android-sample/src/main/java/com/zachklipp/richtext/sample/MarkdownSample.kt b/android-sample/src/main/java/com/zachklipp/richtext/sample/MarkdownSample.kt index bbb20226..72c2bf45 100644 --- a/android-sample/src/main/java/com/zachklipp/richtext/sample/MarkdownSample.kt +++ b/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() } ) } diff --git a/desktop-sample/src/main/kotlin/com/halilibo/richtext/desktop/Main.kt b/desktop-sample/src/main/kotlin/com/halilibo/richtext/desktop/Main.kt index ae85ea22..d9264a94 100644 --- a/desktop-sample/src/main/kotlin/com/halilibo/richtext/desktop/Main.kt +++ b/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") + } + ) } } } diff --git a/richtext-commonmark/src/androidMain/kotlin/com/halilibo/richtext/markdown/RemoteImage.kt b/richtext-commonmark/src/androidMain/kotlin/com/halilibo/richtext/markdown/RemoteImage.kt index 453c6480..1658edb0 100644 --- a/richtext-commonmark/src/androidMain/kotlin/com/halilibo/richtext/markdown/RemoteImage.kt +++ b/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 ) } diff --git a/richtext-commonmark/src/commonMain/kotlin/com/halilibo/richtext/markdown/Markdown.kt b/richtext-commonmark/src/commonMain/kotlin/com/halilibo/richtext/markdown/Markdown.kt index 2a395c1c..2ce34d8e 100644 --- a/richtext-commonmark/src/commonMain/kotlin/com/halilibo/richtext/markdown/Markdown.kt +++ b/richtext-commonmark/src/commonMain/kotlin/com/halilibo/richtext/markdown/Markdown.kt @@ -52,9 +52,11 @@ import com.halilibo.richtext.ui.string.richTextString 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 { @@ -62,7 +64,7 @@ public fun RichTextScope.Markdown( { 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 +208,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") } diff --git a/richtext-commonmark/src/commonMain/kotlin/com/halilibo/richtext/markdown/MarkdownRichText.kt b/richtext-commonmark/src/commonMain/kotlin/com/halilibo/richtext/markdown/MarkdownRichText.kt index 84958eba..f1f5ad2c 100644 --- a/richtext-commonmark/src/commonMain/kotlin/com/halilibo/richtext/markdown/MarkdownRichText.kt +++ b/richtext-commonmark/src/commonMain/kotlin/com/halilibo/richtext/markdown/MarkdownRichText.kt @@ -58,9 +58,10 @@ 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) @@ -68,7 +69,8 @@ internal fun RichTextScope.MarkdownRichText(astNode: AstNode, 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 ) } ) diff --git a/richtext-commonmark/src/commonMain/kotlin/com/halilibo/richtext/markdown/RemoteImage.kt b/richtext-commonmark/src/commonMain/kotlin/com/halilibo/richtext/markdown/RemoteImage.kt index f665ae8c..2abd9ef1 100644 --- a/richtext-commonmark/src/commonMain/kotlin/com/halilibo/richtext/markdown/RemoteImage.kt +++ b/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)? ) diff --git a/richtext-commonmark/src/jvmMain/kotlin/com/halilibo/richtext/markdown/RemoteImage.kt b/richtext-commonmark/src/jvmMain/kotlin/com/halilibo/richtext/markdown/RemoteImage.kt index b1d97335..89164ea6 100644 --- a/richtext-commonmark/src/jvmMain/kotlin/com/halilibo/richtext/markdown/RemoteImage.kt +++ b/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(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 ) } From f68e2b7f41f15487d22736d22e14e845cbbaccf4 Mon Sep 17 00:00:00 2001 From: liufangcheng Date: Fri, 21 Jul 2023 10:02:24 +0800 Subject: [PATCH 2/2] supplement docs --- .../commonMain/kotlin/com/halilibo/richtext/markdown/Markdown.kt | 1 + 1 file changed, 1 insertion(+) diff --git a/richtext-commonmark/src/commonMain/kotlin/com/halilibo/richtext/markdown/Markdown.kt b/richtext-commonmark/src/commonMain/kotlin/com/halilibo/richtext/markdown/Markdown.kt index 2ce34d8e..0d7abb71 100644 --- a/richtext-commonmark/src/commonMain/kotlin/com/halilibo/richtext/markdown/Markdown.kt +++ b/richtext-commonmark/src/commonMain/kotlin/com/halilibo/richtext/markdown/Markdown.kt @@ -46,6 +46,7 @@ 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