[Rich text editor] Update code and links style (#1362)

gradle/libs.versions.toml

@@ -46,7 +46,7 @@ dependencyanalysis = "1.22.0"
 stem = "2.3.0"
 sqldelight = "1.5.5"
 telephoto = "0.6.0"
-wysiwyg = "2.10.2"
+wysiwyg = "2.12.0"
 
 # DI
 dagger = "2.48"

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorAliases.kt

@@ -84,6 +84,16 @@ val SemanticColors.iconSuccessPrimaryBackground
         Color(0xff002513)
     }
 
+// This color is not present in Semantic color, so put hard-coded value for now
+val SemanticColors.bgSubtleTertiary
+    get() = if (isLight) {
+        // We want LightDesignTokens.colorGray100
+        Color(0xfffbfcfd)
+    } else {
+        // We want DarkDesignTokens.colorGray100
+        Color(0xff14171b)
+    }
+
 // Temporary color, which is not in the token right now
 val SemanticColors.temporaryColorBgSpecial
     get() = if (isLight) Color(0xFFE4E8F0) else Color(0xFF3A4048)

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

@@ -0,0 +1,70 @@
+/*
+ * 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.libraries.textcomposer
+
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.theme.bgSubtleTertiary
+import io.element.android.libraries.theme.ElementTheme
+import io.element.android.wysiwyg.compose.RichTextEditorDefaults
+import io.element.android.wysiwyg.compose.RichTextEditorStyle
+
+internal object ElementRichTextEditorStyle {
+    @Composable
+    fun create(
+        hasFocus: Boolean,
+    ) : RichTextEditorStyle {
+        val colors = ElementTheme.colors
+        val m3colors = MaterialTheme.colorScheme
+        val codeCornerRadius = 4.dp
+        val codeBorderWidth = 1.dp
+        return RichTextEditorDefaults.style(
+            text = RichTextEditorDefaults.textStyle(
+                color = if (hasFocus) {
+                    m3colors.primary
+                } else {
+                    m3colors.secondary
+                }
+            ),
+            cursor = RichTextEditorDefaults.cursorStyle(
+                color = colors.iconAccentTertiary,
+            ),
+            link = RichTextEditorDefaults.linkStyle(
+                color = colors.textLinkExternal,
+            ),
+            codeBlock = RichTextEditorDefaults.codeBlockStyle(
+                leadingMargin = 8.dp,
+                background = RichTextEditorDefaults.codeBlockBackgroundStyle(
+                    color = colors.bgSubtleTertiary,
+                    borderColor = colors.borderInteractiveSecondary,
+                    cornerRadius = codeCornerRadius,
+                    borderWidth = codeBorderWidth,
+                )
+            ),
+            inlineCode = RichTextEditorDefaults.inlineCodeStyle(
+                verticalPadding = 0.dp,
+                background = RichTextEditorDefaults.inlineCodeBackgroundStyle(
+                    color = colors.bgSubtleTertiary,
+                    borderColor = colors.borderInteractiveSecondary,
+                    cornerRadius = codeCornerRadius,
+                    borderWidth = codeBorderWidth,
+                )
+            ),
+        )
+    }
+}

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

@@ -81,7 +81,6 @@ import io.element.android.libraries.textcomposer.components.FormattingOptionStat
 import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.ui.strings.CommonStrings
 import io.element.android.wysiwyg.compose.RichTextEditor
-import io.element.android.wysiwyg.compose.RichTextEditorDefaults
 import io.element.android.wysiwyg.compose.RichTextEditorState
 import io.element.android.wysiwyg.view.models.InlineFormat
 import io.element.android.wysiwyg.view.models.LinkAction
@@ -274,17 +273,8 @@ private fun TextInput(
             modifier = Modifier
                 .padding(top = 6.dp, bottom = 6.dp)
                 .fillMaxWidth(),
-            style = RichTextEditorDefaults.style(
+            style = ElementRichTextEditorStyle.create(
-                text = RichTextEditorDefaults.textStyle(
+                hasFocus = state.hasFocus
-                    color = if (state.hasFocus) {
-                        MaterialTheme.colorScheme.primary
-                    } else {
-                        MaterialTheme.colorScheme.secondary
-                    }
-                ),
-                cursor = RichTextEditorDefaults.cursorStyle(
-                    color = ElementTheme.colors.iconAccentTertiary,
-                )
             ),
             onError = onError
         )