mirror of
https://github.com/Novaloop-AG/element-x-android.git
synced 2026-11-02 03:06:14 +00:00
Integrate the new timeline renderer behind a feature flag (#7722)
* Integrate the new renderer with the timeline UI * Composable functions are now in `:libraries:htmlrenderer:api` so we don't need to add `impl` to other modules. * Improve inline code span * Return both the text and URL in `onLinkClick` and `onLinkLongClick` so we can check the URL is not misleading * Remove `SelectionContainer` for now - it creates issues when long pressing * Make `LocalComposeTimelineEventRenderer` contain a `ComposeLocalTimelineEventRendererData` instance. This checks if the new rendering is enabled and what is the current user id so it can be used for styling mention pills * Add fading edges to code block to indicate scrolling is possible * Long pressing in a code block copies its contents to the clipboard * Fix alignment of ordered list item prefixes * Don't use default values in State data classes --------- Co-authored-by: ElementBot <android@element.io>
This commit is contained in:
Jorge Martin Espinosa
committed by
GitHub
GitHub
parent
0ea76ecebf
commit
4e47c6170e
@@ -15,5 +15,9 @@ android {
|
||||
|
||||
dependencies {
|
||||
api(projects.libraries.matrix.api)
|
||||
implementation(projects.libraries.designsystem)
|
||||
implementation(projects.libraries.uiCommon)
|
||||
implementation(projects.libraries.uiStrings)
|
||||
|
||||
api(libs.jsoup)
|
||||
}
|
||||
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
/*
|
||||
* Copyright (c) 2026 Element Creations Ltd.
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
|
||||
* Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
package io.element.android.libraries.htmlrenderer.api.spans
|
||||
|
||||
import androidx.compose.ui.text.SpanStyle
|
||||
import androidx.compose.ui.text.font.FontFamily
|
||||
import io.element.android.compound.theme.ElementTheme
|
||||
|
||||
/**
|
||||
* The style for inline code spans.
|
||||
*/
|
||||
val InlineCodeSpanStyle: SpanStyle = SpanStyle(
|
||||
fontFamily = FontFamily.Monospace,
|
||||
fontSize = ElementTheme.typography.fontBodySmRegular.fontSize,
|
||||
)
|
||||
+70
@@ -0,0 +1,70 @@
|
||||
/*
|
||||
* Copyright (c) 2026 Element Creations Ltd.
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
|
||||
* Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
package io.element.android.libraries.htmlrenderer.api.ui
|
||||
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.WindowInsets
|
||||
import androidx.compose.foundation.layout.asPaddingValues
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.safeContent
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.text.AnnotatedString
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.dp
|
||||
import io.element.android.libraries.designsystem.theme.components.Text
|
||||
import io.element.android.libraries.htmlrenderer.api.CodeBlockNode
|
||||
import io.element.android.libraries.htmlrenderer.api.DocumentNode
|
||||
import io.element.android.libraries.htmlrenderer.api.ListItemNode
|
||||
import io.element.android.libraries.htmlrenderer.api.ListNode
|
||||
import io.element.android.libraries.htmlrenderer.api.ParagraphNode
|
||||
import io.element.android.libraries.htmlrenderer.api.QuoteNode
|
||||
import io.element.android.libraries.ui.common.layout.ContentAvoidingLayout
|
||||
import kotlinx.collections.immutable.persistentListOf
|
||||
|
||||
private val documentNode = DocumentNode(
|
||||
persistentListOf(
|
||||
ParagraphNode(AnnotatedString("Hello World, this is a")),
|
||||
QuoteNode(persistentListOf(ParagraphNode(AnnotatedString("Quote with a very long text that wraps")))),
|
||||
CodeBlockNode("fun main() {\n println(\"Hello, world!\")\n}"),
|
||||
ListNode(
|
||||
ordered = true,
|
||||
startIndex = 0,
|
||||
items = persistentListOf(
|
||||
ListItemNode(persistentListOf(ParagraphNode(AnnotatedString("First item")))),
|
||||
ListItemNode(persistentListOf(ParagraphNode(AnnotatedString("Second item")))),
|
||||
ListItemNode(persistentListOf(ParagraphNode(AnnotatedString("Third item")))),
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
@Composable
|
||||
private fun FakeTimestampView() {
|
||||
Text(text = "12:34", modifier = Modifier.background(Color.LightGray).padding(start = 12.dp))
|
||||
}
|
||||
|
||||
@Suppress("UnusedPrivateMember")
|
||||
@Preview(showBackground = true)
|
||||
@Composable
|
||||
private fun ContentAvoidingLayoutHtmlMessageContentPreview() {
|
||||
Box(modifier = Modifier.padding(WindowInsets.safeContent.asPaddingValues())) {
|
||||
ContentAvoidingLayout(
|
||||
overlay = { FakeTimestampView() },
|
||||
content = {
|
||||
HtmlMessageContent(
|
||||
modifier = Modifier.background(Color.Red),
|
||||
node = documentNode,
|
||||
onContentLayoutChange = this::onContentLayoutChange,
|
||||
)
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
+505
@@ -0,0 +1,505 @@
|
||||
/*
|
||||
* Copyright (c) 2026 Element Creations Ltd.
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
|
||||
* Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
package io.element.android.libraries.htmlrenderer.api.ui
|
||||
|
||||
import android.content.ClipData
|
||||
import androidx.compose.animation.core.animateFloatAsState
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.border
|
||||
import androidx.compose.foundation.clickable
|
||||
import androidx.compose.foundation.combinedClickable
|
||||
import androidx.compose.foundation.gestures.detectTapGestures
|
||||
import androidx.compose.foundation.horizontalScroll
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.IntrinsicSize
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.Spacer
|
||||
import androidx.compose.foundation.layout.fillMaxHeight
|
||||
import androidx.compose.foundation.layout.fillMaxSize
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.width
|
||||
import androidx.compose.foundation.layout.widthIn
|
||||
import androidx.compose.foundation.rememberScrollState
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.foundation.text.InlineTextContent
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.Immutable
|
||||
import androidx.compose.runtime.SideEffect
|
||||
import androidx.compose.runtime.State
|
||||
import androidx.compose.runtime.derivedStateOf
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.runtime.mutableStateOf
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.runtime.rememberCoroutineScope
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.draw.drawBehind
|
||||
import androidx.compose.ui.geometry.Offset
|
||||
import androidx.compose.ui.geometry.Size
|
||||
import androidx.compose.ui.graphics.Brush
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.drawOutline
|
||||
import androidx.compose.ui.graphics.drawscope.Fill
|
||||
import androidx.compose.ui.graphics.drawscope.Stroke
|
||||
import androidx.compose.ui.graphics.drawscope.translate
|
||||
import androidx.compose.ui.input.pointer.pointerInput
|
||||
import androidx.compose.ui.platform.ClipEntry
|
||||
import androidx.compose.ui.platform.LocalClipboard
|
||||
import androidx.compose.ui.platform.LocalDensity
|
||||
import androidx.compose.ui.platform.LocalInspectionMode
|
||||
import androidx.compose.ui.res.stringResource
|
||||
import androidx.compose.ui.text.AnnotatedString
|
||||
import androidx.compose.ui.text.Placeholder
|
||||
import androidx.compose.ui.text.PlaceholderVerticalAlign
|
||||
import androidx.compose.ui.text.SpanStyle
|
||||
import androidx.compose.ui.text.TextLayoutResult
|
||||
import androidx.compose.ui.text.buildAnnotatedString
|
||||
import androidx.compose.ui.text.font.FontFamily
|
||||
import androidx.compose.ui.text.rememberTextMeasurer
|
||||
import androidx.compose.ui.text.style.TextAlign
|
||||
import androidx.compose.ui.unit.Density
|
||||
import androidx.compose.ui.unit.Dp
|
||||
import androidx.compose.ui.unit.dp
|
||||
import io.element.android.compound.theme.ElementTheme
|
||||
import io.element.android.libraries.designsystem.text.toPx
|
||||
import io.element.android.libraries.designsystem.theme.components.Text
|
||||
import io.element.android.libraries.htmlrenderer.api.BlockNode
|
||||
import io.element.android.libraries.htmlrenderer.api.CodeBlockNode
|
||||
import io.element.android.libraries.htmlrenderer.api.DocumentNode
|
||||
import io.element.android.libraries.htmlrenderer.api.HtmlMessageParser.Companion.INLINE_CODE_ANNOTATION_TAG
|
||||
import io.element.android.libraries.htmlrenderer.api.HtmlMessageParser.Companion.LINK_ANNOTATION_TAG
|
||||
import io.element.android.libraries.htmlrenderer.api.ListNode
|
||||
import io.element.android.libraries.htmlrenderer.api.MentionNodeContent
|
||||
import io.element.android.libraries.htmlrenderer.api.ParagraphNode
|
||||
import io.element.android.libraries.htmlrenderer.api.QuoteNode
|
||||
import io.element.android.libraries.matrix.api.core.UserId
|
||||
import io.element.android.libraries.ui.common.layout.ContentAvoidingLayout
|
||||
import io.element.android.libraries.ui.common.layout.ContentAvoidingLayoutData
|
||||
import io.element.android.libraries.ui.strings.CommonStrings
|
||||
import kotlinx.collections.immutable.ImmutableList
|
||||
import kotlinx.collections.immutable.ImmutableMap
|
||||
import kotlinx.collections.immutable.persistentMapOf
|
||||
import kotlinx.collections.immutable.toImmutableMap
|
||||
import kotlinx.coroutines.launch
|
||||
|
||||
/**
|
||||
* Renders a parsed message tree ([DocumentNode]) as native Compose content.
|
||||
*
|
||||
* The renderer is stateless: it is driven entirely by [node] and reports interactions
|
||||
* through the callbacks. It performs no HTML parsing itself.
|
||||
*
|
||||
* @param node the root HTML node of the parsed message tree to render.
|
||||
* @param modifier the [Modifier] to be applied to the layout.
|
||||
* @param currentUserId the current user ID, if known. This can be used to display UI sent by/owned by the current user differently.
|
||||
* @param onLinkClick invoked with the target URL when a link is tapped.
|
||||
* @param onLinkLongClick invoked with the target URL when a link is long-pressed.
|
||||
* @param onMentionClick invoked when a mention pill is tapped.
|
||||
* @param onContentLayoutChange invoked with the measured layout of the very last rendered
|
||||
* [ParagraphNode], so the timeline can lay out the timestamp around it. It is only wired to that
|
||||
* last paragraph, and only when it is not nested inside a [CodeBlockNode] or [QuoteNode] — in which
|
||||
* case no measurement is reported.
|
||||
*/
|
||||
@Composable
|
||||
fun HtmlMessageContent(
|
||||
node: DocumentNode,
|
||||
modifier: Modifier = Modifier,
|
||||
currentUserId: UserId? = null,
|
||||
onLinkClick: (url: String, text: String) -> Unit = { _, _ -> },
|
||||
onLinkLongClick: (url: String, text: String) -> Unit = { _, _ -> },
|
||||
onMentionClick: (MentionNodeContent) -> Unit = {},
|
||||
onContentLayoutChange: (ContentAvoidingLayoutData) -> Unit = {},
|
||||
) {
|
||||
val measuredParagraph = remember(node) { node.lastBlockNode() }
|
||||
val context = remember(
|
||||
currentUserId,
|
||||
onLinkClick,
|
||||
onLinkLongClick,
|
||||
onMentionClick,
|
||||
measuredParagraph,
|
||||
onContentLayoutChange
|
||||
) {
|
||||
RenderContext(
|
||||
currentUserId = currentUserId,
|
||||
onLinkClick = onLinkClick,
|
||||
onLinkLongClick = onLinkLongClick,
|
||||
onMentionClick = onMentionClick,
|
||||
lastBlockNode = measuredParagraph,
|
||||
onContentLayoutChange = onContentLayoutChange,
|
||||
)
|
||||
}
|
||||
BlockNodes(nodes = node.children, context = context, modifier = modifier)
|
||||
}
|
||||
|
||||
/** Interaction callbacks and state threaded through the render tree. */
|
||||
@Immutable
|
||||
private data class RenderContext(
|
||||
val currentUserId: UserId?,
|
||||
val onLinkClick: (url: String, text: String) -> Unit,
|
||||
val onLinkLongClick: (url: String, text: String) -> Unit,
|
||||
val onMentionClick: (MentionNodeContent) -> Unit,
|
||||
// The latest descendant BlockNode of the root DocumentNode
|
||||
val lastBlockNode: BlockNode?,
|
||||
val onContentLayoutChange: (ContentAvoidingLayoutData) -> Unit,
|
||||
)
|
||||
|
||||
internal fun BlockNode.lastBlockNode(): BlockNode? = when (this) {
|
||||
is ParagraphNode -> this
|
||||
is DocumentNode -> children.lastOrNull()?.lastBlockNode()
|
||||
is ListNode -> this
|
||||
is QuoteNode -> this
|
||||
is CodeBlockNode -> this
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun BlockNodes(
|
||||
nodes: ImmutableList<BlockNode>,
|
||||
context: RenderContext,
|
||||
modifier: Modifier = Modifier,
|
||||
) {
|
||||
Column(
|
||||
modifier = modifier,
|
||||
verticalArrangement = Arrangement.spacedBy(BlockSpacing),
|
||||
) {
|
||||
nodes.forEach { BlockNodeView(node = it, context = context) }
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun BlockNodeView(
|
||||
node: BlockNode,
|
||||
context: RenderContext,
|
||||
modifier: Modifier = Modifier,
|
||||
) {
|
||||
if (node === context.lastBlockNode && node !is ParagraphNode) {
|
||||
SideEffect { context.onContentLayoutChange(ContentAvoidingLayoutData.NotOverlapping) }
|
||||
}
|
||||
|
||||
when (node) {
|
||||
is DocumentNode -> BlockNodes(nodes = node.children, context = context, modifier = modifier)
|
||||
is ParagraphNode -> {
|
||||
ParagraphView(node = node, context = context, modifier = modifier)
|
||||
}
|
||||
is CodeBlockNode -> CodeBlockView(node = node, modifier = modifier)
|
||||
is QuoteNode -> QuoteView(node = node, context = context, modifier = modifier)
|
||||
is ListNode -> ListView(node = node, context = context, modifier = modifier)
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun ParagraphView(
|
||||
node: ParagraphNode,
|
||||
context: RenderContext,
|
||||
modifier: Modifier = Modifier,
|
||||
) {
|
||||
val linkColor = ElementTheme.colors.textLinkExternal
|
||||
val codeBackgroundColor = ElementTheme.colors.bgSubtleSecondary
|
||||
val codeBorderColor = ElementTheme.colors.borderInteractiveSecondary
|
||||
val styledText = remember(node.text, linkColor) {
|
||||
node.text.applyLinkStyles(linkColor = linkColor)
|
||||
}
|
||||
val inlineContent = rememberMentionInlineContent(node.inlineContent, context)
|
||||
val layoutResult = remember { mutableStateOf<TextLayoutResult?>(null) }
|
||||
// Only the last rendered paragraph (and only when not inside a code block / quote) reports its
|
||||
// measured last line to the timeline.
|
||||
val measureLastLine = if (node === context.lastBlockNode) {
|
||||
ContentAvoidingLayout.measureLastTextLine(onContentLayoutChange = context.onContentLayoutChange)
|
||||
} else {
|
||||
null
|
||||
}
|
||||
Text(
|
||||
text = styledText,
|
||||
modifier = modifier
|
||||
.drawInlineCodeBackgrounds(styledText, layoutResult, codeBackgroundColor, codeBorderColor, LocalDensity.current)
|
||||
.linkTapHandler(styledText, layoutResult, context),
|
||||
style = ElementTheme.typography.fontBodyMdRegular,
|
||||
color = ElementTheme.colors.textPrimary,
|
||||
inlineContent = inlineContent,
|
||||
onTextLayout = { result ->
|
||||
layoutResult.value = result
|
||||
measureLastLine?.invoke(result)
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun CodeBlockView(
|
||||
node: CodeBlockNode,
|
||||
modifier: Modifier = Modifier,
|
||||
) {
|
||||
val coroutineScope = rememberCoroutineScope()
|
||||
val scrollState = rememberScrollState()
|
||||
val localClipboard = LocalClipboard.current
|
||||
val clipDataLabel = stringResource(CommonStrings.common_code_block)
|
||||
Box(
|
||||
modifier = modifier
|
||||
.clip(RoundedCornerShape(8.dp))
|
||||
.border(width = 1.dp, color = ElementTheme.colors.borderInteractiveSecondary, shape = RoundedCornerShape(8.dp))
|
||||
.background(ElementTheme.colors.bgSubtleSecondary)
|
||||
.height(IntrinsicSize.Min)
|
||||
.combinedClickable(
|
||||
onClick = {},
|
||||
onLongClick = {
|
||||
coroutineScope.launch {
|
||||
localClipboard.setClipEntry(ClipEntry(ClipData.newPlainText(clipDataLabel, node.code)))
|
||||
}
|
||||
},
|
||||
onLongClickLabel = stringResource(CommonStrings.action_copy_to_clipboard),
|
||||
),
|
||||
) {
|
||||
Text(
|
||||
modifier = Modifier.horizontalScroll(scrollState).padding(horizontal = 12.dp, vertical = 8.dp),
|
||||
text = node.code,
|
||||
style = ElementTheme.typography.fontBodySmRegular.copy(fontFamily = FontFamily.Monospace),
|
||||
color = ElementTheme.colors.textPrimary,
|
||||
softWrap = false,
|
||||
)
|
||||
|
||||
// Previews and screenshots can't render the fading edge gradients properly, everything is obscured by them, so we skip them in the preview mode.
|
||||
if (LocalInspectionMode.current.not()) {
|
||||
val progress by remember {
|
||||
derivedStateOf {
|
||||
scrollState.value.toFloat() / scrollState.maxValue.coerceAtLeast(1)
|
||||
}
|
||||
}
|
||||
|
||||
val alpha by animateFloatAsState(targetValue = progress, label = "CodeBlockViewScrollAlpha")
|
||||
|
||||
// Draw a fading edge gradient at the left and right of the code block, to hint that it is horizontally scrollable.
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.matchParentSize()
|
||||
.background(
|
||||
brush = Brush.horizontalGradient(
|
||||
colors = listOf(ElementTheme.colors.bgSubtleTertiary.copy(alpha = alpha), Color.Transparent),
|
||||
startX = 0f,
|
||||
endX = CodeBlockFadingEdgeWidth.toPx(),
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.matchParentSize()
|
||||
.background(
|
||||
brush = Brush.horizontalGradient(
|
||||
colors = listOf(Color.Transparent, ElementTheme.colors.bgSubtleTertiary.copy(alpha = 1f - alpha)),
|
||||
startX = scrollState.viewportSize - CodeBlockFadingEdgeWidth.toPx(),
|
||||
endX = scrollState.viewportSize.toFloat(),
|
||||
)
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun QuoteView(
|
||||
node: QuoteNode,
|
||||
context: RenderContext,
|
||||
modifier: Modifier = Modifier,
|
||||
) {
|
||||
Row(modifier = modifier.height(IntrinsicSize.Min)) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.width(2.dp)
|
||||
.fillMaxHeight()
|
||||
.clip(RoundedCornerShape(1.dp))
|
||||
.background(ElementTheme.colors.borderInteractiveSecondary),
|
||||
)
|
||||
Spacer(modifier = Modifier.width(8.dp))
|
||||
BlockNodes(nodes = node.children, context = context)
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun ListView(
|
||||
node: ListNode,
|
||||
context: RenderContext,
|
||||
modifier: Modifier = Modifier,
|
||||
) {
|
||||
Column(
|
||||
modifier = modifier,
|
||||
verticalArrangement = Arrangement.spacedBy(ListItemSpacing),
|
||||
) {
|
||||
node.items.forEachIndexed { index, item ->
|
||||
Row {
|
||||
Text(
|
||||
text = if (node.ordered) "${node.startIndex + index}." else "•",
|
||||
style = ElementTheme.typography.fontBodyMdRegular,
|
||||
color = ElementTheme.colors.textPrimary,
|
||||
modifier = Modifier.widthIn(min = ListMarkerWidth),
|
||||
textAlign = if (node.ordered) TextAlign.Start else TextAlign.Center,
|
||||
)
|
||||
BlockNodes(nodes = item.children, context = context)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun MentionPill(
|
||||
mention: MentionNodeContent,
|
||||
isCurrentUser: Boolean,
|
||||
onClick: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
) {
|
||||
val backgroundColor = if (isCurrentUser) ElementTheme.colors.bgBadgeAccent else ElementTheme.colors.bgBadgePrimary
|
||||
val textColor = if (isCurrentUser) ElementTheme.colors.textBadgeAccent else ElementTheme.colors.textOnSolidPrimary
|
||||
Box(
|
||||
modifier = modifier
|
||||
.fillMaxSize()
|
||||
.clip(RoundedCornerShape(percent = 50))
|
||||
.background(backgroundColor)
|
||||
.clickable(onClick = onClick)
|
||||
.padding(horizontal = PillPaddingHorizontal, vertical = PillPaddingVertical),
|
||||
contentAlignment = Alignment.Center,
|
||||
) {
|
||||
Text(
|
||||
text = mention.displayText,
|
||||
style = ElementTheme.typography.fontBodyLgMedium,
|
||||
color = textColor,
|
||||
maxLines = 1,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds an [InlineTextContent] entry for each mention placeholder. Each pill is measured so
|
||||
* the placeholder reserves exactly the space the pill needs.
|
||||
*/
|
||||
@Composable
|
||||
private fun rememberMentionInlineContent(
|
||||
mentions: ImmutableMap<String, MentionNodeContent>,
|
||||
context: RenderContext,
|
||||
): ImmutableMap<String, InlineTextContent> {
|
||||
if (mentions.isEmpty()) return persistentMapOf()
|
||||
val textMeasurer = rememberTextMeasurer()
|
||||
val pillTextStyle = ElementTheme.typography.fontBodyLgMedium
|
||||
val density = LocalDensity.current
|
||||
return mentions.mapValues { (_, mention) ->
|
||||
val measured = textMeasurer.measure(mention.displayText, pillTextStyle)
|
||||
val width = with(density) { measured.size.width.toDp() + PillPaddingHorizontal * 2 }
|
||||
val height = with(density) { measured.size.height.toDp() + PillPaddingVertical * 2 }
|
||||
InlineTextContent(
|
||||
placeholder = Placeholder(
|
||||
width = with(density) { width.toSp() },
|
||||
height = with(density) { height.toSp() },
|
||||
placeholderVerticalAlign = PlaceholderVerticalAlign.Center,
|
||||
),
|
||||
) {
|
||||
MentionPill(
|
||||
mention = mention,
|
||||
isCurrentUser = mention is MentionNodeContent.User && mention.userId == context.currentUserId,
|
||||
onClick = { context.onMentionClick(mention) },
|
||||
)
|
||||
}
|
||||
}.toImmutableMap()
|
||||
}
|
||||
|
||||
/** Overlays the theme-dependent link color onto the link-annotated ranges. */
|
||||
private fun AnnotatedString.applyLinkStyles(linkColor: Color): AnnotatedString {
|
||||
val linkRanges = getStringAnnotations(LINK_ANNOTATION_TAG, 0, length)
|
||||
if (linkRanges.isEmpty()) return this
|
||||
return buildAnnotatedString {
|
||||
append(this@applyLinkStyles)
|
||||
linkRanges.forEach { addStyle(SpanStyle(color = linkColor), it.start, it.end) }
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Draws a rounded, bordered box behind each inline code ([INLINE_CODE_ANNOTATION_TAG]) range, so
|
||||
* inline code matches the look of [CodeBlockView] but only covers the annotated text. A range that
|
||||
* wraps across several lines gets one box per line.
|
||||
*/
|
||||
private fun Modifier.drawInlineCodeBackgrounds(
|
||||
text: AnnotatedString,
|
||||
layoutResult: State<TextLayoutResult?>,
|
||||
backgroundColor: Color,
|
||||
borderColor: Color,
|
||||
density: Density,
|
||||
): Modifier = drawBehind {
|
||||
val layout = layoutResult.value ?: return@drawBehind
|
||||
val codeRanges = text.getStringAnnotations(INLINE_CODE_ANNOTATION_TAG, 0, text.length)
|
||||
if (codeRanges.isEmpty()) return@drawBehind
|
||||
val strokeWidth = InlineCodeBorderWidth.toPx()
|
||||
val horizontalPadding = InlineCodeHorizontalPadding.toPx()
|
||||
codeRanges.forEach { range ->
|
||||
val firstLine = layout.getLineForOffset(range.start)
|
||||
val lastLine = layout.getLineForOffset(range.end)
|
||||
for (line in firstLine..lastLine) {
|
||||
val lineStart = maxOf(range.start, layout.getLineStart(line))
|
||||
val lineEnd = minOf(range.end, layout.getLineEnd(line, visibleEnd = true))
|
||||
if (lineEnd <= lineStart) continue
|
||||
val startX = layout.getHorizontalPosition(lineStart, usePrimaryDirection = true)
|
||||
val endX = layout.getHorizontalPosition(lineEnd, usePrimaryDirection = true)
|
||||
val left = minOf(startX, endX) - horizontalPadding
|
||||
val right = maxOf(startX, endX) + horizontalPadding
|
||||
val topLeft = Offset(left, layout.getLineTop(line))
|
||||
val size = Size(right - left, layout.getLineBottom(line) - layout.getLineTop(line))
|
||||
|
||||
val shape = RoundedCornerShape(
|
||||
topStart = if (line == firstLine) InlineCodeCornerRadius else 0.dp,
|
||||
topEnd = if (line == lastLine) InlineCodeCornerRadius else 0.dp,
|
||||
bottomStart = if (line == firstLine) InlineCodeCornerRadius else 0.dp,
|
||||
bottomEnd = if (line == lastLine) InlineCodeCornerRadius else 0.dp,
|
||||
)
|
||||
|
||||
val outline = shape.createOutline(
|
||||
size = size,
|
||||
layoutDirection = layoutDirection,
|
||||
density = density,
|
||||
)
|
||||
|
||||
translate(topLeft.x, topLeft.y) {
|
||||
drawOutline(outline = outline, color = backgroundColor, style = Fill)
|
||||
drawOutline(outline = outline, color = borderColor, style = Stroke(width = strokeWidth))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private fun Modifier.linkTapHandler(
|
||||
text: AnnotatedString,
|
||||
layoutResult: State<TextLayoutResult?>,
|
||||
context: RenderContext,
|
||||
): Modifier = pointerInput(text) {
|
||||
detectTapGestures(
|
||||
onTap = { offset ->
|
||||
val (url, urlText) = layoutResult.value?.urlAt(offset, text) ?: return@detectTapGestures
|
||||
context.onLinkClick(url, urlText)
|
||||
},
|
||||
onLongPress = { offset ->
|
||||
val (url, urlText) = layoutResult.value?.urlAt(offset, text) ?: return@detectTapGestures
|
||||
context.onLinkLongClick(url, urlText)
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
private fun TextLayoutResult.urlAt(offset: Offset, text: AnnotatedString): Pair<String, String>? {
|
||||
val position = getOffsetForPosition(offset)
|
||||
val urlAnnotation = text.getStringAnnotations(LINK_ANNOTATION_TAG, position, position).firstOrNull() ?: return null
|
||||
return urlAnnotation.item to text.substring(urlAnnotation.start, urlAnnotation.end)
|
||||
}
|
||||
|
||||
private val BlockSpacing: Dp = 8.dp
|
||||
private val ListItemSpacing: Dp = 4.dp
|
||||
private val ListMarkerWidth: Dp = 24.dp
|
||||
private val PillPaddingHorizontal: Dp = 6.dp
|
||||
private val PillPaddingVertical: Dp = 2.dp
|
||||
|
||||
/** Rounded, bordered box drawn behind inline code. */
|
||||
private val InlineCodeCornerRadius: Dp = 6.dp
|
||||
private val InlineCodeBorderWidth: Dp = 1.dp
|
||||
private val InlineCodeHorizontalPadding: Dp = 2.dp
|
||||
|
||||
/** The width of the fading edge gradient drawn at the left and right of a [CodeBlockView]. */
|
||||
private val CodeBlockFadingEdgeWidth: Dp = 32.dp
|
||||
+226
@@ -0,0 +1,226 @@
|
||||
/*
|
||||
* Copyright (c) 2026 Element Creations Ltd.
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
|
||||
* Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
package io.element.android.libraries.htmlrenderer.api.ui
|
||||
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.text.appendInlineContent
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.text.AnnotatedString
|
||||
import androidx.compose.ui.text.SpanStyle
|
||||
import androidx.compose.ui.text.buildAnnotatedString
|
||||
import androidx.compose.ui.text.font.FontStyle
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.text.withStyle
|
||||
import androidx.compose.ui.tooling.preview.PreviewParameter
|
||||
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
|
||||
import androidx.compose.ui.unit.dp
|
||||
import io.element.android.libraries.designsystem.preview.ElementPreview
|
||||
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
|
||||
import io.element.android.libraries.htmlrenderer.api.BlockNode
|
||||
import io.element.android.libraries.htmlrenderer.api.CodeBlockNode
|
||||
import io.element.android.libraries.htmlrenderer.api.DocumentNode
|
||||
import io.element.android.libraries.htmlrenderer.api.HtmlMessageParser.Companion.INLINE_CODE_ANNOTATION_TAG
|
||||
import io.element.android.libraries.htmlrenderer.api.HtmlMessageParser.Companion.LINK_ANNOTATION_TAG
|
||||
import io.element.android.libraries.htmlrenderer.api.ListItemNode
|
||||
import io.element.android.libraries.htmlrenderer.api.ListNode
|
||||
import io.element.android.libraries.htmlrenderer.api.MentionNodeContent
|
||||
import io.element.android.libraries.htmlrenderer.api.ParagraphNode
|
||||
import io.element.android.libraries.htmlrenderer.api.QuoteNode
|
||||
import io.element.android.libraries.htmlrenderer.api.spans.InlineCodeSpanStyle
|
||||
import io.element.android.libraries.matrix.api.core.UserId
|
||||
import kotlinx.collections.immutable.ImmutableMap
|
||||
import kotlinx.collections.immutable.persistentListOf
|
||||
import kotlinx.collections.immutable.persistentMapOf
|
||||
import kotlinx.collections.immutable.toImmutableList
|
||||
|
||||
@PreviewsDayNight
|
||||
@Composable
|
||||
internal fun HtmlMessageContentPreview(
|
||||
@PreviewParameter(HtmlMessageContentPreviewParam::class) node: DocumentNode,
|
||||
) = ElementPreview {
|
||||
HtmlMessageContent(
|
||||
node = node,
|
||||
currentUserId = UserId("@me:example.org"),
|
||||
modifier = Modifier.padding(16.dp),
|
||||
)
|
||||
}
|
||||
|
||||
internal class HtmlMessageContentPreviewParam : PreviewParameterProvider<DocumentNode> {
|
||||
override val values: Sequence<DocumentNode>
|
||||
get() = sequenceOf(
|
||||
richParagraph(),
|
||||
inlineCode(),
|
||||
multilineInlineCode(),
|
||||
orderedList(),
|
||||
quote(),
|
||||
nestedQuotes(),
|
||||
codeBlock(),
|
||||
mention(),
|
||||
mentionOwn(),
|
||||
nestedList(),
|
||||
nestedListWithComplexContents(),
|
||||
)
|
||||
|
||||
private fun richParagraph() = document(
|
||||
paragraph(
|
||||
buildAnnotatedString {
|
||||
append("Hello ")
|
||||
withStyle(SpanStyle(fontWeight = FontWeight.Bold)) { append("bold") }
|
||||
append(", ")
|
||||
withStyle(SpanStyle(fontStyle = FontStyle.Italic)) { append("italic") }
|
||||
append(" and a ")
|
||||
val start = length
|
||||
append("link")
|
||||
addStringAnnotation(LINK_ANNOTATION_TAG, "https://element.io", start, length)
|
||||
}
|
||||
),
|
||||
)
|
||||
|
||||
private fun inlineCode() = document(
|
||||
paragraph(
|
||||
buildAnnotatedString {
|
||||
append("Run ")
|
||||
val start = length
|
||||
withStyle(InlineCodeSpanStyle) { append("git status") }
|
||||
addStringAnnotation(INLINE_CODE_ANNOTATION_TAG, "", start, length)
|
||||
append(" to see changes")
|
||||
}
|
||||
),
|
||||
)
|
||||
|
||||
private fun multilineInlineCode() = document(
|
||||
QuoteNode(persistentListOf(
|
||||
paragraph(
|
||||
buildAnnotatedString {
|
||||
append("Trying ")
|
||||
val start = length
|
||||
withStyle(InlineCodeSpanStyle) {
|
||||
append("inline code when it needs to be wrapped in several lines, just to check what it looks like")
|
||||
}
|
||||
addStringAnnotation(INLINE_CODE_ANNOTATION_TAG, "", start, length)
|
||||
append(", is it good?")
|
||||
}
|
||||
),
|
||||
))
|
||||
)
|
||||
|
||||
private fun orderedList() = document(
|
||||
ListNode(
|
||||
ordered = true,
|
||||
startIndex = 1,
|
||||
items = persistentListOf(
|
||||
ListItemNode(persistentListOf(paragraph(AnnotatedString("First item")))),
|
||||
ListItemNode(persistentListOf(paragraph(AnnotatedString("Second item")))),
|
||||
),
|
||||
),
|
||||
)
|
||||
|
||||
private fun quote() = document(
|
||||
paragraph(AnnotatedString("Someone said:")),
|
||||
QuoteNode(persistentListOf(paragraph(AnnotatedString("This is a quoted message.")))),
|
||||
)
|
||||
|
||||
private fun nestedQuotes() = document(
|
||||
paragraph(AnnotatedString("Someone said:")),
|
||||
QuoteNode(persistentListOf(
|
||||
paragraph(AnnotatedString("This is a quoted message.")),
|
||||
QuoteNode(persistentListOf(
|
||||
paragraph(AnnotatedString("This is a nested quote.")),
|
||||
codeBlock(),
|
||||
)),
|
||||
)),
|
||||
)
|
||||
|
||||
private fun codeBlock() = document(
|
||||
CodeBlockNode("fun main() {\n println(\"Hello, world!\")\n}"),
|
||||
)
|
||||
|
||||
private fun mention() = document(
|
||||
paragraph(
|
||||
text = buildAnnotatedString {
|
||||
append("Hey ")
|
||||
appendInlineContent(MENTION_ID, "@alice")
|
||||
append(", welcome!")
|
||||
},
|
||||
inlineContent = persistentMapOf(
|
||||
MENTION_ID to MentionNodeContent.User(displayText = "@alice", userId = UserId("@alice:example.org")),
|
||||
),
|
||||
),
|
||||
)
|
||||
|
||||
private fun mentionOwn() = document(
|
||||
paragraph(
|
||||
text = buildAnnotatedString {
|
||||
append("Hey ")
|
||||
appendInlineContent(MENTION_ID, "@me")
|
||||
append(", welcome!")
|
||||
},
|
||||
inlineContent = persistentMapOf(
|
||||
MENTION_ID to MentionNodeContent.User(displayText = "@me", userId = UserId("@me:example.org")),
|
||||
),
|
||||
),
|
||||
)
|
||||
|
||||
private fun nestedList() = document(
|
||||
ListNode(
|
||||
ordered = false,
|
||||
startIndex = 1,
|
||||
items = persistentListOf(
|
||||
ListItemNode(
|
||||
persistentListOf(
|
||||
paragraph(AnnotatedString("Parent item")),
|
||||
ListNode(
|
||||
ordered = false,
|
||||
startIndex = 1,
|
||||
items = persistentListOf(
|
||||
ListItemNode(persistentListOf(paragraph(AnnotatedString("Nested item")))),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
|
||||
private fun nestedListWithComplexContents() = document(
|
||||
ListNode(
|
||||
ordered = false,
|
||||
startIndex = 1,
|
||||
items = persistentListOf(
|
||||
ListItemNode(
|
||||
persistentListOf(
|
||||
paragraph(AnnotatedString("Parent item")),
|
||||
ListNode(
|
||||
ordered = false,
|
||||
startIndex = 1,
|
||||
items = persistentListOf(
|
||||
ListItemNode(persistentListOf(
|
||||
paragraph(AnnotatedString("Nested item")),
|
||||
codeBlock(),
|
||||
quote(),
|
||||
)),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
|
||||
private fun document(vararg blocks: BlockNode) = DocumentNode(blocks.toList().toImmutableList())
|
||||
|
||||
private fun paragraph(
|
||||
text: AnnotatedString,
|
||||
inlineContent: ImmutableMap<String, MentionNodeContent> = persistentMapOf(),
|
||||
) = ParagraphNode(text = text, inlineContent = inlineContent)
|
||||
|
||||
private companion object {
|
||||
const val MENTION_ID = "mention_0"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user