Skip to content

InlineContent not rendering in tables #511

@sn-michiyo

Description

@sn-michiyo

Bug Description

InlineContent works when not in a table (e.g. in a paragraph) but not when inside a table. When inside a table the placeholder is rendered.

Steps to Reproduce

Steps to reproduce the behavior:

  1. Replace code in Sample.md with
Here's a table demonstrating various features:

Marked as ⦃check⦄ Complete

| Feature | Status |
|---------|--------|
| **Headers** |  ⦃check⦄ Complete |
| **Links** |  ⦃check⦄ Complete |
| **Bold/Italic** | ⦃check⦄ Complete |
| **Tables** | ⦃check⦄ Complete |

  1. Add this MarkdownAnnotator.kt file
package com.mikepenz.markdown.sample

import androidx.compose.foundation.text.appendInlineContent
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.text.AnnotatedString
import com.mikepenz.markdown.model.MarkdownAnnotator
import com.mikepenz.markdown.model.markdownAnnotator
import org.intellij.markdown.MarkdownTokenTypes
import org.intellij.markdown.ast.getTextInNode

const val PLACEHOLDER_PREFIX = "⦃"
const val PLACEHOLDER_SUFFIX = "⦄"

private val PLACEHOLDER_PATTERN = Regex("$PLACEHOLDER_PREFIX([^⦄]+)$PLACEHOLDER_SUFFIX")

@Composable
fun annotator(): MarkdownAnnotator {
    return remember {
        markdownAnnotator { content, child ->
            when (child.type) {
                MarkdownTokenTypes.TEXT -> {
                    val nodeText = child.getTextInNode(content).toString()
                    handleTextWithPlaceholders(nodeText)
                }
                else -> false
            }
        }
    }
}

fun AnnotatedString.Builder.handleTextWithPlaceholders(nodeText: String): Boolean {
    val matches = PLACEHOLDER_PATTERN.findAll(nodeText).toList()
    
    if (matches.isEmpty()) return false
    
    var lastIndex = 0
    matches.forEach { match ->
        if (match.range.first > lastIndex) {
            append(nodeText.substring(lastIndex, match.range.first))
        }
        appendInlineContent(match.value, match.value)
        lastIndex = match.range.last + 1
    }
    
    if (lastIndex < nodeText.length) {
        append(nodeText.substring(lastIndex))
    }
    
    return true
}

  1. In MarkdownPage.kt, add these lines
            inlineContent = markdownInlineContent(
                content = mapOf(
                    "⦃check⦄" to InlineTextContent(
                        Placeholder(
                            width = 20.sp,
                            height = 20.sp,
                            placeholderVerticalAlign = PlaceholderVerticalAlign.TextCenter
                        )
                    ) {
                        Text("✅")
                    }
                )
            ),
            annotator = annotator(),

Result: the annotator (replacing "⦃check⦄" with a Text Composable of an emoji) works on text outside the table, but not text inside the table

Image

Expected result: The annotator works on text both outside and inside the table

Investigation: I found if I modified MarkdownTableBasicText to explicitly pass in the composition local's inlineContent like this, then it works as expected

@Composable
fun MarkdownTableBasicText(
    content: String,
    cell: ASTNode,
    style: TextStyle,
    maxLines: Int = 1,
    overflow: TextOverflow = TextOverflow.Ellipsis,
    annotatorSettings: AnnotatorSettings = annotatorSettings(),
) {
    MarkdownBasicText(
        text = content.buildMarkdownAnnotatedString(
            textNode = cell,
            style = style,
            annotatorSettings = annotatorSettings,
        ),
        style = style,
        maxLines = maxLines,
        overflow = overflow,
        inlineContent = LocalMarkdownInlineContent.current.inlineContent,
    )
}
Image

Question

Is it expected that inlineContent doesn't work in tables? Or is this a bug?

Environment

Library Version: 3.38.1
Platform: Android
Device: Pixel 7 Pro
OS Version: Android 16
Kotlin Version: [not sure, I'm on commit https://github.com/mikepenz/multiplatform-markdown-renderer/commit/bed5ff58b55d961bb299bc667add6f52ce73bfed in the sample app]
Kotlin Version: [not sure, I'm on commit https://github.com/mikepenz/multiplatform-markdown-renderer/commit/bed5ff58b55d961bb299bc667add6f52ce73bfed in the sample app]

Checklist

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions