From d784ca38043782deafbdec7122a5afb94acf05f7 Mon Sep 17 00:00:00 2001 From: jonnyandrew Date: Tue, 19 Sep 2023 16:40:59 +0100 Subject: [PATCH] [Rich text editor] Update code and links style (#1362) --- gradle/libs.versions.toml | 2 +- .../designsystem/theme/ColorAliases.kt | 10 +++ .../ElementRichTextEditorStyle.kt | 70 +++++++++++++++++++ .../libraries/textcomposer/TextComposer.kt | 14 +--- 4 files changed, 83 insertions(+), 13 deletions(-) create mode 100644 libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/ElementRichTextEditorStyle.kt diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml index c75479b478..79cf8f2a24 100644 --- a/gradle/libs.versions.toml +++ b/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" diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorAliases.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorAliases.kt index ea3197e008..474a64e0ed 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorAliases.kt +++ b/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) diff --git a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/ElementRichTextEditorStyle.kt b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/ElementRichTextEditorStyle.kt new file mode 100644 index 0000000000..e5023d448a --- /dev/null +++ b/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, + ) + ), + ) + } +} diff --git a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt index cf30a3600f..b59b7c99c4 100644 --- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt +++ b/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( - text = RichTextEditorDefaults.textStyle( - color = if (state.hasFocus) { - MaterialTheme.colorScheme.primary - } else { - MaterialTheme.colorScheme.secondary - } - ), - cursor = RichTextEditorDefaults.cursorStyle( - color = ElementTheme.colors.iconAccentTertiary, - ) + style = ElementRichTextEditorStyle.create( + hasFocus = state.hasFocus ), onError = onError )