BugFix: Image goes over the text (#117)

Author: vitorpamplona

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

@@ -12,6 +12,7 @@ import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.Card
 import androidx.compose.material.Checkbox
 import androidx.compose.material.MaterialTheme
+import androidx.compose.material.ProvideTextStyle
 import androidx.compose.material.Surface
 import androidx.compose.material.Text
 import androidx.compose.material.darkColors
@@ -25,8 +26,10 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.em
 import com.halilibo.richtext.markdown.Markdown
 import com.halilibo.richtext.markdown.MarkdownParseOptions
 import com.halilibo.richtext.ui.RichTextStyle
@@ -100,17 +103,19 @@ import com.halilibo.richtext.ui.resolveDefaults
 
         SelectionContainer {
           Column(Modifier.verticalScroll(rememberScrollState())) {
-            MaterialRichText(
-              style = richTextStyle,
-              modifier = Modifier.padding(8.dp),
-            ) {
-              Markdown(
-                content = sampleMarkdown,
-                markdownParseOptions = markdownParseOptions,
-                onLinkClicked = {
-                  Toast.makeText(context, it, Toast.LENGTH_SHORT).show()
-                }
-              )
+            ProvideTextStyle(TextStyle(lineHeight = 1.3.em)) {
+              MaterialRichText(
+                style = richTextStyle,
+                modifier = Modifier.padding(8.dp),
+              ) {
+                Markdown(
+                  content = sampleMarkdown,
+                  markdownParseOptions = markdownParseOptions,
+                  onLinkClicked = {
+                    Toast.makeText(context, it, Toast.LENGTH_SHORT).show()
+                  }
+                )
+              }
             }
           }
         }
@@ -155,9 +160,14 @@ private val sampleMarkdown = """
   ---
   
   ## Full-bleed Image
-  
   ![](https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1920px-Image_created_with_a_mobile_phone.png)
 
+  ## Images smaller than the width should center
+  ![](https://cdn.nostr.build/p/4a84.png)
+  
+  On LineHeight bug, the image below goes over this text. 
+  ![](https://cdn.nostr.build/p/PxZ0.jpg)
+
   ## Emphasis
 
   Emphasis, aka italics, with *asterisks* or _underscores_.

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

@@ -15,6 +15,7 @@ import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.selection.SelectionContainer
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.ProvideTextStyle
 import androidx.compose.material.Slider
 import androidx.compose.material.Surface
 import androidx.compose.material.Text
@@ -26,8 +27,10 @@ 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.text.TextStyle
 import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.em
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.window.singleWindowApplication
 import com.halilibo.richtext.markdown.Markdown
@@ -76,13 +79,15 @@ fun main(): Unit = singleWindowApplication(
                 .padding(8.dp)
             )
           }
-          MaterialRichText(
-            modifier = Modifier
-              .weight(1f)
-              .verticalScroll(rememberScrollState()),
-            style = richTextStyle
-          ) {
-            Markdown(content = text)
+          ProvideTextStyle(TextStyle(lineHeight = 1.3.em)) {
+            MaterialRichText(
+              modifier = Modifier
+                .weight(1f)
+                .verticalScroll(rememberScrollState()),
+              style = richTextStyle
+            ) {
+              Markdown(content = text)
+            }
           }
         }
       }
@@ -177,6 +182,18 @@ private val sampleMarkdown = """
   ###### Header 6
   ---
 
+  ## Full-bleed Image
+  
+  ![](https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1920px-Image_created_with_a_mobile_phone.png)
+  
+  ## Images smaller than the width should center
+  ![](https://cdn.nostr.build/p/4a84.png)
+
+  On LineHeight bug, the image below goes over this text. 
+  ![](https://cdn.nostr.build/p/PxZ0.jpg)
+
+  ---
+
   ## Emphasis
 
   Emphasis, aka italics, with *asterisks* or _underscores_.

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

@@ -7,13 +7,13 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.isSpecified
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.dp
-import coil.annotation.ExperimentalCoilApi
 import coil.compose.rememberAsyncImagePainter
 import coil.request.ImageRequest
 import coil.size.Size
@@ -23,7 +23,6 @@ private val DEFAULT_IMAGE_SIZE = 64.dp
 /**
  * Implementation of RemoteImage by using Coil library for Android.
  */
-@OptIn(ExperimentalCoilApi::class)
 @Composable
 internal actual fun RemoteImage(
   url: String,
@@ -41,7 +40,7 @@ internal actual fun RemoteImage(
 
   val density = LocalDensity.current
 
-  BoxWithConstraints {
+  BoxWithConstraints(modifier, contentAlignment = Alignment.Center) {
     val sizeModifier by remember(density, painter) {
       derivedStateOf {
         val painterIntrinsicSize = painter.state.painter?.intrinsicSize

richtext-ui/src/commonMain/kotlin/com/halilibo/richtext/ui/string/RichTextString.kt

@@ -6,6 +6,7 @@ import androidx.compose.foundation.text.appendInlineContent
 import androidx.compose.runtime.Immutable
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.ParagraphStyle
 import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.font.FontFamily
@@ -295,7 +296,18 @@ public data class RichTextString internal constructor(
     ) {
       val tag = randomUUID()
       formatObjects["inline:$tag"] = content
+
+      // Resets the style to defaults.
+      //
+      // This is important for inline content because the user might set a global line height
+      // via ProvideTextStyle(TextStyle(lineHeight = 1.3.em)) { ... }
+      // Once set, the line height is fixed for all objects and any inline content (like images)
+      // will expand over the text. Since this is not a text section, it should be fine.
+      //
+      // Fixed line height seems to only affect mobile.
+      builder.pushStyle(ParagraphStyle())
       builder.appendInlineContent(tag, alternateText)
+      builder.pop()
     }
 
     /**