Add inlineContent slot to ReadMoreText composables

Author: fornewid

readmore-foundation/src/main/java/com/webtoonscorp/android/readmore/foundation/BasicReadMoreText.kt

@@ -15,12 +15,14 @@
  */
 package com.webtoonscorp.android.readmore.foundation
 
+import android.annotation.SuppressLint
 import android.util.Log
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.text.BasicText
+import androidx.compose.foundation.text.InlineTextContent
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.Stable
@@ -31,6 +33,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.LinkAnnotation
+import androidx.compose.ui.text.Placeholder
 import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.TextLayoutResult
 import androidx.compose.ui.text.TextMeasurer
@@ -132,6 +135,8 @@ public fun BasicReadMoreText(
  * @param softWrap Whether the text should break at soft line breaks. If false, the glyphs in the
  * text will be positioned as if there was unlimited horizontal space. If [softWrap] is false,
  * [readMoreOverflow] and TextAlign may have unexpected effects.
+ * @param inlineContent A map store composables that replaces certain ranges of the text. It's used
+ * to insert composables into text layout. Check [InlineTextContent] for more information.
  * @param readMoreText The read more text to be displayed in the collapsed state.
  * @param readMoreMaxLines An optional maximum number of lines for the text to span, wrapping if
  * necessary. If the text exceeds the given number of lines, it will be truncated according to
@@ -154,6 +159,7 @@ public fun BasicReadMoreText(
     style: TextStyle = TextStyle.Default,
     onTextLayout: (TextLayoutResult) -> Unit = {},
     softWrap: Boolean = true,
+    inlineContent: Map<String, InlineTextContent> = mapOf(),
     readMoreText: String = "",
     readMoreMaxLines: Int = 2,
     readMoreOverflow: ReadMoreTextOverflow = ReadMoreTextOverflow.Ellipsis,
@@ -171,6 +177,7 @@ public fun BasicReadMoreText(
         style = style,
         onTextLayout = onTextLayout,
         softWrap = softWrap,
+        inlineContent = inlineContent,
         readMoreText = readMoreText,
         readMoreMaxLines = readMoreMaxLines,
         readMoreOverflow = readMoreOverflow,
@@ -188,6 +195,7 @@ public fun BasicReadMoreText(
 private const val ReadMoreTag = "read_more"
 private const val ReadLessTag = "read_less"
 
+@SuppressLint("UnusedBoxWithConstraintsScope")
 @Composable
 private fun CoreReadMoreText(
     text: AnnotatedString,
@@ -198,6 +206,7 @@ private fun CoreReadMoreText(
     style: TextStyle = TextStyle.Default,
     onTextLayout: (TextLayoutResult) -> Unit = {},
     softWrap: Boolean = true,
+    inlineContent: Map<String, InlineTextContent> = mapOf(),
     readMoreText: String = "",
     readMoreMaxLines: Int = 2,
     readMoreOverflow: ReadMoreTextOverflow = ReadMoreTextOverflow.Ellipsis,
@@ -304,6 +313,7 @@ private fun CoreReadMoreText(
             overflow = TextOverflow.Ellipsis,
             softWrap = softWrap,
             maxLines = if (expanded) Int.MAX_VALUE else readMoreMaxLines,
+            inlineContent = inlineContent,
         )
 
         val constraints = Constraints(maxWidth = constraints.maxWidth)
@@ -317,6 +327,7 @@ private fun CoreReadMoreText(
             text,
             readMoreMaxLines,
             softWrap,
+            inlineContent,
         ) {
             state.applyCollapsedText(
                 textMeasurer = textMeasurer,
@@ -328,6 +339,7 @@ private fun CoreReadMoreText(
                 text = text,
                 readMoreMaxLines = readMoreMaxLines,
                 softWrap = softWrap,
+                inlineContent = inlineContent,
             )
         }
     }
@@ -346,7 +358,7 @@ private class ReadMoreState {
 
     var collapsedText: AnnotatedString
         get() = _collapsedText
-        internal set(value) {
+        private set(value) {
             if (value != _collapsedText) {
                 _collapsedText = value
                 if (DebugLog) {
@@ -368,6 +380,7 @@ private class ReadMoreState {
         text: AnnotatedString,
         readMoreMaxLines: Int,
         softWrap: Boolean,
+        inlineContent: Map<String, InlineTextContent>,
     ) {
         val overflowTextWidth = if (overflowText.isNotEmpty()) {
             textMeasurer.measure(
@@ -392,6 +405,7 @@ private class ReadMoreState {
             overflow = TextOverflow.Clip,
             softWrap = softWrap,
             constraints = constraints,
+            placeholders = extractPlaceholders(text, inlineContent),
         )
 
         val clipTextCount = textLayout.getLineEnd(lineIndex = textLayout.lineCount - 1)
@@ -410,6 +424,7 @@ private class ReadMoreState {
                             text = subText,
                             style = style,
                             softWrap = softWrap,
+                            placeholders = extractPlaceholders(subText, inlineContent),
                         ).size.width
                     },
                 )
@@ -452,6 +467,40 @@ private class ReadMoreState {
         return replacedCount
     }
 
+    /**
+     * Converts AnnotatedString and inlineContent map to placeholders for use with TextMeasurer.
+     *
+     * @param text The annotated string containing inline content annotations
+     * @param inlineContent Map of inline content IDs to their corresponding InlineTextContent
+     * @return List of Range<Placeholder> objects representing the inline content positions
+     */
+    private fun extractPlaceholders(
+        text: AnnotatedString,
+        inlineContent: Map<String, InlineTextContent>,
+    ): List<AnnotatedString.Range<Placeholder>> {
+        if (inlineContent.isEmpty()) {
+            return emptyList()
+        }
+
+        // Get all string annotations with the "androidx.compose.foundation.text.inlineContent" tag
+        val inlineContentAnnotations = text.getStringAnnotations(
+            tag = "androidx.compose.foundation.text.inlineContent",
+            start = 0,
+            end = text.length,
+        )
+
+        // Map each annotation to a Range<Placeholder> if it exists in the inlineContent map
+        return inlineContentAnnotations.mapNotNull { annotation ->
+            inlineContent[annotation.item]?.let { content ->
+                AnnotatedString.Range(
+                    item = content.placeholder,
+                    start = annotation.start,
+                    end = annotation.end,
+                )
+            }
+        }
+    }
+
     override fun toString(): String {
         return "ReadMoreState(" +
             "collapsedText=$collapsedText" +

readmore-material/src/main/java/com/webtoonscorp/android/readmore/material/ReadMoreText.kt

@@ -16,6 +16,7 @@
 package com.webtoonscorp.android.readmore.material
 
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.text.InlineTextContent
 import androidx.compose.material.LocalContentAlpha
 import androidx.compose.material.LocalContentColor
 import androidx.compose.material.LocalTextStyle
@@ -276,6 +277,8 @@ public fun ReadMoreText(
  * [TextLayoutResult] object that callback provides contains paragraph information, size of the
  * text, baselines and other details. The callback can be used to add additional decoration or
  * functionality to the text. For example, to draw selection around the text.
+ * @param inlineContent A map store composables that replaces certain ranges of the text. It's used
+ * to insert composables into text layout. Check [InlineTextContent] for more information.
  * @param style Style configuration for the text such as color, font, line height etc.
  * @param readMoreText The read more text to be displayed in the collapsed state.
  * @param readMoreColor [Color] to apply to the read more text. If [Color.Unspecified], and [style]
@@ -331,6 +334,7 @@ public fun ReadMoreText(
     lineHeight: TextUnit = TextUnit.Unspecified,
     softWrap: Boolean = true,
     onTextLayout: (TextLayoutResult) -> Unit = {},
+    inlineContent: Map<String, InlineTextContent> = mapOf(),
     style: TextStyle = LocalTextStyle.current,
     readMoreText: String = "",
     readMoreColor: Color = Color.Unspecified,
@@ -405,6 +409,7 @@ public fun ReadMoreText(
         style = mergedStyle,
         onTextLayout = onTextLayout,
         softWrap = softWrap,
+        inlineContent = inlineContent,
         readMoreText = readMoreText,
         readMoreMaxLines = readMoreMaxLines,
         readMoreOverflow = readMoreOverflow,

readmore-material3/src/main/java/com/webtoonscorp/android/readmore/material3/ReadMoreText.kt

@@ -16,6 +16,7 @@
 package com.webtoonscorp.android.readmore.material3
 
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.text.InlineTextContent
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme
@@ -270,6 +271,8 @@ public fun ReadMoreText(
  * [TextLayoutResult] object that callback provides contains paragraph information, size of the
  * text, baselines and other details. The callback can be used to add additional decoration or
  * functionality to the text. For example, to draw selection around the text.
+ * @param inlineContent A map store composables that replaces certain ranges of the text. It's used
+ * to insert composables into text layout. Check [InlineTextContent] for more information.
  * @param style Style configuration for the text such as color, font, line height etc.
  * @param readMoreText The read more text to be displayed in the collapsed state.
  * @param readMoreColor [Color] to apply to the read more text. If [Color.Unspecified], and [style]
@@ -325,6 +328,7 @@ public fun ReadMoreText(
     lineHeight: TextUnit = TextUnit.Unspecified,
     softWrap: Boolean = true,
     onTextLayout: (TextLayoutResult) -> Unit = {},
+    inlineContent: Map<String, InlineTextContent> = mapOf(),
     style: TextStyle = LocalTextStyle.current,
     readMoreText: String = "",
     readMoreColor: Color = Color.Unspecified,
@@ -399,6 +403,7 @@ public fun ReadMoreText(
         style = mergedStyle,
         onTextLayout = onTextLayout,
         softWrap = softWrap,
+        inlineContent = inlineContent,
         readMoreText = readMoreText,
         readMoreMaxLines = readMoreMaxLines,
         readMoreOverflow = readMoreOverflow,

sample/src/main/java/com/webtoonscorp/android/readmore/sample/compose/foundation/BasicReadMoreTextDemo.kt

@@ -17,13 +17,19 @@ package com.webtoonscorp.android.readmore.sample.compose.foundation
 
 import androidx.compose.animation.animateContentSize
 import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicText
+import androidx.compose.foundation.text.InlineTextContent
+import androidx.compose.foundation.text.appendInlineContent
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.Divider
 import androidx.compose.material.MaterialTheme
@@ -36,11 +42,17 @@ import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.LinkAnnotation
+import androidx.compose.ui.text.Placeholder
+import androidx.compose.ui.text.PlaceholderVerticalAlign
 import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.TextLinkStyles
 import androidx.compose.ui.text.TextStyle
@@ -95,6 +107,8 @@ fun BasicReadMoreTextDemo() {
                 Divider()
                 Item_CustomText()
                 Divider()
+                Item_InlineTextContent()
+                Divider()
                 Item_RTL()
                 Divider()
                 Item_Emoji()
@@ -361,6 +375,122 @@ private fun Item_CustomText() {
     }
 }
 
+@Composable
+private fun Item_InlineTextContent() {
+    val start = "start"
+    val middle = "middle"
+    val end = "end"
+    val annotatedDescription = buildAnnotatedString {
+        appendInlineContent(start)
+        append("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")
+        appendInlineContent(middle)
+        append("Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
+        appendInlineContent(end)
+    }
+    val (expanded, onExpandedChange) = rememberSaveable { mutableStateOf(false) }
+    Column {
+        Text(
+            text = stringResource(id = R.string.title_inline_content_text_compose),
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(start = 18.dp, end = 18.dp, top = 16.dp),
+            color = MaterialTheme.colors.onSurface,
+            fontSize = 18.sp,
+            fontWeight = FontWeight.Bold,
+        )
+        val density = LocalDensity.current
+        BasicReadMoreText(
+            text = annotatedDescription,
+            expanded = expanded,
+            onExpandedChange = onExpandedChange,
+            modifier = Modifier.fillMaxWidth(),
+            contentPadding = PaddingValues(start = 18.dp, top = 5.dp, end = 18.dp, bottom = 18.dp),
+            style = TextStyle.Default.copy(
+                color = MaterialTheme.colors.onSurface,
+                fontSize = 15.sp,
+                fontStyle = FontStyle.Normal,
+                lineHeight = 22.sp,
+            ),
+            inlineContent = mapOf(
+                start to InlineTextContent(
+                    Placeholder(
+                        width = with(density) { 55.dp.toSp() },
+                        height = 15.sp,
+                        placeholderVerticalAlign = PlaceholderVerticalAlign.TextCenter,
+                    ),
+                ) {
+                    Badge(
+                        text = "START",
+                        color = Color.Red,
+                        modifier = Modifier.padding(end = 5.dp),
+                    )
+                },
+                middle to InlineTextContent(
+                    Placeholder(
+                        width = with(density) { 70.dp.toSp() },
+                        height = 15.sp,
+                        placeholderVerticalAlign = PlaceholderVerticalAlign.TextCenter,
+                    ),
+                ) {
+                    Badge(
+                        text = "MIDDLE",
+                        color = Color.Blue,
+                        modifier = Modifier.padding(horizontal = 5.dp),
+                    )
+                },
+                end to InlineTextContent(
+                    Placeholder(
+                        width = with(density) { 35.dp.toSp() },
+                        height = 15.sp,
+                        placeholderVerticalAlign = PlaceholderVerticalAlign.TextCenter,
+                    ),
+                ) {
+                    Badge(
+                        text = "END",
+                        color = Color.Green,
+                        modifier = Modifier.padding(start = 5.dp),
+                    )
+                },
+            ),
+            readMoreMaxLines = 3,
+            readMoreText = stringResource(id = R.string.read_more),
+            readMoreStyle = SpanStyle(
+                color = MaterialTheme.colors.secondary,
+                fontSize = 14.sp,
+                fontWeight = FontWeight.Bold,
+            ),
+            readLessText = stringResource(id = R.string.read_less),
+        )
+    }
+}
+
+@Composable
+private fun Badge(
+    text: String,
+    color: Color,
+    modifier: Modifier = Modifier,
+    contentColor: Color = Color.White,
+    shape: Shape = RoundedCornerShape(4.dp),
+) {
+    Box(
+        contentAlignment = Alignment.Center,
+        modifier = modifier
+            .fillMaxSize()
+            .background(color = color, shape = shape)
+            .clip(shape = shape),
+    ) {
+        BasicText(
+            text = text,
+            style = TextStyle.Default.copy(
+                color = contentColor,
+                fontSize = 13.sp,
+                fontWeight = FontWeight.Bold,
+                lineHeight = 14.sp,
+            ),
+        )
+    }
+}
+
 @Composable
 private fun Item_RTL() {
     val (expanded, onExpandedChange) = rememberSaveable { mutableStateOf(false) }