Edit / Add / Remove caption

libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/ComposerModeView.kt

@@ -47,6 +47,16 @@ internal fun ComposerModeView(
     when (composerMode) {
         is MessageComposerMode.Edit -> {
             EditingModeView(
+                text = stringResource(CommonStrings.common_editing),
+                modifier = modifier,
+                onResetComposerMode = onResetComposerMode,
+            )
+        }
+        is MessageComposerMode.EditCaption -> {
+            EditingModeView(
+                text = stringResource(
+                    if (composerMode.content.isEmpty()) CommonStrings.common_adding_caption else CommonStrings.common_editing_caption
+                ),
                 modifier = modifier,
                 onResetComposerMode = onResetComposerMode,
             )
@@ -65,6 +75,7 @@ internal fun ComposerModeView(
 @Composable
 private fun EditingModeView(
     onResetComposerMode: () -> Unit,
+    text: String,
     modifier: Modifier = Modifier,
 ) {
     Row(
@@ -76,14 +87,14 @@ private fun EditingModeView(
     ) {
         Icon(
             imageVector = CompoundIcons.Edit(),
-            contentDescription = stringResource(CommonStrings.common_editing),
+            contentDescription = null,
             tint = ElementTheme.materialColors.secondary,
             modifier = Modifier
                 .padding(vertical = 8.dp)
                 .size(16.dp),
         )
         Text(
-            stringResource(CommonStrings.common_editing),
+            text = text,
             style = ElementTheme.typography.fontBodySmRegular,
             textAlign = TextAlign.Start,
             color = ElementTheme.materialColors.secondary,

libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt

@@ -121,19 +121,25 @@ fun TextComposer(
     }
 
     val layoutModifier = modifier
-        .fillMaxSize()
-        .height(IntrinsicSize.Min)
+            .fillMaxSize()
+            .height(IntrinsicSize.Min)
 
-    val composerOptionsButton: @Composable () -> Unit = remember {
+    val composerOptionsButton: @Composable () -> Unit = remember(composerMode) {
         @Composable {
-            if (composerMode is MessageComposerMode.Attachment) {
-                Spacer(modifier = Modifier.width(9.dp))
-            } else {
-                ComposerOptionsButton(
-                    modifier = Modifier
-                        .size(48.dp),
-                    onClick = onAddAttachment
-                )
+            when (composerMode) {
+                is MessageComposerMode.Attachment -> {
+                    Spacer(modifier = Modifier.width(9.dp))
+                }
+                is MessageComposerMode.EditCaption -> {
+                    Spacer(modifier = Modifier.width(16.dp))
+                }
+                else -> {
+                    ComposerOptionsButton(
+                        modifier = Modifier
+                            .size(48.dp),
+                        onClick = onAddAttachment
+                    )
+                }
             }
         }
     }
@@ -331,8 +337,8 @@ private fun StandardLayout(
             if (voiceMessageState is VoiceMessageState.Preview || voiceMessageState is VoiceMessageState.Recording) {
                 Box(
                     modifier = Modifier
-                        .padding(bottom = 5.dp, top = 5.dp, end = 3.dp, start = 3.dp)
-                        .size(48.dp),
+                            .padding(bottom = 5.dp, top = 5.dp, end = 3.dp, start = 3.dp)
+                            .size(48.dp),
                     contentAlignment = Alignment.Center,
                 ) {
                     voiceDeleteButton()
@@ -342,8 +348,8 @@ private fun StandardLayout(
             }
             Box(
                 modifier = Modifier
-                    .padding(bottom = 8.dp, top = 8.dp)
-                    .weight(1f)
+                        .padding(bottom = 8.dp, top = 8.dp)
+                        .weight(1f)
             ) {
                 voiceRecording()
             }
@@ -356,16 +362,16 @@ private fun StandardLayout(
             }
             Box(
                 modifier = Modifier
-                    .padding(bottom = 8.dp, top = 8.dp)
-                    .weight(1f)
+                        .padding(bottom = 8.dp, top = 8.dp)
+                        .weight(1f)
             ) {
                 textInput()
             }
         }
         Box(
-            Modifier
-                .padding(bottom = 5.dp, top = 5.dp, end = 6.dp, start = 6.dp)
-                .size(48.dp),
+                Modifier
+                        .padding(bottom = 5.dp, top = 5.dp, end = 6.dp, start = 6.dp)
+                        .size(48.dp),
             contentAlignment = Alignment.Center,
         ) {
             endButton()
@@ -387,8 +393,8 @@ private fun TextFormattingLayout(
     ) {
         Box(
             modifier = Modifier
-                .weight(1f)
-                .padding(horizontal = 12.dp)
+                    .weight(1f)
+                    .padding(horizontal = 12.dp)
         ) {
             textInput()
         }
@@ -432,11 +438,11 @@ private fun TextInputBox(
 
     Column(
         modifier = Modifier
-            .clip(roundedCorners)
-            .border(0.5.dp, borderColor, roundedCorners)
-            .background(color = bgColor)
-            .requiredHeightIn(min = 42.dp)
-            .fillMaxSize(),
+                .clip(roundedCorners)
+                .border(0.5.dp, borderColor, roundedCorners)
+                .background(color = bgColor)
+                .requiredHeightIn(min = 42.dp)
+                .fillMaxSize(),
     ) {
         if (composerMode is MessageComposerMode.Special) {
             ComposerModeView(
@@ -447,9 +453,9 @@ private fun TextInputBox(
         val defaultTypography = ElementTheme.typography.fontBodyLgRegular
         Box(
             modifier = Modifier
-                .padding(top = 4.dp, bottom = 4.dp, start = 12.dp, end = 12.dp)
-                // Apply test tag only once, otherwise 2 nodes will have it (both the normal and subcomposing one) and tests will fail
-                .then(if (!subcomposing) Modifier.testTag(TestTags.textEditor) else Modifier),
+                    .padding(top = 4.dp, bottom = 4.dp, start = 12.dp, end = 12.dp)
+                    // Apply test tag only once, otherwise 2 nodes will have it (both the normal and subcomposing one) and tests will fail
+                    .then(if (!subcomposing) Modifier.testTag(TestTags.textEditor) else Modifier),
             contentAlignment = Alignment.CenterStart,
         ) {
             // Placeholder
@@ -495,8 +501,8 @@ private fun TextInput(
             // This prevents it gaining focus and mutating the state.
             registerStateUpdates = !subcomposing,
             modifier = Modifier
-                .padding(top = 6.dp, bottom = 6.dp)
-                .fillMaxWidth(),
+                    .padding(top = 6.dp, bottom = 6.dp)
+                    .fillMaxWidth(),
             style = ElementRichTextEditorStyle.composerStyle(hasFocus = state.hasFocus),
             resolveMentionDisplay = resolveMentionDisplay,
             resolveRoomMentionDisplay = resolveRoomMentionDisplay,
@@ -573,6 +579,40 @@ internal fun TextComposerEditPreview() = ElementPreview {
     }
 }
 
+@PreviewsDayNight
+@Composable
+internal fun TextComposerEditCaptionPreview() = ElementPreview {
+    PreviewColumn(
+        items = aTextEditorStateRichList()
+    ) { _, textEditorState ->
+        ATextComposer(
+            state = textEditorState,
+            voiceMessageState = VoiceMessageState.Idle,
+            composerMode = aMessageComposerModeEditCaption(
+                content = "A caption",
+            ),
+            enableVoiceMessages = false,
+        )
+    }
+}
+
+@PreviewsDayNight
+@Composable
+internal fun TextComposerAddCaptionPreview() = ElementPreview {
+    PreviewColumn(
+        items = aTextEditorStateRichList()
+    ) { _, textEditorState ->
+        ATextComposer(
+            state = textEditorState,
+            voiceMessageState = VoiceMessageState.Idle,
+            composerMode = aMessageComposerModeEditCaption(
+                content = "",
+            ),
+            enableVoiceMessages = false,
+        )
+    }
+}
+
 @PreviewsDayNight
 @Composable
 internal fun MarkdownTextComposerEditPreview() = ElementPreview {
@@ -717,6 +757,14 @@ fun aMessageComposerModeEdit(
     content = content
 )
 
+fun aMessageComposerModeEditCaption(
+    eventOrTransactionId: EventOrTransactionId = EventId("$1234").toEventOrTransactionId(),
+    content: String = "Some caption",
+) = MessageComposerMode.EditCaption(
+    eventOrTransactionId = eventOrTransactionId,
+    content = content
+)
+
 fun aMessageComposerModeReply(
     replyToDetails: InReplyToDetails,
     hideImage: Boolean = false,

libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/SendButton.kt

@@ -53,16 +53,16 @@ internal fun SendButton(
         onClick = onClick,
         enabled = canSendMessage,
     ) {
-        val iconVector = when (composerMode) {
-            is MessageComposerMode.Edit -> CompoundIcons.Check()
+        val iconVector = when {
+            composerMode.isEditing -> CompoundIcons.Check()
             else -> CompoundIcons.SendSolid()
         }
-        val iconStartPadding = when (composerMode) {
-            is MessageComposerMode.Edit -> 0.dp
+        val iconStartPadding = when {
+            composerMode.isEditing -> 0.dp
             else -> 2.dp
         }
-        val contentDescription = when (composerMode) {
-            is MessageComposerMode.Edit -> stringResource(CommonStrings.action_edit)
+        val contentDescription = when {
+            composerMode.isEditing -> stringResource(CommonStrings.action_edit)
             else -> stringResource(CommonStrings.action_send)
         }
         Box(

libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/model/MessageComposerMode.kt

@@ -27,6 +27,11 @@ sealed interface MessageComposerMode {
         val content: String
     ) : Special
 
+    data class EditCaption(
+        val eventOrTransactionId: EventOrTransactionId,
+        val content: String
+    ) : Special
+
     data class Reply(
         val replyToDetails: InReplyToDetails,
         val hideImage: Boolean,
@@ -34,16 +39,8 @@ sealed interface MessageComposerMode {
         val eventId: EventId = replyToDetails.eventId()
     }
 
-    val relatedEventId: EventId?
-        get() = when (this) {
-            is Normal,
-            is Attachment -> null
-            is Edit -> eventOrTransactionId.eventId
-            is Reply -> eventId
-        }
-
     val isEditing: Boolean
-        get() = this is Edit
+        get() = this is Edit || this is EditCaption
 
     val isReply: Boolean
         get() = this is Reply