Apply design changes to WYSIWYG editor

changelog.d/7354.misc

@@ -0,0 +1 @@
+Update WYSIWYG editor designs.

library/ui-strings/src/main/res/values/strings.xml

@@ -447,7 +447,7 @@
     <string name="labs_enable_deferred_dm_summary">Create DM only on first message</string>
 
     <string name="labs_enable_rich_text_editor_title">Enable rich text editor</string>
-    <string name="labs_enable_rich_text_editor_summary">Use a rich text editor to send formatted messages</string>
+    <string name="labs_enable_rich_text_editor_summary">Try out the rich text editor (plain text mode coming soon)</string>
 
     <!-- Home fragment -->
     <string name="invitations_header">Invites</string>
@@ -3358,4 +3358,10 @@
     <string name="onboarding_new_app_layout_feedback_message">Tap top right to see the option to feedback.</string>
     <string name="onboarding_new_app_layout_button_try">Try it out</string>
 
+    <!-- WYSIWYG Composer -->
+    <string name="rich_text_editor_format_bold">Apply bold format</string>
+    <string name="rich_text_editor_format_italic">Apply italic format</string>
+    <string name="rich_text_editor_format_strikethrough">Apply strikethrough format</string>
+    <string name="rich_text_editor_format_underline">Apply underline format</string>
+
 </resources>

library/ui-styles/src/main/res/values/colors.xml

@@ -152,4 +152,9 @@
     <color name="vctr_badge_color_border_light">@color/palette_white</color>
     <color name="vctr_badge_color_border_dark">@color/palette_black_950</color>
 
+    <!-- WYSIWYG Colors -->
+    <attr name="vctr_rich_text_editor_menu_button_background" format="color" />
+    <color name="vctr_rich_text_editor_menu_button_background_light">#EEF8F4</color>
+    <color name="vctr_rich_text_editor_menu_button_background_dark">#1D292A</color>
+
 </resources>

library/ui-styles/src/main/res/values/styles_edit_text.xml

@@ -11,4 +11,14 @@
         <item name="android:textColor">?vctr_message_text_color</item>
     </style>
 
-</resources>
+    <style name="Widget.Vector.EditText.Composer.RichTextComposer" parent="Widget.AppCompat.EditText">
+        <item name="android:background">@android:color/transparent</item>
+        <item name="android:inputType">textCapSentences|textMultiLine</item>
+        <item name="android:maxLines">12</item>
+        <item name="android:minHeight">20dp</item>
+        <item name="android:padding">0dp</item>
+        <item name="android:textSize">15sp</item>
+        <item name="android:textColor">?vctr_message_text_color</item>
+    </style>
+
+</resources>

library/ui-styles/src/main/res/values/theme_dark.xml

@@ -152,6 +152,9 @@
 
         <!-- Material 3 -->
         <item name="collapsingToolbarLayoutMediumSize">@dimen/collapsing_toolbar_layout_medium_size</item>
+
+        <!-- WYSIWYG Editor -->
+        <item name="vctr_rich_text_editor_menu_button_background">@color/vctr_rich_text_editor_menu_button_background_dark</item>
     </style>
 
     <style name="Theme.Vector.Dark" parent="Base.Theme.Vector.Dark" />

library/ui-styles/src/main/res/values/theme_light.xml

@@ -153,6 +153,9 @@
 
         <!-- Material 3 -->
         <item name="collapsingToolbarLayoutMediumSize">@dimen/collapsing_toolbar_layout_medium_size</item>
+
+        <!-- WYSIWYG Editor -->
+        <item name="vctr_rich_text_editor_menu_button_background">@color/vctr_rich_text_editor_menu_button_background_light</item>
     </style>
 
     <style name="Theme.Vector.Light" parent="Base.Theme.Vector.Light" />

vector-app/proguard-rules.pro

@@ -75,4 +75,8 @@
 
 -keep class org.bouncycastle.** { *; }
 -keepnames class org.bouncycastle.** { *; }
--dontwarn org.bouncycastle.**
+-dontwarn org.bouncycastle.**
+
+# JNA
+-keep class com.sun.jna.** { *; }
+-keep class * implements com.sun.jna.** { *; }

vector/src/main/java/im/vector/app/features/home/room/detail/composer/RichTextComposerLayout.kt

@@ -27,6 +27,7 @@ import android.widget.ImageButton
 import android.widget.ImageView
 import android.widget.TextView
 import androidx.annotation.DrawableRes
+import androidx.annotation.StringRes
 import androidx.constraintlayout.widget.ConstraintLayout
 import androidx.constraintlayout.widget.ConstraintSet
 import androidx.core.text.toSpannable
@@ -42,7 +43,10 @@ import im.vector.app.core.animations.SimpleTransitionListener
 import im.vector.app.core.extensions.setTextIfDifferent
 import im.vector.app.databinding.ComposerRichTextLayoutBinding
 import im.vector.app.databinding.ViewRichTextMenuButtonBinding
+import io.element.android.wysiwyg.EditorEditText
 import io.element.android.wysiwyg.InlineFormat
+import uniffi.wysiwyg_composer.ComposerAction
+import uniffi.wysiwyg_composer.MenuState
 
 class RichTextComposerLayout @JvmOverloads constructor(
         context: Context,
@@ -116,32 +120,49 @@ class RichTextComposerLayout @JvmOverloads constructor(
     }
 
     private fun setupRichTextMenu() {
-        addRichTextMenuItem(R.drawable.ic_composer_bold, "Bold") {
+        addRichTextMenuItem(R.drawable.ic_composer_bold, R.string.rich_text_editor_format_bold, ComposerAction.Bold) {
             views.composerEditText.toggleInlineFormat(InlineFormat.Bold)
         }
-        addRichTextMenuItem(R.drawable.ic_composer_italic, "Italic") {
+        addRichTextMenuItem(R.drawable.ic_composer_italic, R.string.rich_text_editor_format_italic, ComposerAction.Italic) {
             views.composerEditText.toggleInlineFormat(InlineFormat.Italic)
         }
-        addRichTextMenuItem(R.drawable.ic_composer_underlined, "Underline") {
+        addRichTextMenuItem(R.drawable.ic_composer_underlined, R.string.rich_text_editor_format_underline, ComposerAction.Underline) {
             views.composerEditText.toggleInlineFormat(InlineFormat.Underline)
         }
-        addRichTextMenuItem(R.drawable.ic_composer_strikethrough, "Strikethrough") {
+        addRichTextMenuItem(R.drawable.ic_composer_strikethrough, R.string.rich_text_editor_format_strikethrough, ComposerAction.StrikeThrough) {
             views.composerEditText.toggleInlineFormat(InlineFormat.StrikeThrough)
         }
+
+        views.composerEditText.menuStateChangedListener = EditorEditText.OnMenuStateChangedListener { state ->
+            if (state is MenuState.Update) {
+                updateMenuStateFor(ComposerAction.Bold, state)
+                updateMenuStateFor(ComposerAction.Italic, state)
+                updateMenuStateFor(ComposerAction.Underline, state)
+                updateMenuStateFor(ComposerAction.StrikeThrough, state)
+            }
+        }
     }
 
-    private fun addRichTextMenuItem(@DrawableRes iconId: Int, description: String, action: () -> Unit) {
+    private fun addRichTextMenuItem(@DrawableRes iconId: Int, @StringRes description: Int, action: ComposerAction, onClick: () -> Unit) {
         val inflater = LayoutInflater.from(context)
         val button = ViewRichTextMenuButtonBinding.inflate(inflater, views.richTextMenu, true)
+        button.root.tag = action
+//        menuIcons[action] = button.root
         with(button.root) {
-            contentDescription = description
+            contentDescription = resources.getString(description)
             setImageResource(iconId)
             setOnClickListener {
-                action()
+                onClick()
             }
         }
     }
 
+    private fun updateMenuStateFor(action: ComposerAction, menuState: MenuState.Update) {
+        val button = findViewWithTag<ImageButton>(action) ?: return
+        button.isEnabled = !menuState.disabledActions.contains(action)
+        button.isSelected = menuState.reversedActions.contains(action)
+    }
+
     override fun replaceFormattedContent(text: CharSequence) {
         views.composerEditText.setHtml(text.toString())
     }

vector/src/main/res/color/selector_rich_text_menu_icon.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_enabled="false" android:color="?attr/vctr_content_quinary" />
+    <item android:state_pressed="true" android:color="?attr/colorSecondary" />
+    <item android:state_hovered="true" android:color="?attr/colorSecondary" />
+    <item android:state_selected="true" android:color="?attr/colorSecondary" />
+    <item android:color="?attr/vctr_content_tertiary" />
+</selector>

vector/src/main/res/drawable/bg_composer_rich_edit_text.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+
+    <solid android:color="@android:color/transparent" />
+
+    <stroke
+        android:width="1dp"
+        android:color="?vctr_content_quaternary" />
+
+    <corners android:radius="28dp" />
+
+</shape>

vector/src/main/res/drawable/bg_rich_text_menu_button.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_hovered="true">
+        <shape android:shape="rectangle">
+            <corners android:radius="8dp" />
+            <solid android:color="?attr/vctr_rich_text_editor_menu_button_background" />
+        </shape>
+    </item>
+    <item android:state_selected="true">
+        <shape android:shape="rectangle">
+            <corners android:radius="8dp" />
+            <solid android:color="?attr/vctr_rich_text_editor_menu_button_background" />
+        </shape>
+    </item>
+    <item>
+        <ripple android:color="?attr/vctr_rich_text_editor_menu_button_background" />
+    </item>
+</selector>

vector/src/main/res/layout/composer_rich_text_layout.xml

@@ -91,6 +91,7 @@
         android:id="@+id/attachmentButton"
         android:layout_width="0dp"
         android:layout_height="0dp"
+        android:paddingTop="2dp"
         android:background="?android:attr/selectableItemBackground"
         android:contentDescription="@string/option_send_files"
         android:src="@drawable/ic_attachment"
@@ -100,16 +101,17 @@
         android:id="@+id/composerEditTextOuterBorder"
         android:layout_width="0dp"
         android:layout_height="0dp"
-        android:background="@drawable/bg_composer_edit_text" />
+        android:background="@drawable/bg_composer_rich_edit_text" />
 
     <io.element.android.wysiwyg.EditorEditText
         android:id="@+id/composerEditText"
-        style="@style/Widget.Vector.EditText.Composer"
+        style="@style/Widget.Vector.EditText.Composer.RichTextComposer"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:nextFocusLeft="@id/composerEditText"
         android:nextFocusUp="@id/composerEditText"
         tools:hint="@string/room_message_placeholder"
+        tools:text="@tools:sample/lorem/random"
         tools:ignore="MissingConstraints" />
 
     <ImageButton

vector/src/main/res/layout/composer_rich_text_layout_constraint_set_compact.xml

@@ -124,28 +124,30 @@
         android:id="@+id/composerEditTextOuterBorder"
         android:layout_width="0dp"
         android:layout_height="0dp"
+        android:minHeight="40dp"
         android:layout_marginTop="8dp"
-        android:layout_marginBottom="8dp"
-        app:layout_constraintBottom_toBottomOf="@id/composerEditText"
-        app:layout_constraintStart_toStartOf="@id/composerEditText"
-        app:layout_constraintEnd_toEndOf="@id/composerEditText"
-        app:layout_constraintTop_toTopOf="@id/composerEditText"
-        app:layout_goneMarginEnd="12dp" />
+        android:layout_marginHorizontal="12dp"
+        android:background="@drawable/bg_composer_rich_edit_text"
+        app:layout_constraintVertical_bias="0"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toTopOf="@id/sendButton"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toEndOf="parent" />
 
     <io.element.android.wysiwyg.EditorEditText
         android:id="@+id/composerEditText"
-        style="@style/Widget.Vector.EditText.Composer"
+        style="@style/Widget.Vector.EditText.Composer.RichTextComposer"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:hint="@string/room_message_placeholder"
         android:nextFocusLeft="@id/composerEditText"
         android:nextFocusUp="@id/composerEditText"
-        android:layout_marginHorizontal="10dp"
-        app:layout_constraintVertical_bias="0"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
+        android:layout_marginHorizontal="12dp"
+        android:layout_marginVertical="10dp"
+        app:layout_constraintBottom_toBottomOf="@id/composerEditTextOuterBorder"
+        app:layout_constraintEnd_toEndOf="@id/composerEditTextOuterBorder"
+        app:layout_constraintStart_toStartOf="@id/composerEditTextOuterBorder"
+        app:layout_constraintTop_toTopOf="@id/composerEditTextOuterBorder"
         tools:text="@tools:sample/lorem/random" />
 
     <ImageButton
@@ -158,7 +160,7 @@
         android:scaleType="center"
         android:src="@drawable/ic_send"
         android:visibility="invisible"
-        app:layout_constraintTop_toBottomOf="@id/composerEditText"
+        app:layout_constraintTop_toBottomOf="@id/composerEditTextOuterBorder"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         tools:ignore="MissingPrefix"

vector/src/main/res/layout/composer_rich_text_layout_constraint_set_expanded.xml

@@ -130,33 +130,38 @@
         app:layout_constraintBottom_toBottomOf="@id/sendButton"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="@id/sendButton"
+        app:layout_goneMarginBottom="57dp"
         tools:ignore="MissingPrefix" />
 
     <FrameLayout
         android:id="@+id/composerEditTextOuterBorder"
         android:layout_width="0dp"
         android:layout_height="0dp"
-        android:layout_marginStart="8dp"
-        android:layout_marginEnd="8dp"
+        android:minHeight="40dp"
         android:layout_marginTop="8dp"
-        android:layout_marginBottom="8dp"
+        android:layout_marginBottom="0dp"
+        android:layout_marginHorizontal="12dp"
+        android:background="@drawable/bg_composer_rich_edit_text"
+        app:layout_constraintVertical_bias="0"
+        app:layout_constraintTop_toBottomOf="@id/composer_preview_barrier"
         app:layout_constraintBottom_toTopOf="@id/sendButton"
-        app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/composer_preview_barrier"
-        app:layout_goneMarginEnd="12dp" />
+        app:layout_constraintEnd_toEndOf="parent" />
 
     <io.element.android.wysiwyg.EditorEditText
         android:id="@+id/composerEditText"
-        style="@style/Widget.Vector.EditText.Composer"
+        style="@style/Widget.Vector.EditText.Composer.RichTextComposer"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
+        android:hint="@string/room_message_placeholder"
         android:nextFocusLeft="@id/composerEditText"
         android:nextFocusUp="@id/composerEditText"
-        app:layout_constraintBottom_toTopOf="@id/sendButton"
+        android:layout_marginHorizontal="12dp"
+        android:layout_marginVertical="10dp"
+        app:layout_constraintBottom_toBottomOf="@id/composerEditTextOuterBorder"
         app:layout_constraintEnd_toEndOf="@id/composerEditTextOuterBorder"
         app:layout_constraintStart_toStartOf="@id/composerEditTextOuterBorder"
-        app:layout_constraintTop_toBottomOf="@id/composer_preview_barrier"
+        app:layout_constraintTop_toTopOf="@id/composerEditTextOuterBorder"
         tools:text="@tools:sample/lorem/random" />
 
     <ImageButton
@@ -169,10 +174,9 @@
         android:scaleType="center"
         android:src="@drawable/ic_send"
         android:visibility="invisible"
+        app:layout_constraintTop_toBottomOf="@id/composerEditTextOuterBorder"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/composerEditText"
-        app:layout_constraintVertical_bias="1"
         tools:ignore="MissingPrefix"
         tools:visibility="visible" />
 

vector/src/main/res/layout/view_rich_text_menu_button.xml

@@ -1,10 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
 <ImageButton xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="48dp"
     android:layout_height="48dp"
     android:layout_marginHorizontal="2dp"
-    android:background="@android:color/transparent"
-    android:contentDescription="@string/app_name">
-    <!-- The contentDescription attr is populated programmatically. This is just to fix lint issues. -->
-
-</ImageButton>
+    android:background="@drawable/bg_rich_text_menu_button"
+    app:tint="@color/selector_rich_text_menu_icon"
+    tools:src="@drawable/ic_composer_bold"
+    tools:ignore="ContentDescription" />