react-native-enriched-markdown-scaffold 0.6.0-scaffold.4

package/android/src/main/java/com/swmansion/enriched/markdown/renderer/ImageRenderer.kt

@@ -0,0 +1,61 @@
+package com.swmansion.enriched.markdown.renderer
+
+import android.text.SpannableStringBuilder
+import com.swmansion.enriched.markdown.parser.MarkdownASTNode
+import com.swmansion.enriched.markdown.utils.text.extensions.isInlineImage
+import com.swmansion.enriched.markdown.utils.text.span.SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE
+
+class ImageRenderer : NodeRenderer {
+  override fun render(
+    node: MarkdownASTNode,
+    builder: SpannableStringBuilder,
+    onLinkPress: ((String) -> Unit)?,
+    onLinkLongPress: ((String) -> Unit)?,
+    factory: RendererFactory,
+  ) {
+    val imageUrl = node.getAttribute("url") ?: return
+
+    val isInline = builder.isInlineImage()
+    val start = builder.length
+
+    // Append Object Replacement Character as the span anchor
+    builder.append("\uFFFC")
+    val end = builder.length
+
+    val altText = extractTextFromNode(node)
+
+    val span =
+      factory.createImageSpan(
+        imageUrl = imageUrl,
+        isInline = isInline,
+        altText = altText,
+      )
+
+    builder.setSpan(
+      span,
+      start,
+      end,
+      SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE,
+    )
+
+    // Notify factory for external span tracking/collection
+    factory.registerImageSpan(span)
+  }
+
+  /**
+   * Recursively extracts text content from children to use as alt text.
+   */
+  private fun extractTextFromNode(node: MarkdownASTNode): String {
+    val buffer = StringBuilder()
+    appendChildText(node, buffer)
+    return buffer.toString().trim()
+  }
+
+  private fun appendChildText(
+    node: MarkdownASTNode,
+    buffer: StringBuilder,
+  ) {
+    node.content.let { buffer.append(it) }
+    node.children.forEach { child -> appendChildText(child, buffer) }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/renderer/LineBreakRenderer.kt

@@ -0,0 +1,16 @@
+package com.swmansion.enriched.markdown.renderer
+
+import android.text.SpannableStringBuilder
+import com.swmansion.enriched.markdown.parser.MarkdownASTNode
+
+class LineBreakRenderer : NodeRenderer {
+  override fun render(
+    node: MarkdownASTNode,
+    builder: SpannableStringBuilder,
+    onLinkPress: ((String) -> Unit)?,
+    onLinkLongPress: ((String) -> Unit)?,
+    factory: RendererFactory,
+  ) {
+    builder.append("\n")
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/renderer/LinkRenderer.kt

@@ -0,0 +1,29 @@
+package com.swmansion.enriched.markdown.renderer
+
+import android.text.SpannableStringBuilder
+import com.swmansion.enriched.markdown.parser.MarkdownASTNode
+import com.swmansion.enriched.markdown.spans.LinkSpan
+import com.swmansion.enriched.markdown.utils.text.span.SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE
+
+class LinkRenderer(
+  private val config: RendererConfig,
+) : NodeRenderer {
+  override fun render(
+    node: MarkdownASTNode,
+    builder: SpannableStringBuilder,
+    onLinkPress: ((String) -> Unit)?,
+    onLinkLongPress: ((String) -> Unit)?,
+    factory: RendererFactory,
+  ) {
+    val url = node.getAttribute("url") ?: return
+
+    factory.renderWithSpan(builder, { factory.renderChildren(node, builder, onLinkPress, onLinkLongPress) }) { start, end, blockStyle ->
+      builder.setSpan(
+        LinkSpan(url, onLinkPress, onLinkLongPress, factory.styleCache, blockStyle, factory.context),
+        start,
+        end,
+        SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE,
+      )
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/renderer/ListContextManager.kt

@@ -0,0 +1,89 @@
+package com.swmansion.enriched.markdown.renderer
+
+import com.swmansion.enriched.markdown.styles.ListStyle
+
+/**
+ * Manages list context transitions (entering/exiting lists, handling nesting, etc.).
+ * Centralizes logic for managing list depth, item numbers, and parent context restoration.
+ *
+ * Key concepts:
+ * - **listDepth**: Tracks nesting level (0 = top-level, 1 = first nested, etc.)
+ * - **Stack-based numbering**: Pushes parent's item number when entering nested ordered lists,
+ *   allowing each level to maintain its own counter while preserving parent's position.
+ * - **Parent context restoration**: Restores parent list's style when exiting nested lists
+ *   so subsequent parent items render correctly.
+ */
+class ListContextManager(
+  private val context: BlockStyleContext,
+) {
+  /**
+   * Captures the state when entering a list, needed for proper restoration when exiting.
+   * This ensures we can restore the exact parent context even after nested lists modify it.
+   */
+  data class ListEntryState(
+    val previousDepth: Int,
+    val parentListType: BlockStyleContext.ListType?,
+    val wasNestedInOrderedList: Boolean,
+  )
+
+  /**
+   * Enters a list context. Handles:
+   * - Saving parent list item numbers to stack (for ordered lists) before resetting counter
+   * - Incrementing list depth
+   * - Setting the appropriate list style
+   * - Resetting item number for the new list
+   */
+  fun enterList(
+    listType: BlockStyleContext.ListType,
+    style: ListStyle,
+  ): ListEntryState {
+    val previousDepth = context.listDepth
+    val isNested = previousDepth > 0
+    val parentListType = if (isNested) context.listType else null
+    val parentIsOrdered = parentListType == BlockStyleContext.ListType.ORDERED
+
+    // Push parent's item number to stack before resetting for nested list.
+    // Even if entering an unordered list, we need to save if parent is ordered.
+    if (isNested && parentIsOrdered) {
+      context.pushOrderedListItemNumber()
+    }
+
+    context.listDepth = previousDepth + 1
+    when (listType) {
+      BlockStyleContext.ListType.ORDERED -> {
+        context.setOrderedListStyle(style)
+      }
+
+      BlockStyleContext.ListType.UNORDERED -> {
+        context.setUnorderedListStyle(style)
+      }
+    }
+    context.resetListItemNumber()
+
+    return ListEntryState(
+      previousDepth = previousDepth,
+      parentListType = parentListType,
+      wasNestedInOrderedList = isNested && parentIsOrdered,
+    )
+  }
+
+  /**
+   * Exits a list context. Handles:
+   * - Popping current list block style from stack
+   * - Decrementing list depth back to previousDepth
+   * - Restoring parent list item numbers from stack (if applicable)
+   * - Restoring parent list metadata (if nested) so subsequent parent items render correctly
+   */
+  fun exitList(entryState: ListEntryState) {
+    context.listDepth = entryState.previousDepth
+    context.clearListStyle()
+
+    if (entryState.wasNestedInOrderedList) {
+      context.popOrderedListItemNumber()
+    }
+
+    if (entryState.previousDepth > 0) {
+      context.listType = entryState.parentListType
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/renderer/ListItemRenderer.kt

@@ -0,0 +1,127 @@
+package com.swmansion.enriched.markdown.renderer
+
+import android.text.SpannableStringBuilder
+import android.text.style.ForegroundColorSpan
+import android.text.style.StrikethroughSpan
+import com.swmansion.enriched.markdown.parser.MarkdownASTNode
+import com.swmansion.enriched.markdown.spans.BaseListSpan
+import com.swmansion.enriched.markdown.spans.OrderedListSpan
+import com.swmansion.enriched.markdown.spans.TaskListSpan
+import com.swmansion.enriched.markdown.spans.UnorderedListSpan
+import com.swmansion.enriched.markdown.utils.text.span.SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE
+
+class ListItemRenderer(
+  private val config: RendererConfig,
+) : NodeRenderer {
+  override fun render(
+    node: MarkdownASTNode,
+    builder: SpannableStringBuilder,
+    onLinkPress: ((String) -> Unit)?,
+    onLinkLongPress: ((String) -> Unit)?,
+    factory: RendererFactory,
+  ) {
+    val styleContext = factory.blockStyleContext
+    val start = builder.length
+    val listType = styleContext.listType ?: return
+
+    val isTask = node.attributes["isTask"] == "true"
+    val isChecked = isTask && node.attributes["taskChecked"] == "true"
+
+    if (listType == BlockStyleContext.ListType.ORDERED) {
+      styleContext.incrementListItemNumber()
+    }
+
+    val taskIndex = if (isTask) styleContext.taskItemCount++ else -1
+
+    factory.renderChildren(node, builder, onLinkPress, onLinkLongPress)
+
+    if (builder.length == start || builder.substring(start).isBlank()) return
+
+    while (builder.length > start && builder.last() == '\n') {
+      builder.delete(builder.length - 1, builder.length)
+    }
+    builder.append("\n")
+
+    val depth = styleContext.listDepth - 1
+    val listStyle = config.style.listStyle
+    val itemEnd = builder.length
+    val span =
+      if (isTask) {
+        TaskListSpan(
+          taskStyle = config.style.taskListStyle,
+          listStyle = listStyle,
+          depth = depth,
+          context = factory.context,
+          styleCache = factory.styleCache,
+          taskIndex = taskIndex,
+          isChecked = isChecked,
+        )
+      } else {
+        when (listType) {
+          BlockStyleContext.ListType.UNORDERED -> {
+            UnorderedListSpan(listStyle, depth, factory.context, factory.styleCache)
+          }
+
+          BlockStyleContext.ListType.ORDERED -> {
+            OrderedListSpan(listStyle, depth, factory.context, factory.styleCache).apply {
+              setItemNumber(styleContext.listItemNumber)
+            }
+          }
+        }
+      }
+
+    builder.setSpan(span, start, itemEnd, SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE)
+
+    if (isTask && isChecked) {
+      applyCheckedDecorations(builder, start, itemEnd, depth)
+    }
+  }
+
+  private fun applyCheckedDecorations(
+    builder: SpannableStringBuilder,
+    itemStart: Int,
+    itemEnd: Int,
+    itemDepth: Int,
+  ) {
+    val taskStyle = config.style.taskListStyle
+    val checkedTextColor = taskStyle.checkedTextColor
+    val strikethrough = taskStyle.checkedStrikethrough
+
+    if (checkedTextColor == 0 && !strikethrough) return
+
+    val excludedRanges =
+      builder
+        .getSpans(itemStart, itemEnd, BaseListSpan::class.java)
+        .filter { it.depth > itemDepth }
+        .map { builder.getSpanStart(it) to builder.getSpanEnd(it) }
+        .sortedBy { it.first }
+
+    var currentPos = itemStart
+
+    for ((start, end) in excludedRanges) {
+      if (start > currentPos) {
+        applySpans(builder, currentPos, start, checkedTextColor, strikethrough)
+      }
+      currentPos = maxOf(currentPos, end)
+    }
+
+    if (currentPos < itemEnd) {
+      applySpans(builder, currentPos, itemEnd, checkedTextColor, strikethrough)
+    }
+  }
+
+  private fun applySpans(
+    builder: SpannableStringBuilder,
+    start: Int,
+    end: Int,
+    color: Int,
+    strikethrough: Boolean,
+  ) {
+    if (color != 0) {
+      builder.setSpan(ForegroundColorSpan(color), start, end, SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE)
+    }
+    if (strikethrough) {
+      builder.setSpan(StrikethroughSpan(), start, end, SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE)
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/renderer/ListRenderer.kt

@@ -0,0 +1,74 @@
+package com.swmansion.enriched.markdown.renderer
+
+import android.text.SpannableStringBuilder
+import com.swmansion.enriched.markdown.parser.MarkdownASTNode
+import com.swmansion.enriched.markdown.spans.MarginBottomSpan
+import com.swmansion.enriched.markdown.utils.text.span.SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE
+import com.swmansion.enriched.markdown.utils.text.span.applyLineHeightSkippingImages
+import com.swmansion.enriched.markdown.utils.text.span.applyMarginTop
+
+class ListRenderer(
+  private val config: RendererConfig,
+  private val isOrdered: Boolean,
+) : NodeRenderer {
+  override fun render(
+    node: MarkdownASTNode,
+    builder: SpannableStringBuilder,
+    onLinkPress: ((String) -> Unit)?,
+    onLinkLongPress: ((String) -> Unit)?,
+    factory: RendererFactory,
+  ) {
+    val start = builder.length
+    val listStyle = config.style.listStyle
+    val listType = if (isOrdered) BlockStyleContext.ListType.ORDERED else BlockStyleContext.ListType.UNORDERED
+
+    val contextManager = ListContextManager(factory.blockStyleContext)
+    val entryState = contextManager.enterList(listType, listStyle)
+
+    // For top-level lists, insert marginTop spacer before rendering content
+    if (entryState.previousDepth == 0) {
+      applyMarginTop(builder, start, listStyle.marginTop)
+    }
+
+    // Track start index after the potential 1-character marginTop spacer
+    val contentStart = if (entryState.previousDepth == 0 && listStyle.marginTop > 0) start + 1 else start
+
+    // Ensure nested lists start on a new line if the parent hasn't provided one
+    if (entryState.previousDepth > 0 && builder.isNotEmpty() && builder.last() != '\n') {
+      builder.append("\n")
+    }
+
+    try {
+      factory.renderChildren(node, builder, onLinkPress, onLinkLongPress)
+    } finally {
+      contextManager.exitList(entryState)
+    }
+
+    if (builder.length > contentStart) {
+      applyListSpacing(builder, contentStart, entryState.previousDepth, listStyle)
+    }
+  }
+
+  private fun applyListSpacing(
+    builder: SpannableStringBuilder,
+    start: Int,
+    depth: Int,
+    style: com.swmansion.enriched.markdown.styles.BaseBlockStyle,
+  ) {
+    // TODO: LineHeightSpan may also clip superscript/subscript glyphs that extend
+    // outside the normal line bounds. A similar "skip" strategy as for images may
+    // be needed here once super/subscript usage in practice is better understood.
+    applyLineHeightSkippingImages(builder, start, builder.length, style.lineHeight)
+
+    // External bottom margin is only handled by the root-level list
+    if (depth == 0) {
+      builder.append("\n")
+      builder.setSpan(
+        MarginBottomSpan(style.marginBottom),
+        builder.length - 1,
+        builder.length,
+        SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE,
+      )
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/renderer/NodeRenderer.kt

@@ -0,0 +1,161 @@
+package com.swmansion.enriched.markdown.renderer
+
+import android.content.Context
+import android.text.SpannableStringBuilder
+import android.text.style.MetricAffectingSpan
+import com.swmansion.enriched.markdown.parser.MarkdownASTNode
+import com.swmansion.enriched.markdown.spans.ImageSpan
+import com.swmansion.enriched.markdown.styles.StyleConfig
+import com.swmansion.enriched.markdown.utils.common.FeatureFlags
+import com.swmansion.enriched.markdown.utils.text.span.SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE
+
+interface NodeRenderer {
+  fun render(
+    node: MarkdownASTNode,
+    builder: SpannableStringBuilder,
+    onLinkPress: ((String) -> Unit)?,
+    onLinkLongPress: ((String) -> Unit)?,
+    factory: RendererFactory,
+  )
+}
+
+data class RendererConfig(
+  val style: StyleConfig,
+)
+
+class RendererFactory(
+  private val config: RendererConfig,
+  val context: Context,
+  private val onImageSpanCreated: (ImageSpan) -> Unit,
+) {
+  val blockStyleContext = BlockStyleContext()
+
+  val styleCache = SpanStyleCache(config.style)
+
+  /**
+   * Spans registered here are applied after the full document tree is rendered, so they
+   * always end up after block-level spans in the SpannableStringBuilder's internal array.
+   * See [BaselineShiftRenderer] for the root cause and the proper long-term fix.
+   */
+  private data class DeferredSpan(
+    val span: MetricAffectingSpan,
+    val start: Int,
+    val end: Int,
+  )
+
+  private val deferredSpans = mutableListOf<DeferredSpan>()
+
+  fun registerDeferredSpan(
+    span: MetricAffectingSpan,
+    start: Int,
+    end: Int,
+  ) {
+    deferredSpans.add(DeferredSpan(span, start, end))
+  }
+
+  fun flushDeferredSpans(builder: SpannableStringBuilder) {
+    for ((span, start, end) in deferredSpans) {
+      builder.setSpan(span, start, end, SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE)
+    }
+    deferredSpans.clear()
+  }
+
+  fun resetForNewRender() {
+    blockStyleContext.resetForNewRender()
+    deferredSpans.clear()
+  }
+
+  fun createImageSpan(
+    imageUrl: String,
+    isInline: Boolean,
+    altText: String,
+  ): ImageSpan =
+    ImageSpan(
+      context = context,
+      imageUrl = imageUrl,
+      styleConfig = config.style,
+      isInline = isInline,
+      altText = altText,
+    )
+
+  private val textRenderer = TextRenderer()
+  private val lineBreakRenderer = LineBreakRenderer()
+
+  private val renderers: Map<MarkdownASTNode.NodeType, NodeRenderer> by lazy {
+    buildMap {
+      put(MarkdownASTNode.NodeType.Document, DocumentRenderer())
+      put(MarkdownASTNode.NodeType.Paragraph, ParagraphRenderer(config))
+      put(MarkdownASTNode.NodeType.Heading, HeadingRenderer(config))
+      put(MarkdownASTNode.NodeType.Blockquote, BlockquoteRenderer(config))
+      put(MarkdownASTNode.NodeType.CodeBlock, CodeBlockRenderer(config))
+      put(MarkdownASTNode.NodeType.UnorderedList, ListRenderer(config, isOrdered = false))
+      put(MarkdownASTNode.NodeType.OrderedList, ListRenderer(config, isOrdered = true))
+      put(MarkdownASTNode.NodeType.ListItem, ListItemRenderer(config))
+      put(MarkdownASTNode.NodeType.Text, textRenderer)
+      put(MarkdownASTNode.NodeType.Link, LinkRenderer(config))
+      put(MarkdownASTNode.NodeType.Strong, StrongRenderer(config))
+      put(MarkdownASTNode.NodeType.Emphasis, EmphasisRenderer(config))
+      put(MarkdownASTNode.NodeType.Strikethrough, StrikethroughRenderer(config))
+      put(MarkdownASTNode.NodeType.Underline, UnderlineRenderer(config))
+      put(MarkdownASTNode.NodeType.Superscript, SuperscriptRenderer())
+      put(MarkdownASTNode.NodeType.Subscript, SubscriptRenderer())
+      put(MarkdownASTNode.NodeType.Highlight, HighlightRenderer())
+      put(MarkdownASTNode.NodeType.Code, CodeRenderer(config))
+      put(MarkdownASTNode.NodeType.Image, ImageRenderer())
+      put(MarkdownASTNode.NodeType.LineBreak, lineBreakRenderer)
+      put(MarkdownASTNode.NodeType.ThematicBreak, ThematicBreakRenderer(config))
+      put(MarkdownASTNode.NodeType.Spoiler, SpoilerRenderer())
+      if (FeatureFlags.IS_MATH_ENABLED) {
+        try {
+          val mathInlineRendererClass = Class.forName("com.swmansion.enriched.markdown.renderer.MathInlineRenderer")
+          val constructor = mathInlineRendererClass.getConstructor(RendererConfig::class.java, Context::class.java)
+          put(MarkdownASTNode.NodeType.LatexMathInline, constructor.newInstance(config, context) as NodeRenderer)
+        } catch (_: Exception) {
+          // math not available
+        }
+      }
+    }
+  }
+
+  /**
+   * Called by ImageRenderer to report a new span to the collector.
+   */
+  fun registerImageSpan(span: ImageSpan) {
+    onImageSpanCreated(span)
+  }
+
+  fun getRenderer(node: MarkdownASTNode): NodeRenderer =
+    renderers[node.type] ?: run {
+      android.util.Log.w("RendererFactory", "No renderer for: ${node.type}")
+      textRenderer
+    }
+
+  fun renderChildren(
+    node: MarkdownASTNode,
+    builder: SpannableStringBuilder,
+    onLinkPress: ((String) -> Unit)?,
+    onLinkLongPress: ((String) -> Unit)?,
+  ) {
+    node.children.forEach { child ->
+      getRenderer(child).render(child, builder, onLinkPress, onLinkLongPress, this)
+    }
+  }
+
+  /**
+   * Improved helper for applying spans to blocks of text.
+   */
+  inline fun renderWithSpan(
+    builder: SpannableStringBuilder,
+    renderContent: () -> Unit,
+    applySpan: (start: Int, end: Int, blockStyle: BlockStyle) -> Unit,
+  ) {
+    val start = builder.length
+    renderContent()
+    val end = builder.length
+
+    if (end > start) {
+      val blockStyle = blockStyleContext.requireBlockStyle()
+      applySpan(start, end, blockStyle)
+    }
+  }
+}

package/android/src/main/java/com/swmansion/enriched/markdown/renderer/ParagraphRenderer.kt

@@ -0,0 +1,75 @@
+package com.swmansion.enriched.markdown.renderer
+
+import android.text.SpannableStringBuilder
+import android.text.style.AlignmentSpan
+import com.swmansion.enriched.markdown.parser.MarkdownASTNode
+import com.swmansion.enriched.markdown.styles.ParagraphStyle
+import com.swmansion.enriched.markdown.utils.text.extensions.containsBlockImage
+import com.swmansion.enriched.markdown.utils.text.span.SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE
+import com.swmansion.enriched.markdown.utils.text.span.applyLineHeightSkippingImages
+import com.swmansion.enriched.markdown.utils.text.span.applyMarginBottom
+import com.swmansion.enriched.markdown.utils.text.span.applyMarginTop
+
+class ParagraphRenderer(
+  private val config: RendererConfig,
+) : NodeRenderer {
+  override fun render(
+    node: MarkdownASTNode,
+    builder: SpannableStringBuilder,
+    onLinkPress: ((String) -> Unit)?,
+    onLinkLongPress: ((String) -> Unit)?,
+    factory: RendererFactory,
+  ) {
+    val context = factory.blockStyleContext
+
+    // If nested (e.g., inside a list or blockquote), render content simply with a newline
+    if (context.isInsideBlockElement()) {
+      factory.renderChildren(node, builder, onLinkPress, onLinkLongPress)
+      builder.append("\n")
+      return
+    }
+
+    val start = builder.length
+    val style = config.style.paragraphStyle
+
+    context.setParagraphStyle(style)
+    try {
+      factory.renderChildren(node, builder, onLinkPress, onLinkLongPress)
+    } finally {
+      context.popBlockStyle()
+    }
+
+    if (builder.length > start) {
+      builder.applySpans(node, style, start)
+    }
+  }
+
+  private fun SpannableStringBuilder.applySpans(
+    node: MarkdownASTNode,
+    style: ParagraphStyle,
+    start: Int,
+  ) {
+    val end = length
+
+    // TODO: LineHeightSpan may also clip superscript/subscript glyphs that extend
+    // outside the normal line bounds. A similar "skip" strategy as for images may
+    // be needed here once super/subscript usage in practice is better understood.
+    applyLineHeightSkippingImages(this, start, end, style.lineHeight)
+
+    // Only apply AlignmentSpan for non-default alignments (Center/Right)
+    if (style.textAlign.needsAlignmentSpan) {
+      setSpan(
+        AlignmentSpan.Standard(style.textAlign.layoutAlignment),
+        start,
+        end,
+        SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE,
+      )
+    }
+
+    val marginTop = if (node.containsBlockImage()) config.style.imageStyle.marginTop else style.marginTop
+    applyMarginTop(this, start, marginTop)
+
+    val marginBottom = if (node.containsBlockImage()) config.style.imageStyle.marginBottom else style.marginBottom
+    applyMarginBottom(this, marginBottom)
+  }
+}