Edit / Add / Remove caption

libraries/matrix/api/src/main/kotlin/io/element/android/libraries/matrix/api/timeline/Timeline.kt

@@ -59,10 +59,17 @@ interface Timeline : AutoCloseable {
 
     suspend fun editMessage(
         eventOrTransactionId: EventOrTransactionId,
-        body: String, htmlBody: String?,
+        body: String,
+        htmlBody: String?,
         intentionalMentions: List<IntentionalMention>,
     ): Result<Unit>
 
+    suspend fun editCaption(
+        eventOrTransactionId: EventOrTransactionId,
+        caption: String?,
+        formattedCaption: String?,
+    ): Result<Unit>
+
     suspend fun replyMessage(
         eventId: EventId,
         body: String,

libraries/matrix/impl/src/main/kotlin/io/element/android/libraries/matrix/impl/timeline/RustTimeline.kt

@@ -295,22 +295,40 @@ class RustTimeline(
         body: String,
         htmlBody: String?,
         intentionalMentions: List<IntentionalMention>,
-    ): Result<Unit> =
-        withContext(dispatcher) {
-            runCatching<Unit> {
-                val editedContent = EditedContent.RoomMessage(
-                    content = MessageEventContent.from(
-                        body = body,
-                        htmlBody = htmlBody,
-                        intentionalMentions = intentionalMentions
-                    ),
-                )
-                inner.edit(
-                    newContent = editedContent,
-                    eventOrTransactionId = eventOrTransactionId.toRustEventOrTransactionId(),
-                )
-            }
+    ): Result<Unit> = withContext(dispatcher) {
+        runCatching<Unit> {
+            val editedContent = EditedContent.RoomMessage(
+                content = MessageEventContent.from(
+                    body = body,
+                    htmlBody = htmlBody,
+                    intentionalMentions = intentionalMentions
+                ),
+            )
+            inner.edit(
+                newContent = editedContent,
+                eventOrTransactionId = eventOrTransactionId.toRustEventOrTransactionId(),
+            )
         }
+    }
+
+    override suspend fun editCaption(
+        eventOrTransactionId: EventOrTransactionId,
+        caption: String?,
+        formattedCaption: String?,
+    ): Result<Unit> = withContext(dispatcher) {
+        runCatching<Unit> {
+            val editedContent = EditedContent.MediaCaption(
+                caption = caption,
+                formattedCaption = formattedCaption?.let {
+                    FormattedBody(body = it, format = MessageFormat.Html)
+                },
+            )
+            inner.edit(
+                newContent = editedContent,
+                eventOrTransactionId = eventOrTransactionId.toRustEventOrTransactionId(),
+            )
+        }
+    }
 
     override suspend fun replyMessage(
         eventId: EventId,

libraries/matrix/test/src/main/kotlin/io/element/android/libraries/matrix/test/timeline/FakeTimeline.kt

@@ -92,6 +92,24 @@ class FakeTimeline(
         intentionalMentions
     )
 
+    var editCaptionLambda: (
+        eventOrTransactionId: EventOrTransactionId,
+        caption: String?,
+        formattedCaption: String?,
+    ) -> Result<Unit> = { _, _, _ ->
+        lambdaError()
+    }
+
+    override suspend fun editCaption(
+        eventOrTransactionId: EventOrTransactionId,
+        caption: String?,
+        formattedCaption: String?,
+    ): Result<Unit> = editCaptionLambda(
+        eventOrTransactionId,
+        caption,
+        formattedCaption,
+    )
+
     var replyMessageLambda: (
         eventId: EventId,
         body: String,

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

libraries/ui-strings/src/main/res/values/localazy.xml

@@ -32,6 +32,7 @@
   <string name="a11y_voice_message_record">"Record voice message."</string>
   <string name="a11y_voice_message_stop_recording">"Stop recording"</string>
   <string name="action_accept">"Accept"</string>
+  <string name="action_add_caption">"Add caption"</string>
   <string name="action_add_to_timeline">"Add to timeline"</string>
   <string name="action_back">"Back"</string>
   <string name="action_call">"Call"</string>
@@ -57,6 +58,7 @@
   <string name="action_discard">"Discard"</string>
   <string name="action_done">"Done"</string>
   <string name="action_edit">"Edit"</string>
+  <string name="action_edit_caption">"Edit caption"</string>
   <string name="action_edit_poll">"Edit poll"</string>
   <string name="action_enable">"Enable"</string>
   <string name="action_end_poll">"End poll"</string>
@@ -91,6 +93,7 @@
   <string name="action_react">"React"</string>
   <string name="action_reject">"Reject"</string>
   <string name="action_remove">"Remove"</string>
+  <string name="action_remove_caption">"Remove caption"</string>
   <string name="action_reply">"Reply"</string>
   <string name="action_reply_in_thread">"Reply in thread"</string>
   <string name="action_report_bug">"Report bug"</string>
@@ -123,6 +126,7 @@
   <string name="action_yes">"Yes"</string>
   <string name="common_about">"About"</string>
   <string name="common_acceptable_use_policy">"Acceptable use policy"</string>
+  <string name="common_adding_caption">"Adding caption"</string>
   <string name="common_advanced_settings">"Advanced settings"</string>
   <string name="common_analytics">"Analytics"</string>
   <string name="common_appearance">"Appearance"</string>
@@ -143,6 +147,7 @@
   <string name="common_do_not_show_this_again">"Do not show this again"</string>
   <string name="common_edited_suffix">"(edited)"</string>
   <string name="common_editing">"Editing"</string>
+  <string name="common_editing_caption">"Editing caption"</string>
   <string name="common_emote">"* %1$s %2$s"</string>
   <string name="common_encryption">"Encryption"</string>
   <string name="common_encryption_enabled">"Encryption enabled"</string>