Fix #3188: Added caption-with-value in ImageTagHandler

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

@@ -11,6 +11,7 @@ import org.xml.sax.Attributes
 const val CUSTOM_IMG_TAG = "oppia-noninteractive-image"
 private const val CUSTOM_IMG_FILE_PATH_ATTRIBUTE = "filepath-with-value"
 private const val CUSTOM_IMG_ALT_TEXT_ATTRIBUTE = "alt-with-value"
+private const val CUSTOM_IMG_CAPTION_ATTRIBUTE = "caption-with-value"
 
 /**
  * A custom tag handler for supporting custom Oppia images parsed with [CustomHtmlContentHandler].
@@ -27,6 +28,8 @@ class ImageTagHandler(
   ) {
     val source = attributes.getJsonStringValue(CUSTOM_IMG_FILE_PATH_ATTRIBUTE)
     val contentDescription = attributes.getJsonStringValue(CUSTOM_IMG_ALT_TEXT_ATTRIBUTE)
+    val caption = attributes.getJsonStringValue(CUSTOM_IMG_CAPTION_ATTRIBUTE)
+
     if (source != null) {
       val (startIndex, endIndex) = output.run {
         // Use a control character to ensure that there's at least 1 character on which to "attach"
@@ -57,6 +60,15 @@ class ImageTagHandler(
         Spannable.SPAN_INCLUSIVE_EXCLUSIVE
       )
       output.replace(openIndex, output.length, spannableBuilder)
-    } else consoleLogger.w("ImageTagHandler", "Failed to parse $CUSTOM_IMG_ALT_TEXT_ATTRIBUTE")
+    } else consoleLogger.w(
+      "ImageTagHandler",
+      "Failed to parse $CUSTOM_IMG_ALT_TEXT_ATTRIBUTE"
+    )
+
+    if (!caption.isNullOrBlank()) {
+      output.append("\n").append(caption)
+    } else {
+      consoleLogger.w("ImageTagHandler", "Failed to parse $CUSTOM_IMG_CAPTION_ATTRIBUTE")
+    }
   }
 }

utility/src/test/java/org/oppia/android/util/parser/html/ImageTagHandlerTest.kt

@@ -70,6 +70,11 @@ private const val IMAGE_TAG_WITH_SPACE_ONLY_ALT_VALUE_MARKUP =
     "caption-with-value=\"""\" " +
     "filepath-with-value=\"&amp;quot;test_image1.png&amp;quot;\"></oppia-noninteractive-image>"
 
+private const val IMAGE_TAG_WITH_CAPTION_MARKUP =
+  "<oppia-noninteractive-image alt-with-value=\"&amp;quot;alt text 1&amp;quot;\" " +
+    "caption-with-value=\"&amp;quot;This is a caption&amp;quot;\" " +
+    "filepath-with-value=\"&amp;quot;test_image1.png&amp;quot;\"></oppia-noninteractive-image>"
+
 /** Tests for [ImageTagHandler]. */
 @RunWith(AndroidJUnit4::class)
 @LooperMode(LooperMode.Mode.PAUSED)
@@ -99,6 +104,37 @@ class ImageTagHandlerTest {
 
   // TODO(#3085): Introduce test for verifying that the error log scenario is logged correctly.
 
+  @Test
+  fun testParseHtml_withImageCardMarkupAndCaption_includesCaptionBelowImage() {
+    val parsedHtml =
+      CustomHtmlContentHandler.fromHtml(
+        html = IMAGE_TAG_WITH_CAPTION_MARKUP,
+        imageRetriever = mockImageRetriever,
+        customTagHandlers = tagHandlersWithImageTagSupport
+      )
+
+    val parsedHtmlStr = parsedHtml.toString()
+    assertThat(parsedHtmlStr).isEqualTo("alt text 1\nThis is a caption")
+  }
+
+  @Test
+  fun testParseHtml_withMultipleImageCardMarkupsAndCaptions_includesAllCaptions() {
+    val combinedHtml = "$IMAGE_TAG_WITH_CAPTION_MARKUP and $IMAGE_TAG_WITH_CAPTION_MARKUP"
+
+    val parsedHtml =
+      CustomHtmlContentHandler.fromHtml(
+        html = combinedHtml,
+        imageRetriever = mockImageRetriever,
+        customTagHandlers = tagHandlersWithImageTagSupport
+      )
+
+    val parsedHtmlStr = parsedHtml.toString()
+    assertThat(parsedHtmlStr).isEqualTo(
+      "alt text 1\nThis is a caption" +
+        " and alt text 1\nThis is a caption"
+    )
+  }
+
   @Test
   fun testParseHtml_emptyString_doesNotIncludeImageSpan() {
     val parsedHtml =