Fix #4859, #4530: Images in 'li' tags display in inline rather than block mode.

app/src/sharedTest/java/org/oppia/android/app/parser/HtmlParserTest.kt

@@ -487,7 +487,7 @@ class HtmlParserTest {
   }
 
   @Test
-  fun testHtmlContent_imageWithText_noAdditionalSpacesAdded() {
+  fun testHtmlContent_imageWithText_imageSpanParsedCorrectly() {
     val htmlParser = htmlParserFactory.create(
       resourceBucketName,
       entityType = "",
@@ -508,9 +508,6 @@ class HtmlParserTest {
     val imageSpans = htmlResult.getSpansFromWholeString(ImageSpan::class)
     assertThat(imageSpans).hasLength(1)
     assertThat(imageSpans.first().source).isEqualTo("test.png")
-    // Verify that the image span does not start/end with a space since there is other text present.
-    assertThat(htmlResult.toString()).startsWith("A")
-    assertThat(htmlResult.toString()).doesNotContain(" ")
   }
 
   @Test

utility/src/main/java/org/oppia/android/util/parser/html/HtmlParser.kt

@@ -79,20 +79,28 @@ class HtmlParser private constructor(
     supportsConceptCards: Boolean = false
   ): Spannable {
     var htmlContent = rawString
+    val regex = Regex("""<oppia-noninteractive-image [^>]*>.*?</oppia-noninteractive-image>""")
 
     // Canvas does not support RTL, it always starts from left to right in RTL due to which compound drawables are
     // not center aligned. To avoid this situation check if RTL is enabled and set the textDirection.
     if (isRtl) {
       htmlContentTextView.textDirection = View.TEXT_DIRECTION_RTL
 
-      val regex = Regex("""<oppia-noninteractive-image [^>]*>.*?</oppia-noninteractive-image>""")
       val modifiedHtmlContent = rawString.replace(regex) {
         val oppiaImageTag = it.value
         """<div style="text-align: center;">$oppiaImageTag</div>"""
       }
       htmlContent = modifiedHtmlContent
     } else {
       htmlContentTextView.textDirection = View.TEXT_DIRECTION_LTR
+
+      // Images are wrapped inside a <div> tag, because the <div> tag is a block-level element,
+      // so that all images display in block mode and on a new line."
+      val modifiedHtmlContent = rawString.replace(regex) {
+        val oppiaImageTag = it.value
+        """<div>$oppiaImageTag</div>"""
+      }
+      htmlContent = modifiedHtmlContent
     }
 
     htmlContentTextView.invalidate()

utility/src/main/java/org/oppia/android/util/parser/image/UrlImageParser.kt

@@ -319,14 +319,21 @@ class UrlImageParser private constructor(
           drawableWidth -= maxContentItemPadding
         }
 
-        val drawableLeft = if (imageCenterAlign && !isRTLMode()) {
+        var drawableLeft = if (imageCenterAlign && !isRTLMode()) {
           calculateInitialMargin(maxAvailableWidth, drawableWidth)
         } else {
           0f
         }
 
         val drawableTop = 0f
-        val drawableRight = drawableLeft + drawableWidth
+        var drawableRight = drawableLeft + drawableWidth
+
+        // If the image is getting cut off, recalculate the positions of the drawableLeft and drawableRight.
+        if (drawableRight + maxContentItemPadding > maxAvailableWidth) {
+          drawableLeft -= maxContentItemPadding
+          drawableRight -= maxContentItemPadding
+        }
+
         val drawableBottom = drawableTop + drawableHeight
         return Rect(
           drawableLeft.toInt(), drawableTop.toInt(), drawableRight.toInt(), drawableBottom.toInt()