Support text color and background color

Infomaniak · Jun 19, 2024 · 163a98b · 163a98b
1 parent 129dd76
commit 163a98b
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 2 deletions.
diff --git a/rich-html-editor/src/main/java/com/infomaniak/lib/richhtmleditor/JsBridge.kt b/rich-html-editor/src/main/java/com/infomaniak/lib/richhtmleditor/JsBridge.kt
@@ -41,6 +41,10 @@ internal class JsBridge(
 
     fun removeFormat() = execCommand(OtherCommand.REMOVE_FORMAT)
 
+    fun setTextColor(@ColorInt color: Int) = execCommand(StatusCommand.TEXT_COLOR, colorToRgbHex(color))
+
+    fun setTextBackgroundColor(@ColorInt color: Int) = execCommand(StatusCommand.BACKGROUND_COLOR, colorToRgbHex(color))
+
     fun createLink(displayText: String?, url: String) {
         jsExecutor.executeImmediatelyAndRefreshToolbar(JsExecutableMethod("createLink", displayText, url))
     }
@@ -68,6 +72,9 @@ internal class JsBridge(
         return Color.argb(255, r.toInt(), g.toInt(), b.toInt())
     }
 
+    @OptIn(ExperimentalStdlibApi::class)
+    private fun colorToRgbHex(color: Int) = color.toHexString(HexFormat.UpperCase).takeLast(6)
+
     @JavascriptInterface
     fun reportCommandDataChange(
         isBold: Boolean,

diff --git a/rich-html-editor/src/main/java/com/infomaniak/lib/richhtmleditor/RichHtmlEditorWebView.kt b/rich-html-editor/src/main/java/com/infomaniak/lib/richhtmleditor/RichHtmlEditorWebView.kt
@@ -7,6 +7,7 @@ import android.util.AttributeSet
 import android.view.ViewGroup
 import android.webkit.WebView
 import android.webkit.WebViewClient
+import androidx.annotation.ColorInt
 import androidx.core.view.updateLayoutParams
 import com.infomaniak.lib.richhtmleditor.executor.JsExecutableMethod
 import com.infomaniak.lib.richhtmleditor.executor.JsExecutor
@@ -116,6 +117,8 @@ class RichHtmlEditorWebView @JvmOverloads constructor(
     fun toggleStrikeThrough() = jsBridge.toggleStrikeThrough()
     fun toggleUnderline() = jsBridge.toggleUnderline()
     fun removeFormat() = jsBridge.removeFormat()
+    fun setTextColor(@ColorInt color: Int) = jsBridge.setTextColor(color)
+    fun setTextBackgroundColor(@ColorInt color: Int) = jsBridge.setTextBackgroundColor(color)
     fun createLink(displayText: String?, url: String) = jsBridge.createLink(displayText, url)
     fun unlink() = jsBridge.unlink()
 

diff --git a/sample/src/main/java/com/infomaniak/lib/richhtmleditor/sample/EditorSampleFragment.kt b/sample/src/main/java/com/infomaniak/lib/richhtmleditor/sample/EditorSampleFragment.kt
@@ -1,6 +1,7 @@
 package com.infomaniak.lib.richhtmleditor.sample
 
 import android.app.Activity
+import android.graphics.Color
 import android.os.Bundle
 import android.util.Log
 import android.view.LayoutInflater
@@ -74,6 +75,11 @@ class EditorSampleFragment : Fragment() {
             inputMethodManager.hideSoftInputFromWindow(editor.windowToken, 0)
         }
         focusEditorButton.setOnClickListener { editor.requestFocusAndOpenKeyboard() }
+
+        textColorRed.setOnClickListener { editor.setTextColor(Color.parseColor("#FF0000")) }
+        textColorBlue.setOnClickListener { editor.setTextColor(Color.parseColor("#0000FF")) }
+        textBackgroundColorRed.setOnClickListener { editor.setTextBackgroundColor(Color.parseColor("#FF0000")) }
+        textBackgroundColorBlue.setOnClickListener { editor.setTextBackgroundColor(Color.parseColor("#0000FF")) }
     }
 
     private fun observeEditorStatusUpdates() = with(binding) {
@@ -101,8 +107,9 @@ class EditorSampleFragment : Fragment() {
             .use(BufferedReader::readText)
     }
 
-    private fun setToolbarEnabledStatus(isEnabled: Boolean) {
-        binding.toolbarLayout.forEach { view -> view.isEnabled = isEnabled }
+    private fun setToolbarEnabledStatus(isEnabled: Boolean) = with(binding) {
+        toolbarLayout.forEach { view -> view.isEnabled = isEnabled }
+        colorLayout.forEach { view -> view.isEnabled = isEnabled }
     }
 
     inner class CreateLinkDialog {

diff --git a/sample/src/main/res/layout/fragment_editor_sample.xml b/sample/src/main/res/layout/fragment_editor_sample.xml
@@ -105,6 +105,72 @@
 
     </LinearLayout>
 
+    <LinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content">
+
+        <HorizontalScrollView
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:fillViewport="true"
+            android:scrollbars="none">
+
+            <LinearLayout
+                android:id="@+id/colorLayout"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:gravity="center_vertical">
+
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginStart="16dp"
+                    android:text="Text color:"
+                    android:textColor="@color/subtitleColor" />
+
+                <com.google.android.material.button.MaterialButton
+                    android:id="@+id/textColorRed"
+                    style="@style/EditorButton"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="end"
+                    android:text="Red" />
+
+                <com.google.android.material.button.MaterialButton
+                    android:id="@+id/textColorBlue"
+                    style="@style/EditorButton"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="end"
+                    android:text="Blue" />
+
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginStart="16dp"
+                    android:text="Bg color:"
+                    android:textColor="@color/subtitleColor" />
+
+                <com.google.android.material.button.MaterialButton
+                    android:id="@+id/textBackgroundColorRed"
+                    style="@style/EditorButton"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="end"
+                    android:text="Red" />
+
+                <com.google.android.material.button.MaterialButton
+                    android:id="@+id/textBackgroundColorBlue"
+                    style="@style/EditorButton"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="end"
+                    android:text="Blue" />
+
+            </LinearLayout>
+        </HorizontalScrollView>
+    </LinearLayout>
+
     <com.google.android.material.divider.MaterialDivider
         android:layout_width="match_parent"
         android:layout_height="1dp"