Resolve display names in mentions in real time (#3051)

* Resolve display names in mentions in real time

* Use `LocalRoomMemberProfilesCache` to avoid having to implement `TextMessagePresenter`

* Also use local composition provider for `MentionSpanProvider`

changelog.d/3051.misc

@@ -0,0 +1 @@
+Resolve display names in mentions in real time, also send mentions with user ids as the fallback text for the link representation of the mentions.

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesFlowNode.kt

@@ -18,7 +18,9 @@ package io.element.android.features.messages.impl
 
 import android.os.Parcelable
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Modifier
+import androidx.lifecycle.lifecycleScope
 import com.bumble.appyx.core.modality.BuildContext
 import com.bumble.appyx.core.node.Node
 import com.bumble.appyx.core.node.node
@@ -64,12 +66,20 @@ import io.element.android.libraries.matrix.api.core.RoomId
 import io.element.android.libraries.matrix.api.core.UserId
 import io.element.android.libraries.matrix.api.media.MediaSource
 import io.element.android.libraries.matrix.api.permalink.PermalinkData
+import io.element.android.libraries.matrix.api.room.MatrixRoom
+import io.element.android.libraries.matrix.api.room.joinedRoomMembers
 import io.element.android.libraries.matrix.api.timeline.item.TimelineItemDebugInfo
+import io.element.android.libraries.matrix.ui.messages.LocalRoomMemberProfilesCache
+import io.element.android.libraries.matrix.ui.messages.RoomMemberProfilesCache
 import io.element.android.libraries.mediaviewer.api.local.MediaInfo
 import io.element.android.libraries.mediaviewer.api.viewer.MediaViewerNode
+import io.element.android.libraries.textcomposer.mentions.LocalMentionSpanProvider
+import io.element.android.libraries.textcomposer.mentions.MentionSpanProvider
 import io.element.android.services.analytics.api.AnalyticsService
 import io.element.android.services.analyticsproviders.api.trackers.captureInteraction
 import kotlinx.collections.immutable.ImmutableList
+import kotlinx.coroutines.flow.launchIn
+import kotlinx.coroutines.flow.onEach
 import kotlinx.parcelize.Parcelize
 
 @ContributesNode(RoomScope::class)
@@ -82,6 +92,9 @@ class MessagesFlowNode @AssistedInject constructor(
     private val createPollEntryPoint: CreatePollEntryPoint,
     private val elementCallEntryPoint: ElementCallEntryPoint,
     private val analyticsService: AnalyticsService,
+    private val room: MatrixRoom,
+    private val roomMemberProfilesCache: RoomMemberProfilesCache,
+    mentionSpanProviderFactory: MentionSpanProvider.Factory,
 ) : BaseFlowNode<MessagesFlowNode.NavTarget>(
     backstack = BackStack(
         initialElement = NavTarget.Messages,
@@ -137,6 +150,18 @@ class MessagesFlowNode @AssistedInject constructor(
 
     private val callback = plugins<MessagesEntryPoint.Callback>().firstOrNull()
 
+    private val mentionSpanProvider = mentionSpanProviderFactory.create(room.sessionId.value)
+
+    override fun onBuilt() {
+        super.onBuilt()
+
+        room.membersStateFlow
+            .onEach { membersState ->
+                roomMemberProfilesCache.replace(membersState.joinedRoomMembers())
+            }
+            .launchIn(lifecycleScope)
+    }
+
     override fun resolve(navTarget: NavTarget, buildContext: BuildContext): Node {
         return when (navTarget) {
             is NavTarget.Messages -> {
@@ -345,6 +370,13 @@ class MessagesFlowNode @AssistedInject constructor(
 
     @Composable
     override fun View(modifier: Modifier) {
-        BackstackWithOverlayBox(modifier)
+        mentionSpanProvider.updateStyles()
+
+        CompositionLocalProvider(
+            LocalRoomMemberProfilesCache provides roomMemberProfilesCache,
+            LocalMentionSpanProvider provides mentionSpanProvider,
+        ) {
+            BackstackWithOverlayBox(modifier)
+        }
     }
 }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/messagecomposer/MessageComposerPresenter.kt

@@ -54,15 +54,14 @@ import io.element.android.libraries.matrix.api.permalink.PermalinkBuilder
 import io.element.android.libraries.matrix.api.permalink.PermalinkParser
 import io.element.android.libraries.matrix.api.room.MatrixRoom
 import io.element.android.libraries.matrix.api.room.Mention
-import io.element.android.libraries.matrix.api.user.CurrentSessionIdHolder
 import io.element.android.libraries.mediapickers.api.PickerProvider
 import io.element.android.libraries.mediaupload.api.MediaSender
 import io.element.android.libraries.mediaviewer.api.local.LocalMediaFactory
 import io.element.android.libraries.permissions.api.PermissionsEvents
 import io.element.android.libraries.permissions.api.PermissionsPresenter
 import io.element.android.libraries.preferences.api.store.SessionPreferencesStore
+import io.element.android.libraries.textcomposer.mentions.LocalMentionSpanProvider
 import io.element.android.libraries.textcomposer.mentions.ResolvedMentionSuggestion
-import io.element.android.libraries.textcomposer.mentions.rememberMentionSpanProvider
 import io.element.android.libraries.textcomposer.model.Message
 import io.element.android.libraries.textcomposer.model.MessageComposerMode
 import io.element.android.libraries.textcomposer.model.Suggestion
@@ -104,7 +103,6 @@ class MessageComposerPresenter @Inject constructor(
     private val analyticsService: AnalyticsService,
     private val messageComposerContext: DefaultMessageComposerContext,
     private val richTextEditorStateFactory: RichTextEditorStateFactory,
-    private val currentSessionIdHolder: CurrentSessionIdHolder,
     private val permalinkParser: PermalinkParser,
     private val permalinkBuilder: PermalinkBuilder,
     permissionsPresenterFactory: PermissionsPresenter.Factory,
@@ -215,7 +213,7 @@ class MessageComposerPresenter @Inject constructor(
         val memberSuggestions = remember { mutableStateListOf<ResolvedMentionSuggestion>() }
         LaunchedEffect(isMentionsEnabled) {
             if (!isMentionsEnabled) return@LaunchedEffect
-            val currentUserId = currentSessionIdHolder.current
+            val currentUserId = room.sessionId
 
             suspend fun canSendRoomMention(): Boolean {
                 val userCanSendAtRoom = room.canUserTriggerRoomNotification(currentUserId).getOrDefault(false)
@@ -279,14 +277,7 @@ class MessageComposerPresenter @Inject constructor(
             }
         }
 
-        val mentionSpanProvider = if (isTesting) {
+        val mentionSpanProvider = LocalMentionSpanProvider.current
-            null
-        } else {
-            rememberMentionSpanProvider(
-                currentUserId = room.sessionId,
-                permalinkParser = permalinkParser,
-            )
-        }
 
         fun handleEvents(event: MessageComposerEvents) {
             when (event) {
@@ -415,19 +406,17 @@ class MessageComposerPresenter @Inject constructor(
                                     richTextEditorState.insertAtRoomMentionAtSuggestion()
                                 }
                                 is ResolvedMentionSuggestion.Member -> {
-                                    val text = mention.roomMember.displayName?.prependIndent("@") ?: mention.roomMember.userId.value
+                                    val text = mention.roomMember.userId.value
                                     val link = permalinkBuilder.permalinkForUser(mention.roomMember.userId).getOrNull() ?: return@launch
                                     richTextEditorState.insertMentionAtSuggestion(text = text, link = link)
                                 }
                             }
                         } else if (markdownTextEditorState.currentMentionSuggestion != null) {
-                            mentionSpanProvider?.let {
+                            markdownTextEditorState.insertMention(
-                                markdownTextEditorState.insertMention(
+                                mention = event.mention,
-                                    mention = event.mention,
+                                mentionSpanProvider = mentionSpanProvider,
-                                    mentionSpanProvider = it,
+                                permalinkBuilder = permalinkBuilder,
-                                    permalinkBuilder = permalinkBuilder,
+                            )
-                                )
-                            }
                             suggestionSearchTrigger.value = null
                         }
                     }
@@ -446,7 +435,6 @@ class MessageComposerPresenter @Inject constructor(
             canCreatePoll = canCreatePoll.value,
             attachmentsState = attachmentsState.value,
             memberSuggestions = memberSuggestions.toPersistentList(),
-            currentUserId = currentSessionIdHolder.current,
             eventSink = { handleEvents(it) }
         )
     }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/messagecomposer/MessageComposerState.kt

@@ -19,7 +19,6 @@ package io.element.android.features.messages.impl.messagecomposer
 import androidx.compose.runtime.Immutable
 import androidx.compose.runtime.Stable
 import io.element.android.features.messages.impl.attachments.Attachment
-import io.element.android.libraries.matrix.api.core.UserId
 import io.element.android.libraries.matrix.api.permalink.PermalinkParser
 import io.element.android.libraries.textcomposer.mentions.ResolvedMentionSuggestion
 import io.element.android.libraries.textcomposer.model.MessageComposerMode
@@ -38,7 +37,6 @@ data class MessageComposerState(
     val canCreatePoll: Boolean,
     val attachmentsState: AttachmentsState,
     val memberSuggestions: ImmutableList<ResolvedMentionSuggestion>,
-    val currentUserId: UserId,
     val eventSink: (MessageComposerEvents) -> Unit,
 )
 

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/messagecomposer/MessageComposerStateProvider.kt

@@ -17,7 +17,6 @@
 package io.element.android.features.messages.impl.messagecomposer
 
 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
-import io.element.android.libraries.matrix.api.core.UserId
 import io.element.android.libraries.matrix.api.permalink.PermalinkData
 import io.element.android.libraries.matrix.api.permalink.PermalinkParser
 import io.element.android.libraries.textcomposer.aRichTextEditorState
@@ -57,6 +56,5 @@ fun aMessageComposerState(
     canCreatePoll = canCreatePoll,
     attachmentsState = attachmentsState,
     memberSuggestions = memberSuggestions,
-    currentUserId = UserId("@alice:localhost"),
     eventSink = {},
 )

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/messagecomposer/MessageComposerView.kt

@@ -124,7 +124,6 @@ internal fun MessageComposerView(
         onReceiveSuggestion = ::onSuggestionReceived,
         onError = ::onError,
         onTyping = ::onTyping,
-        currentUserId = state.currentUserId,
         onSelectRichContent = ::sendUri,
     )
 }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/DefaultHtmlConverterProvider.kt

@@ -28,9 +28,8 @@ import io.element.android.libraries.core.bool.orFalse
 import io.element.android.libraries.di.SessionScope
 import io.element.android.libraries.di.SingleIn
 import io.element.android.libraries.matrix.api.core.UserId
-import io.element.android.libraries.matrix.api.permalink.PermalinkParser
 import io.element.android.libraries.textcomposer.ElementRichTextEditorStyle
-import io.element.android.libraries.textcomposer.mentions.rememberMentionSpanProvider
+import io.element.android.libraries.textcomposer.mentions.LocalMentionSpanProvider
 import io.element.android.wysiwyg.compose.StyledHtmlConverter
 import io.element.android.wysiwyg.display.MentionDisplayHandler
 import io.element.android.wysiwyg.display.TextDisplay
@@ -40,9 +39,7 @@ import javax.inject.Inject
 
 @ContributesBinding(SessionScope::class)
 @SingleIn(SessionScope::class)
-class DefaultHtmlConverterProvider @Inject constructor(
+class DefaultHtmlConverterProvider @Inject constructor() : HtmlConverterProvider {
-    private val permalinkParser: PermalinkParser,
-) : HtmlConverterProvider {
     private val htmlConverter: MutableState<HtmlConverter?> = mutableStateOf(null)
 
     @Composable
@@ -53,10 +50,7 @@ class DefaultHtmlConverterProvider @Inject constructor(
         }
 
         val editorStyle = ElementRichTextEditorStyle.textStyle()
-        val mentionSpanProvider = rememberMentionSpanProvider(
+        val mentionSpanProvider = LocalMentionSpanProvider.current
-            currentUserId = currentUserId,
-            permalinkParser = permalinkParser,
-        )
 
         val context = LocalContext.current
 

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemTextView.kt

@@ -17,11 +17,15 @@
 package io.element.android.features.messages.impl.timeline.components.event
 
 import android.text.SpannableString
+import androidx.annotation.VisibleForTesting
 import androidx.compose.foundation.layout.Box
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.LocalTextStyle
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
@@ -33,7 +37,12 @@ import io.element.android.features.messages.impl.timeline.model.event.TimelineIt
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemTextBasedContentProvider
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.matrix.api.core.UserId
+import io.element.android.libraries.matrix.ui.messages.LocalRoomMemberProfilesCache
+import io.element.android.libraries.matrix.ui.messages.RoomMemberProfilesCache
 import io.element.android.libraries.textcomposer.ElementRichTextEditorStyle
+import io.element.android.libraries.textcomposer.mentions.MentionSpan
+import io.element.android.libraries.textcomposer.mentions.getMentionSpans
 import io.element.android.wysiwyg.compose.EditorStyledText
 
 @Composable
@@ -47,10 +56,8 @@ fun TimelineItemTextView(
         LocalContentColor provides ElementTheme.colors.textPrimary,
         LocalTextStyle provides ElementTheme.typography.fontBodyLgRegular
     ) {
-        val formattedBody = content.formattedBody
+        val body = getTextWithResolvedMentions(content)
-        val body = SpannableString(formattedBody ?: content.body)
+        Box(modifier.semantics { contentDescription = content.plainText }) {
-
-        Box(modifier.semantics { contentDescription = body.toString() }) {
             EditorStyledText(
                 text = body,
                 onLinkClickedListener = onLinkClick,
@@ -62,6 +69,39 @@ fun TimelineItemTextView(
     }
 }
 
+@VisibleForTesting(otherwise = VisibleForTesting.PRIVATE)
+@Composable
+internal fun getTextWithResolvedMentions(content: TimelineItemTextBasedContent): CharSequence {
+    val userProfileCache = LocalRoomMemberProfilesCache.current
+    val lastCacheUpdate by userProfileCache.lastCacheUpdate.collectAsState()
+    val formattedBody = remember(content.htmlBody, lastCacheUpdate) {
+        updateMentionSpans(content.formattedBody, userProfileCache)
+        SpannableString(content.formattedBody ?: content.body)
+    }
+
+    return formattedBody
+}
+
+private fun updateMentionSpans(text: CharSequence?, cache: RoomMemberProfilesCache): Boolean {
+    var changedContents = false
+    if (text != null) {
+        for (mentionSpan in text.getMentionSpans()) {
+            when (mentionSpan.type) {
+                MentionSpan.Type.USER -> {
+                    val displayName = cache.getDisplayName(UserId(mentionSpan.rawValue)) ?: mentionSpan.rawValue
+                    if (mentionSpan.text != displayName) {
+                        changedContents = true
+                        mentionSpan.text = displayName
+                    }
+                }
+                // Nothing yet for room mentions
+                else -> Unit
+            }
+        }
+    }
+    return changedContents
+}
+
 @PreviewsDayNight
 @Composable
 internal fun TimelineItemTextViewPreview(

features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/MessagesPresenterTest.kt

@@ -69,13 +69,11 @@ import io.element.android.libraries.matrix.api.room.MatrixRoom
 import io.element.android.libraries.matrix.api.room.MatrixRoomMembersState
 import io.element.android.libraries.matrix.api.room.MessageEventType
 import io.element.android.libraries.matrix.api.room.RoomMembershipState
-import io.element.android.libraries.matrix.api.user.CurrentSessionIdHolder
 import io.element.android.libraries.matrix.test.AN_AVATAR_URL
 import io.element.android.libraries.matrix.test.AN_EVENT_ID
 import io.element.android.libraries.matrix.test.A_ROOM_ID
 import io.element.android.libraries.matrix.test.A_SESSION_ID
 import io.element.android.libraries.matrix.test.A_SESSION_ID_2
-import io.element.android.libraries.matrix.test.FakeMatrixClient
 import io.element.android.libraries.matrix.test.core.aBuildMeta
 import io.element.android.libraries.matrix.test.permalink.FakePermalinkBuilder
 import io.element.android.libraries.matrix.test.permalink.FakePermalinkParser
@@ -778,7 +776,6 @@ class MessagesPresenterTest {
             messageComposerContext = DefaultMessageComposerContext(),
             richTextEditorStateFactory = TestRichTextEditorStateFactory(),
             permissionsPresenterFactory = permissionsPresenterFactory,
-            currentSessionIdHolder = CurrentSessionIdHolder(FakeMatrixClient(A_SESSION_ID)),
             permalinkParser = FakePermalinkParser(),
             permalinkBuilder = FakePermalinkBuilder(),
             timelineController = TimelineController(matrixRoom),

features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/MessagesViewTest.kt

@@ -470,7 +470,9 @@ private fun <R : TestRule> AndroidComposeTestRule<R, ComponentActivity>.setMessa
 ) {
     setContent {
         // Cannot use the RichTextEditor, so simulate a LocalInspectionMode
-        CompositionLocalProvider(LocalInspectionMode provides true) {
+        CompositionLocalProvider(
+            LocalInspectionMode provides true
+        ) {
             MessagesView(
                 state = state,
                 onBackClick = onBackClick,

features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/textcomposer/MessageComposerPresenterTest.kt

@@ -47,19 +47,16 @@ import io.element.android.libraries.matrix.api.room.MatrixRoom
 import io.element.android.libraries.matrix.api.room.MatrixRoomMembersState
 import io.element.android.libraries.matrix.api.room.Mention
 import io.element.android.libraries.matrix.api.room.RoomMembershipState
-import io.element.android.libraries.matrix.api.user.CurrentSessionIdHolder
 import io.element.android.libraries.matrix.test.ANOTHER_MESSAGE
 import io.element.android.libraries.matrix.test.AN_EVENT_ID
 import io.element.android.libraries.matrix.test.A_MESSAGE
 import io.element.android.libraries.matrix.test.A_REPLY
-import io.element.android.libraries.matrix.test.A_SESSION_ID
 import io.element.android.libraries.matrix.test.A_TRANSACTION_ID
 import io.element.android.libraries.matrix.test.A_USER_ID
 import io.element.android.libraries.matrix.test.A_USER_ID_2
 import io.element.android.libraries.matrix.test.A_USER_ID_3
 import io.element.android.libraries.matrix.test.A_USER_ID_4
 import io.element.android.libraries.matrix.test.A_USER_NAME
-import io.element.android.libraries.matrix.test.FakeMatrixClient
 import io.element.android.libraries.matrix.test.permalink.FakePermalinkBuilder
 import io.element.android.libraries.matrix.test.permalink.FakePermalinkParser
 import io.element.android.libraries.matrix.test.room.FakeMatrixRoom
@@ -1057,7 +1054,6 @@ class MessageComposerPresenterTest {
         analyticsService,
         DefaultMessageComposerContext(),
         TestRichTextEditorStateFactory(),
-        currentSessionIdHolder = CurrentSessionIdHolder(FakeMatrixClient(A_SESSION_ID)),
         permissionsPresenterFactory = FakePermissionsPresenterFactory(permissionPresenter),
         permalinkParser = FakePermalinkParser(),
         permalinkBuilder = permalinkBuilder,

features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/timeline/DefaultHtmlConverterProviderTest.kt

@@ -21,7 +21,6 @@ import androidx.compose.ui.platform.LocalInspectionMode
 import androidx.compose.ui.test.junit4.createComposeRule
 import com.google.common.truth.Truth.assertThat
 import io.element.android.libraries.matrix.test.A_USER_ID
-import io.element.android.libraries.matrix.test.permalink.FakePermalinkParser
 import org.junit.Rule
 import org.junit.Test
 import org.junit.runner.RunWith
@@ -33,9 +32,7 @@ class DefaultHtmlConverterProviderTest {
 
     @Test
     fun `calling provide without calling Update first should throw an exception`() {
-        val provider = DefaultHtmlConverterProvider(
+        val provider = DefaultHtmlConverterProvider()
-            permalinkParser = FakePermalinkParser(),
-        )
 
         val exception = runCatching { provider.provide() }.exceptionOrNull()
 
@@ -44,9 +41,7 @@ class DefaultHtmlConverterProviderTest {
 
     @Test
     fun `calling provide after calling Update first should return an HtmlConverter`() {
-        val provider = DefaultHtmlConverterProvider(
+        val provider = DefaultHtmlConverterProvider()
-            permalinkParser = FakePermalinkParser(),
-        )
         composeTestRule.setContent {
             CompositionLocalProvider(LocalInspectionMode provides true) {
                 provider.Update(currentUserId = A_USER_ID)

features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineTextViewTest.kt

@@ -0,0 +1,175 @@
+/*
+ * 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
+ *
+ *     http://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.features.messages.impl.timeline.components.event
+
+import android.text.SpannableString
+import androidx.activity.ComponentActivity
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.test.junit4.AndroidComposeTestRule
+import androidx.compose.ui.test.junit4.createAndroidComposeRule
+import androidx.core.text.buildSpannedString
+import androidx.core.text.inSpans
+import androidx.test.ext.junit.runners.AndroidJUnit4
+import com.google.common.truth.Truth.assertThat
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemTextBasedContent
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemTextContent
+import io.element.android.libraries.matrix.test.A_ROOM_ID
+import io.element.android.libraries.matrix.test.A_ROOM_ID_2
+import io.element.android.libraries.matrix.test.A_USER_ID
+import io.element.android.libraries.matrix.test.A_USER_ID_2
+import io.element.android.libraries.matrix.test.A_USER_NAME
+import io.element.android.libraries.matrix.test.room.aRoomMember
+import io.element.android.libraries.matrix.ui.messages.LocalRoomMemberProfilesCache
+import io.element.android.libraries.matrix.ui.messages.RoomMemberProfilesCache
+import io.element.android.libraries.textcomposer.mentions.MentionSpan
+import io.element.android.libraries.textcomposer.mentions.getMentionSpans
+import io.element.android.wysiwyg.view.spans.CustomMentionSpan
+import kotlinx.coroutines.CompletableDeferred
+import kotlinx.coroutines.test.runTest
+import org.junit.Rule
+import org.junit.Test
+import org.junit.rules.TestRule
+import org.junit.runner.RunWith
+
+@RunWith(AndroidJUnit4::class)
+class TimelineTextViewTest {
+    @get:Rule val rule = createAndroidComposeRule<ComponentActivity>()
+
+    @Test
+    fun `getTextWithResolvedMentions - does nothing for a non spannable CharSequence`() = runTest {
+        val charSequence = "Hello <a href=\"https://matrix.to/#/@alice:example.com\">@alice:example.com</a>"
+
+        val result = rule.getText(aTextContentWithFormattedBody(charSequence))
+
+        assertThat(result.getMentionSpans()).isEmpty()
+    }
+
+    @Test
+    fun `getTextWithResolvedMentions - does nothing if there are no mentions`() = runTest {
+        val charSequence = SpannableString("Hello <a href=\"https://matrix.to/#/@alice:example.com\">@alice:example.com</a>")
+
+        val result = rule.getText(aTextContentWithFormattedBody(charSequence))
+
+        assertThat(result.getMentionSpans()).isEmpty()
+    }
+
+    @Test
+    fun `getTextWithResolvedMentions - just returns the body if there is no formattedBody`() = runTest {
+        val charSequence = "Hello <a href=\"https://matrix.to/#/@alice:example.com\">@alice:example.com</a>"
+
+        val result = rule.getText(aTextContentWithFormattedBody(body = charSequence, formattedBody = null))
+
+        assertThat(result.getMentionSpans()).isEmpty()
+        assertThat(result.toString()).isEqualTo(charSequence)
+    }
+
+    @Test
+    fun `getTextWithResolvedMentions - with Room mention does nothing`() = runTest {
+        val charSequence = buildSpannedString {
+            append("Hello ")
+            inSpans(aMentionSpan(rawValue = A_ROOM_ID_2.value, type = MentionSpan.Type.ROOM)) {
+                append(A_ROOM_ID.value)
+            }
+        }
+
+        val result = rule.getText(aTextContentWithFormattedBody(charSequence))
+
+        assertThat(result.getMentionSpans().firstOrNull()?.text).isEmpty()
+        assertThat(result).isEqualTo(charSequence)
+    }
+
+    @Test
+    fun `getTextWithResolvedMentions - replaces MentionSpan's text`() = runTest {
+        val charSequence = buildSpannedString {
+            append("Hello ")
+            inSpans(aMentionSpan(rawValue = A_USER_ID.value)) {
+                append("@NotAlice")
+            }
+        }
+
+        val result = rule.getText(aTextContentWithFormattedBody(charSequence))
+
+        assertThat(result.getMentionSpans().firstOrNull()?.text).isEqualTo("alice")
+    }
+
+    @Test
+    fun `getTextWithResolvedMentions - replaces MentionSpan's text inside CustomMentionSpan`() = runTest {
+        val charSequence = buildSpannedString {
+            append("Hello ")
+            inSpans(CustomMentionSpan(aMentionSpan(rawValue = A_USER_ID.value))) {
+                append("@NotAlice")
+            }
+        }
+
+        val result = rule.getText(aTextContentWithFormattedBody(charSequence))
+
+        assertThat(result.getMentionSpans().firstOrNull()?.text).isEqualTo("alice")
+    }
+
+    @Test
+    fun `getTextWithResolvedMentions - replaces MentionSpan's text with user id if no display name is cached`() = runTest {
+        val charSequence = buildSpannedString {
+            append("Hello ")
+            inSpans(aMentionSpan(rawValue = A_USER_ID_2.value)) {
+                append("@NotAlice")
+            }
+        }
+
+        val result = rule.getText(aTextContentWithFormattedBody(charSequence))
+
+        assertThat(result.getMentionSpans().firstOrNull()?.text).isEqualTo(A_USER_ID_2.value)
+    }
+
+    private suspend fun <R : TestRule> AndroidComposeTestRule<R, ComponentActivity>.getText(
+        content: TimelineItemTextBasedContent,
+    ): CharSequence {
+        val completable = CompletableDeferred<CharSequence>()
+        setContent {
+            val roomMemberProfilesCache = RoomMemberProfilesCache().apply {
+                replace(listOf(aRoomMember(userId = A_USER_ID, displayName = A_USER_NAME)))
+            }
+            CompositionLocalProvider(
+                LocalRoomMemberProfilesCache provides roomMemberProfilesCache,
+            ) {
+                completable.complete(getTextWithResolvedMentions(content = content))
+            }
+        }
+        return completable.await()
+    }
+
+    private fun aMentionSpan(
+        rawValue: String,
+        text: String = "",
+        type: MentionSpan.Type = MentionSpan.Type.USER
+    ) = MentionSpan(
+        text = text,
+        rawValue = rawValue,
+        type = type,
+        backgroundColor = 0,
+        textColor = 0,
+        startPadding = 0,
+        endPadding = 0,
+    )
+
+    private fun aTextContentWithFormattedBody(formattedBody: CharSequence?, body: String = "") =
+        TimelineItemTextContent(
+            body = body,
+            htmlDocument = null,
+            formattedBody = formattedBody,
+            isEdited = false
+        )
+}

gradle/libs.versions.toml

@@ -44,7 +44,8 @@ serialization_json = "1.6.3"
 showkase = "1.0.3"
 appyx = "1.4.0"
 sqldelight = "2.0.2"
-wysiwyg = "2.37.3"
+# TODO use a stable version before merging
+wysiwyg = "2.37.3-SNAPSHOT"
 telephoto = "0.11.2"
 
 # DI

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/messages/RoomMemberProfilesCache.kt

@@ -0,0 +1,44 @@
+/*
+ * 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
+ *
+ *     http://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.matrix.ui.messages
+
+import androidx.compose.runtime.staticCompositionLocalOf
+import io.element.android.libraries.matrix.api.core.UserId
+import io.element.android.libraries.matrix.api.room.RoomMember
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import javax.inject.Inject
+
+class RoomMemberProfilesCache @Inject constructor() {
+    private val cache = MutableStateFlow(mapOf<UserId, RoomMember>())
+
+    private val _lastCacheUpdate = MutableStateFlow(0L)
+    val lastCacheUpdate: StateFlow<Long> = _lastCacheUpdate
+
+    fun replace(items: List<RoomMember>) {
+        cache.value = items.associateBy { it.userId }
+        _lastCacheUpdate.tryEmit(_lastCacheUpdate.value + 1)
+    }
+
+    fun getDisplayName(userId: UserId): String? {
+        return cache.value[userId]?.disambiguatedDisplayName
+    }
+}
+
+val LocalRoomMemberProfilesCache = staticCompositionLocalOf {
+    RoomMemberProfilesCache()
+}

libraries/textcomposer/impl/build.gradle.kts

@@ -17,6 +17,7 @@
 plugins {
     id("io.element.android-compose-library")
     alias(libs.plugins.ksp)
+    alias(libs.plugins.anvil)
     id("kotlin-parcelize")
 }
 
@@ -27,7 +28,13 @@ android {
     }
 }
 
+anvil {
+    generateDaggerFactories.set(true)
+}
+
 dependencies {
+    implementation(projects.anvilannotations)
+    implementation(projects.libraries.architecture)
     implementation(projects.libraries.uiStrings)
     implementation(projects.libraries.androidutils)
     implementation(projects.libraries.core)

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

@@ -51,13 +51,13 @@ 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.core.UserId
 import io.element.android.libraries.matrix.api.media.MediaSource
 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.components.A_BLUR_HASH
 import io.element.android.libraries.matrix.ui.components.AttachmentThumbnailInfo
 import io.element.android.libraries.matrix.ui.components.AttachmentThumbnailType
+import io.element.android.libraries.matrix.ui.messages.LocalRoomMemberProfilesCache
 import io.element.android.libraries.testtags.TestTags
 import io.element.android.libraries.testtags.testTag
 import io.element.android.libraries.textcomposer.components.ComposerOptionsButton
@@ -71,7 +71,7 @@ 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.rememberMentionSpanProvider
+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
@@ -94,7 +94,6 @@ fun TextComposer(
     permalinkParser: PermalinkParser,
     composerMode: MessageComposerMode,
     enableVoiceMessages: Boolean,
-    currentUserId: UserId,
     onRequestFocus: () -> Unit,
     onSendMessage: () -> Unit,
     onResetComposerMode: () -> Unit,
@@ -146,6 +145,8 @@ fun TextComposer(
         }
     }
 
+    val userProfileCache = LocalRoomMemberProfilesCache.current
+
     val placeholder = if (composerMode.inThread) {
         stringResource(id = CommonStrings.action_reply_in_thread)
     } else {
@@ -155,17 +156,22 @@ fun TextComposer(
         is TextEditorState.Rich -> {
             remember(state.richTextEditorState, subcomposing, composerMode, onResetComposerMode, onError) {
                 @Composable {
-                    val mentionSpanProvider = rememberMentionSpanProvider(
+                    val mentionSpanProvider = LocalMentionSpanProvider.current
-                        currentUserId = currentUserId,
-                        permalinkParser = permalinkParser,
-                    )
                     TextInput(
                         state = state.richTextEditorState,
                         subcomposing = subcomposing,
                         placeholder = placeholder,
                         composerMode = composerMode,
                         onResetComposerMode = onResetComposerMode,
-                        resolveMentionDisplay = { text, url -> TextDisplay.Custom(mentionSpanProvider.getMentionSpanFor(text, url)) },
+                        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", "#")) },
                         onError = onError,
                         onTyping = onTyping,
@@ -519,7 +525,6 @@ internal fun TextComposerSimplePreview() = ElementPreview {
                     voiceMessageState = VoiceMessageState.Idle,
                     composerMode = MessageComposerMode.Normal,
                     enableVoiceMessages = true,
-                    currentUserId = UserId("@alice:localhost"),
                 )
             },
             {
@@ -528,7 +533,6 @@ internal fun TextComposerSimplePreview() = ElementPreview {
                     voiceMessageState = VoiceMessageState.Idle,
                     composerMode = MessageComposerMode.Normal,
                     enableVoiceMessages = true,
-                    currentUserId = UserId("@alice:localhost")
                 )
             },
             {
@@ -542,7 +546,6 @@ internal fun TextComposerSimplePreview() = ElementPreview {
                     voiceMessageState = VoiceMessageState.Idle,
                     composerMode = MessageComposerMode.Normal,
                     enableVoiceMessages = true,
-                    currentUserId = UserId("@alice:localhost")
                 )
             },
             {
@@ -551,7 +554,6 @@ internal fun TextComposerSimplePreview() = ElementPreview {
                     voiceMessageState = VoiceMessageState.Idle,
                     composerMode = MessageComposerMode.Normal,
                     enableVoiceMessages = true,
-                    currentUserId = UserId("@alice:localhost")
                 )
             }
         )
@@ -568,7 +570,6 @@ internal fun TextComposerFormattingPreview() = ElementPreview {
             showTextFormatting = true,
             composerMode = MessageComposerMode.Normal,
             enableVoiceMessages = true,
-            currentUserId = UserId("@alice:localhost")
         )
     }, {
         ATextComposer(
@@ -577,7 +578,6 @@ internal fun TextComposerFormattingPreview() = ElementPreview {
             showTextFormatting = true,
             composerMode = MessageComposerMode.Normal,
             enableVoiceMessages = true,
-            currentUserId = UserId("@alice:localhost")
         )
     }, {
         ATextComposer(
@@ -590,7 +590,6 @@ internal fun TextComposerFormattingPreview() = ElementPreview {
             showTextFormatting = true,
             composerMode = MessageComposerMode.Normal,
             enableVoiceMessages = true,
-            currentUserId = UserId("@alice:localhost")
         )
     }))
 }
@@ -604,7 +603,6 @@ internal fun TextComposerEditPreview() = ElementPreview {
             voiceMessageState = VoiceMessageState.Idle,
             composerMode = MessageComposerMode.Edit(EventId("$1234"), "Some text", TransactionId("1234")),
             enableVoiceMessages = true,
-            currentUserId = UserId("@alice:localhost")
         )
     }))
 }
@@ -618,7 +616,6 @@ internal fun MarkdownTextComposerEditPreview() = ElementPreview {
             voiceMessageState = VoiceMessageState.Idle,
             composerMode = MessageComposerMode.Edit(EventId("$1234"), "Some text", TransactionId("1234")),
             enableVoiceMessages = true,
-            currentUserId = UserId("@alice:localhost")
         )
     }))
 }
@@ -642,7 +639,6 @@ internal fun TextComposerReplyPreview() = ElementPreview {
                             "To preview larger textfields and long lines with overflow"
                     ),
                     enableVoiceMessages = true,
-                    currentUserId = UserId("@alice:localhost")
                 )
             },
             {
@@ -659,7 +655,6 @@ internal fun TextComposerReplyPreview() = ElementPreview {
                             "To preview larger textfields and long lines with overflow"
                     ),
                     enableVoiceMessages = true,
-                    currentUserId = UserId("@alice:localhost")
                 )
             },
             {
@@ -679,7 +674,6 @@ internal fun TextComposerReplyPreview() = ElementPreview {
                         defaultContent = "image.jpg"
                     ),
                     enableVoiceMessages = true,
-                    currentUserId = UserId("@alice:localhost")
                 )
             },
             {
@@ -699,7 +693,6 @@ internal fun TextComposerReplyPreview() = ElementPreview {
                         defaultContent = "video.mp4"
                     ),
                     enableVoiceMessages = true,
-                    currentUserId = UserId("@alice:localhost")
                 )
             },
             {
@@ -719,7 +712,6 @@ internal fun TextComposerReplyPreview() = ElementPreview {
                         defaultContent = "logs.txt"
                     ),
                     enableVoiceMessages = true,
-                    currentUserId = UserId("@alice:localhost")
                 )
             },
             {
@@ -739,7 +731,6 @@ internal fun TextComposerReplyPreview() = ElementPreview {
                         defaultContent = "Shared location"
                     ),
                     enableVoiceMessages = true,
-                    currentUserId = UserId("@alice:localhost")
                 )
             }
         )
@@ -757,7 +748,6 @@ internal fun TextComposerVoicePreview() = ElementPreview {
         voiceMessageState = voiceMessageState,
         composerMode = MessageComposerMode.Normal,
         enableVoiceMessages = true,
-        currentUserId = UserId("@alice:localhost")
     )
     PreviewColumn(items = persistentListOf({
         VoicePreview(voiceMessageState = VoiceMessageState.Recording(61.seconds, createFakeWaveform()))
@@ -818,7 +808,6 @@ private fun ATextComposer(
     voiceMessageState: VoiceMessageState,
     composerMode: MessageComposerMode,
     enableVoiceMessages: Boolean,
-    currentUserId: UserId,
     showTextFormatting: Boolean = false,
 ) {
     TextComposer(
@@ -830,7 +819,6 @@ private fun ATextComposer(
         },
         composerMode = composerMode,
         enableVoiceMessages = enableVoiceMessages,
-        currentUserId = currentUserId,
         onRequestFocus = {},
         onSendMessage = {},
         onResetComposerMode = {},

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

@@ -21,12 +21,14 @@ import android.graphics.Paint
 import android.graphics.RectF
 import android.graphics.Typeface
 import android.text.style.ReplacementSpan
+import androidx.core.text.getSpans
 import io.element.android.libraries.core.extensions.orEmpty
+import io.element.android.wysiwyg.view.spans.CustomMentionSpan
 import kotlin.math.min
 import kotlin.math.roundToInt
 
 class MentionSpan(
-    val text: String,
+    text: String,
     val rawValue: String,
     val type: Type,
     val backgroundColor: Int,
@@ -39,23 +41,27 @@ class MentionSpan(
         private const val MAX_LENGTH = 20
     }
 
-    private var actualText: CharSequence? = null
     private var textWidth = 0
     private val backgroundPaint = Paint().apply {
         isAntiAlias = true
         color = backgroundColor
     }
 
+    var text: String = text
+        set(value) {
+            field = value
+            mentionText = getActualText(text)
+        }
+
+    private var mentionText: CharSequence = getActualText(text)
+
     override fun getSize(paint: Paint, text: CharSequence?, start: Int, end: Int, fm: Paint.FontMetricsInt?): Int {
-        val mentionText = getActualText(this.text)
         paint.typeface = typeface
         textWidth = paint.measureText(mentionText, 0, mentionText.length).roundToInt()
         return textWidth + startPadding + endPadding
     }
 
     override fun draw(canvas: Canvas, text: CharSequence?, start: Int, end: Int, x: Float, top: Int, y: Int, bottom: Int, paint: Paint) {
-        val mentionText = getActualText(this.text)
-
         // Extra vertical space to add below the baseline (y). This helps us center the span vertically
         val extraVerticalSpace = y + paint.ascent() + paint.descent() - top
 
@@ -68,7 +74,6 @@ class MentionSpan(
     }
 
     private fun getActualText(text: String): CharSequence {
-        if (actualText != null) return actualText!!
         return buildString {
             val mentionText = text.orEmpty()
             when (type) {
@@ -87,7 +92,6 @@ class MentionSpan(
             if (mentionText.length > MAX_LENGTH) {
                 append("…")
             }
-            actualText = this
         }
     }
 
@@ -96,3 +100,18 @@ class MentionSpan(
         ROOM,
     }
 }
+
+fun CharSequence.getMentionSpans(): List<MentionSpan> {
+    return if (this is android.text.Spanned) {
+        val customMentionSpans = getSpans<CustomMentionSpan>()
+        if (customMentionSpans.isNotEmpty()) {
+            // If we have custom mention spans created by the RTE, we need to extract the provided spans and filter them
+            customMentionSpans.map { it.providedSpan }.filterIsInstance<MentionSpan>()
+        } else {
+            // Otherwise try to get the spans directly
+            getSpans<MentionSpan>().toList()
+        }
+    } else {
+        emptyList()
+    }
+}

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

@@ -18,6 +18,7 @@ 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
@@ -25,12 +26,16 @@ 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
@@ -40,7 +45,6 @@ import io.element.android.libraries.designsystem.theme.currentUserMentionPillTex
 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.SessionId
 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
@@ -48,22 +52,28 @@ import io.element.android.libraries.matrix.api.permalink.PermalinkParser
 import kotlinx.collections.immutable.persistentListOf
 
 @Stable
-class MentionSpanProvider(
+class MentionSpanProvider @AssistedInject constructor(
-    private val currentSessionId: SessionId,
+    @Assisted private val currentSessionId: String,
     private val permalinkParser: PermalinkParser,
-    private var currentUserTextColor: Int = 0,
-    private var currentUserBackgroundColor: Int = Color.WHITE,
-    private var otherTextColor: Int = 0,
-    private var otherBackgroundColor: Int = Color.WHITE,
 ) {
+    @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
-    internal fun setup() {
+    fun updateStyles() {
         currentUserTextColor = ElementTheme.colors.currentUserMentionPillText.toArgb()
         currentUserBackgroundColor = ElementTheme.colors.currentUserMentionPillBackground.toArgb()
         otherTextColor = ElementTheme.colors.mentionPillText.toArgb()
@@ -82,7 +92,7 @@ class MentionSpanProvider(
         val (startPaddingPx, endPaddingPx) = paddingValuesPx.value
         return when {
             permalinkData is PermalinkData.UserLink -> {
-                val isCurrentUser = permalinkData.userId == currentSessionId
+                val isCurrentUser = permalinkData.userId.value == currentSessionId
                 MentionSpan(
                     text = text,
                     rawValue = permalinkData.userId.toString(),
@@ -134,43 +144,30 @@ class MentionSpanProvider(
     }
 }
 
-@Composable
-fun rememberMentionSpanProvider(
-    currentUserId: SessionId,
-    permalinkParser: PermalinkParser,
-): MentionSpanProvider {
-    val provider = remember(currentUserId) {
-        MentionSpanProvider(
-            currentSessionId = currentUserId,
-            permalinkParser = permalinkParser,
-        )
-    }
-    provider.setup()
-    return provider
-}
-
 @PreviewsDayNight
 @Composable
 internal fun MentionSpanPreview() {
-    val provider = rememberMentionSpanProvider(
-        currentUserId = SessionId("@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")
-                }
-            }
-        },
-    )
     ElementPreview {
-        provider.setup()
+        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")
@@ -199,3 +196,14 @@ internal fun MentionSpanPreview() {
         })
     }
 }
+
+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/model/MarkdownTextEditorState.kt

@@ -98,7 +98,7 @@ class MarkdownTextEditorState(
                                 replace(start, end, "@room")
                             } else {
                                 val link = permalinkBuilder.permalinkForUser(UserId(mention.rawValue)).getOrNull() ?: continue
-                                replace(start, end, "[${mention.text}]($link)")
+                                replace(start, end, "[${mention.rawValue}]($link)")
                             }
                         }
                     }

libraries/textcomposer/impl/src/test/kotlin/io/element/android/libraries/textcomposer/impl/components/markdown/MarkdownTextInputTest.kt

@@ -164,7 +164,7 @@ class MarkdownTextInputTest {
             editor = it.findEditor()
             state.insertMention(
                 ResolvedMentionSuggestion.Member(roomMember = aRoomMember()),
-                MentionSpanProvider(currentSessionId = A_SESSION_ID, permalinkParser = permalinkParser),
+                MentionSpanProvider(currentSessionId = A_SESSION_ID.value, permalinkParser = permalinkParser),
                 permalinkBuilder,
             )
         }

libraries/textcomposer/impl/src/test/kotlin/io/element/android/libraries/textcomposer/impl/mentions/MentionSpanProviderTest.kt

@@ -43,13 +43,14 @@ class MentionSpanProviderTest {
 
     private val permalinkParser = FakePermalinkParser()
     private val mentionSpanProvider = MentionSpanProvider(
-        currentSessionId = currentUserId,
+        currentSessionId = currentUserId.value,
         permalinkParser = permalinkParser,
-        currentUserBackgroundColor = myUserColor,
+    ).apply {
-        currentUserTextColor = myUserColor,
+        currentUserBackgroundColor = myUserColor
-        otherBackgroundColor = otherColor,
+        currentUserTextColor = myUserColor
-        otherTextColor = otherColor,
+        otherBackgroundColor = otherColor
-    )
+        otherTextColor = otherColor
+    }
 
     @Test
     fun `getting mention span for current user should return a MentionSpan with custom colors`() {

libraries/textcomposer/impl/src/test/kotlin/io/element/android/libraries/textcomposer/impl/model/MarkdownTextEditorStateTest.kt

@@ -124,7 +124,7 @@ class MarkdownTextEditorStateTest {
         val markdown = state.getMessageMarkdown(permalinkBuilder = permalinkBuilder)
 
         assertThat(markdown).isEqualTo(
-            "Hello [@Alice](https://matrix.to/#/@alice:matrix.org) and everyone in @room"
+            "Hello [@alice:matrix.org](https://matrix.to/#/@alice:matrix.org) and everyone in @room"
         )
     }
 
@@ -151,7 +151,7 @@ class MarkdownTextEditorStateTest {
         currentSessionId: SessionId = A_SESSION_ID,
         permalinkParser: FakePermalinkParser = FakePermalinkParser(),
     ): MentionSpanProvider {
-        return MentionSpanProvider(currentSessionId, permalinkParser)
+        return MentionSpanProvider(currentSessionId.value, permalinkParser)
     }
 
     private fun aMarkdownTextWithMentions(): CharSequence {

tools/detekt/detekt.yml

@@ -222,7 +222,13 @@ Compose:
   CompositionLocalAllowlist:
     active: true
     # You can optionally define a list of CompositionLocals that are allowed here
-    allowedCompositionLocals: LocalCompoundColors, LocalSnackbarDispatcher, LocalCameraPositionState, LocalTimelineItemPresenterFactories
+    allowedCompositionLocals:
+      - LocalCompoundColors
+      - LocalSnackbarDispatcher
+      - LocalCameraPositionState
+      - LocalTimelineItemPresenterFactories
+      - LocalRoomMemberProfilesCache
+      - LocalMentionSpanProvider
   CompositionLocalNaming:
     active: true
   ContentEmitterReturningValues: