Update the editor caret color according to the app's theme

Author: LunarX

app/src/main/java/com/infomaniak/mail/ui/newMessage/NewMessageFragment.kt

@@ -71,6 +71,7 @@ import com.infomaniak.mail.ui.newMessage.NewMessageViewModel.UiFrom
 import com.infomaniak.mail.utils.SentryDebug
 import com.infomaniak.mail.utils.SignatureUtils
 import com.infomaniak.mail.utils.Utils
+import com.infomaniak.mail.utils.Utils.PRIMARY_COLOR_CODE
 import com.infomaniak.mail.utils.WebViewUtils
 import com.infomaniak.mail.utils.WebViewUtils.Companion.destroyAndClearHistory
 import com.infomaniak.mail.utils.WebViewUtils.Companion.setupNewMessageWebViewSettings
@@ -83,6 +84,7 @@ import kotlinx.coroutines.flow.filterNotNull
 import kotlinx.coroutines.flow.launchIn
 import kotlinx.coroutines.flow.onEach
 import javax.inject.Inject
+import com.google.android.material.R as RMaeterial
 
 @AndroidEntryPoint
 class NewMessageFragment : Fragment() {
@@ -309,10 +311,12 @@ class NewMessageFragment : Fragment() {
 
         editor.apply {
             enableAlgorithmicDarkening(true)
-            if (context.isNightModeEnabled()) editor.addCss(context.readRawResource(R.raw.custom_dark_mode))
+            if (context.isNightModeEnabled()) editor.addCss(context.loadCss(R.raw.custom_dark_mode))
 
-            addCss(context.readRawResource(R.raw.style))
-            addCss(context.readRawResource(R.raw.editor_style))
+            addCss(context.loadCss(R.raw.style))
+
+            val customColors = listOf(PRIMARY_COLOR_CODE to context.getAttributeColor(RMaeterial.attr.colorPrimary))
+            addCss(context.loadCss(R.raw.editor_style, customColors))
 
             isEmptyFlow
                 .filterNotNull()

app/src/main/java/com/infomaniak/mail/utils/HtmlFormatter.kt

@@ -22,7 +22,9 @@ import androidx.annotation.RawRes
 import com.infomaniak.html.cleaner.HtmlSanitizer
 import com.infomaniak.mail.R
 import com.infomaniak.mail.data.models.message.Message
+import com.infomaniak.mail.utils.Utils.PRIMARY_COLOR_CODE
 import com.infomaniak.mail.utils.extensions.getAttributeColor
+import com.infomaniak.mail.utils.extensions.loadCss
 import com.infomaniak.mail.utils.extensions.readRawResource
 import org.jsoup.Jsoup
 import org.jsoup.nodes.Element
@@ -178,7 +180,6 @@ class HtmlFormatter(private val html: String) {
     data class PrintData(val context: Context, val message: Message)
 
     companion object {
-        private const val PRIMARY_COLOR_CODE = "--kmail-primary-color"
         private const val KMAIL_MESSAGE_ID = "kmail-message-content"
 
         private const val WBR = "wbr"
@@ -189,22 +190,6 @@ class HtmlFormatter(private val html: String) {
         private val DETECT_BUT_DO_NOT_BREAK = setOf(' ')
         private val BREAK_CHARACTERS = setOf(':', '/', '~', '.', ',', '-', '_', '?', '#', '%', '=', '&')
 
-        private fun Context.loadCss(@RawRes cssResId: Int, customColors: List<Pair<String, Int>> = emptyList()): String {
-            var css = readRawResource(cssResId)
-
-            if (customColors.isNotEmpty()) {
-                var header = ":root {\n"
-                customColors.forEach { (variableName, color) ->
-                    header += formatCssVariable(variableName, color)
-                }
-                header += "}\n\n"
-
-                css = header + css
-            }
-
-            return css
-        }
-
         private fun Context.loadScript(
             @RawRes scriptResId: Int,
             customVariablesDeclaration: List<Pair<String, Any>> = emptyList(),
@@ -225,11 +210,6 @@ class HtmlFormatter(private val html: String) {
             }
         }
 
-        private fun formatCssVariable(variableName: String, color: Int): String {
-            val formattedColor = Utils.colorToHexRepresentation(color)
-            return "$variableName: $formattedColor;\n"
-        }
-
         fun Context.getCustomDarkMode(): String = loadCss(R.raw.custom_dark_mode)
 
         fun Context.getImproveRenderingStyle(): String = loadCss(R.raw.improve_rendering)

app/src/main/java/com/infomaniak/mail/utils/SignatureUtils.kt

@@ -21,14 +21,14 @@ import android.content.Context
 import com.infomaniak.mail.R
 import com.infomaniak.mail.data.models.draft.Draft
 import com.infomaniak.mail.data.models.signature.Signature
-import com.infomaniak.mail.utils.extensions.readRawResource
+import com.infomaniak.mail.utils.extensions.loadCss
 import javax.inject.Inject
 import javax.inject.Singleton
 
 @Singleton
 class SignatureUtils @Inject constructor(appContext: Context) {
 
-    private val signatureMargins by lazy { appContext.readRawResource(R.raw.signature_margins) }
+    private val signatureMargins by lazy { appContext.loadCss(R.raw.signature_margins) }
 
     fun encapsulateSignatureContentWithInfomaniakClass(signatureContent: String): String {
         val verticalMarginsCss = signatureMargins

app/src/main/java/com/infomaniak/mail/utils/Utils.kt

@@ -50,6 +50,8 @@ object Utils {
 
     const val SCHEME_SMSTO = "smsto:"
 
+    const val PRIMARY_COLOR_CODE = "--kmail-primary-color"
+
     fun colorToHexRepresentation(color: Int) = "#" + color.toHexString().substring(2 until 8)
 
     fun isPermanentDeleteFolder(role: FolderRole?): Boolean {

app/src/main/java/com/infomaniak/mail/utils/WebViewUtils.kt

@@ -32,7 +32,7 @@ import com.infomaniak.mail.utils.HtmlFormatter.Companion.getPrintMailStyle
 import com.infomaniak.mail.utils.HtmlFormatter.Companion.getResizeScript
 import com.infomaniak.mail.utils.HtmlFormatter.Companion.getSignatureMarginStyle
 import com.infomaniak.mail.utils.extensions.enableAlgorithmicDarkening
-import com.infomaniak.mail.utils.extensions.readRawResource
+import com.infomaniak.mail.utils.extensions.loadCss
 
 class WebViewUtils(context: Context) {
 
@@ -156,7 +156,7 @@ class WebViewUtils(context: Context) {
         }
 
         private fun WebView.addBackgroundJs() {
-            val css = context.readRawResource(R.raw.custom_dark_mode)
+            val css = context.loadCss(R.raw.custom_dark_mode)
             evaluateJavascript(
                 """ var style = document.createElement('style')
                 document.head.appendChild(style)

app/src/main/java/com/infomaniak/mail/utils/extensions/Extensions.kt

@@ -190,6 +190,27 @@ fun Context.formatSubject(subject: String?): String {
 
 fun Context.readRawResource(@RawRes resId: Int): String = Scanner(resources.openRawResource(resId)).useDelimiter("\\A").next()
 
+fun Context.loadCss(@RawRes cssResId: Int, customColors: List<Pair<String, Int>> = emptyList()): String {
+    var css = readRawResource(cssResId)
+
+    if (customColors.isNotEmpty()) {
+        var header = ":root {\n"
+        customColors.forEach { (variableName, color) ->
+            header += formatCssVariable(variableName, color)
+        }
+        header += "}\n\n"
+
+        css = header + css
+    }
+
+    return css
+}
+
+private fun formatCssVariable(variableName: String, color: Int): String {
+    val formattedColor = Utils.colorToHexRepresentation(color)
+    return "$variableName: $formattedColor;\n"
+}
+
 fun LottieAnimationView.repeatFrame(firstFrame: Int, lastFrame: Int) {
     addAnimatorListener(object : Animator.AnimatorListener {
         override fun onAnimationStart(animation: Animator) = Unit

app/src/main/res/raw/editor_style.css

@@ -1,3 +1,7 @@
+html {
+    caret-color: var(--kmail-primary-color);
+}
+
 body {
     margin-top: 0px;
     margin-bottom: 0px;