From 49fa3c4d5a8c734f245f2c35d4746ff4db404560 Mon Sep 17 00:00:00 2001 From: Lonami Exo Date: Sat, 29 Oct 2022 13:35:05 +0200 Subject: [PATCH] Render formatted text in the ChatScreen --- .../lonami/talaria/ui/screens/ChatScreen.kt | 64 ++++++++++++++++++- 1 file changed, 63 insertions(+), 1 deletion(-) diff --git a/app/src/main/java/dev/lonami/talaria/ui/screens/ChatScreen.kt b/app/src/main/java/dev/lonami/talaria/ui/screens/ChatScreen.kt index fef1bbb..ec34376 100644 --- a/app/src/main/java/dev/lonami/talaria/ui/screens/ChatScreen.kt +++ b/app/src/main/java/dev/lonami/talaria/ui/screens/ChatScreen.kt @@ -4,6 +4,7 @@ import androidx.compose.foundation.layout.* import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.LazyListState import androidx.compose.foundation.lazy.rememberLazyListState +import androidx.compose.foundation.text.ClickableText import androidx.compose.foundation.text.KeyboardActions import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material.Button @@ -12,9 +13,15 @@ import androidx.compose.material.Text import androidx.compose.material.TextField import androidx.compose.runtime.* import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.AnnotatedString +import androidx.compose.ui.text.SpanStyle +import androidx.compose.ui.text.font.FontFamily +import androidx.compose.ui.text.font.FontStyle import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.input.ImeAction +import androidx.compose.ui.text.style.TextDecoration import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.lifecycle.viewmodel.compose.viewModel @@ -23,7 +30,62 @@ import dev.lonami.talaria.data.MockMessageRepository import dev.lonami.talaria.ui.state.ChatViewModel import dev.lonami.talaria.ui.theme.TalariaTheme import kotlinx.coroutines.launch +import uniffi.talaria.Formatting import uniffi.talaria.Message +import uniffi.talaria.TextFormat + +@Composable +fun FormattedText( + text: String, + formatting: List, + onFormatClicked: (TextFormat) -> Unit, +) { + val anno = AnnotatedString(text, spanStyles = formatting.map { + AnnotatedString.Range(SpanStyle( + fontWeight = when (it.format) { + Formatting.BOLD -> FontWeight.Bold + else -> FontWeight.Normal + }, + fontStyle = when (it.format) { + Formatting.ITALIC -> FontStyle.Italic + else -> FontStyle.Normal + }, + fontFamily = when (it.format) { + Formatting.CODE, + Formatting.PRE, + -> FontFamily.Monospace + else -> FontFamily.Default + }, + textDecoration = when (it.format) { + Formatting.UNDERLINE -> TextDecoration.Underline + Formatting.STRIKE -> TextDecoration.LineThrough + else -> TextDecoration.None + }, + color = when (it.format) { + Formatting.MENTION, + Formatting.HASH_TAG, + Formatting.BOT_COMMAND, + Formatting.URL, + Formatting.EMAIL, + Formatting.TEXT_URL, + Formatting.MENTION_NAME, + Formatting.PHONE, + Formatting.CASH_TAG, + -> Color(0xff0000ff) + else -> Color.Black + }), it.offset, it.offset + it.length) + }) + ClickableText( + anno, + onClick = { offset -> + anno.spanStyles.indexOfFirst { + it.start <= offset && offset <= it.end + }.takeIf { it != -1 }?.also { + onFormatClicked(formatting[it]) + } + } + ) +} @Composable fun MessageCard(message: Message, modifier: Modifier = Modifier) { @@ -39,7 +101,7 @@ fun MessageCard(message: Message, modifier: Modifier = Modifier) { .padding(8.dp) ) { Text(message.sender, fontWeight = FontWeight.Bold) - Text(message.text) + FormattedText(message.text, message.formatting, onFormatClicked = {}) } } }