MarkdownText: improve link formatting

This commit is contained in:
MM20 2023-06-12 16:48:56 +02:00
parent 1e1831b537
commit 9f0d441538
No known key found for this signature in database
GPG Key ID: 0B61A8F2DEAFA389
3 changed files with 33 additions and 4 deletions

View File

@ -5,6 +5,7 @@ import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.text.BasicTextField import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material3.ColorScheme
import androidx.compose.material3.LocalContentColor import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ProvideTextStyle import androidx.compose.material3.ProvideTextStyle
@ -43,6 +44,7 @@ fun MarkdownEditor(
placeholder: (@Composable () -> Unit)? = null placeholder: (@Composable () -> Unit)? = null
) { ) {
val typography = MaterialTheme.typography val typography = MaterialTheme.typography
val colorScheme = MaterialTheme.colorScheme
val delimiterColor = MaterialTheme.colorScheme.secondary val delimiterColor = MaterialTheme.colorScheme.secondary
val interactionSource = remember { MutableInteractionSource() } val interactionSource = remember { MutableInteractionSource() }
@ -116,8 +118,9 @@ fun MarkdownEditor(
cursorBrush = SolidColor(MaterialTheme.colorScheme.primary), cursorBrush = SolidColor(MaterialTheme.colorScheme.primary),
visualTransformation = remember( visualTransformation = remember(
typography, typography,
colorScheme,
delimiterColor delimiterColor
) { MarkdownTransformation(typography, delimiterColor) }, ) { MarkdownTransformation(colorScheme, typography, delimiterColor) },
interactionSource = interactionSource, interactionSource = interactionSource,
) )
@ -156,6 +159,7 @@ fun MarkdownEditor(
class MarkdownTransformation( class MarkdownTransformation(
private val colorScheme: ColorScheme,
private val typography: Typography, private val typography: Typography,
delimiterColor: Color, delimiterColor: Color,
) : VisualTransformation { ) : VisualTransformation {
@ -170,7 +174,7 @@ class MarkdownTransformation(
return TransformedText( return TransformedText(
buildAnnotatedString { buildAnnotatedString {
append(text) append(text)
applyStyles(tree, typography, delimiterStyle) applyStyles(tree, colorScheme, typography, delimiterStyle)
}, },
OffsetMapping.Identity, OffsetMapping.Identity,
) )

View File

@ -132,11 +132,12 @@ fun ParagraphNode(node: ASTNode, text: String) {
val start = node.startOffset val start = node.startOffset
val end = node.endOffset val end = node.endOffset
val substring = text.substring(start, end) val substring = text.substring(start, end)
val colorScheme = MaterialTheme.colorScheme
val typography = MaterialTheme.typography val typography = MaterialTheme.typography
Text( Text(
text = buildAnnotatedString { text = buildAnnotatedString {
append(substring) append(substring)
applyStyles(node, typography, SpanStyle(fontSize = 0.sp), node.startOffset) applyStyles(node, colorScheme, typography, SpanStyle(fontSize = 0.sp), node.startOffset)
}, },
) )
} }

View File

@ -1,11 +1,14 @@
package de.mm20.launcher2.ui.component.markdown package de.mm20.launcher2.ui.component.markdown
import androidx.compose.material3.ColorScheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Typography import androidx.compose.material3.Typography
import androidx.compose.ui.text.AnnotatedString import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.SpanStyle import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextDecoration
import org.intellij.markdown.MarkdownElementTypes import org.intellij.markdown.MarkdownElementTypes
import org.intellij.markdown.MarkdownTokenTypes import org.intellij.markdown.MarkdownTokenTypes
import org.intellij.markdown.ast.ASTNode import org.intellij.markdown.ast.ASTNode
@ -13,6 +16,7 @@ import kotlin.math.min
fun AnnotatedString.Builder.applyStyles( fun AnnotatedString.Builder.applyStyles(
node: ASTNode, node: ASTNode,
colorScheme: ColorScheme,
typography: Typography, typography: Typography,
delimiterStyle: SpanStyle, delimiterStyle: SpanStyle,
rootOffset: Int = 0, rootOffset: Int = 0,
@ -121,9 +125,29 @@ fun AnnotatedString.Builder.applyStyles(
min(node.endOffset + 1 - rootOffset, length) min(node.endOffset + 1 - rootOffset, length)
) )
} }
MarkdownElementTypes.INLINE_LINK -> {
val text = node.children.firstOrNull { it.type == MarkdownElementTypes.LINK_TEXT }
val destination = node.children.firstOrNull { it.type == MarkdownElementTypes.LINK_DESTINATION }
if (text != null && destination != null) {
addStyle(
SpanStyle(
color = colorScheme.primary,
textDecoration = TextDecoration.Underline
),
text.startOffset - rootOffset,
text.endOffset - rootOffset,
)
addStyle(
delimiterStyle,
destination.startOffset - rootOffset,
destination.endOffset - rootOffset,
)
}
}
} }
for (child in node.children) { for (child in node.children) {
applyStyles(child, typography, delimiterStyle, rootOffset) applyStyles(child, colorScheme, typography, delimiterStyle, rootOffset)
} }
if (node.children.isEmpty() && if (node.children.isEmpty() &&