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>
2024-07-15 18:27:59 +02:00 · 2024-07-15 18:27:59 +02:00 · 2ff5fa67fc
commit 2ff5fa67fc
parent 5493d6b741
31 changed files with 717 additions and 288 deletions
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesFlowNode.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesFlowNode.kt
@ -73,8 +73,8 @@ import io.element.android.libraries.matrix.ui.messages.LocalRoomMemberProfilesCa
 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.libraries.textcomposer.mentions.LocalMentionSpanTheme
+import io.element.android.libraries.textcomposer.mentions.MentionSpanTheme
 import io.element.android.services.analytics.api.AnalyticsService
 import io.element.android.services.analyticsproviders.api.trackers.captureInteraction
 import kotlinx.collections.immutable.ImmutableList
@ -94,7 +94,7 @@ class MessagesFlowNode @AssistedInject constructor(
    private val analyticsService: AnalyticsService,
    private val room: MatrixRoom,
    private val roomMemberProfilesCache: RoomMemberProfilesCache,
-    mentionSpanProviderFactory: MentionSpanProvider.Factory,
+    private val mentionSpanTheme: MentionSpanTheme,
 ) : BaseFlowNode<MessagesFlowNode.NavTarget>(
    backstack = BackStack(
        initialElement = NavTarget.Messages,
@ -151,8 +151,6 @@ class MessagesFlowNode @AssistedInject constructor(

    private val callbacks = plugins<MessagesEntryPoint.Callback>()

-    private val mentionSpanProvider = mentionSpanProviderFactory.create(room.sessionId.value)
-
    override fun onBuilt() {
        super.onBuilt()

@ -371,11 +369,10 @@ class MessagesFlowNode @AssistedInject constructor(

    @Composable
    override fun View(modifier: Modifier) {
-        mentionSpanProvider.updateStyles()
-
+        mentionSpanTheme.updateStyles(currentUserId = room.sessionId)
        CompositionLocalProvider(
            LocalRoomMemberProfilesCache provides roomMemberProfilesCache,
-            LocalMentionSpanProvider provides mentionSpanProvider,
+            LocalMentionSpanTheme provides mentionSpanTheme,
        ) {
            BackstackWithOverlayBox(modifier)
        }
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/messagecomposer/MessageComposerPresenter.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/messagecomposer/MessageComposerPresenter.kt
@ -42,6 +42,7 @@ import io.element.android.features.messages.impl.attachments.preview.error.sendA
 import io.element.android.features.messages.impl.draft.ComposerDraftService
 import io.element.android.features.messages.impl.mentions.MentionSuggestionsProcessor
 import io.element.android.features.messages.impl.timeline.TimelineController
+import io.element.android.features.messages.impl.utils.TextPillificationHelper
 import io.element.android.libraries.architecture.Presenter
 import io.element.android.libraries.designsystem.utils.snackbar.SnackbarDispatcher
 import io.element.android.libraries.designsystem.utils.snackbar.SnackbarMessage
@ -52,12 +53,14 @@ import io.element.android.libraries.featureflag.api.FeatureFlags
 import io.element.android.libraries.matrix.api.core.ProgressCallback
 import io.element.android.libraries.matrix.api.core.UserId
 import io.element.android.libraries.matrix.api.permalink.PermalinkBuilder
+import io.element.android.libraries.matrix.api.permalink.PermalinkData
 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.room.draft.ComposerDraft
 import io.element.android.libraries.matrix.api.room.draft.ComposerDraftType
 import io.element.android.libraries.matrix.api.room.isDm
+import io.element.android.libraries.matrix.ui.messages.RoomMemberProfilesCache
 import io.element.android.libraries.matrix.ui.messages.reply.InReplyToDetails
 import io.element.android.libraries.matrix.ui.messages.reply.map
 import io.element.android.libraries.mediapickers.api.PickerProvider
@ -66,7 +69,8 @@ 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.LocalMentionSpanTheme
+import io.element.android.libraries.textcomposer.mentions.MentionSpanProvider
 import io.element.android.libraries.textcomposer.mentions.ResolvedMentionSuggestion
 import io.element.android.libraries.textcomposer.model.MarkdownTextEditorState
 import io.element.android.libraries.textcomposer.model.Message
@ -77,6 +81,7 @@ import io.element.android.libraries.textcomposer.model.rememberMarkdownTextEdito
 import io.element.android.services.analytics.api.AnalyticsService
 import io.element.android.services.analyticsproviders.api.trackers.captureInteraction
 import io.element.android.wysiwyg.compose.RichTextEditorState
+import io.element.android.wysiwyg.display.TextDisplay
 import kotlinx.collections.immutable.persistentListOf
 import kotlinx.collections.immutable.toPersistentList
 import kotlinx.coroutines.CancellationException
@ -116,6 +121,9 @@ class MessageComposerPresenter @Inject constructor(
    permissionsPresenterFactory: PermissionsPresenter.Factory,
    private val timelineController: TimelineController,
    private val draftService: ComposerDraftService,
+    private val mentionSpanProvider: MentionSpanProvider,
+    private val pillificationHelper: TextPillificationHelper,
+    private val roomMemberProfilesCache: RoomMemberProfilesCache,
 ) : Presenter<MessageComposerState> {
    private val cameraPermissionPresenter = permissionsPresenterFactory.create(Manifest.permission.CAMERA)
    private var pendingEvent: MessageComposerEvents? = null
@ -139,7 +147,6 @@ class MessageComposerPresenter @Inject constructor(
            richTextEditorState.isReadyToProcessActions = true
        }
        val markdownTextEditorState = rememberMarkdownTextEditorState(initialText = null, initialFocus = false)
-
        var isMentionsEnabled by remember { mutableStateOf(false) }
        LaunchedEffect(Unit) {
            isMentionsEnabled = featureFlagService.isFeatureEnabled(FeatureFlags.Mentions)
@ -260,8 +267,6 @@ class MessageComposerPresenter @Inject constructor(
            }
        }

-        val mentionSpanProvider = LocalMentionSpanProvider.current
-
        fun handleEvents(event: MessageComposerEvents) {
            when (event) {
                MessageComposerEvents.ToggleFullScreenState -> isFullScreen.value = !isFullScreen.value
@ -386,9 +391,24 @@ class MessageComposerPresenter @Inject constructor(
            }
        }

+        val mentionSpanTheme = LocalMentionSpanTheme.current
+        val resolveMentionDisplay = remember(mentionSpanTheme) {
+            { text: String, url: String ->
+                val permalinkData = permalinkParser.parse(url)
+                if (permalinkData is PermalinkData.UserLink) {
+                    val displayNameOrId = roomMemberProfilesCache.getDisplayName(permalinkData.userId) ?: permalinkData.userId.value
+                    val mentionSpan = mentionSpanProvider.getMentionSpanFor(displayNameOrId, url)
+                    mentionSpan.update(mentionSpanTheme)
+                    TextDisplay.Custom(mentionSpan)
+                } else {
+                    val mentionSpan = mentionSpanProvider.getMentionSpanFor(text, url)
+                    mentionSpan.update(mentionSpanTheme)
+                    TextDisplay.Custom(mentionSpan)
+                }
+            }
+        }
        return MessageComposerState(
            textEditorState = textEditorState,
-            permalinkParser = permalinkParser,
            isFullScreen = isFullScreen.value,
            mode = messageComposerContext.composerMode,
            showAttachmentSourcePicker = showAttachmentSourcePicker,
@ -397,7 +417,8 @@ class MessageComposerPresenter @Inject constructor(
            canCreatePoll = canCreatePoll.value,
            attachmentsState = attachmentsState.value,
            memberSuggestions = memberSuggestions.toPersistentList(),
-            eventSink = { handleEvents(it) }
+            resolveMentionDisplay = resolveMentionDisplay,
+            eventSink = { handleEvents(it) },
        )
    }

@ -627,7 +648,8 @@ class MessageComposerPresenter @Inject constructor(
            analyticsService.captureInteraction(Interaction.Name.MobileRoomComposerFormattingEnabled)
        } else {
            val markdown = richTextEditorState.messageMarkdown
-            markdownTextEditorState.text.update(markdown, true)
+            val pilliefiedMarkdown = pillificationHelper.pillify(markdown)
+            markdownTextEditorState.text.update(pilliefiedMarkdown, true)
            // Give some time for the focus of the previous editor to be cleared
            delay(100)
            markdownTextEditorState.requestFocusAction()
@ -688,7 +710,8 @@ class MessageComposerPresenter @Inject constructor(
            if (content.isEmpty()) {
                markdownTextEditorState.selection = IntRange.EMPTY
            }
-            markdownTextEditorState.text.update(content, true)
+            val pillifiedContent = pillificationHelper.pillify(content)
+            markdownTextEditorState.text.update(pillifiedContent, true)
            if (requestFocus) {
                markdownTextEditorState.requestFocusAction()
            }
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/messagecomposer/MessageComposerState.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/messagecomposer/MessageComposerState.kt
@ -19,16 +19,15 @@ 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.permalink.PermalinkParser
 import io.element.android.libraries.textcomposer.mentions.ResolvedMentionSuggestion
 import io.element.android.libraries.textcomposer.model.MessageComposerMode
 import io.element.android.libraries.textcomposer.model.TextEditorState
+import io.element.android.wysiwyg.display.TextDisplay
 import kotlinx.collections.immutable.ImmutableList

@Stable
 data class MessageComposerState(
    val textEditorState: TextEditorState,
-    val permalinkParser: PermalinkParser,
    val isFullScreen: Boolean,
    val mode: MessageComposerMode,
    val showAttachmentSourcePicker: Boolean,
@ -37,6 +36,7 @@ data class MessageComposerState(
    val canCreatePoll: Boolean,
    val attachmentsState: AttachmentsState,
    val memberSuggestions: ImmutableList<ResolvedMentionSuggestion>,
+    val resolveMentionDisplay: (String, String) -> TextDisplay,
    val eventSink: (MessageComposerEvents) -> Unit,
 )

--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/messagecomposer/MessageComposerStateProvider.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/messagecomposer/MessageComposerStateProvider.kt
@ -17,12 +17,11 @@
 package io.element.android.features.messages.impl.messagecomposer

 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
-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
 import io.element.android.libraries.textcomposer.mentions.ResolvedMentionSuggestion
 import io.element.android.libraries.textcomposer.model.MessageComposerMode
 import io.element.android.libraries.textcomposer.model.TextEditorState
+import io.element.android.wysiwyg.display.TextDisplay
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.collections.immutable.persistentListOf

@ -45,9 +44,6 @@ fun aMessageComposerState(
    memberSuggestions: ImmutableList<ResolvedMentionSuggestion> = persistentListOf(),
 ) = MessageComposerState(
    textEditorState = textEditorState,
-    permalinkParser = object : PermalinkParser {
-        override fun parse(uriString: String): PermalinkData = TODO()
-    },
    isFullScreen = isFullScreen,
    mode = mode,
    showTextFormatting = showTextFormatting,
@ -56,5 +52,6 @@ fun aMessageComposerState(
    canCreatePoll = canCreatePoll,
    attachmentsState = attachmentsState,
    memberSuggestions = memberSuggestions,
+    resolveMentionDisplay = { _, _ -> TextDisplay.Plain },
    eventSink = {},
 )
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/messagecomposer/MessageComposerView.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/messagecomposer/MessageComposerView.kt
@ -107,7 +107,6 @@ internal fun MessageComposerView(
        modifier = modifier,
        state = state.textEditorState,
        voiceMessageState = voiceMessageState.voiceMessageState,
-        permalinkParser = state.permalinkParser,
        subcomposing = subcomposing,
        onRequestFocus = ::onRequestFocus,
        onSendMessage = ::sendMessage,
@ -122,6 +121,7 @@ internal fun MessageComposerView(
        onSendVoiceMessage = onSendVoiceMessage,
        onDeleteVoiceMessage = onDeleteVoiceMessage,
        onReceiveSuggestion = ::onSuggestionReceived,
+        resolveMentionDisplay = state.resolveMentionDisplay,
        onError = ::onError,
        onTyping = ::onTyping,
        onSelectRichContent = ::sendUri,
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/DefaultHtmlConverterProvider.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/DefaultHtmlConverterProvider.kt
@ -29,7 +29,8 @@ 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.textcomposer.ElementRichTextEditorStyle
-import io.element.android.libraries.textcomposer.mentions.LocalMentionSpanProvider
+import io.element.android.libraries.textcomposer.mentions.LocalMentionSpanTheme
+import io.element.android.libraries.textcomposer.mentions.MentionSpanProvider
 import io.element.android.wysiwyg.compose.StyledHtmlConverter
 import io.element.android.wysiwyg.display.MentionDisplayHandler
 import io.element.android.wysiwyg.display.TextDisplay
@ -39,7 +40,9 @@ import javax.inject.Inject

@ContributesBinding(SessionScope::class)
@SingleIn(SessionScope::class)
-class DefaultHtmlConverterProvider @Inject constructor() : HtmlConverterProvider {
+class DefaultHtmlConverterProvider @Inject constructor(
+    private val mentionSpanProvider: MentionSpanProvider,
+) : HtmlConverterProvider {
    private val htmlConverter: MutableState<HtmlConverter?> = mutableStateOf(null)

    @Composable
@ -50,20 +53,23 @@ class DefaultHtmlConverterProvider @Inject constructor() : HtmlConverterProvider
        }

        val editorStyle = ElementRichTextEditorStyle.textStyle()
-        val mentionSpanProvider = LocalMentionSpanProvider.current
-
+        val mentionSpanTheme = LocalMentionSpanTheme.current
        val context = LocalContext.current

-        htmlConverter.value = remember(editorStyle, mentionSpanProvider) {
+        htmlConverter.value = remember(editorStyle, mentionSpanTheme) {
            StyledHtmlConverter(
                context = context,
                mentionDisplayHandler = object : MentionDisplayHandler {
                    override fun resolveAtRoomMentionDisplay(): TextDisplay {
-                        return TextDisplay.Custom(mentionSpanProvider.getMentionSpanFor(text = "@room", url = "#"))
+                        val mentionSpan = mentionSpanProvider.getMentionSpanFor(text = "@room", url = "#")
+                        mentionSpan.update(mentionSpanTheme)
+                        return TextDisplay.Custom(mentionSpan)
                    }

                    override fun resolveMentionDisplay(text: String, url: String): TextDisplay {
-                        return TextDisplay.Custom(mentionSpanProvider.getMentionSpanFor(text, url))
+                        val mentionSpan = mentionSpanProvider.getMentionSpanFor(text, url)
+                        mentionSpan.update(mentionSpanTheme)
+                        return TextDisplay.Custom(mentionSpan)
                    }
                },
                isMention = { _, url -> mentionDetector?.isMention(url).orFalse() }
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemTextView.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemTextView.kt
@ -41,8 +41,10 @@ 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.LocalMentionSpanTheme
 import io.element.android.libraries.textcomposer.mentions.MentionSpan
 import io.element.android.libraries.textcomposer.mentions.getMentionSpans
+import io.element.android.libraries.textcomposer.mentions.updateMentionStyles
 import io.element.android.wysiwyg.compose.EditorStyledText

@Composable
@ -74,9 +76,11 @@ fun TimelineItemTextView(
 internal fun getTextWithResolvedMentions(content: TimelineItemTextBasedContent): CharSequence {
    val userProfileCache = LocalRoomMemberProfilesCache.current
    val lastCacheUpdate by userProfileCache.lastCacheUpdate.collectAsState()
-    val formattedBody = remember(content.formattedBody, lastCacheUpdate) {
+    val mentionSpanTheme = LocalMentionSpanTheme.current
+    val formattedBody = remember(content.formattedBody, mentionSpanTheme, lastCacheUpdate) {
        content.formattedBody?.let { formattedBody ->
            updateMentionSpans(formattedBody, userProfileCache)
+            mentionSpanTheme.updateMentionStyles(formattedBody)
            formattedBody
        }
    }
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/utils/TextPillificationHelper.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/utils/TextPillificationHelper.kt
@ -0,0 +1,80 @@
+/*
+ * 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.features.messages.impl.utils
+
+import android.text.Spannable
+import android.text.SpannableStringBuilder
+import androidx.core.text.getSpans
+import io.element.android.libraries.matrix.api.core.MatrixPatternType
+import io.element.android.libraries.matrix.api.core.MatrixPatterns
+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.permalink.PermalinkBuilder
+import io.element.android.libraries.matrix.api.permalink.PermalinkParser
+import io.element.android.libraries.matrix.ui.messages.RoomMemberProfilesCache
+import io.element.android.libraries.textcomposer.mentions.MentionSpan
+import io.element.android.libraries.textcomposer.mentions.MentionSpanProvider
+import javax.inject.Inject
+
+class TextPillificationHelper @Inject constructor(
+    private val mentionSpanProvider: MentionSpanProvider,
+    private val permalinkBuilder: PermalinkBuilder,
+    private val permalinkParser: PermalinkParser,
+    private val roomMemberProfilesCache: RoomMemberProfilesCache,
+) {
+    @Suppress("LoopWithTooManyJumpStatements")
+    fun pillify(text: CharSequence): CharSequence {
+        val matches = MatrixPatterns.findPatterns(text, permalinkParser).sortedByDescending { it.end }
+        if (matches.isEmpty()) return text
+
+        val spannable = SpannableStringBuilder(text)
+        for (match in matches) {
+            when (match.type) {
+                MatrixPatternType.USER_ID -> {
+                    val mentionSpanExists = spannable.getSpans<MentionSpan>(match.start, match.end).isNotEmpty()
+                    if (!mentionSpanExists) {
+                        val userId = UserId(match.value)
+                        val permalink = permalinkBuilder.permalinkForUser(userId).getOrNull() ?: continue
+                        val mentionSpan = mentionSpanProvider.getMentionSpanFor(match.value, permalink)
+                        roomMemberProfilesCache.getDisplayName(userId)?.let { mentionSpan.text = it }
+                        spannable.replace(match.start, match.end, "@ ")
+                        spannable.setSpan(mentionSpan, match.start, match.start + 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
+                    }
+                }
+                MatrixPatternType.ROOM_ALIAS -> {
+                    val mentionSpanExists = spannable.getSpans<MentionSpan>(match.start, match.end).isNotEmpty()
+                    if (!mentionSpanExists) {
+                        val permalink = permalinkBuilder.permalinkForRoomAlias(RoomAlias(match.value)).getOrNull() ?: continue
+                        val mentionSpan = mentionSpanProvider.getMentionSpanFor(match.value, permalink)
+                        spannable.replace(match.start, match.end, "@ ")
+                        spannable.setSpan(mentionSpan, match.start, match.start + 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
+                    }
+                }
+                MatrixPatternType.AT_ROOM -> {
+                    val mentionSpanExists = spannable.getSpans<MentionSpan>(match.start, match.end).isNotEmpty()
+                    if (!mentionSpanExists) {
+                        val mentionSpan = mentionSpanProvider.getMentionSpanFor("@room", "")
+                        spannable.replace(match.start, match.end, "@ ")
+                        spannable.setSpan(mentionSpan, match.start, match.start + 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
+                    }
+                }
+                else -> Unit
+            }
+        }
+        return spannable
+    }
+}