[Rich text editor] Integrate rich text editor library (#1172)

* Integrate rich text editor

* Also increase swapfile size in test CI

Fixes issue where screenshot tests are terminated due to lack of CI
resources.

See https://github.com/actions/runner-images/discussions/7188#discussioncomment-6750749

---------

Co-authored-by: ElementBot <[email protected]>

Author: jonnyandrew

.github/workflows/tests.yml

@@ -22,6 +22,16 @@ jobs:
       group: ${{ github.ref == 'refs/heads/main' && format('unit-tests-main-{0}', github.sha) || github.ref == 'refs/heads/develop' && format('unit-tests-develop-{0}', github.sha) || format('unit-tests-{0}', github.ref) }}
       cancel-in-progress: true
     steps:
+      # Increase swapfile size to prevent screenshot tests getting terminated
+      # https://github.com/actions/runner-images/discussions/7188#discussioncomment-6750749
+      - name: 💽 Increase swapfile size
+        run: |
+          sudo swapoff -a
+          sudo fallocate -l 8G /mnt/swapfile
+          sudo chmod 600 /mnt/swapfile
+          sudo mkswap /mnt/swapfile
+          sudo swapon /mnt/swapfile
+          sudo swapon --show
       - name: ⏬ Checkout with LFS
         uses: nschloe/[email protected]
         with:

changelog.d/1172.feature

@@ -0,0 +1,2 @@
+[Rich text editor] Integrate rich text editor library. Note that markdown is now not supported and further formatting support will be introduced through the rich text editor.
+

features/messages/api/build.gradle.kts

@@ -25,5 +25,5 @@ android {
 dependencies {
     implementation(projects.libraries.architecture)
     implementation(projects.libraries.matrix.api)
-    api(projects.libraries.textcomposer)
+    api(projects.libraries.textcomposer.impl)
 }

features/messages/impl/build.gradle.kts

@@ -41,7 +41,7 @@ dependencies {
     implementation(projects.libraries.matrix.api)
     implementation(projects.libraries.matrixui)
     implementation(projects.libraries.designsystem)
-    implementation(projects.libraries.textcomposer)
+    implementation(projects.libraries.textcomposer.impl)
     implementation(projects.libraries.uiStrings)
     implementation(projects.libraries.dateformatter.api)
     implementation(projects.libraries.eventformatter.api)
@@ -76,6 +76,7 @@ dependencies {
     testImplementation(projects.libraries.featureflag.test)
     testImplementation(projects.libraries.mediaupload.test)
     testImplementation(projects.libraries.mediapickers.test)
+    testImplementation(projects.libraries.textcomposer.test)
     testImplementation(libs.test.mockk)
 
     ksp(libs.showkase.processor)

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

@@ -175,7 +175,7 @@ class MessagesPresenter @AssistedInject constructor(
             snackbarMessage = snackbarMessage,
             showReinvitePrompt = showReinvitePrompt,
             inviteProgress = inviteProgress.value,
-            eventSink = ::handleEvents
+            eventSink = { handleEvents(it) }
         )
     }
 
@@ -250,7 +250,9 @@ class MessagesPresenter @AssistedInject constructor(
     private fun handleActionEdit(targetEvent: TimelineItem.Event, composerState: MessageComposerState) {
         val composerMode = MessageComposerMode.Edit(
             targetEvent.eventId,
-            (targetEvent.content as? TimelineItemTextBasedContent)?.body.orEmpty(),
+            (targetEvent.content as? TimelineItemTextBasedContent)?.let {
+                it.htmlBody ?: it.body
+            }.orEmpty(),
             targetEvent.transactionId,
         )
         composerState.eventSink(

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

@@ -30,6 +30,7 @@ import io.element.android.libraries.designsystem.components.avatar.AvatarData
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.matrix.api.core.RoomId
 import io.element.android.libraries.textcomposer.MessageComposerMode
+import io.element.android.wysiwyg.compose.RichTextEditorState
 import kotlinx.collections.immutable.persistentSetOf
 
 open class MessagesStateProvider : PreviewParameterProvider<MessagesState> {
@@ -54,7 +55,9 @@ fun aMessagesState() = MessagesState(
     userHasPermissionToSendMessage = true,
     userHasPermissionToRedact = false,
     composerState = aMessageComposerState().copy(
-        text = "Hello",
+        richTextEditorState = RichTextEditorState("Hello", fake = true).apply {
+            requestFocus()
+        },
         isFullScreen = false,
         mode = MessageComposerMode.Normal("Hello"),
     ),

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

@@ -70,7 +70,7 @@ class ActionListPresenter @Inject constructor(
         return ActionListState(
             target = target.value,
             displayEmojiReactions = displayEmojiReactions,
-            eventSink = ::handleEvents
+            eventSink = { handleEvents(it) }
         )
     }
 

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

@@ -17,16 +17,15 @@
 package io.element.android.features.messages.impl.messagecomposer
 
 import androidx.compose.runtime.Immutable
+import io.element.android.libraries.textcomposer.Message
 import io.element.android.libraries.textcomposer.MessageComposerMode
 
 @Immutable
 sealed interface MessageComposerEvents {
     data object ToggleFullScreenState : MessageComposerEvents
-    data class FocusChanged(val hasFocus: Boolean) : MessageComposerEvents
-    data class SendMessage(val message: String) : MessageComposerEvents
+    data class SendMessage(val message: Message) : MessageComposerEvents
     data object CloseSpecialMode : MessageComposerEvents
     data class SetMode(val composerMode: MessageComposerMode) : MessageComposerEvents
-    data class UpdateText(val text: String) : MessageComposerEvents
     data object AddAttachment : MessageComposerEvents
     data object DismissAttachmentMenu : MessageComposerEvents
     sealed interface PickAttachmentSource : MessageComposerEvents {
@@ -38,4 +37,5 @@ sealed interface MessageComposerEvents {
         data object Poll : PickAttachmentSource
     }
     data object CancelSendAttachment : MessageComposerEvents
+    data class Error(val error: Throwable) : MessageComposerEvents
 }

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

@@ -44,8 +44,10 @@ import io.element.android.libraries.matrix.api.core.ProgressCallback
 import io.element.android.libraries.matrix.api.room.MatrixRoom
 import io.element.android.libraries.mediapickers.api.PickerProvider
 import io.element.android.libraries.mediaupload.api.MediaSender
+import io.element.android.libraries.textcomposer.Message
 import io.element.android.libraries.textcomposer.MessageComposerMode
 import io.element.android.services.analytics.api.AnalyticsService
+import io.element.android.wysiwyg.compose.RichTextEditorState
 import kotlinx.collections.immutable.persistentListOf
 import kotlinx.coroutines.CancellationException
 import kotlinx.coroutines.CoroutineScope
@@ -67,6 +69,7 @@ class MessageComposerPresenter @Inject constructor(
     private val snackbarDispatcher: SnackbarDispatcher,
     private val analyticsService: AnalyticsService,
     private val messageComposerContext: MessageComposerContextImpl,
+    private val richTextEditorStateFactory: RichTextEditorStateFactory,
 ) : Presenter<MessageComposerState> {
 
     @SuppressLint("UnsafeOptInUsageError")
@@ -103,19 +106,15 @@ class MessageComposerPresenter @Inject constructor(
         val isFullScreen = rememberSaveable {
             mutableStateOf(false)
         }
-        val hasFocus = remember {
-            mutableStateOf(false)
-        }
-        val text: MutableState<String> = rememberSaveable {
-            mutableStateOf("")
-        }
+        val richTextEditorState = richTextEditorStateFactory.create()
         val ongoingSendAttachmentJob = remember { mutableStateOf<Job?>(null) }
 
         var showAttachmentSourcePicker: Boolean by remember { mutableStateOf(false) }
 
         LaunchedEffect(messageComposerContext.composerMode) {
             when (val modeValue = messageComposerContext.composerMode) {
-                is MessageComposerMode.Edit -> text.value = modeValue.defaultContent
+                is MessageComposerMode.Edit ->
+                    richTextEditorState.setHtml(modeValue.defaultContent)
                 else -> Unit
             }
         }
@@ -136,18 +135,15 @@ class MessageComposerPresenter @Inject constructor(
             when (event) {
                 MessageComposerEvents.ToggleFullScreenState -> isFullScreen.value = !isFullScreen.value
 
-                is MessageComposerEvents.FocusChanged -> hasFocus.value = event.hasFocus
-
-                is MessageComposerEvents.UpdateText -> text.value = event.text
                 MessageComposerEvents.CloseSpecialMode -> {
-                    text.value = ""
+                    richTextEditorState.setHtml("")
                     messageComposerContext.composerMode = MessageComposerMode.Normal("")
                 }
 
                 is MessageComposerEvents.SendMessage -> appCoroutineScope.sendMessage(
-                    text = event.message,
+                    message = event.message,
                     updateComposerMode = { messageComposerContext.composerMode = it },
-                    textState = text
+                    richTextEditorState = richTextEditorState,
                 )
                 is MessageComposerEvents.SetMode -> {
                     messageComposerContext.composerMode = event.composerMode
@@ -194,43 +190,46 @@ class MessageComposerPresenter @Inject constructor(
                         ongoingSendAttachmentJob.value == null
                     }
                 }
+                is MessageComposerEvents.Error -> {
+                    analyticsService.trackError(event.error)
+                }
             }
         }
 
         return MessageComposerState(
-            text = text.value,
+            richTextEditorState = richTextEditorState,
             isFullScreen = isFullScreen.value,
-            hasFocus = hasFocus.value,
             mode = messageComposerContext.composerMode,
             showAttachmentSourcePicker = showAttachmentSourcePicker,
             canShareLocation = canShareLocation.value,
             canCreatePoll = canCreatePoll.value,
             attachmentsState = attachmentsState.value,
-            eventSink = ::handleEvents
+            eventSink = { handleEvents(it) }
         )
     }
 
     private fun CoroutineScope.sendMessage(
-        text: String,
+        message: Message,
         updateComposerMode: (newComposerMode: MessageComposerMode) -> Unit,
-        textState: MutableState<String>
+        richTextEditorState: RichTextEditorState,
     ) = launch {
         val capturedMode = messageComposerContext.composerMode
         // Reset composer right away
-        textState.value = ""
+        richTextEditorState.setHtml("")
         updateComposerMode(MessageComposerMode.Normal(""))
         when (capturedMode) {
-            is MessageComposerMode.Normal -> room.sendMessage(text)
+            is MessageComposerMode.Normal -> room.sendMessage(body = message.markdown, htmlBody = message.html)
             is MessageComposerMode.Edit -> {
                 val eventId = capturedMode.eventId
                 val transactionId = capturedMode.transactionId
-                room.editMessage(eventId, transactionId, text)
+                room.editMessage(eventId, transactionId, message.markdown, message.html)
             }
 
             is MessageComposerMode.Quote -> TODO()
             is MessageComposerMode.Reply -> room.replyMessage(
                 capturedMode.eventId,
-                text
+                message.markdown,
+                message.html,
             )
         }
     }

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

@@ -19,21 +19,22 @@ package io.element.android.features.messages.impl.messagecomposer
 import androidx.compose.runtime.Immutable
 import io.element.android.features.messages.impl.attachments.Attachment
 import io.element.android.libraries.textcomposer.MessageComposerMode
+import io.element.android.wysiwyg.compose.RichTextEditorState
 import kotlinx.collections.immutable.ImmutableList
 
 @Immutable
 data class MessageComposerState(
-    val text: String?,
+    val richTextEditorState: RichTextEditorState,
     val isFullScreen: Boolean,
-    val hasFocus: Boolean,
     val mode: MessageComposerMode,
     val showAttachmentSourcePicker: Boolean,
     val canShareLocation: Boolean,
     val canCreatePoll: Boolean,
     val attachmentsState: AttachmentsState,
-    val eventSink: (MessageComposerEvents) -> Unit
+    val eventSink: (MessageComposerEvents) -> Unit,
 ) {
-    val isSendButtonVisible: Boolean = text.isNullOrEmpty().not()
+    val canSendMessage: Boolean = richTextEditorState.messageHtml.isNotEmpty()
+    val hasFocus: Boolean = richTextEditorState.hasFocus
 }
 
 @Immutable

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

@@ -18,6 +18,7 @@ package io.element.android.features.messages.impl.messagecomposer
 
 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
 import io.element.android.libraries.textcomposer.MessageComposerMode
+import io.element.android.wysiwyg.compose.RichTextEditorState
 
 open class MessageComposerStateProvider : PreviewParameterProvider<MessageComposerState> {
     override val values: Sequence<MessageComposerState>
@@ -27,18 +28,17 @@ open class MessageComposerStateProvider : PreviewParameterProvider<MessageCompos
 }
 
 fun aMessageComposerState(
-    text: String = "",
+    requestFocus: Boolean = true,
+    composerState: RichTextEditorState = RichTextEditorState("", fake = true),
     isFullScreen: Boolean = false,
-    hasFocus: Boolean = false,
     mode: MessageComposerMode = MessageComposerMode.Normal(content = ""),
     showAttachmentSourcePicker: Boolean = false,
     canShareLocation: Boolean = true,
     canCreatePoll: Boolean = true,
     attachmentsState: AttachmentsState = AttachmentsState.None,
 ) = MessageComposerState(
-    text = text,
+    richTextEditorState = composerState.apply { if(requestFocus) requestFocus() },
     isFullScreen = isFullScreen,
-    hasFocus = hasFocus,
     mode = mode,
     showAttachmentSourcePicker = showAttachmentSourcePicker,
     canShareLocation = canShareLocation,

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

@@ -23,6 +23,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.textcomposer.Message
 import io.element.android.libraries.textcomposer.TextComposer
 
 @Composable
@@ -36,7 +37,7 @@ fun MessageComposerView(
         state.eventSink(MessageComposerEvents.ToggleFullScreenState)
     }
 
-    fun sendMessage(message: String) {
+    fun sendMessage(message: Message) {
         state.eventSink(MessageComposerEvents.SendMessage(message))
     }
 
@@ -48,12 +49,8 @@ fun MessageComposerView(
         state.eventSink(MessageComposerEvents.CloseSpecialMode)
     }
 
-    fun onComposerTextChange(text: String) {
-        state.eventSink(MessageComposerEvents.UpdateText(text))
-    }
-
-    fun onFocusChanged(hasFocus: Boolean) {
-        state.eventSink(MessageComposerEvents.FocusChanged(hasFocus))
+    fun onError(error: Throwable) {
+        state.eventSink(MessageComposerEvents.Error(error))
     }
 
     Box(modifier = modifier) {
@@ -64,14 +61,14 @@ fun MessageComposerView(
         )
 
         TextComposer(
+            state = state.richTextEditorState,
+            canSendMessage = state.canSendMessage,
+            onRequestFocus = { state.richTextEditorState.requestFocus() },
             onSendMessage = ::sendMessage,
             composerMode = state.mode,
             onResetComposerMode = ::onCloseSpecialMode,
-            onComposerTextChange = ::onComposerTextChange,
             onAddAttachment = ::onAddAttachment,
-            onFocusChanged = ::onFocusChanged,
-            composerCanSendMessage = state.isSendButtonVisible,
-            composerText = state.text
+            onError = ::onError,
         )
     }
 }

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

@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2023 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.messagecomposer
+
+import androidx.compose.runtime.Composable
+import com.squareup.anvil.annotations.ContributesBinding
+import io.element.android.libraries.di.AppScope
+import io.element.android.wysiwyg.compose.RichTextEditorState
+import io.element.android.wysiwyg.compose.rememberRichTextEditorState
+import javax.inject.Inject
+
+interface RichTextEditorStateFactory {
+    @Composable
+    fun create(): RichTextEditorState
+}
+
+@ContributesBinding(AppScope::class)
+class DefaultRichTextEditorStateFactory @Inject constructor() : RichTextEditorStateFactory {
+    @Composable
+    override fun create(): RichTextEditorState {
+        return rememberRichTextEditorState()
+    }
+}
+