Hey everyone, has anyone implemented a text field ...

# compose

[Robin Bettinghausen]

Hey everyone, has anyone implemented a text field in Compose that supports paragraph logic—i.e.:
• Soft wraps with the normal line spacing
• Manual line breaks rendered with slightly increased line spacing (and some padding or similar)
With the standard `TextField`/`OutlinedTextField` I can’t seem to get this behavior, and I haven’t found a working workaround yet. Any pointers or examples would be really appreciated! Best, Robin!

[Chrimaeon]

Use an output transformer and add an „invisible“ second new line character.

[Robin Bettinghausen]

@Composable
fun ParagraphTextField() {
    var text by remember { mutableStateOf("") }

    val paragraphTransformer = VisualTransformation { textInput ->
        val marker = "\u200B"
        val transformed = textInput.text
            .replace("\n", "\n$marker")
        TransformedText(
            AnnotatedString(transformed),
            OffsetMapping.Identity
        )
    }

    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        modifier = Modifier.fillMaxWidth(),
        visualTransformation = paragraphTransformer,
        placeholder = { /* … */ }
    )
}

[Robin Bettinghausen]

tried it like this, but the app crashes when i do the manual linebreak. so i am stuck here

[Robin Bettinghausen]

problem seems to be that the offset mapping is being confused by the marker

[Chrimaeon]

yes, you need to calculate the offset depending on how many markers you added.

[Chrimaeon]

the offset is used to have the cursor on the right position.

[Chrimaeon]

check the sample for credit cards https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]amples.kt?q=androidx.compose.ui.text.samples.creditCardFilter

[Robin Bettinghausen]

thanks ! so far i did not arrive in a result that is working like i want it to. but appreciate your support! 🙂

[Chrimaeon]

as it uses an annotated string, you can also have a look at https://developer.android.com/reference/kotlin/androidx/compose/ui/text/ParagraphStyle