Restore intentional mentions in the markdown/plain text editor (#3193)

* Restore intentional mentions in the markdown/plain text editor

---------

Co-authored-by: ElementBot <benoitm+elementbot@element.io>

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

@@ -52,9 +52,6 @@ import io.element.android.libraries.designsystem.theme.components.CircularProgre
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.matrix.api.core.EventId
 import io.element.android.libraries.matrix.api.core.TransactionId
-import io.element.android.libraries.matrix.api.permalink.PermalinkData
-import io.element.android.libraries.matrix.api.permalink.PermalinkParser
-import io.element.android.libraries.matrix.ui.messages.LocalRoomMemberProfilesCache
 import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetails
 import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetailsProvider
 import io.element.android.libraries.testtags.TestTags
@@ -70,7 +67,6 @@ import io.element.android.libraries.textcomposer.components.VoiceMessageRecordin
 import io.element.android.libraries.textcomposer.components.markdown.MarkdownTextInput
 import io.element.android.libraries.textcomposer.components.markdown.aMarkdownTextEditorState
 import io.element.android.libraries.textcomposer.components.textInputRoundedCornerShape
-import io.element.android.libraries.textcomposer.mentions.LocalMentionSpanProvider
 import io.element.android.libraries.textcomposer.model.MessageComposerMode
 import io.element.android.libraries.textcomposer.model.Suggestion
 import io.element.android.libraries.textcomposer.model.TextEditorState
@@ -90,7 +86,6 @@ import kotlin.time.Duration.Companion.seconds
 fun TextComposer(
     state: TextEditorState,
     voiceMessageState: VoiceMessageState,
-    permalinkParser: PermalinkParser,
     composerMode: MessageComposerMode,
     enableVoiceMessages: Boolean,
     onRequestFocus: () -> Unit,
@@ -106,6 +101,7 @@ fun TextComposer(
     onTyping: (Boolean) -> Unit,
     onReceiveSuggestion: (Suggestion?) -> Unit,
     onSelectRichContent: ((Uri) -> Unit)?,
+    resolveMentionDisplay: (text: String, url: String) -> TextDisplay,
     modifier: Modifier = Modifier,
     showTextFormatting: Boolean = false,
     subcomposing: Boolean = false,
@@ -144,8 +140,6 @@ fun TextComposer(
         }
     }
 
-    val userProfileCache = LocalRoomMemberProfilesCache.current
-
     val placeholder = if (composerMode.inThread) {
         stringResource(id = CommonStrings.action_reply_in_thread)
     } else {
@@ -155,23 +149,14 @@ fun TextComposer(
         is TextEditorState.Rich -> {
             remember(state.richTextEditorState, subcomposing, composerMode, onResetComposerMode, onError) {
                 @Composable {
-                    val mentionSpanProvider = LocalMentionSpanProvider.current
                     TextInput(
                         state = state.richTextEditorState,
                         subcomposing = subcomposing,
                         placeholder = placeholder,
                         composerMode = composerMode,
                         onResetComposerMode = onResetComposerMode,
-                        resolveMentionDisplay = { text, url ->
-                            val permalinkData = permalinkParser.parse(url)
-                            if (permalinkData is PermalinkData.UserLink) {
-                                val displayNameOrId = userProfileCache.getDisplayName(permalinkData.userId) ?: permalinkData.userId.value
-                                TextDisplay.Custom(mentionSpanProvider.getMentionSpanFor(displayNameOrId, url))
-                            } else {
-                                TextDisplay.Custom(mentionSpanProvider.getMentionSpanFor(text, url))
-                            }
-                        },
-                        resolveRoomMentionDisplay = { TextDisplay.Custom(mentionSpanProvider.getMentionSpanFor("@room", "#")) },
+                        resolveMentionDisplay = resolveMentionDisplay,
+                        resolveRoomMentionDisplay = { resolveMentionDisplay("@room", "#") },
                         onError = onError,
                         onTyping = onTyping,
                         onSelectRichContent = onSelectRichContent,
@@ -709,9 +694,6 @@ private fun ATextComposer(
         state = state,
         showTextFormatting = showTextFormatting,
         voiceMessageState = voiceMessageState,
-        permalinkParser = object : PermalinkParser {
-            override fun parse(uriString: String): PermalinkData = TODO("Not yet implemented")
-        },
         composerMode = composerMode,
         enableVoiceMessages = enableVoiceMessages,
         onRequestFocus = {},
@@ -726,6 +708,7 @@ private fun ATextComposer(
         onError = {},
         onTyping = {},
         onReceiveSuggestion = {},
+        resolveMentionDisplay = { _, _ -> TextDisplay.Plain },
         onSelectRichContent = null,
     )
 }

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

@@ -39,7 +39,9 @@ import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.testtags.TestTags
 import io.element.android.libraries.textcomposer.ElementRichTextEditorStyle
+import io.element.android.libraries.textcomposer.mentions.LocalMentionSpanTheme
 import io.element.android.libraries.textcomposer.mentions.MentionSpan
+import io.element.android.libraries.textcomposer.mentions.updateMentionStyles
 import io.element.android.libraries.textcomposer.model.MarkdownTextEditorState
 import io.element.android.libraries.textcomposer.model.Suggestion
 import io.element.android.libraries.textcomposer.model.SuggestionType
@@ -81,6 +83,8 @@ fun MarkdownTextInput(
         }
     }
 
+    val mentionSpanTheme = LocalMentionSpanTheme.current
+
     AndroidView(
         modifier = Modifier
             .padding(top = 6.dp, bottom = 6.dp)
@@ -130,7 +134,9 @@ fun MarkdownTextInput(
             editText.applyStyleInCompose(richTextEditorStyle)
 
             if (state.text.needsDisplaying()) {
-                editText.updateEditableText(state.text.value())
+                val text = state.text.value()
+                mentionSpanTheme.updateMentionStyles(text)
+                editText.updateEditableText(text)
                 if (canUpdateState) {
                     state.text.update(editText.editableText, false)
                 }

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

@@ -31,16 +31,17 @@ class MentionSpan(
     text: String,
     val rawValue: String,
     val type: Type,
-    val backgroundColor: Int,
-    val textColor: Int,
-    val startPadding: Int,
-    val endPadding: Int,
-    val typeface: Typeface = Typeface.DEFAULT,
 ) : ReplacementSpan() {
     companion object {
         private const val MAX_LENGTH = 20
     }
 
+    var backgroundColor: Int = 0
+    var textColor: Int = 0
+    var startPadding: Int = 0
+    var endPadding: Int = 0
+    var typeface: Typeface = Typeface.DEFAULT
+
     private var textWidth = 0
     private val backgroundPaint = Paint().apply {
         isAntiAlias = true
@@ -55,6 +56,25 @@ class MentionSpan(
 
     private var mentionText: CharSequence = getActualText(text)
 
+    fun update(mentionSpanTheme: MentionSpanTheme) {
+        val isCurrentUser = rawValue == mentionSpanTheme.currentUserId?.value
+        backgroundColor = when (type) {
+            Type.USER -> if (isCurrentUser) mentionSpanTheme.currentUserBackgroundColor else mentionSpanTheme.otherBackgroundColor
+            Type.ROOM -> mentionSpanTheme.otherBackgroundColor
+            Type.EVERYONE -> mentionSpanTheme.otherBackgroundColor
+        }
+        textColor = when (type) {
+            Type.USER -> if (isCurrentUser) mentionSpanTheme.currentUserTextColor else mentionSpanTheme.otherTextColor
+            Type.ROOM -> mentionSpanTheme.otherTextColor
+            Type.EVERYONE -> mentionSpanTheme.otherTextColor
+        }
+        backgroundPaint.color = backgroundColor
+        val (startPaddingPx, endPaddingPx) = mentionSpanTheme.paddingValuesPx.value
+        startPadding = startPaddingPx
+        endPadding = endPaddingPx
+        typeface = mentionSpanTheme.typeface.value
+    }
+
     override fun getSize(paint: Paint, text: CharSequence?, start: Int, end: Int, fm: Paint.FontMetricsInt?): Int {
         paint.typeface = typeface
         textWidth = paint.measureText(mentionText, 0, mentionText.length).roundToInt()

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

@@ -16,92 +16,23 @@
 
 package io.element.android.libraries.textcomposer.mentions
 
-import android.graphics.Color
-import android.graphics.Typeface
-import android.net.Uri
-import android.view.ViewGroup
-import android.widget.TextView
-import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Stable
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.staticCompositionLocalOf
-import androidx.compose.ui.graphics.toArgb
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.platform.LocalLayoutDirection
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.viewinterop.AndroidView
-import androidx.core.text.buildSpannedString
-import dagger.assisted.Assisted
-import dagger.assisted.AssistedFactory
-import dagger.assisted.AssistedInject
-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.designsystem.text.rememberTypeface
-import io.element.android.libraries.designsystem.theme.currentUserMentionPillBackground
-import io.element.android.libraries.designsystem.theme.currentUserMentionPillText
-import io.element.android.libraries.designsystem.theme.mentionPillBackground
-import io.element.android.libraries.designsystem.theme.mentionPillText
-import io.element.android.libraries.matrix.api.core.RoomAlias
-import io.element.android.libraries.matrix.api.core.UserId
-import io.element.android.libraries.matrix.api.core.toRoomIdOrAlias
 import io.element.android.libraries.matrix.api.permalink.PermalinkData
 import io.element.android.libraries.matrix.api.permalink.PermalinkParser
-import kotlinx.collections.immutable.persistentListOf
+import javax.inject.Inject
 
 @Stable
-class MentionSpanProvider @AssistedInject constructor(
-    @Assisted private val currentSessionId: String,
+open class MentionSpanProvider @Inject constructor(
     private val permalinkParser: PermalinkParser,
 ) {
-    @AssistedFactory
-    interface Factory {
-        fun create(currentSessionId: String): MentionSpanProvider
-    }
-
-    private val paddingValues = PaddingValues(start = 4.dp, end = 6.dp)
-
-    private val paddingValuesPx = mutableStateOf(0 to 0)
-    private val typeface = mutableStateOf(Typeface.DEFAULT)
-
-    internal var currentUserTextColor: Int = 0
-    internal var currentUserBackgroundColor: Int = Color.WHITE
-    internal var otherTextColor: Int = 0
-    internal var otherBackgroundColor: Int = Color.WHITE
-
-    @Suppress("ComposableNaming")
-    @Composable
-    fun updateStyles() {
-        currentUserTextColor = ElementTheme.colors.currentUserMentionPillText.toArgb()
-        currentUserBackgroundColor = ElementTheme.colors.currentUserMentionPillBackground.toArgb()
-        otherTextColor = ElementTheme.colors.mentionPillText.toArgb()
-        otherBackgroundColor = ElementTheme.colors.mentionPillBackground.toArgb()
-
-        typeface.value = ElementTheme.typography.fontBodyLgMedium.rememberTypeface().value
-        with(LocalDensity.current) {
-            val leftPadding = paddingValues.calculateLeftPadding(LocalLayoutDirection.current).roundToPx()
-            val rightPadding = paddingValues.calculateRightPadding(LocalLayoutDirection.current).roundToPx()
-            paddingValuesPx.value = leftPadding to rightPadding
-        }
-    }
-
     fun getMentionSpanFor(text: String, url: String): MentionSpan {
         val permalinkData = permalinkParser.parse(url)
-        val (startPaddingPx, endPaddingPx) = paddingValuesPx.value
         return when {
             permalinkData is PermalinkData.UserLink -> {
-                val isCurrentUser = permalinkData.userId.value == currentSessionId
                 MentionSpan(
                     text = text,
                     rawValue = permalinkData.userId.toString(),
                     type = MentionSpan.Type.USER,
-                    backgroundColor = if (isCurrentUser) currentUserBackgroundColor else otherBackgroundColor,
-                    textColor = if (isCurrentUser) currentUserTextColor else otherTextColor,
-                    startPadding = startPaddingPx,
-                    endPadding = endPaddingPx,
-                    typeface = typeface.value,
                 )
             }
             text == "@room" && permalinkData is PermalinkData.FallbackLink -> {
@@ -109,23 +40,13 @@ class MentionSpanProvider @AssistedInject constructor(
                     text = text,
                     rawValue = "@room",
                     type = MentionSpan.Type.EVERYONE,
-                    backgroundColor = otherBackgroundColor,
-                    textColor = otherTextColor,
-                    startPadding = startPaddingPx,
-                    endPadding = endPaddingPx,
-                    typeface = typeface.value,
                 )
             }
             permalinkData is PermalinkData.RoomLink -> {
                 MentionSpan(
                     text = text,
-                    rawValue = permalinkData.roomIdOrAlias.toString(),
+                    rawValue = permalinkData.roomIdOrAlias.identifier,
                     type = MentionSpan.Type.ROOM,
-                    backgroundColor = otherBackgroundColor,
-                    textColor = otherTextColor,
-                    startPadding = startPaddingPx,
-                    endPadding = endPaddingPx,
-                    typeface = typeface.value,
                 )
             }
             else -> {
@@ -133,77 +54,8 @@ class MentionSpanProvider @AssistedInject constructor(
                     text = text,
                     rawValue = text,
                     type = MentionSpan.Type.ROOM,
-                    backgroundColor = otherBackgroundColor,
-                    textColor = otherTextColor,
-                    startPadding = startPaddingPx,
-                    endPadding = endPaddingPx,
-                    typeface = typeface.value,
                 )
             }
         }
     }
 }
-
-@PreviewsDayNight
-@Composable
-internal fun MentionSpanPreview() {
-    ElementPreview {
-        val provider = remember {
-            MentionSpanProvider(
-                currentSessionId = "@me:matrix.org",
-                permalinkParser = object : PermalinkParser {
-                    override fun parse(uriString: String): PermalinkData {
-                        return when (uriString) {
-                            "https://matrix.to/#/@me:matrix.org" -> PermalinkData.UserLink(UserId("@me:matrix.org"))
-                            "https://matrix.to/#/@other:matrix.org" -> PermalinkData.UserLink(UserId("@other:matrix.org"))
-                            "https://matrix.to/#/#room:matrix.org" -> PermalinkData.RoomLink(
-                                roomIdOrAlias = RoomAlias("#room:matrix.org").toRoomIdOrAlias(),
-                                eventId = null,
-                                viaParameters = persistentListOf(),
-                            )
-                            else -> throw AssertionError("Unexpected value $uriString")
-                        }
-                    }
-                },
-            )
-        }
-        provider.updateStyles()
-
-        val textColor = ElementTheme.colors.textPrimary.toArgb()
-        fun mentionSpanMe() = provider.getMentionSpanFor("mention", "https://matrix.to/#/@me:matrix.org")
-        fun mentionSpanOther() = provider.getMentionSpanFor("mention", "https://matrix.to/#/@other:matrix.org")
-        fun mentionSpanRoom() = provider.getMentionSpanFor("room", "https://matrix.to/#/#room:matrix.org")
-        AndroidView(factory = { context ->
-            TextView(context).apply {
-                includeFontPadding = false
-                layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)
-                text = buildSpannedString {
-                    append("This is a ")
-                    append("@mention", mentionSpanMe(), 0)
-                    append(" to the current user and this is a ")
-                    append("@mention", mentionSpanOther(), 0)
-                    append(" to other user. This one is for a room: ")
-                    append("#room:matrix.org", mentionSpanRoom(), 0)
-                    append("\n\n")
-                    append("This ")
-                    append("mention", mentionSpanMe(), 0)
-                    append(" didn't have an '@' and it was automatically added, same as this ")
-                    append("room:matrix.org", mentionSpanRoom(), 0)
-                    append(" one, which had no leading '#'.")
-                }
-                setTextColor(textColor)
-            }
-        })
-    }
-}
-
-val LocalMentionSpanProvider = staticCompositionLocalOf {
-    MentionSpanProvider(
-        currentSessionId = "@dummy:value.org",
-        permalinkParser = object : PermalinkParser {
-            override fun parse(uriString: String): PermalinkData {
-                return PermalinkData.FallbackLink(Uri.EMPTY)
-            }
-        },
-    )
-}

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

@@ -0,0 +1,172 @@
+/*
+ * Copyright (c) 2024 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.textcomposer.mentions
+
+import android.graphics.Color
+import android.graphics.Typeface
+import android.text.Spanned
+import android.view.ViewGroup
+import android.widget.TextView
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.LocalLayoutDirection
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.viewinterop.AndroidView
+import androidx.core.text.buildSpannedString
+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.designsystem.text.rememberTypeface
+import io.element.android.libraries.designsystem.theme.currentUserMentionPillBackground
+import io.element.android.libraries.designsystem.theme.currentUserMentionPillText
+import io.element.android.libraries.designsystem.theme.mentionPillBackground
+import io.element.android.libraries.designsystem.theme.mentionPillText
+import io.element.android.libraries.matrix.api.core.RoomAlias
+import io.element.android.libraries.matrix.api.core.UserId
+import io.element.android.libraries.matrix.api.core.toRoomIdOrAlias
+import io.element.android.libraries.matrix.api.permalink.PermalinkData
+import io.element.android.libraries.matrix.api.permalink.PermalinkParser
+import kotlinx.collections.immutable.persistentListOf
+import javax.inject.Inject
+
+/**
+ * Theme used for mention spans.
+ * To make this work, you need to:
+ * 1. Provide [LocalMentionSpanTheme] in a composable that wraps the ones where you want to use mentions.
+ * 2. Call [MentionSpanTheme.updateStyles] with the current [UserId] so the colors and sizes are computed.
+ * 3. Use either [MentionSpanTheme.updateMentionStyles] or [MentionSpan.update] to update the styles of the mention spans.
+ */
+@Stable
+class MentionSpanTheme @Inject constructor() {
+    internal var currentUserId: UserId? = null
+    internal var currentUserTextColor: Int = 0
+    internal var currentUserBackgroundColor: Int = Color.WHITE
+    internal var otherTextColor: Int = 0
+    internal var otherBackgroundColor: Int = Color.WHITE
+
+    private val paddingValues = PaddingValues(start = 4.dp, end = 6.dp)
+    internal val paddingValuesPx = mutableStateOf(0 to 0)
+    internal val typeface = mutableStateOf(Typeface.DEFAULT)
+
+    /**
+     * Updates the styles of the mention spans based on the [ElementTheme] and [currentUserId].
+     */
+    @Suppress("ComposableNaming")
+    @Composable
+    fun updateStyles(currentUserId: UserId) {
+        this.currentUserId = currentUserId
+        currentUserTextColor = ElementTheme.colors.currentUserMentionPillText.toArgb()
+        currentUserBackgroundColor = ElementTheme.colors.currentUserMentionPillBackground.toArgb()
+        otherTextColor = ElementTheme.colors.mentionPillText.toArgb()
+        otherBackgroundColor = ElementTheme.colors.mentionPillBackground.toArgb()
+
+        typeface.value = ElementTheme.typography.fontBodyLgMedium.rememberTypeface().value
+        val density = LocalDensity.current
+        val layoutDirection = LocalLayoutDirection.current
+        paddingValuesPx.value = remember(paddingValues, density, layoutDirection) {
+            with(density) {
+                val leftPadding = paddingValues.calculateLeftPadding(layoutDirection).roundToPx()
+                val rightPadding = paddingValues.calculateRightPadding(layoutDirection).roundToPx()
+                leftPadding to rightPadding
+            }
+        }
+    }
+}
+
+/**
+ * Updates the styles of the mention spans in the given [CharSequence].
+ */
+fun MentionSpanTheme.updateMentionStyles(charSequence: CharSequence) {
+    val spanned = charSequence as? Spanned ?: return
+    val mentionSpans = spanned.getMentionSpans()
+    for (span in mentionSpans) {
+        span.update(this)
+    }
+}
+
+/**
+ * Composition local containing the current [MentionSpanTheme].
+ */
+val LocalMentionSpanTheme = staticCompositionLocalOf {
+    MentionSpanTheme()
+}
+
+ @PreviewsDayNight
+ @Composable
+ internal fun MentionSpanThemePreview() {
+    ElementPreview {
+        val mentionSpanTheme = remember { MentionSpanTheme() }
+        val provider = remember {
+            MentionSpanProvider(
+                permalinkParser = object : PermalinkParser {
+                    override fun parse(uriString: String): PermalinkData {
+                        return when (uriString) {
+                            "https://matrix.to/#/@me:matrix.org" -> PermalinkData.UserLink(UserId("@me:matrix.org"))
+                            "https://matrix.to/#/@other:matrix.org" -> PermalinkData.UserLink(UserId("@other:matrix.org"))
+                            "https://matrix.to/#/#room:matrix.org" -> PermalinkData.RoomLink(
+                                roomIdOrAlias = RoomAlias("#room:matrix.org").toRoomIdOrAlias(),
+                                eventId = null,
+                                viaParameters = persistentListOf(),
+                            )
+                            else -> throw AssertionError("Unexpected value $uriString")
+                        }
+                    }
+                },
+            )
+        }
+
+        val textColor = ElementTheme.colors.textPrimary.toArgb()
+        fun mentionSpanMe() = provider.getMentionSpanFor("mention", "https://matrix.to/#/@me:matrix.org")
+        fun mentionSpanOther() = provider.getMentionSpanFor("mention", "https://matrix.to/#/@other:matrix.org")
+        fun mentionSpanRoom() = provider.getMentionSpanFor("room", "https://matrix.to/#/#room:matrix.org")
+        mentionSpanTheme.updateStyles(currentUserId = UserId("@me:matrix.org"))
+
+        CompositionLocalProvider(
+            LocalMentionSpanTheme provides mentionSpanTheme
+        ) {
+            AndroidView(factory = { context ->
+                TextView(context).apply {
+                    includeFontPadding = false
+                    layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)
+                    text = buildSpannedString {
+                        append("This is a ")
+                        append("@mention", mentionSpanMe(), 0)
+                        append(" to the current user and this is a ")
+                        append("@mention", mentionSpanOther(), 0)
+                        append(" to other user. This one is for a room: ")
+                        append("#room:matrix.org", mentionSpanRoom(), 0)
+                        append("\n\n")
+                        append("This ")
+                        append("mention", mentionSpanMe(), 0)
+                        append(" didn't have an '@' and it was automatically added, same as this ")
+                        append("room:matrix.org", mentionSpanRoom(), 0)
+                        append(" one, which had no leading '#'.")
+                    }
+                    mentionSpanTheme.updateMentionStyles(text)
+                    setTextColor(textColor)
+                }
+            })
+        }
+    }
+ }

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

@@ -38,6 +38,7 @@ import io.element.android.libraries.textcomposer.components.markdown.StableCharS
 import io.element.android.libraries.textcomposer.mentions.MentionSpan
 import io.element.android.libraries.textcomposer.mentions.MentionSpanProvider
 import io.element.android.libraries.textcomposer.mentions.ResolvedMentionSuggestion
+import io.element.android.libraries.textcomposer.mentions.getMentionSpans
 import kotlinx.parcelize.Parcelize
 
 @Stable
@@ -63,7 +64,7 @@ class MarkdownTextEditorState(
                 val currentText = SpannableStringBuilder(text.value())
                 val replaceText = "@room"
                 val roomPill = mentionSpanProvider.getMentionSpanFor(replaceText, "")
-                currentText.replace(suggestion.start, suggestion.end, ". ")
+                currentText.replace(suggestion.start, suggestion.end, "@ ")
                 val end = suggestion.start + 1
                 currentText.setSpan(roomPill, suggestion.start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
                 text.update(currentText, true)
@@ -74,7 +75,7 @@ class MarkdownTextEditorState(
                 val text = mention.roomMember.displayName?.prependIndent("@") ?: mention.roomMember.userId.value
                 val link = permalinkBuilder.permalinkForUser(mention.roomMember.userId).getOrNull() ?: return
                 val mentionPill = mentionSpanProvider.getMentionSpanFor(text, link)
-                currentText.replace(suggestion.start, suggestion.end, ". ")
+                currentText.replace(suggestion.start, suggestion.end, "@ ")
                 val end = suggestion.start + 1
                 currentText.setSpan(mentionPill, suggestion.start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
                 this.text.update(currentText, true)
@@ -86,11 +87,11 @@ class MarkdownTextEditorState(
     fun getMessageMarkdown(permalinkBuilder: PermalinkBuilder): String {
         val charSequence = text.value()
         return if (charSequence is Spanned) {
-            val mentions = charSequence.getSpans(0, charSequence.length, MentionSpan::class.java)
+            val mentions = charSequence.getMentionSpans()
             buildString {
                 append(charSequence.toString())
-                if (mentions != null && mentions.isNotEmpty()) {
-                    for (mention in mentions.reversed()) {
+                if (mentions.isNotEmpty()) {
+                    for (mention in mentions.sortedByDescending { charSequence.getSpanEnd(it) }) {
                         val start = charSequence.getSpanStart(mention)
                         val end = charSequence.getSpanEnd(mention)
                         when (mention.type) {