Merge pull request #8440 from vector-im/jonny/feat/rich-text-mentions

langleyd · web-flow · commit a065cd338c52 · 2023-06-21T11:26:13.000+01:00
[Rich text editor] Add mentions and slash commands
diff --git a/changelog.d/8440.feature b/changelog.d/8440.feature
@@ -0,0 +1 @@
+[Rich text editor] Add mentions and slash commands
diff --git a/dependencies.gradle b/dependencies.gradle
@@ -172,6 +172,7 @@ ext.libs = [
                 'kluent'                 : "org.amshove.kluent:kluent-android:1.73",
                 'timberJunitRule'        : "net.lachlanmckee:timber-junit-rule:1.0.1",
                 'junit'                  : "junit:junit:4.13.2",
+                'robolectric'            : "org.robolectric:robolectric:4.9",
         ]
 ]
 
diff --git a/dependencies_groups.gradle b/dependencies_groups.gradle
@@ -189,6 +189,7 @@ ext.groups = [
                         'org.codehaus.groovy',
                         'org.codehaus.mojo',
                         'org.codehaus.woodstox',
+                        'org.conscrypt',
                         'org.eclipse.ee4j',
                         'org.ec4j.core',
                         'org.freemarker',
@@ -221,6 +222,7 @@ ext.groups = [
                         'org.ow2.asm',
                         'org.ow2.asm',
                         'org.reactivestreams',
+                        'org.robolectric',
                         'org.slf4j',
                         'org.sonatype.oss',
                         'org.testng',
diff --git a/vector/build.gradle b/vector/build.gradle
@@ -299,6 +299,7 @@ dependencies {
     testImplementation libs.tests.kluent
     testImplementation libs.mockk.mockk
     testImplementation libs.androidx.coreTesting
+    testImplementation libs.tests.robolectric
     // Plant Timber tree for test
     testImplementation libs.tests.timberJunitRule
     testImplementation libs.airbnb.mavericksTesting
diff --git a/vector/src/main/java/im/vector/app/features/home/room/detail/AutoCompleter.kt b/vector/src/main/java/im/vector/app/features/home/room/detail/AutoCompleter.kt
@@ -40,23 +40,31 @@ import im.vector.app.features.displayname.getBestName
 import im.vector.app.features.home.AvatarRenderer
 import im.vector.app.features.html.PillImageSpan
 import im.vector.app.features.themes.ThemeUtils
+import io.element.android.wysiwyg.EditorEditText
+import org.matrix.android.sdk.api.session.Session
+import org.matrix.android.sdk.api.session.permalinks.PermalinkService
 import org.matrix.android.sdk.api.session.room.model.RoomSummary
 import org.matrix.android.sdk.api.util.MatrixItem
 import org.matrix.android.sdk.api.util.toEveryoneInRoomMatrixItem
 import org.matrix.android.sdk.api.util.toMatrixItem
 import org.matrix.android.sdk.api.util.toRoomAliasMatrixItem
+import timber.log.Timber
 
 class AutoCompleter @AssistedInject constructor(
         @Assisted val roomId: String,
         @Assisted val isInThreadTimeline: Boolean,
+        private val session: Session,
         private val avatarRenderer: AvatarRenderer,
         private val commandAutocompletePolicy: CommandAutocompletePolicy,
         autocompleteCommandPresenterFactory: AutocompleteCommandPresenter.Factory,
         private val autocompleteMemberPresenterFactory: AutocompleteMemberPresenter.Factory,
         private val autocompleteRoomPresenter: AutocompleteRoomPresenter,
-        private val autocompleteEmojiPresenter: AutocompleteEmojiPresenter
+        private val autocompleteEmojiPresenter: AutocompleteEmojiPresenter,
 ) {
 
+    private val permalinkService: PermalinkService
+        get() = session.permalinkService()
+
     private lateinit var autocompleteMemberPresenter: AutocompleteMemberPresenter
 
     @AssistedFactory
@@ -79,6 +87,7 @@ class AutoCompleter @AssistedInject constructor(
     }
 
     private lateinit var glideRequests: GlideRequests
+    private val autocompletes: MutableSet<Autocomplete<*>> = hashSetOf()
 
     fun setup(editText: EditText) {
         this.editText = editText
@@ -90,26 +99,41 @@ class AutoCompleter @AssistedInject constructor(
         setupRooms(backgroundDrawable, editText)
     }
 
+    fun setEnabled(isEnabled: Boolean) =
+        autocompletes.forEach {
+            if (!isEnabled) { it.dismissPopup() }
+            it.setEnabled(isEnabled)
+        }
+
     fun clear() {
         this.editText = null
         autocompleteEmojiPresenter.clear()
         autocompleteRoomPresenter.clear()
         autocompleteCommandPresenter.clear()
         autocompleteMemberPresenter.clear()
+        autocompletes.forEach {
+            it.setEnabled(false)
+            it.dismissPopup()
+        }
+        autocompletes.clear()
     }
 
     private fun setupCommands(backgroundDrawable: Drawable, editText: EditText) {
-        Autocomplete.on<Command>(editText)
+        autocompletes += Autocomplete.on<Command>(editText)
                 .with(commandAutocompletePolicy)
                 .with(autocompleteCommandPresenter)
                 .with(ELEVATION_DP)
                 .with(backgroundDrawable)
                 .with(object : AutocompleteCallback<Command> {
                     override fun onPopupItemClicked(editable: Editable, item: Command): Boolean {
-                        editable.clear()
-                        editable
-                                .append(item.command)
-                                .append(" ")
+                        if (editText is EditorEditText) {
+                            editText.replaceTextSuggestion(item.command)
+                        } else {
+                            editable.clear()
+                            editable
+                                    .append(item.command)
+                                    .append(" ")
+                        }
                         return true
                     }
 
@@ -121,24 +145,22 @@ class AutoCompleter @AssistedInject constructor(
 
     private fun setupMembers(backgroundDrawable: ColorDrawable, editText: EditText) {
         autocompleteMemberPresenter = autocompleteMemberPresenterFactory.create(roomId)
-        Autocomplete.on<AutocompleteMemberItem>(editText)
+        autocompletes += Autocomplete.on<AutocompleteMemberItem>(editText)
                 .with(CharPolicy(TRIGGER_AUTO_COMPLETE_MEMBERS, true))
                 .with(autocompleteMemberPresenter)
                 .with(ELEVATION_DP)
                 .with(backgroundDrawable)
                 .with(object : AutocompleteCallback<AutocompleteMemberItem> {
                     override fun onPopupItemClicked(editable: Editable, item: AutocompleteMemberItem): Boolean {
-                        return when (item) {
-                            is AutocompleteMemberItem.Header -> false // do nothing header is not clickable
-                            is AutocompleteMemberItem.RoomMember -> {
-                                insertMatrixItem(editText, editable, TRIGGER_AUTO_COMPLETE_MEMBERS, item.roomMemberSummary.toMatrixItem())
-                                true
-                            }
-                            is AutocompleteMemberItem.Everyone -> {
-                                insertMatrixItem(editText, editable, TRIGGER_AUTO_COMPLETE_MEMBERS, item.roomSummary.toEveryoneInRoomMatrixItem())
-                                true
-                            }
-                        }
+                        val matrixItem = when (item) {
+                            is AutocompleteMemberItem.Header -> null // do nothing header is not clickable
+                            is AutocompleteMemberItem.RoomMember -> item.roomMemberSummary.toMatrixItem()
+                            is AutocompleteMemberItem.Everyone -> item.roomSummary.toEveryoneInRoomMatrixItem()
+                        } ?: return false
+
+                        insertMatrixItem(editText, editable, TRIGGER_AUTO_COMPLETE_MEMBERS, matrixItem)
+
+                        return true
                     }
 
                     override fun onPopupVisibilityChanged(shown: Boolean) {
@@ -148,7 +170,7 @@ class AutoCompleter @AssistedInject constructor(
     }
 
     private fun setupRooms(backgroundDrawable: ColorDrawable, editText: EditText) {
-        Autocomplete.on<RoomSummary>(editText)
+        autocompletes += Autocomplete.on<RoomSummary>(editText)
                 .with(CharPolicy(TRIGGER_AUTO_COMPLETE_ROOMS, true))
                 .with(autocompleteRoomPresenter)
                 .with(ELEVATION_DP)
@@ -166,7 +188,10 @@ class AutoCompleter @AssistedInject constructor(
     }
 
     private fun setupEmojis(backgroundDrawable: Drawable, editText: EditText) {
-        Autocomplete.on<String>(editText)
+        // Rich text editor is not yet supported
+        if (editText is EditorEditText) return
+
+        autocompletes += Autocomplete.on<String>(editText)
                 .with(CharPolicy(TRIGGER_AUTO_COMPLETE_EMOJIS, false))
                 .with(autocompleteEmojiPresenter)
                 .with(ELEVATION_DP)
@@ -197,7 +222,41 @@ class AutoCompleter @AssistedInject constructor(
                 .build()
     }
 
-    private fun insertMatrixItem(editText: EditText, editable: Editable, firstChar: Char, matrixItem: MatrixItem) {
+    private fun insertMatrixItem(editText: EditText, editable: Editable, firstChar: Char, matrixItem: MatrixItem) =
+            if (editText is EditorEditText) {
+                insertMatrixItemIntoRichTextEditor(editText, matrixItem)
+            } else {
+                insertMatrixItemIntoEditable(editText, editable, firstChar, matrixItem)
+            }
+
+    private fun insertMatrixItemIntoRichTextEditor(editorEditText: EditorEditText, matrixItem: MatrixItem) {
+        if (matrixItem is MatrixItem.EveryoneInRoomItem) {
+            editorEditText.replaceTextSuggestion(matrixItem.displayName)
+            return
+        }
+
+        val permalink = permalinkService.createPermalink(matrixItem.id)
+
+        if (permalink == null) {
+            Timber.e(NullPointerException("Cannot autocomplete as permalink is null"))
+            return
+        }
+
+        val linkText = when (matrixItem) {
+            is MatrixItem.RoomAliasItem,
+            is MatrixItem.RoomItem,
+            is MatrixItem.SpaceItem ->
+                matrixItem.id
+            is MatrixItem.EveryoneInRoomItem,
+            is MatrixItem.UserItem,
+            is MatrixItem.EventItem ->
+                matrixItem.getBestName()
+        }
+
+        editorEditText.setLinkSuggestion(url = permalink, text = linkText)
+    }
+
+    private fun insertMatrixItemIntoEditable(editText: EditText, editable: Editable, firstChar: Char, matrixItem: MatrixItem) {
         // Detect last firstChar and remove it
         var startIndex = editable.lastIndexOf(firstChar)
         if (startIndex == -1) {
diff --git a/vector/src/main/java/im/vector/app/features/home/room/detail/TimelineViewModel.kt b/vector/src/main/java/im/vector/app/features/home/room/detail/TimelineViewModel.kt
@@ -765,6 +765,9 @@ class TimelineViewModel @AssistedInject constructor(
         return room?.membershipService()?.getRoomMember(userId)
     }
 
+    fun getRoom(roomId: String): RoomSummary? =
+        session.roomService().getRoomSummary(roomId)
+
     private fun handleComposerFocusChange(action: RoomDetailAction.ComposerFocusChange) {
         if (room == null) return
         // Ensure outbound session keys
diff --git a/vector/src/main/java/im/vector/app/features/home/room/detail/composer/MessageComposerFragment.kt b/vector/src/main/java/im/vector/app/features/home/room/detail/composer/MessageComposerFragment.kt
@@ -83,6 +83,7 @@ import im.vector.app.features.home.room.detail.TimelineViewModel
 import im.vector.app.features.home.room.detail.composer.link.SetLinkFragment
 import im.vector.app.features.home.room.detail.composer.link.SetLinkSharedAction
 import im.vector.app.features.home.room.detail.composer.link.SetLinkSharedActionViewModel
+import im.vector.app.features.home.room.detail.composer.mentions.PillDisplayHandler
 import im.vector.app.features.home.room.detail.composer.voice.VoiceMessageRecorderView
 import im.vector.app.features.home.room.detail.timeline.action.MessageSharedActionViewModel
 import im.vector.app.features.home.room.detail.upgrade.MigrateRoomBottomSheet
@@ -100,6 +101,7 @@ import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.flow.onEach
 import org.matrix.android.sdk.api.session.Session
 import org.matrix.android.sdk.api.session.content.ContentAttachmentData
+import org.matrix.android.sdk.api.session.permalinks.PermalinkService
 import org.matrix.android.sdk.api.util.MatrixItem
 import reactivecircus.flowbinding.android.view.focusChanges
 import reactivecircus.flowbinding.android.widget.textChanges
@@ -122,11 +124,12 @@ class MessageComposerFragment : VectorBaseFragment<FragmentComposerBinding>(), A
     @Inject lateinit var session: Session
     @Inject lateinit var errorTracker: ErrorTracker
 
+    private val permalinkService: PermalinkService
+        get() = session.permalinkService()
+
     private val roomId: String get() = withState(timelineViewModel) { it.roomId }
 
-    private val autoCompleter: AutoCompleter by lazy {
-        autoCompleterFactory.create(roomId, isThreadTimeLine())
-    }
+    private val autoCompleters: MutableMap<EditText, AutoCompleter> = hashMapOf()
 
     private val emojiPopup: EmojiPopup by lifecycleAwareLazy {
         createEmojiPopup()
@@ -261,9 +264,8 @@ class MessageComposerFragment : VectorBaseFragment<FragmentComposerBinding>(), A
     override fun onDestroyView() {
         super.onDestroyView()
 
-        if (!vectorPreferences.isRichTextEditorEnabled()) {
-            autoCompleter.clear()
-        }
+        autoCompleters.values.forEach(AutoCompleter::clear)
+        autoCompleters.clear()
         messageComposerViewModel.endAllVoiceActions()
     }
 
@@ -274,7 +276,12 @@ class MessageComposerFragment : VectorBaseFragment<FragmentComposerBinding>(), A
 
         (composer as? View)?.isVisible = messageComposerState.isComposerVisible
         composer.sendButton.isInvisible = !messageComposerState.isSendButtonVisible
-        (composer as? RichTextComposerLayout)?.isTextFormattingEnabled = attachmentState.isTextFormattingEnabled
+        (composer as? RichTextComposerLayout)?.also {
+            val isTextFormattingEnabled = attachmentState.isTextFormattingEnabled
+            it.isTextFormattingEnabled = isTextFormattingEnabled
+            autoCompleters[it.richTextEditText]?.setEnabled(isTextFormattingEnabled)
+            autoCompleters[it.plainTextEditText]?.setEnabled(!isTextFormattingEnabled)
+        }
     }
 
     private fun setupBottomSheet() {
@@ -315,8 +322,11 @@ class MessageComposerFragment : VectorBaseFragment<FragmentComposerBinding>(), A
         val composerEditText = composer.editText
         composerEditText.setHint(R.string.room_message_placeholder)
 
-        if (!vectorPreferences.isRichTextEditorEnabled()) {
-            autoCompleter.setup(composerEditText)
+        (composer as? RichTextComposerLayout)?.let {
+            initAutoCompleter(it.richTextEditText)
+            initAutoCompleter(it.plainTextEditText)
+        } ?: run {
+            initAutoCompleter(composer.editText)
         }
 
         observerUserTyping()
@@ -404,6 +414,21 @@ class MessageComposerFragment : VectorBaseFragment<FragmentComposerBinding>(), A
                 SetLinkFragment.show(isTextSupported, initialLink, childFragmentManager)
             }
         }
+        (composer as? RichTextComposerLayout)?.pillDisplayHandler = PillDisplayHandler(
+                roomId = roomId,
+                getRoom = timelineViewModel::getRoom,
+                getMember = timelineViewModel::getMember,
+        ) { matrixItem: MatrixItem ->
+            PillImageSpan(glideRequests, avatarRenderer, requireContext(), matrixItem)
+        }
+    }
+
+    private fun initAutoCompleter(editText: EditText) {
+        if (autoCompleters.containsKey(editText)) return
+
+        autoCompleters[editText] =
+                autoCompleterFactory.create(roomId, isThreadTimeLine())
+                        .also { it.setup(editText) }
     }
 
     private fun sendTextMessage(text: CharSequence, formattedText: String? = null) {
@@ -435,12 +460,12 @@ class MessageComposerFragment : VectorBaseFragment<FragmentComposerBinding>(), A
     }
 
     private fun renderRegularMode(content: CharSequence) {
-        autoCompleter.exitSpecialMode()
+        autoCompleters.values.forEach(AutoCompleter::exitSpecialMode)
         composer.renderComposerMode(MessageComposerMode.Normal(content))
     }
 
     private fun renderSpecialMode(mode: MessageComposerMode.Special) {
-        autoCompleter.enterSpecialMode()
+        autoCompleters.values.forEach(AutoCompleter::enterSpecialMode)
         composer.renderComposerMode(mode)
     }
 
@@ -771,30 +796,37 @@ class MessageComposerFragment : VectorBaseFragment<FragmentComposerBinding>(), A
         } else {
             val roomMember = timelineViewModel.getMember(userId)
             val displayName = sanitizeDisplayName(roomMember?.displayName ?: userId)
-            val pill = buildSpannedString {
-                append(displayName)
-                setSpan(
-                        PillImageSpan(
-                                glideRequests,
-                                avatarRenderer,
-                                requireContext(),
-                                MatrixItem.UserItem(userId, displayName, roomMember?.avatarUrl)
-                        )
-                                .also { it.bind(composer.editText) },
-                        0,
-                        displayName.length,
-                        Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
-                )
-                append(if (startToCompose) ": " else " ")
-            }
-            if (startToCompose) {
-                if (displayName.startsWith("/")) {
+            if ((composer as? RichTextComposerLayout)?.isTextFormattingEnabled == true) {
+                // Rich text editor is enabled so we need to use its APIs
+                permalinkService.createPermalink(userId)?.let { url ->
+                    (composer as RichTextComposerLayout).insertMention(url, displayName)
+                    composer.editText.append(" ")
+                }
+            } else {
+                val pill = buildSpannedString {
+                    append(displayName)
+                    setSpan(
+                            PillImageSpan(
+                                    glideRequests,
+                                    avatarRenderer,
+                                    requireContext(),
+                                    MatrixItem.UserItem(userId, displayName, roomMember?.avatarUrl),
+                            )
+                                    .also { it.bind(composer.editText) },
+                            0,
+                            displayName.length,
+                            Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
+                    )
+                    append(if (startToCompose) ": " else " ")
+                }
+                if (startToCompose && displayName.startsWith("/")) {
                     // Ensure displayName will not be interpreted as a Slash command
                     composer.editText.append("\\")
                 }
-                composer.editText.append(pill)
-            } else {
-                composer.editText.text?.insert(composer.editText.selectionStart, pill)
+                // Always use EditText.getText().insert for adding pills as TextView.append doesn't appear
+                // to upgrade to BufferType.Spannable as hinted at in the docs:
+                // https://developer.android.com/reference/android/widget/TextView#append(java.lang.CharSequence)
+                composer.editText.text.insert(composer.editText.selectionStart, pill)
             }
         }
         focusComposerAndShowKeyboard()
diff --git a/vector/src/main/java/im/vector/app/features/home/room/detail/composer/RichTextComposerLayout.kt b/vector/src/main/java/im/vector/app/features/home/room/detail/composer/RichTextComposerLayout.kt
diff --git a/vector/src/main/java/im/vector/app/features/home/room/detail/composer/mentions/PillDisplayHandler.kt b/vector/src/main/java/im/vector/app/features/home/room/detail/composer/mentions/PillDisplayHandler.kt
diff --git a/vector/src/test/java/im/vector/app/features/home/room/detail/composer/mentions/PillDisplayHandlerTest.kt b/vector/src/test/java/im/vector/app/features/home/room/detail/composer/mentions/PillDisplayHandlerTest.kt

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+[Rich text editor] Add mentions and slash commands`
Original file line number	Diff line number	Diff line change
`@@ -172,6 +172,7 @@ ext.libs = [`
`172`	`172`	`'kluent' : "org.amshove.kluent:kluent-android:1.73",`
`173`	`173`	`'timberJunitRule' : "net.lachlanmckee:timber-junit-rule:1.0.1",`
`174`	`174`	`'junit' : "junit:junit:4.13.2",`
	`175`	`+ 'robolectric' : "org.robolectric:robolectric:4.9",`
`175`	`176`	`]`
`176`	`177`	`]`
`177`	`178`
Original file line number	Diff line number	Diff line change
`@@ -765,6 +765,9 @@ class TimelineViewModel @AssistedInject constructor(`
`765`	`765`	`return room?.membershipService()?.getRoomMember(userId)`
`766`	`766`	`}`
`767`	`767`
	`768`	`+ fun getRoom(roomId: String): RoomSummary? =`
	`769`	`+ session.roomService().getRoomSummary(roomId)`
	`770`	`+`
`768`	`771`	`private fun handleComposerFocusChange(action: RoomDetailAction.ComposerFocusChange) {`
`769`	`772`	`if (room == null) return`
`770`	`773`	`// Ensure outbound session keys`