Implement click listeners on highlights in article details

PrimalHQ · Dec 11, 2024 · 80fd9ae · 80fd9ae
1 parent 6547f2f
commit 80fd9ae
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 14 deletions.
diff --git a/app/src/main/kotlin/net/primal/android/thread/articles/details/ArticleDetailsScreen.kt b/app/src/main/kotlin/net/primal/android/thread/articles/details/ArticleDetailsScreen.kt
@@ -1,5 +1,6 @@
 package net.primal.android.thread.articles.details
 
+import android.widget.Toast
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
@@ -426,6 +427,8 @@ private fun ArticleContentWithComments(
     onUiError: ((UiError) -> Unit)? = null,
 ) {
     val uriHandler = LocalUriHandler.current
+    val context = LocalContext.current
+    val scope = rememberCoroutineScope()
 
     LazyColumn(
         modifier = Modifier
@@ -529,6 +532,15 @@ private fun ArticleContentWithComments(
                         onNoteClick = noteCallbacks.onNoteClick,
                         onArticleClick = noteCallbacks.onArticleClick,
                         onUrlClick = { url -> uriHandler.openUriSafely(url) },
+                        onHighlightClick = { highlightedText ->
+                            scope.launch {
+                                Toast.makeText(
+                                    context,
+                                    highlightedText,
+                                    Toast.LENGTH_SHORT,
+                                ).show()
+                            }
+                        },
                     )
                 }
 

diff --git a/...kotlin/net/primal/android/thread/articles/details/ui/rendering/CustomBlockNodeComposer.kt b/...kotlin/net/primal/android/thread/articles/details/ui/rendering/CustomBlockNodeComposer.kt
@@ -9,17 +9,23 @@ import com.halilibo.richtext.ui.RichTextScope
 import net.primal.android.highlights.model.HighlightUi
 import net.primal.android.thread.articles.details.ui.richtext.MarkdownRichText
 
-fun customBlockNodeComposer(highlights: List<HighlightUi>) =
-    object : AstBlockNodeComposer {
-        override fun predicate(astBlockNodeType: AstBlockNodeType): Boolean =
-            when (astBlockNodeType) {
-                AstParagraph -> true
-                else -> false
-            }
-
-        @Composable
-        override fun RichTextScope.Compose(astNode: AstNode, visitChildren: @Composable (AstNode) -> Unit) {
-            require(astNode.type == AstParagraph)
-            MarkdownRichText(astNode = astNode, highlights = highlights)
+fun customBlockNodeComposer(
+    highlights: List<HighlightUi>,
+    onHighlightClick: ((highlightedText: String) -> Unit)? = null,
+) = object : AstBlockNodeComposer {
+    override fun predicate(astBlockNodeType: AstBlockNodeType): Boolean =
+        when (astBlockNodeType) {
+            AstParagraph -> true
+            else -> false
         }
+
+    @Composable
+    override fun RichTextScope.Compose(astNode: AstNode, visitChildren: @Composable (AstNode) -> Unit) {
+        require(astNode.type == AstParagraph)
+        MarkdownRichText(
+            astNode = astNode,
+            highlights = highlights,
+            onHighlightClick = onHighlightClick,
+        )
     }
+}
diff --git a/...c/main/kotlin/net/primal/android/thread/articles/details/ui/rendering/MarkdownRenderer.kt b/...c/main/kotlin/net/primal/android/thread/articles/details/ui/rendering/MarkdownRenderer.kt
@@ -21,6 +21,7 @@ fun MarkdownRenderer(
     onNoteClick: ((noteId: String) -> Unit)? = null,
     onArticleClick: ((naddr: String) -> Unit)? = null,
     onUrlClick: ((url: String) -> Unit)? = null,
+    onHighlightClick: ((highlightedText: String) -> Unit)? = null,
 ) {
     val richTextStyle = buildPrimalRichTextStyle(
         highlightColor = AppTheme.colorScheme.secondary,
@@ -49,7 +50,10 @@ fun MarkdownRenderer(
                 ) {
                     BasicMarkdown(
                         astNode = astNode,
-                        astBlockNodeComposer = customBlockNodeComposer(highlights = highlights),
+                        astBlockNodeComposer = customBlockNodeComposer(
+                            highlights = highlights,
+                            onHighlightClick = onHighlightClick,
+                        ),
                     )
                 }
             }

diff --git a/...rc/main/kotlin/net/primal/android/thread/articles/details/ui/richtext/MarkdownRichText.kt b/...rc/main/kotlin/net/primal/android/thread/articles/details/ui/richtext/MarkdownRichText.kt
@@ -2,14 +2,21 @@
 
 package net.primal.android.thread.articles.details.ui.richtext
 
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.TextLayoutResult
 import androidx.compose.ui.unit.IntSize
 import androidx.compose.ui.unit.dp
 import com.halilibo.richtext.markdown.node.AstBlockQuote
@@ -75,6 +82,7 @@ internal fun RichTextScope.MarkdownRichText(
     astNode: AstNode,
     modifier: Modifier = Modifier,
     highlights: List<HighlightUi> = emptyList(),
+    onHighlightClick: ((highlightedText: String) -> Unit)? = null,
 ) {
     val isDarkTheme = LocalPrimalTheme.current.isDarkTheme
 
@@ -87,7 +95,30 @@ internal fun RichTextScope.MarkdownRichText(
         )
     }
 
-    Text(text = richText, modifier = modifier)
+    var layoutResult by remember { mutableStateOf<TextLayoutResult?>(null) }
+    val highlightedLiterals = highlights.map { it.content }
+
+    val pressIndicator = Modifier.pointerInput(onHighlightClick, highlights) {
+        detectTapGestures { pos ->
+            layoutResult?.let { layoutResult ->
+                val charPosition = layoutResult.getOffsetForPosition(pos)
+                val scopedHighlights = TextMatcher(content = richText.text, texts = highlightedLiterals).matches()
+                val clickedHighlightTextMatch = scopedHighlights.firstOrNull {
+                    charPosition in it.startIndex..it.endIndex
+                }
+                if (clickedHighlightTextMatch != null) {
+                    onHighlightClick?.invoke(clickedHighlightTextMatch.value)
+                }
+            }
+        }
+    }
+
+    Box(modifier = modifier.then(pressIndicator)) {
+        Text(
+            text = richText,
+            onTextLayout = { layoutResult = it },
+        )
+    }
 }
 
 private fun computeRichTextString(