Improve Mark formating by implementing custom Mark plugin and support…

…ing color customization
wordpress-mobile · Jan 19, 2024 · 13c580a · 13c580a
1 parent 79eddba
commit 13c580a
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 13 deletions.
diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/AztecText.kt b/aztec/src/main/kotlin/org/wordpress/aztec/AztecText.kt
@@ -1344,6 +1344,7 @@ open class AztecText : AppCompatEditText, TextWatcher, UnknownHtmlSpan.OnUnknown
             AztecTextFormat.FORMAT_CODE -> inlineFormatter.toggle(textFormat)
             AztecTextFormat.FORMAT_BOLD,
             AztecTextFormat.FORMAT_STRONG -> inlineFormatter.toggleAny(ToolbarAction.BOLD.textFormats)
+            AztecTextFormat.FORMAT_MARK -> inlineFormatter.toggle(textFormat)
             AztecTextFormat.FORMAT_UNORDERED_LIST -> blockFormatter.toggleUnorderedList()
             AztecTextFormat.FORMAT_TASK_LIST -> blockFormatter.toggleTaskList()
             AztecTextFormat.FORMAT_ORDERED_LIST -> blockFormatter.toggleOrderedList()

diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt b/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt
@@ -40,6 +40,7 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle, private val h
 
     data class CodeStyle(val codeBackground: Int, val codeBackgroundAlpha: Float, val codeColor: Int)
     data class HighlightStyle(@ColorRes val color: Int)
+    var markStyleColor: String? = null
 
     fun toggle(textFormat: ITextFormat) {
         if (!containsInlineStyle(textFormat)) {
@@ -107,12 +108,7 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle, private val h
                         applyInlineStyle(item, textChangedEvent.inputStart, textChangedEvent.inputEnd)
                     }
                     AztecTextFormat.FORMAT_MARK -> {
-                        // For cases of an empty mark tag, either at the beginning of the text or in between
-                        if (textChangedEvent.inputStart == 0 && textChangedEvent.inputEnd == 1) {
-                            applyMarkInlineStyle(textChangedEvent.inputStart, textChangedEvent.inputEnd)
-                        } else {
-                            applyInlineStyle(item, textChangedEvent.inputStart, textChangedEvent.inputEnd)
-                        }
+                        applyInlineStyle(item, textChangedEvent.inputStart, textChangedEvent.inputEnd)
                     }
                     else -> {
                         // do nothing
@@ -250,10 +246,28 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle, private val h
         }
     }
 
-    private fun applyMarkInlineStyle(start: Int = selectionStart, end: Int = selectionEnd) {
-        val previousSpans = editableText.getSpans(start, end, MarkSpan::class.java)
-        previousSpans.forEach {
-            it.applyInlineStyleAttributes(editableText, start, end)
+    public fun updateMarkStyle(start: Int = selectionStart, end: Int = selectionEnd) {
+        val spans = editableText.getSpans(start, end, MarkSpan::class.java)
+        spans.forEach { span ->
+            if (span != null) {
+                val currentSpanStart = editableText.getSpanStart(span)
+                val currentSpanEnd = editableText.getSpanEnd(span)
+                val color = span.getTextColor()
+
+                editableText.removeSpan(span)
+                editableText.setSpan(
+                    MarkSpan(AztecAttributes(), color),
+                    currentSpanStart,
+                    currentSpanEnd,
+                    Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
+                )
+                editableText.setSpan(
+                    MarkSpan(AztecAttributes(), markStyleColor),
+                    start,
+                    end,
+                    Spanned.SPAN_INCLUSIVE_INCLUSIVE
+                )
+            }
         }
     }
 
@@ -444,7 +458,7 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle, private val h
             AztecTextFormat.FORMAT_HIGHLIGHT -> {
                 HighlightSpan.create(context = editor.context, defaultStyle = highlightStyle)
             }
-            AztecTextFormat.FORMAT_MARK -> MarkSpan()
+            AztecTextFormat.FORMAT_MARK -> MarkSpan(AztecAttributes(), markStyleColor)
             else -> AztecStyleSpan(Typeface.NORMAL)
         }
     }

diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/plugins/MarkPlugin.kt b/aztec/src/main/kotlin/org/wordpress/aztec/plugins/MarkPlugin.kt
@@ -0,0 +1,25 @@
+package org.wordpress.aztec.plugins
+
+import android.text.SpannableStringBuilder
+import org.wordpress.aztec.plugins.visual2html.ISpanPreprocessor
+import org.wordpress.aztec.source.CssStyleFormatter
+import org.wordpress.aztec.spans.MarkSpan
+
+class MarkPlugin : ISpanPreprocessor {
+
+    override fun beforeSpansProcessed(spannable: SpannableStringBuilder) {
+        spannable.getSpans(0, spannable.length, MarkSpan::class.java).forEach {
+            if (!CssStyleFormatter.containsStyleAttribute(it.attributes, CssStyleFormatter.CSS_BACKGROUND_COLOR_ATTRIBUTE)) {
+                CssStyleFormatter.addStyleAttribute(it.attributes, CssStyleFormatter.CSS_BACKGROUND_COLOR_ATTRIBUTE, "rgba(0, 0, 0, 0)")
+            }
+
+            if (!CssStyleFormatter.containsStyleAttribute(it.attributes, CssStyleFormatter.CSS_COLOR_ATTRIBUTE)) {
+                CssStyleFormatter.addStyleAttribute(it.attributes, CssStyleFormatter.CSS_COLOR_ATTRIBUTE, it.getTextColor())
+            }
+
+            if (!it.attributes.hasAttribute("class")) {
+                it.attributes.setValue("class", "has-inline-color")
+            }
+        }
+    }
+}
diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/spans/MarkSpan.kt b/aztec/src/main/kotlin/org/wordpress/aztec/spans/MarkSpan.kt
@@ -1,12 +1,40 @@
 package org.wordpress.aztec.spans
 
+import android.graphics.Color
 import android.text.TextPaint
 import android.text.style.CharacterStyle
 import org.wordpress.aztec.AztecAttributes
 
-class MarkSpan(override var attributes: AztecAttributes = AztecAttributes()) : CharacterStyle(), IAztecInlineSpan {
+
+class MarkSpan : CharacterStyle, IAztecInlineSpan {
     override var TAG = "mark"
 
-    override fun updateDrawState(tp: TextPaint?) {
+    override var attributes: AztecAttributes = AztecAttributes()
+    var textColor: Int? = null
+
+    constructor(attributes: AztecAttributes = AztecAttributes()) : super() {
+        this.attributes = attributes
+    }
+
+    constructor(attributes: AztecAttributes = AztecAttributes(), colorString: String?) : super() {
+        this.attributes = attributes
+
+        if (colorString != null) {
+            textColor = Color.parseColor(colorString)
+        }
+    }
+
+    override fun updateDrawState(tp: TextPaint) {
+        configureTextPaint(tp)
+    }
+
+    private fun configureTextPaint(tp: TextPaint) {
+        if (textColor != null) {
+            tp.color = textColor as Int
+        }
+    }
+
+    fun getTextColor(): String {
+        return java.lang.String.format("#%06X", 0xFFFFFF and textColor!!);
     }
 }