diff --git a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/ElementRichTextEditorStyle.kt b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/ElementRichTextEditorStyle.kt index bf13b8016c..357507ba23 100644 --- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/ElementRichTextEditorStyle.kt +++ b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/ElementRichTextEditorStyle.kt @@ -31,6 +31,7 @@ object ElementRichTextEditorStyle { } else { ElementTheme.colors.textSecondary }, + placeholderColor = ElementTheme.colors.textSecondary, lineHeight = TextUnit.Unspecified, includeFontPadding = true, ) diff --git a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt index 0014634b7f..e4ba0d2401 100644 --- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt +++ b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt @@ -39,7 +39,6 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.res.stringResource -import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp @@ -176,12 +175,12 @@ fun TextComposer( TextInputBox( composerMode = composerMode, onResetComposerMode = onResetComposerMode, - placeholder = placeholder, - showPlaceholder = state.richTextEditorState.messageHtml.isEmpty(), + isTextEmpty = state.richTextEditorState.messageHtml.isEmpty(), subcomposing = subcomposing, ) { RichTextEditor( state = state.richTextEditorState, + placeholder = placeholder, // Disable most of the editor functionality if it's just being measured for a subcomposition. // This prevents it gaining focus and mutating the state. registerStateUpdates = !subcomposing, @@ -205,12 +204,13 @@ fun TextComposer( TextInputBox( composerMode = composerMode, onResetComposerMode = onResetComposerMode, - placeholder = placeholder, - showPlaceholder = state.state.text.value().isEmpty(), + isTextEmpty = state.state.text.value().isEmpty(), subcomposing = subcomposing, ) { MarkdownTextInput( state = state.state, + placeholder = placeholder, + placeholderColor = ElementTheme.colors.textSecondary, subcomposing = subcomposing, onTyping = onTyping, onReceiveSuggestion = onReceiveSuggestion, @@ -492,8 +492,7 @@ private fun TextFormattingLayout( private fun TextInputBox( composerMode: MessageComposerMode, onResetComposerMode: () -> Unit, - placeholder: String, - showPlaceholder: Boolean, + isTextEmpty: Boolean, subcomposing: Boolean, textInput: @Composable () -> Unit, ) { @@ -515,7 +514,6 @@ private fun TextInputBox( onResetComposerMode = onResetComposerMode, ) } - val defaultTypography = ElementTheme.typography.fontBodyLgRegular Box( modifier = Modifier .padding(top = 4.dp, bottom = 4.dp, start = 12.dp, end = 12.dp) @@ -523,21 +521,8 @@ private fun TextInputBox( .then(if (!subcomposing) Modifier.testTag(TestTags.textEditor) else Modifier), contentAlignment = Alignment.CenterStart, ) { - // Placeholder - if (showPlaceholder) { - Text( - text = placeholder, - style = defaultTypography.copy( - color = ElementTheme.colors.textSecondary, - ), - maxLines = 1, - overflow = TextOverflow.Ellipsis, - ) - } - textInput() - - if (showPlaceholder && composerMode.showCaptionCompatibilityWarning()) { + if (isTextEmpty && composerMode.showCaptionCompatibilityWarning()) { var showBottomSheet by remember { mutableStateOf(false) } Icon( modifier = Modifier diff --git a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/markdown/MarkdownTextInput.kt b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/markdown/MarkdownTextInput.kt index 58cd9c29d2..f9baca43ea 100644 --- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/markdown/MarkdownTextInput.kt +++ b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/markdown/MarkdownTextInput.kt @@ -8,6 +8,7 @@ package io.element.android.libraries.textcomposer.components.markdown import android.content.ClipData +import android.content.res.ColorStateList import android.graphics.Color import android.net.Uri import android.text.Editable @@ -18,6 +19,7 @@ import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.toArgb import androidx.compose.ui.unit.dp import androidx.compose.ui.viewinterop.AndroidView import androidx.core.text.getSpans @@ -26,6 +28,7 @@ import androidx.core.view.OnReceiveContentListener import androidx.core.view.ViewCompat import androidx.core.view.setPadding import androidx.core.widget.addTextChangedListener +import io.element.android.compound.theme.ElementTheme import io.element.android.libraries.designsystem.preview.ElementPreview import io.element.android.libraries.designsystem.preview.PreviewsDayNight import io.element.android.libraries.testtags.TestTags @@ -43,6 +46,8 @@ import io.element.android.wysiwyg.compose.internal.applyStyleInCompose @Composable fun MarkdownTextInput( state: MarkdownTextEditorState, + placeholder: String, + placeholderColor: androidx.compose.ui.graphics.Color, subcomposing: Boolean, onTyping: (Boolean) -> Unit, onReceiveSuggestion: (Suggestion?) -> Unit, @@ -87,6 +92,8 @@ fun MarkdownTextInput( setBackgroundColor(Color.TRANSPARENT) val text = state.text.value() setText(text) + setHint(placeholder) + setHintTextColor(ColorStateList.valueOf(placeholderColor.toArgb())) inputType = InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_FLAG_CAP_SENTENCES or InputType.TYPE_TEXT_FLAG_MULTI_LINE or @@ -189,6 +196,8 @@ internal fun MarkdownTextInputPreview() { val style = ElementRichTextEditorStyle.composerStyle(hasFocus = true) MarkdownTextInput( state = aMarkdownTextEditorState(initialText = "Hello, World!"), + placeholder = "Placeholder", + placeholderColor = ElementTheme.colors.textSecondary, subcomposing = false, onTyping = {}, onReceiveSuggestion = {}, diff --git a/libraries/textcomposer/impl/src/test/kotlin/io/element/android/libraries/textcomposer/impl/components/markdown/MarkdownTextInputTest.kt b/libraries/textcomposer/impl/src/test/kotlin/io/element/android/libraries/textcomposer/impl/components/markdown/MarkdownTextInputTest.kt index 1176cdadaa..a6cad521b2 100644 --- a/libraries/textcomposer/impl/src/test/kotlin/io/element/android/libraries/textcomposer/impl/components/markdown/MarkdownTextInputTest.kt +++ b/libraries/textcomposer/impl/src/test/kotlin/io/element/android/libraries/textcomposer/impl/components/markdown/MarkdownTextInputTest.kt @@ -14,6 +14,7 @@ import androidx.compose.ui.test.junit4.createAndroidComposeRule import androidx.core.text.getSpans import androidx.test.ext.junit.runners.AndroidJUnit4 import com.google.common.truth.Truth.assertThat +import io.element.android.compound.theme.ElementTheme import io.element.android.libraries.matrix.api.permalink.PermalinkData import io.element.android.libraries.matrix.test.A_SESSION_ID import io.element.android.libraries.matrix.test.permalink.FakePermalinkParser @@ -175,6 +176,8 @@ class MarkdownTextInputTest { val style = ElementRichTextEditorStyle.composerStyle(hasFocus = state.hasFocus) MarkdownTextInput( state = state, + placeholder = "Placeholder", + placeholderColor = ElementTheme.colors.textSecondary, subcomposing = subcomposing, onTyping = onTyping, onReceiveSuggestion = onSuggestionReceived,