From f00c599b670a4ef8cff2c32f32edf6cc7d5c11bf Mon Sep 17 00:00:00 2001
From: Felps <felipe.valadares2@gmail.com>
Date: Tue, 26 May 2020 02:10:37 -0300
Subject: [PATCH 01/27] New Feature, support for BackgroundColorSpan: - Added
 CssBackgroundColorPlugin based on CssUnderlinePlugin - Added
 AztecBackgroundColorSpan - General changes to implement and use
 BackgroundColorSpan

---
 .../org/wordpress/aztec/demo/MainActivity.kt  |  6 ++
 .../org/wordpress/aztec/AztecTagHandler.kt    | 17 ++++-
 .../kotlin/org/wordpress/aztec/AztecText.kt   |  7 ++
 .../org/wordpress/aztec/AztecTextFormat.kt    |  1 +
 .../aztec/formatting/InlineFormatter.kt       | 15 +++-
 .../aztec/plugins/CssBackgroundColorPlugin.kt | 70 +++++++++++++++++++
 .../aztec/source/CssStyleFormatter.kt         | 15 +++-
 .../aztec/spans/AztecBackgroundColorSpan.kt   | 15 ++++
 .../wordpress/aztec/toolbar/ToolbarAction.kt  |  5 ++
 .../res/layout/aztec_format_bar_advanced.xml  |  8 +++
 .../res/layout/aztec_format_bar_basic.xml     |  8 +++
 aztec/src/main/res/values/strings.xml         |  1 +
 12 files changed, 164 insertions(+), 4 deletions(-)
 create mode 100644 aztec/src/main/kotlin/org/wordpress/aztec/plugins/CssBackgroundColorPlugin.kt
 create mode 100644 aztec/src/main/kotlin/org/wordpress/aztec/spans/AztecBackgroundColorSpan.kt

diff --git a/app/src/main/kotlin/org/wordpress/aztec/demo/MainActivity.kt b/app/src/main/kotlin/org/wordpress/aztec/demo/MainActivity.kt
index 5552e7f3b..7888e5f94 100644
--- a/app/src/main/kotlin/org/wordpress/aztec/demo/MainActivity.kt
+++ b/app/src/main/kotlin/org/wordpress/aztec/demo/MainActivity.kt
@@ -45,6 +45,7 @@ import org.wordpress.aztec.IHistoryListener
 import org.wordpress.aztec.ITextFormat
 import org.wordpress.aztec.glideloader.GlideImageLoader
 import org.wordpress.aztec.glideloader.GlideVideoThumbnailLoader
+import org.wordpress.aztec.plugins.CssBackgroundColorPlugin
 import org.wordpress.aztec.plugins.CssUnderlinePlugin
 import org.wordpress.aztec.plugins.IMediaToolbarButton
 import org.wordpress.aztec.plugins.shortcodes.AudioShortcodePlugin
@@ -89,6 +90,7 @@ open class MainActivity : AppCompatActivity(),
         private val BOLD = "<b>Bold</b><br>"
         private val ITALIC = "<i style=\"color:darkred\">Italic</i><br>"
         private val UNDERLINE = "<u style=\"color:lime\">Underline</u><br>"
+        private val BACKGROUND = "<span style=\"background-color:#087BDE\">BACKGROUND</span><br>"
         private val STRIKETHROUGH = "<s style=\"color:#ff666666\" class=\"test\">Strikethrough</s><br>" // <s> or <strike> or <del>
         private val ORDERED = "<ol style=\"color:green\"><li>Ordered</li><li>should have color</li></ol>"
         private val ORDERED_WITH_START = "<h4>Start in 10 List:</h4>" +
@@ -185,6 +187,7 @@ open class MainActivity : AppCompatActivity(),
                         BOLD +
                         ITALIC +
                         UNDERLINE +
+                        BACKGROUND +
                         STRIKETHROUGH +
                         ORDERED +
                         ORDERED_WITH_START +
@@ -459,9 +462,12 @@ open class MainActivity : AppCompatActivity(),
             aztec.visualEditor.setCalypsoMode(false)
             aztec.sourceEditor?.setCalypsoMode(false)
 
+            aztec.visualEditor.setBackgroundSpanColor(resources.getColor(R.color.blue_wordpress))
+
             aztec.sourceEditor?.displayStyledAndFormattedHtml(EXAMPLE)
 
             aztec.addPlugin(CssUnderlinePlugin())
+            aztec.addPlugin(CssBackgroundColorPlugin())
         }
 
         if (savedInstanceState == null) {
diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/AztecTagHandler.kt b/aztec/src/main/kotlin/org/wordpress/aztec/AztecTagHandler.kt
index b491cc1a6..77a7faf0b 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/AztecTagHandler.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/AztecTagHandler.kt
@@ -28,7 +28,9 @@ import android.text.Spanned
 import androidx.appcompat.content.res.AppCompatResources
 import org.wordpress.aztec.plugins.IAztecPlugin
 import org.wordpress.aztec.plugins.html2visual.IHtmlTagHandler
+import org.wordpress.aztec.source.CssStyleFormatter
 import org.wordpress.aztec.spans.AztecAudioSpan
+import org.wordpress.aztec.spans.AztecBackgroundColorSpan
 import org.wordpress.aztec.spans.AztecHorizontalRuleSpan
 import org.wordpress.aztec.spans.AztecImageSpan
 import org.wordpress.aztec.spans.AztecMediaClickableSpan
@@ -38,6 +40,7 @@ import org.wordpress.aztec.spans.AztecVideoSpan
 import org.wordpress.aztec.spans.HiddenHtmlSpan
 import org.wordpress.aztec.spans.IAztecAttributedSpan
 import org.wordpress.aztec.spans.IAztecNestable
+import org.wordpress.aztec.spans.IAztecSpan
 import org.wordpress.aztec.spans.createAztecQuoteSpan
 import org.wordpress.aztec.spans.createHeadingSpan
 import org.wordpress.aztec.spans.createHiddenHtmlBlockSpan
@@ -47,6 +50,7 @@ import org.wordpress.aztec.spans.createOrderedListSpan
 import org.wordpress.aztec.spans.createParagraphSpan
 import org.wordpress.aztec.spans.createPreformatSpan
 import org.wordpress.aztec.spans.createUnorderedListSpan
+import org.wordpress.aztec.util.ColorConverter
 import org.wordpress.aztec.util.getLast
 import org.xml.sax.Attributes
 import java.util.ArrayList
@@ -83,7 +87,7 @@ class AztecTagHandler(val context: Context, val plugins: List<IAztecPlugin> = Ar
                 return true
             }
             SPAN -> {
-                val span = createHiddenHtmlSpan(tag, AztecAttributes(attributes), nestingLevel, alignmentRendering)
+                val span = handleBackgroundColorSpanTag(attributes, tag, nestingLevel)
                 handleElement(output, opening, span)
                 return true
             }
@@ -154,6 +158,17 @@ class AztecTagHandler(val context: Context, val plugins: List<IAztecPlugin> = Ar
         return false
     }
 
+    private fun handleBackgroundColorSpanTag(attributes: Attributes, tag: String, nestingLevel: Int): IAztecSpan {
+        val attrs = AztecAttributes(attributes)
+        return if (CssStyleFormatter.containsStyleAttribute(attrs, CssStyleFormatter.CSS_BACKGROUND_COLOR_ATTRIBUTE) || (tagStack.isNotEmpty() && tagStack.last() is AztecBackgroundColorSpan)) {
+            val att = CssStyleFormatter.getStyleAttribute(attrs, CssStyleFormatter.CSS_BACKGROUND_COLOR_ATTRIBUTE)
+            val color = ColorConverter.getColorInt(att)
+            AztecBackgroundColorSpan(color)
+        } else {
+            createHiddenHtmlSpan(tag, attrs, nestingLevel, alignmentRendering)
+        }
+    }
+
     private fun processTagHandlerPlugins(tag: String, opening: Boolean, output: Editable, attributes: Attributes, nestingLevel: Int): Boolean {
         plugins.filter { it is IHtmlTagHandler }
                 .map { it as IHtmlTagHandler }
diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/AztecText.kt b/aztec/src/main/kotlin/org/wordpress/aztec/AztecText.kt
index 1d5abc103..07417d50c 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/AztecText.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/AztecText.kt
@@ -360,6 +360,10 @@ open class AztecText : AppCompatEditText, TextWatcher, UnknownHtmlSpan.OnUnknown
         isInCalypsoMode = isCompatibleWithCalypso
     }
 
+    fun setBackgroundSpanColor(color: Int) {
+        inlineFormatter.backgroundSpanColor = color
+    }
+
     fun setGutenbergMode(isCompatibleWithGutenberg: Boolean) {
         isInGutenbergMode = isCompatibleWithGutenberg
     }
@@ -1027,6 +1031,7 @@ open class AztecText : AppCompatEditText, TextWatcher, UnknownHtmlSpan.OnUnknown
             AztecTextFormat.FORMAT_CITE,
             AztecTextFormat.FORMAT_UNDERLINE,
             AztecTextFormat.FORMAT_STRIKETHROUGH,
+            AztecTextFormat.FORMAT_BACKGROUND,
             AztecTextFormat.FORMAT_CODE -> inlineFormatter.toggle(textFormat)
             AztecTextFormat.FORMAT_BOLD,
             AztecTextFormat.FORMAT_STRONG -> inlineFormatter.toggleAny(ToolbarAction.BOLD.textFormats)
@@ -1062,6 +1067,7 @@ open class AztecText : AppCompatEditText, TextWatcher, UnknownHtmlSpan.OnUnknown
             AztecTextFormat.FORMAT_CITE,
             AztecTextFormat.FORMAT_UNDERLINE,
             AztecTextFormat.FORMAT_STRIKETHROUGH,
+            AztecTextFormat.FORMAT_BACKGROUND,
             AztecTextFormat.FORMAT_CODE -> return inlineFormatter.containsInlineStyle(format, selStart, selEnd)
             AztecTextFormat.FORMAT_UNORDERED_LIST,
             AztecTextFormat.FORMAT_ORDERED_LIST -> return blockFormatter.containsList(format, selStart, selEnd)
@@ -1517,6 +1523,7 @@ open class AztecText : AppCompatEditText, TextWatcher, UnknownHtmlSpan.OnUnknown
         inlineFormatter.removeInlineStyle(AztecTextFormat.FORMAT_STRIKETHROUGH, start, end)
         inlineFormatter.removeInlineStyle(AztecTextFormat.FORMAT_UNDERLINE, start, end)
         inlineFormatter.removeInlineStyle(AztecTextFormat.FORMAT_CODE, start, end)
+        inlineFormatter.removeInlineStyle(AztecTextFormat.FORMAT_BACKGROUND, start, end)
     }
 
     fun removeBlockStylesFromRange(start: Int, end: Int, ignoreLineBounds: Boolean = false) {
diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/AztecTextFormat.kt b/aztec/src/main/kotlin/org/wordpress/aztec/AztecTextFormat.kt
index 2f0bb4bae..a4b94dd5a 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/AztecTextFormat.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/AztecTextFormat.kt
@@ -35,4 +35,5 @@ enum class AztecTextFormat : ITextFormat {
     FORMAT_FONT,
     FORMAT_MONOSPACE,
     FORMAT_CODE,
+    FORMAT_BACKGROUND,
 }
diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt b/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt
index 13b96f1e0..4d1cf57eb 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt
@@ -11,17 +11,20 @@ import org.wordpress.aztec.AztecText
 import org.wordpress.aztec.AztecTextFormat
 import org.wordpress.aztec.Constants
 import org.wordpress.aztec.ITextFormat
+import org.wordpress.aztec.R
+import org.wordpress.aztec.spans.AztecBackgroundColorSpan
 import org.wordpress.aztec.spans.AztecCodeSpan
 import org.wordpress.aztec.spans.AztecStrikethroughSpan
 import org.wordpress.aztec.spans.AztecStyleBoldSpan
 import org.wordpress.aztec.spans.AztecStyleCiteSpan
-import org.wordpress.aztec.spans.AztecStyleItalicSpan
 import org.wordpress.aztec.spans.AztecStyleEmphasisSpan
-import org.wordpress.aztec.spans.AztecStyleStrongSpan
+import org.wordpress.aztec.spans.AztecStyleItalicSpan
 import org.wordpress.aztec.spans.AztecStyleSpan
+import org.wordpress.aztec.spans.AztecStyleStrongSpan
 import org.wordpress.aztec.spans.AztecUnderlineSpan
 import org.wordpress.aztec.spans.IAztecInlineSpan
 import org.wordpress.aztec.watchers.TextChangedEvent
+import java.lang.String
 import java.util.ArrayList
 
 /**
@@ -30,6 +33,8 @@ import java.util.ArrayList
  */
 class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle) : AztecFormatter(editor) {
 
+    var backgroundSpanColor: Int? = null
+
     data class CodeStyle(val codeBackground: Int, val codeBackgroundAlpha: Float, val codeColor: Int)
 
     fun toggle(textFormat: ITextFormat) {
@@ -69,6 +74,7 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle) : AztecFormat
                     AztecTextFormat.FORMAT_EMPHASIS,
                     AztecTextFormat.FORMAT_CITE,
                     AztecTextFormat.FORMAT_STRIKETHROUGH,
+                    AztecTextFormat.FORMAT_BACKGROUND,
                     AztecTextFormat.FORMAT_UNDERLINE,
                     AztecTextFormat.FORMAT_CODE -> {
                         applyInlineStyle(item, textChangedEvent.inputStart, textChangedEvent.inputEnd)
@@ -205,6 +211,7 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle) : AztecFormat
             AztecStrikethroughSpan::class.java -> return AztecTextFormat.FORMAT_STRIKETHROUGH
             AztecUnderlineSpan::class.java -> return AztecTextFormat.FORMAT_UNDERLINE
             AztecCodeSpan::class.java -> return AztecTextFormat.FORMAT_CODE
+            AztecBackgroundColorSpan::class.java -> return AztecTextFormat.FORMAT_BACKGROUND
             else -> return null
         }
     }
@@ -349,6 +356,10 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle) : AztecFormat
             AztecTextFormat.FORMAT_STRIKETHROUGH -> return AztecStrikethroughSpan()
             AztecTextFormat.FORMAT_UNDERLINE -> return AztecUnderlineSpan()
             AztecTextFormat.FORMAT_CODE -> return AztecCodeSpan(codeStyle)
+            AztecTextFormat.FORMAT_BACKGROUND -> {
+                val color = backgroundSpanColor ?: R.color.background
+                return AztecBackgroundColorSpan(color, String.format("#%06X", 0xFFFFFF and color))
+            }
             else -> return AztecStyleSpan(Typeface.NORMAL)
         }
     }
diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/plugins/CssBackgroundColorPlugin.kt b/aztec/src/main/kotlin/org/wordpress/aztec/plugins/CssBackgroundColorPlugin.kt
new file mode 100644
index 000000000..b87ca5226
--- /dev/null
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/plugins/CssBackgroundColorPlugin.kt
@@ -0,0 +1,70 @@
+package org.wordpress.aztec.plugins
+
+import android.text.Spannable
+import android.text.SpannableStringBuilder
+import android.text.Spanned
+import android.text.style.BackgroundColorSpan
+import org.wordpress.aztec.plugins.html2visual.ISpanPostprocessor
+import org.wordpress.aztec.plugins.visual2html.ISpanPreprocessor
+import org.wordpress.aztec.source.CssStyleFormatter
+import org.wordpress.aztec.spans.AztecBackgroundColorSpan
+import org.wordpress.aztec.spans.HiddenHtmlSpan
+import org.wordpress.aztec.spans.IAztecNestable
+import org.wordpress.aztec.util.ColorConverter
+import org.wordpress.aztec.util.SpanWrapper
+
+class CssBackgroundColorPlugin: ISpanPostprocessor, ISpanPreprocessor {
+
+    private val SPAN_TAG = "span"
+
+    override fun beforeSpansProcessed(spannable: SpannableStringBuilder) {
+        spannable.getSpans(0, spannable.length, AztecBackgroundColorSpan::class.java).forEach {
+            if (!CssStyleFormatter.containsStyleAttribute(it.attributes, CssStyleFormatter.CSS_BACKGROUND_COLOR_ATTRIBUTE)) {
+                CssStyleFormatter.addStyleAttribute(it.attributes, CssStyleFormatter.CSS_BACKGROUND_COLOR_ATTRIBUTE, it.bgColorHex)
+            }
+
+            val start = spannable.getSpanStart(it)
+            val nesting = IAztecNestable.getNestingLevelAt(spannable, start) + 1
+
+            val backgroundSpan = HiddenHtmlSpan(SPAN_TAG, it.attributes, nesting)
+
+            spannable.setSpan(backgroundSpan, start, spannable.getSpanEnd(it), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+            spannable.removeSpan(it)
+
+            // if a parent of the new hidden span is also a <span> we can merge them
+            IAztecNestable.getParent(spannable, SpanWrapper(spannable, backgroundSpan))?.let {
+                if (it.span is HiddenHtmlSpan) {
+                    val hiddenSpan = it.span as HiddenHtmlSpan
+                    if (hiddenSpan.TAG == SPAN_TAG) {
+                        val parentStyle = hiddenSpan.attributes.getValue(CssStyleFormatter.STYLE_ATTRIBUTE)
+                        val childStyle = backgroundSpan.attributes.getValue(CssStyleFormatter.STYLE_ATTRIBUTE)
+                        if (parentStyle != null) {
+                            hiddenSpan.attributes.setValue(CssStyleFormatter.STYLE_ATTRIBUTE, CssStyleFormatter.mergeStyleAttributes(parentStyle, childStyle))
+                        } else {
+                            //adding background to existing span tag
+                            hiddenSpan.attributes.setValue(CssStyleFormatter.STYLE_ATTRIBUTE, childStyle)
+                        }
+
+                        // remove the extra child span
+                        spannable.removeSpan(backgroundSpan)
+                    }
+                }
+            }
+        }
+    }
+
+    override fun afterSpansProcessed(spannable: Spannable) {
+        spannable.getSpans(0, spannable.length, HiddenHtmlSpan::class.java).forEach {
+            if (it.TAG == SPAN_TAG && CssStyleFormatter.containsStyleAttribute(it.attributes, CssStyleFormatter.CSS_BACKGROUND_COLOR_ATTRIBUTE)) {
+                val att = CssStyleFormatter.getStyleAttribute(it.attributes, CssStyleFormatter.CSS_BACKGROUND_COLOR_ATTRIBUTE)
+                val color = ColorConverter.getColorInt(att)
+                CssStyleFormatter.removeStyleAttribute(it.attributes, CssStyleFormatter.CSS_BACKGROUND_COLOR_ATTRIBUTE)
+                spannable.setSpan(BackgroundColorSpan(color), spannable.getSpanStart(it), spannable.getSpanEnd(it), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+
+                if (it.attributes.isEmpty()) {
+                    spannable.removeSpan(it)
+                }
+            }
+        }
+    }
+}
diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/source/CssStyleFormatter.kt b/aztec/src/main/kotlin/org/wordpress/aztec/source/CssStyleFormatter.kt
index d977d920c..f8100eaad 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/source/CssStyleFormatter.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/source/CssStyleFormatter.kt
@@ -1,10 +1,11 @@
 package org.wordpress.aztec.source
 
-import androidx.core.text.TextDirectionHeuristicsCompat
 import android.text.Editable
 import android.text.Layout
 import android.text.Spannable
+import android.text.style.BackgroundColorSpan
 import android.text.style.ForegroundColorSpan
+import androidx.core.text.TextDirectionHeuristicsCompat
 import org.wordpress.aztec.AztecAttributes
 import org.wordpress.aztec.spans.IAztecAlignmentSpan
 import org.wordpress.aztec.spans.IAztecAttributedSpan
@@ -26,6 +27,7 @@ class CssStyleFormatter {
         val CSS_TEXT_DECORATION_ATTRIBUTE = "text-decoration"
         val CSS_TEXT_ALIGN_ATTRIBUTE = "text-align"
         val CSS_COLOR_ATTRIBUTE = "color"
+        val CSS_BACKGROUND_COLOR_ATTRIBUTE = "background-color"
 
         /**
          * Check the provided [attributedSpan] for the *style* attribute. If found, parse out the
@@ -41,6 +43,7 @@ class CssStyleFormatter {
         fun applyInlineStyleAttributes(text: Editable, attributedSpan: IAztecAttributedSpan, start: Int, end: Int) {
             if (attributedSpan.attributes.hasAttribute(STYLE_ATTRIBUTE) && start != end) {
                 processColor(attributedSpan.attributes, text, start, end)
+                processBackgroundColor(attributedSpan.attributes, text, start, end)
                 if (attributedSpan is IAztecParagraphStyle) {
                     processAlignment(attributedSpan, text, start, end)
                 }
@@ -85,6 +88,16 @@ class CssStyleFormatter {
             }
         }
 
+        private fun processBackgroundColor(attributes: AztecAttributes, text: Editable, start: Int, end: Int) {
+            val colorAttrValue = getStyleAttribute(attributes, CSS_BACKGROUND_COLOR_ATTRIBUTE)
+            if (!colorAttrValue.isBlank()) {
+                val colorInt = ColorConverter.getColorInt(colorAttrValue)
+                if (colorInt != ColorConverter.COLOR_NOT_FOUND) {
+                    text.setSpan(BackgroundColorSpan(colorInt), start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
+                }
+            }
+        }
+
         fun containsStyleAttribute(attributes: AztecAttributes, styleAttributeName: String): Boolean {
             return attributes.hasAttribute(STYLE_ATTRIBUTE) && getMatcher(attributes, styleAttributeName).find()
         }
diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/spans/AztecBackgroundColorSpan.kt b/aztec/src/main/kotlin/org/wordpress/aztec/spans/AztecBackgroundColorSpan.kt
new file mode 100644
index 000000000..8df1fcb3f
--- /dev/null
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/spans/AztecBackgroundColorSpan.kt
@@ -0,0 +1,15 @@
+package org.wordpress.aztec.spans
+
+import android.text.style.BackgroundColorSpan
+import org.wordpress.aztec.AztecAttributes
+
+class AztecBackgroundColorSpan(
+        bgColor: Int,
+        val bgColorHex: String,
+        tag: String = "span",
+        override var attributes: AztecAttributes = AztecAttributes()
+) : BackgroundColorSpan(bgColor), IAztecInlineSpan {
+    constructor(color: Int) : this(color, java.lang.String.format("#%06X", 0xFFFFFF and color))
+
+    override val TAG = tag
+}
\ No newline at end of file
diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt b/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt
index b987a3d38..7a84e34cb 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt
@@ -34,6 +34,11 @@ enum class ToolbarAction constructor(
             R.drawable.format_bar_button_ul_selector,
             ToolbarActionType.BLOCK_STYLE,
             setOf(AztecTextFormat.FORMAT_NONE)),
+    BACKGROUND(
+            R.id.format_bar_button_background,
+            R.drawable.format_bar_button_bold_selector,
+            ToolbarActionType.INLINE_STYLE,
+            setOf(AztecTextFormat.FORMAT_BACKGROUND)),
     BOLD(
             R.id.format_bar_button_bold,
             R.drawable.format_bar_button_bold_selector,
diff --git a/aztec/src/main/res/layout/aztec_format_bar_advanced.xml b/aztec/src/main/res/layout/aztec_format_bar_advanced.xml
index d271644eb..9268086bc 100644
--- a/aztec/src/main/res/layout/aztec_format_bar_advanced.xml
+++ b/aztec/src/main/res/layout/aztec_format_bar_advanced.xml
@@ -203,6 +203,14 @@
                                 android:contentDescription="@string/format_bar_description_quote">
                             </org.wordpress.aztec.toolbar.RippleToggleButton>
 
+                            <org.wordpress.aztec.toolbar.RippleToggleButton
+                                android:id="@+id/format_bar_button_background"
+                                style="@style/FormatBarButton"
+                                android:layout_width="wrap_content"
+                                android:layout_height="fill_parent"
+                                android:contentDescription="@string/format_bar_description_background">
+                            </org.wordpress.aztec.toolbar.RippleToggleButton>
+
                             <org.wordpress.aztec.toolbar.RippleToggleButton
                                 android:id="@+id/format_bar_button_bold"
                                 style="@style/FormatBarButton"
diff --git a/aztec/src/main/res/layout/aztec_format_bar_basic.xml b/aztec/src/main/res/layout/aztec_format_bar_basic.xml
index 415d5d4af..5316c939e 100644
--- a/aztec/src/main/res/layout/aztec_format_bar_basic.xml
+++ b/aztec/src/main/res/layout/aztec_format_bar_basic.xml
@@ -113,6 +113,14 @@
                             android:contentDescription="@string/format_bar_description_quote">
                         </org.wordpress.aztec.toolbar.RippleToggleButton>
 
+                        <org.wordpress.aztec.toolbar.RippleToggleButton
+                            android:id="@+id/format_bar_button_background"
+                            style="@style/FormatBarButton"
+                            android:layout_width="wrap_content"
+                            android:layout_height="fill_parent"
+                            android:contentDescription="@string/format_bar_description_background">
+                        </org.wordpress.aztec.toolbar.RippleToggleButton>
+
                         <org.wordpress.aztec.toolbar.RippleToggleButton
                             android:id="@+id/format_bar_button_bold"
                             style="@style/FormatBarButton"
diff --git a/aztec/src/main/res/values/strings.xml b/aztec/src/main/res/values/strings.xml
index a555c2f22..8176f05fb 100644
--- a/aztec/src/main/res/values/strings.xml
+++ b/aztec/src/main/res/values/strings.xml
@@ -19,6 +19,7 @@
     <!-- FORMAT -->
     <string name="format_bar_description_heading">Heading</string>
     <string name="format_bar_description_bold">Bold</string>
+    <string name="format_bar_description_background">Background</string>
     <string name="format_bar_description_italic">Italic</string>
     <string name="format_bar_description_underline">Underline</string>
     <string name="format_bar_description_strike">Strikethrough</string>

From 8dd7d9a45c04927f35c998908eb7eb4640d980cd Mon Sep 17 00:00:00 2001
From: Felps <felipe.valadares2@gmail.com>
Date: Tue, 26 May 2020 02:46:16 -0300
Subject: [PATCH 02/27] - Added new icons for ToolbarAction.BACKGROUND

---
 .../org/wordpress/aztec/toolbar/ToolbarAction.kt |  2 +-
 .../drawable/format_bar_button_background.xml    | 16 ++++++++++++++++
 .../format_bar_button_background_disabled.xml    | 16 ++++++++++++++++
 .../format_bar_button_background_highlighted.xml | 16 ++++++++++++++++
 .../format_bar_button_background_selector.xml    | 12 ++++++++++++
 5 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 aztec/src/main/res/drawable/format_bar_button_background.xml
 create mode 100644 aztec/src/main/res/drawable/format_bar_button_background_disabled.xml
 create mode 100644 aztec/src/main/res/drawable/format_bar_button_background_highlighted.xml
 create mode 100644 aztec/src/main/res/drawable/format_bar_button_background_selector.xml

diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt b/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt
index 7a84e34cb..5a0ca4052 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt
@@ -36,7 +36,7 @@ enum class ToolbarAction constructor(
             setOf(AztecTextFormat.FORMAT_NONE)),
     BACKGROUND(
             R.id.format_bar_button_background,
-            R.drawable.format_bar_button_bold_selector,
+            R.drawable.format_bar_button_background_selector,
             ToolbarActionType.INLINE_STYLE,
             setOf(AztecTextFormat.FORMAT_BACKGROUND)),
     BOLD(
diff --git a/aztec/src/main/res/drawable/format_bar_button_background.xml b/aztec/src/main/res/drawable/format_bar_button_background.xml
new file mode 100644
index 000000000..d78ed9095
--- /dev/null
+++ b/aztec/src/main/res/drawable/format_bar_button_background.xml
@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="48dp"
+    android:height="48dp"
+    android:viewportWidth="48"
+    android:viewportHeight="48">
+  <group
+      android:pivotX="32"
+      android:pivotY="32"
+      android:scaleX="0.6"
+      android:scaleY="0.6">
+  <path
+      android:fillColor="?attr/toolbarIconNormalColor"
+      android:pathData="M33.12,17.88l-17.88,-17.88 -2.83,2.83 4.76,4.76 -10.29,10.29c-1.17,1.17 -1.17,3.07 0,4.24l11,11c0.58,0.59 1.35,0.88 2.12,0.88s1.54,-0.29 2.12,-0.88l11,-11c1.17,-1.17 1.17,-3.07 0,-4.24zM10.41,20l9.59,-9.58 9.59,9.58h-19.18zM38,23s-4,4.33 -4,7c0,2.21 1.79,4 4,4s4,-1.79 4,-4c0,-2.67 -4,-7 -4,-7z"/>
+  </group>
+
+</vector>
diff --git a/aztec/src/main/res/drawable/format_bar_button_background_disabled.xml b/aztec/src/main/res/drawable/format_bar_button_background_disabled.xml
new file mode 100644
index 000000000..f923b66c7
--- /dev/null
+++ b/aztec/src/main/res/drawable/format_bar_button_background_disabled.xml
@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="48dp"
+    android:height="48dp"
+    android:viewportWidth="48"
+    android:viewportHeight="48">
+  <group
+      android:pivotX="32"
+      android:pivotY="32"
+      android:scaleX="0.6"
+      android:scaleY="0.6">
+    <path
+        android:fillColor="?attr/toolbarIconDisabledColor"
+        android:pathData="M33.12,17.88l-17.88,-17.88 -2.83,2.83 4.76,4.76 -10.29,10.29c-1.17,1.17 -1.17,3.07 0,4.24l11,11c0.58,0.59 1.35,0.88 2.12,0.88s1.54,-0.29 2.12,-0.88l11,-11c1.17,-1.17 1.17,-3.07 0,-4.24zM10.41,20l9.59,-9.58 9.59,9.58h-19.18zM38,23s-4,4.33 -4,7c0,2.21 1.79,4 4,4s4,-1.79 4,-4c0,-2.67 -4,-7 -4,-7z"/>
+  </group>
+
+</vector>
diff --git a/aztec/src/main/res/drawable/format_bar_button_background_highlighted.xml b/aztec/src/main/res/drawable/format_bar_button_background_highlighted.xml
new file mode 100644
index 000000000..b1779895c
--- /dev/null
+++ b/aztec/src/main/res/drawable/format_bar_button_background_highlighted.xml
@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="48dp"
+    android:height="48dp"
+    android:viewportWidth="48"
+    android:viewportHeight="48">
+  <group
+      android:pivotX="32"
+      android:pivotY="32"
+      android:scaleX="0.6"
+      android:scaleY="0.6">
+    <path
+        android:fillColor="?attr/toolbarIconHighlightColor"
+        android:pathData="M33.12,17.88l-17.88,-17.88 -2.83,2.83 4.76,4.76 -10.29,10.29c-1.17,1.17 -1.17,3.07 0,4.24l11,11c0.58,0.59 1.35,0.88 2.12,0.88s1.54,-0.29 2.12,-0.88l11,-11c1.17,-1.17 1.17,-3.07 0,-4.24zM10.41,20l9.59,-9.58 9.59,9.58h-19.18zM38,23s-4,4.33 -4,7c0,2.21 1.79,4 4,4s4,-1.79 4,-4c0,-2.67 -4,-7 -4,-7z"/>
+  </group>
+
+</vector>
diff --git a/aztec/src/main/res/drawable/format_bar_button_background_selector.xml b/aztec/src/main/res/drawable/format_bar_button_background_selector.xml
new file mode 100644
index 000000000..c8ab76fce
--- /dev/null
+++ b/aztec/src/main/res/drawable/format_bar_button_background_selector.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<animated-selector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    tools:targetApi="lollipop">
+
+    <item android:drawable="@drawable/format_bar_button_background_disabled" android:state_enabled="false" />
+    <item android:drawable="@drawable/format_bar_button_background_highlighted" android:state_checked="true" />
+    <item android:drawable="@drawable/format_bar_button_background_highlighted" android:state_focused="true" />
+    <item android:drawable="@drawable/format_bar_button_background" />
+
+</animated-selector>

From 34175a81f97bf0fb3990b80bbb02edf58d6f290b Mon Sep 17 00:00:00 2001
From: Felps <felipe.valadares2@gmail.com>
Date: Tue, 26 May 2020 12:37:02 -0300
Subject: [PATCH 03/27] - Example of multiple bg colors

---
 app/src/main/kotlin/org/wordpress/aztec/demo/MainActivity.kt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/main/kotlin/org/wordpress/aztec/demo/MainActivity.kt b/app/src/main/kotlin/org/wordpress/aztec/demo/MainActivity.kt
index 7888e5f94..e40d1959a 100644
--- a/app/src/main/kotlin/org/wordpress/aztec/demo/MainActivity.kt
+++ b/app/src/main/kotlin/org/wordpress/aztec/demo/MainActivity.kt
@@ -90,7 +90,7 @@ open class MainActivity : AppCompatActivity(),
         private val BOLD = "<b>Bold</b><br>"
         private val ITALIC = "<i style=\"color:darkred\">Italic</i><br>"
         private val UNDERLINE = "<u style=\"color:lime\">Underline</u><br>"
-        private val BACKGROUND = "<span style=\"background-color:#087BDE\">BACKGROUND</span><br>"
+        private val BACKGROUND = "<span style=\"background-color:#087BDE\">BACK</span><span style=\"background-color:darkred\">GROUND</span><br>"
         private val STRIKETHROUGH = "<s style=\"color:#ff666666\" class=\"test\">Strikethrough</s><br>" // <s> or <strike> or <del>
         private val ORDERED = "<ol style=\"color:green\"><li>Ordered</li><li>should have color</li></ol>"
         private val ORDERED_WITH_START = "<h4>Start in 10 List:</h4>" +

From 6ae030b87a27fb1fb0b3687b0dbd9e18b09069b2 Mon Sep 17 00:00:00 2001
From: Felps <felipe.valadares2@gmail.com>
Date: Tue, 26 May 2020 13:27:26 -0300
Subject: [PATCH 04/27] - General improvements, removing code that is not
 necessary

---
 .../org/wordpress/aztec/demo/MainActivity.kt  |  2 +-
 .../aztec/plugins/CssBackgroundColorPlugin.kt | 55 +------------------
 .../aztec/source/CssStyleFormatter.kt         |  2 +-
 3 files changed, 3 insertions(+), 56 deletions(-)

diff --git a/app/src/main/kotlin/org/wordpress/aztec/demo/MainActivity.kt b/app/src/main/kotlin/org/wordpress/aztec/demo/MainActivity.kt
index e40d1959a..dff12c973 100644
--- a/app/src/main/kotlin/org/wordpress/aztec/demo/MainActivity.kt
+++ b/app/src/main/kotlin/org/wordpress/aztec/demo/MainActivity.kt
@@ -90,7 +90,7 @@ open class MainActivity : AppCompatActivity(),
         private val BOLD = "<b>Bold</b><br>"
         private val ITALIC = "<i style=\"color:darkred\">Italic</i><br>"
         private val UNDERLINE = "<u style=\"color:lime\">Underline</u><br>"
-        private val BACKGROUND = "<span style=\"background-color:#087BDE\">BACK</span><span style=\"background-color:darkred\">GROUND</span><br>"
+        private val BACKGROUND = "<span style=\"background-color:#087BDE\">BACK<b>GROUND</b></span><br>"
         private val STRIKETHROUGH = "<s style=\"color:#ff666666\" class=\"test\">Strikethrough</s><br>" // <s> or <strike> or <del>
         private val ORDERED = "<ol style=\"color:green\"><li>Ordered</li><li>should have color</li></ol>"
         private val ORDERED_WITH_START = "<h4>Start in 10 List:</h4>" +
diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/plugins/CssBackgroundColorPlugin.kt b/aztec/src/main/kotlin/org/wordpress/aztec/plugins/CssBackgroundColorPlugin.kt
index b87ca5226..a80f1197c 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/plugins/CssBackgroundColorPlugin.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/plugins/CssBackgroundColorPlugin.kt
@@ -1,70 +1,17 @@
 package org.wordpress.aztec.plugins
 
-import android.text.Spannable
 import android.text.SpannableStringBuilder
-import android.text.Spanned
-import android.text.style.BackgroundColorSpan
-import org.wordpress.aztec.plugins.html2visual.ISpanPostprocessor
 import org.wordpress.aztec.plugins.visual2html.ISpanPreprocessor
 import org.wordpress.aztec.source.CssStyleFormatter
 import org.wordpress.aztec.spans.AztecBackgroundColorSpan
-import org.wordpress.aztec.spans.HiddenHtmlSpan
-import org.wordpress.aztec.spans.IAztecNestable
-import org.wordpress.aztec.util.ColorConverter
-import org.wordpress.aztec.util.SpanWrapper
 
-class CssBackgroundColorPlugin: ISpanPostprocessor, ISpanPreprocessor {
-
-    private val SPAN_TAG = "span"
+class CssBackgroundColorPlugin: ISpanPreprocessor {
 
     override fun beforeSpansProcessed(spannable: SpannableStringBuilder) {
         spannable.getSpans(0, spannable.length, AztecBackgroundColorSpan::class.java).forEach {
             if (!CssStyleFormatter.containsStyleAttribute(it.attributes, CssStyleFormatter.CSS_BACKGROUND_COLOR_ATTRIBUTE)) {
                 CssStyleFormatter.addStyleAttribute(it.attributes, CssStyleFormatter.CSS_BACKGROUND_COLOR_ATTRIBUTE, it.bgColorHex)
             }
-
-            val start = spannable.getSpanStart(it)
-            val nesting = IAztecNestable.getNestingLevelAt(spannable, start) + 1
-
-            val backgroundSpan = HiddenHtmlSpan(SPAN_TAG, it.attributes, nesting)
-
-            spannable.setSpan(backgroundSpan, start, spannable.getSpanEnd(it), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
-            spannable.removeSpan(it)
-
-            // if a parent of the new hidden span is also a <span> we can merge them
-            IAztecNestable.getParent(spannable, SpanWrapper(spannable, backgroundSpan))?.let {
-                if (it.span is HiddenHtmlSpan) {
-                    val hiddenSpan = it.span as HiddenHtmlSpan
-                    if (hiddenSpan.TAG == SPAN_TAG) {
-                        val parentStyle = hiddenSpan.attributes.getValue(CssStyleFormatter.STYLE_ATTRIBUTE)
-                        val childStyle = backgroundSpan.attributes.getValue(CssStyleFormatter.STYLE_ATTRIBUTE)
-                        if (parentStyle != null) {
-                            hiddenSpan.attributes.setValue(CssStyleFormatter.STYLE_ATTRIBUTE, CssStyleFormatter.mergeStyleAttributes(parentStyle, childStyle))
-                        } else {
-                            //adding background to existing span tag
-                            hiddenSpan.attributes.setValue(CssStyleFormatter.STYLE_ATTRIBUTE, childStyle)
-                        }
-
-                        // remove the extra child span
-                        spannable.removeSpan(backgroundSpan)
-                    }
-                }
-            }
-        }
-    }
-
-    override fun afterSpansProcessed(spannable: Spannable) {
-        spannable.getSpans(0, spannable.length, HiddenHtmlSpan::class.java).forEach {
-            if (it.TAG == SPAN_TAG && CssStyleFormatter.containsStyleAttribute(it.attributes, CssStyleFormatter.CSS_BACKGROUND_COLOR_ATTRIBUTE)) {
-                val att = CssStyleFormatter.getStyleAttribute(it.attributes, CssStyleFormatter.CSS_BACKGROUND_COLOR_ATTRIBUTE)
-                val color = ColorConverter.getColorInt(att)
-                CssStyleFormatter.removeStyleAttribute(it.attributes, CssStyleFormatter.CSS_BACKGROUND_COLOR_ATTRIBUTE)
-                spannable.setSpan(BackgroundColorSpan(color), spannable.getSpanStart(it), spannable.getSpanEnd(it), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
-
-                if (it.attributes.isEmpty()) {
-                    spannable.removeSpan(it)
-                }
-            }
         }
     }
 }
diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/source/CssStyleFormatter.kt b/aztec/src/main/kotlin/org/wordpress/aztec/source/CssStyleFormatter.kt
index f8100eaad..563d72579 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/source/CssStyleFormatter.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/source/CssStyleFormatter.kt
@@ -31,7 +31,7 @@ class CssStyleFormatter {
 
         /**
          * Check the provided [attributedSpan] for the *style* attribute. If found, parse out the
-         * supported CSS style properties and use the results to create a [ForegroundColorSpan],
+         * supported CSS style properties and use the results to create a [ForegroundColorSpan] and/or [BackgroundColorSpan]
          * then add it to the provided [text].
          *
          * Must be called immediately after the base [IAztecAttributedSpan] has been processed.

From cc8533db901c41599d41f28593464c1e16d3aa32 Mon Sep 17 00:00:00 2001
From: Felps <felipe.valadares2@gmail.com>
Date: Tue, 26 May 2020 17:10:40 -0300
Subject: [PATCH 05/27] - Fix bug when handling with multiple bg colors

---
 .../aztec/formatting/InlineFormatter.kt         | 17 ++++++++++++-----
 .../aztec/plugins/CssBackgroundColorPlugin.kt   |  2 +-
 .../aztec/spans/AztecBackgroundColorSpan.kt     | 10 ++++++----
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt b/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt
index 4d1cf57eb..a7e5d8ec9 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt
@@ -2,6 +2,7 @@ package org.wordpress.aztec.formatting
 
 import android.graphics.Typeface
 import android.text.Spanned
+import android.text.style.BackgroundColorSpan
 import android.text.style.ForegroundColorSpan
 import android.text.style.StyleSpan
 import org.wordpress.android.util.AppLog
@@ -24,7 +25,6 @@ import org.wordpress.aztec.spans.AztecStyleStrongSpan
 import org.wordpress.aztec.spans.AztecUnderlineSpan
 import org.wordpress.aztec.spans.IAztecInlineSpan
 import org.wordpress.aztec.watchers.TextChangedEvent
-import java.lang.String
 import java.util.ArrayList
 
 /**
@@ -250,6 +250,11 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle) : AztecFormat
         spans.forEach {
             editableText.removeSpan(it)
         }
+
+        val bgSpans = editableText.getSpans(start, end, BackgroundColorSpan::class.java)
+        bgSpans.forEach {
+            editableText.removeSpan(it)
+        }
     }
 
     fun removeInlineStyle(textFormat: ITextFormat, start: Int = selectionStart, end: Int = selectionEnd) {
@@ -261,6 +266,10 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle) : AztecFormat
         if (firstSpan is StyleSpan && secondSpan is StyleSpan) {
             return firstSpan.style == secondSpan.style
         }
+        // special check for BackgroundSpan
+        if (firstSpan is BackgroundColorSpan && secondSpan is BackgroundColorSpan) {
+            return firstSpan.backgroundColor == secondSpan.backgroundColor
+        }
 
         return firstSpan.javaClass == secondSpan.javaClass
     }
@@ -356,10 +365,8 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle) : AztecFormat
             AztecTextFormat.FORMAT_STRIKETHROUGH -> return AztecStrikethroughSpan()
             AztecTextFormat.FORMAT_UNDERLINE -> return AztecUnderlineSpan()
             AztecTextFormat.FORMAT_CODE -> return AztecCodeSpan(codeStyle)
-            AztecTextFormat.FORMAT_BACKGROUND -> {
-                val color = backgroundSpanColor ?: R.color.background
-                return AztecBackgroundColorSpan(color, String.format("#%06X", 0xFFFFFF and color))
-            }
+            AztecTextFormat.FORMAT_BACKGROUND -> return AztecBackgroundColorSpan(backgroundSpanColor ?: R.color.background)
+
             else -> return AztecStyleSpan(Typeface.NORMAL)
         }
     }
diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/plugins/CssBackgroundColorPlugin.kt b/aztec/src/main/kotlin/org/wordpress/aztec/plugins/CssBackgroundColorPlugin.kt
index a80f1197c..1190d1a6b 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/plugins/CssBackgroundColorPlugin.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/plugins/CssBackgroundColorPlugin.kt
@@ -10,7 +10,7 @@ class CssBackgroundColorPlugin: ISpanPreprocessor {
     override fun beforeSpansProcessed(spannable: SpannableStringBuilder) {
         spannable.getSpans(0, spannable.length, AztecBackgroundColorSpan::class.java).forEach {
             if (!CssStyleFormatter.containsStyleAttribute(it.attributes, CssStyleFormatter.CSS_BACKGROUND_COLOR_ATTRIBUTE)) {
-                CssStyleFormatter.addStyleAttribute(it.attributes, CssStyleFormatter.CSS_BACKGROUND_COLOR_ATTRIBUTE, it.bgColorHex)
+                CssStyleFormatter.addStyleAttribute(it.attributes, CssStyleFormatter.CSS_BACKGROUND_COLOR_ATTRIBUTE, it.getColorHex())
             }
         }
     }
diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/spans/AztecBackgroundColorSpan.kt b/aztec/src/main/kotlin/org/wordpress/aztec/spans/AztecBackgroundColorSpan.kt
index 8df1fcb3f..f8bb150c8 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/spans/AztecBackgroundColorSpan.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/spans/AztecBackgroundColorSpan.kt
@@ -4,12 +4,14 @@ import android.text.style.BackgroundColorSpan
 import org.wordpress.aztec.AztecAttributes
 
 class AztecBackgroundColorSpan(
-        bgColor: Int,
-        val bgColorHex: String,
+        val color: Int,
         tag: String = "span",
         override var attributes: AztecAttributes = AztecAttributes()
-) : BackgroundColorSpan(bgColor), IAztecInlineSpan {
-    constructor(color: Int) : this(color, java.lang.String.format("#%06X", 0xFFFFFF and color))
+) : BackgroundColorSpan(color), IAztecInlineSpan {
+
+    fun getColorHex(): String {
+        return java.lang.String.format("#%06X", 0xFFFFFF and color)
+    }
 
     override val TAG = tag
 }
\ No newline at end of file

From ded1c56cf62f159d553d6afe0c3e37e4b91c2e4a Mon Sep 17 00:00:00 2001
From: Felps <felipe.valadares2@gmail.com>
Date: Tue, 26 May 2020 18:51:46 -0300
Subject: [PATCH 06/27] - Fix ktlint issue

---
 .../org/wordpress/aztec/plugins/CssBackgroundColorPlugin.kt     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/plugins/CssBackgroundColorPlugin.kt b/aztec/src/main/kotlin/org/wordpress/aztec/plugins/CssBackgroundColorPlugin.kt
index 1190d1a6b..b002063d3 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/plugins/CssBackgroundColorPlugin.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/plugins/CssBackgroundColorPlugin.kt
@@ -5,7 +5,7 @@ import org.wordpress.aztec.plugins.visual2html.ISpanPreprocessor
 import org.wordpress.aztec.source.CssStyleFormatter
 import org.wordpress.aztec.spans.AztecBackgroundColorSpan
 
-class CssBackgroundColorPlugin: ISpanPreprocessor {
+class CssBackgroundColorPlugin : ISpanPreprocessor {
 
     override fun beforeSpansProcessed(spannable: SpannableStringBuilder) {
         spannable.getSpans(0, spannable.length, AztecBackgroundColorSpan::class.java).forEach {

From 536d95d232c9fced91797d515377af46e5ccbbb2 Mon Sep 17 00:00:00 2001
From: Felps <felipe.valadares2@gmail.com>
Date: Tue, 30 Jun 2020 15:24:46 -0300
Subject: [PATCH 07/27] - Fix bug
 https://github.com/wordpress-mobile/AztecEditor-Android/issues/914

---
 .../wordpress/aztec/formatting/InlineFormatter.kt | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt b/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt
index a7e5d8ec9..6c8380807 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt
@@ -3,7 +3,6 @@ package org.wordpress.aztec.formatting
 import android.graphics.Typeface
 import android.text.Spanned
 import android.text.style.BackgroundColorSpan
-import android.text.style.ForegroundColorSpan
 import android.text.style.StyleSpan
 import org.wordpress.android.util.AppLog
 import org.wordpress.aztec.AztecAttributes
@@ -228,8 +227,6 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle) : AztecFormat
                 editableText.removeSpan(it)
             }
         }
-        // remove the CSS style span
-        removeInlineCssStyle()
 
         list.forEach {
             if (it.isValid) {
@@ -245,18 +242,6 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle) : AztecFormat
         joinStyleSpans(start, end)
     }
 
-    fun removeInlineCssStyle(start: Int = selectionStart, end: Int = selectionEnd) {
-        val spans = editableText.getSpans(start, end, ForegroundColorSpan::class.java)
-        spans.forEach {
-            editableText.removeSpan(it)
-        }
-
-        val bgSpans = editableText.getSpans(start, end, BackgroundColorSpan::class.java)
-        bgSpans.forEach {
-            editableText.removeSpan(it)
-        }
-    }
-
     fun removeInlineStyle(textFormat: ITextFormat, start: Int = selectionStart, end: Int = selectionEnd) {
         removeInlineStyle(makeInlineSpan(textFormat), start, end)
     }

From c6a1bcf8f65613ba70fcdeacd58d97f70ddcea4f Mon Sep 17 00:00:00 2001
From: Felps <felipe.valadares2@gmail.com>
Date: Thu, 2 Jul 2020 20:25:46 -0300
Subject: [PATCH 08/27] - Improved bg color implementation, fix bugs when using
 multiple background colors

---
 .../aztec/formatting/InlineFormatter.kt       | 40 +++++++++++++++----
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt b/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt
index 6c8380807..615cc88cc 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt
@@ -2,7 +2,6 @@ package org.wordpress.aztec.formatting
 
 import android.graphics.Typeface
 import android.text.Spanned
-import android.text.style.BackgroundColorSpan
 import android.text.style.StyleSpan
 import org.wordpress.android.util.AppLog
 import org.wordpress.aztec.AztecAttributes
@@ -116,6 +115,11 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle) : AztecFormat
             return
         }
 
+        if (textFormat == AztecTextFormat.FORMAT_BACKGROUND){
+            //clear previous background before applying a new one to avoid problems when using multiple bg colors
+            removeBackgroundInSelection(selectionStart, selectionEnd)
+        }
+
         var precedingSpan: IAztecInlineSpan? = null
         var followingSpan: IAztecInlineSpan? = null
 
@@ -134,10 +138,10 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle) : AztecFormat
 
                 if (spanEnd > start) {
                     // ensure css style is applied
-                    (precedingSpan as IAztecInlineSpan).applyInlineStyleAttributes(editableText, start, end)
+                    spanToApply.applyInlineStyleAttributes(editableText, start, end)
                     return@applyInlineStyle // we are adding text inside span - no need to do anything special
                 } else {
-                    applySpan(precedingSpan as IAztecInlineSpan, spanStart, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+                    applySpan(spanToApply, spanStart, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
                 }
             }
         }
@@ -153,8 +157,7 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle) : AztecFormat
 
             if (followingSpan != null) {
                 val spanEnd = editableText.getSpanEnd(followingSpan)
-                applySpan(followingSpan as IAztecInlineSpan, start, spanEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
-                editableText.setSpan(followingSpan, start, spanEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+                applySpan(spanToApply, start, spanEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
             }
         }
 
@@ -177,10 +180,27 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle) : AztecFormat
 
             applySpan(spanToApply, start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
         }
-
         joinStyleSpans(start, end)
     }
 
+    private fun removeBackgroundInSelection(selStart: Int, selEnd: Int) {
+        val spans = editableText.getSpans(selStart, selEnd, AztecBackgroundColorSpan::class.java)
+        spans.forEach { span ->
+            if (span != null) {
+                val currentSpanStart = editableText.getSpanStart(span)
+                val currentSpanEnd = editableText.getSpanEnd(span)
+                val color = span.backgroundColor
+                editableText.removeSpan(span)
+                if (selEnd < currentSpanEnd) {
+                    editableText.setSpan(AztecBackgroundColorSpan(color), selEnd, currentSpanEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+                }
+                if (selStart > currentSpanStart) {
+                    editableText.setSpan(AztecBackgroundColorSpan(color), currentSpanStart, selStart, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+                }
+            }
+        }
+    }
+
     private fun applySpan(span: IAztecInlineSpan, start: Int, end: Int, type: Int) {
         if (start > end || start < 0 || end > editableText.length) {
             // If an external logger is available log the error there.
@@ -218,6 +238,11 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle) : AztecFormat
     fun removeInlineStyle(spanToRemove: IAztecInlineSpan, start: Int = selectionStart, end: Int = selectionEnd) {
         val textFormat = spanToTextFormat(spanToRemove) ?: return
 
+        if (textFormat == AztecTextFormat.FORMAT_BACKGROUND){
+           // removeBackgroundInSelection(start, end)
+         //   return
+        }
+
         val spans = editableText.getSpans(start, end, IAztecInlineSpan::class.java)
         val list = ArrayList<AztecPart>()
 
@@ -252,7 +277,7 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle) : AztecFormat
             return firstSpan.style == secondSpan.style
         }
         // special check for BackgroundSpan
-        if (firstSpan is BackgroundColorSpan && secondSpan is BackgroundColorSpan) {
+        if (firstSpan is AztecBackgroundColorSpan && secondSpan is AztecBackgroundColorSpan) {
             return firstSpan.backgroundColor == secondSpan.backgroundColor
         }
 
@@ -261,6 +286,7 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle) : AztecFormat
 
     // TODO: Check if there is more efficient way to tidy spans
     fun joinStyleSpans(start: Int, end: Int) {
+
         // joins spans on the left
         if (start > 1) {
             val spansInSelection = editableText.getSpans(start, end, IAztecInlineSpan::class.java)

From 3213bc2c2f6393167b920756556293681ce2c8b5 Mon Sep 17 00:00:00 2001
From: Felps <felipe.valadares2@gmail.com>
Date: Thu, 2 Jul 2020 20:29:18 -0300
Subject: [PATCH 09/27] - Fix lint errors

---
 .../org/wordpress/aztec/formatting/InlineFormatter.kt      | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt b/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt
index 615cc88cc..e631f819b 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt
@@ -115,7 +115,7 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle) : AztecFormat
             return
         }
 
-        if (textFormat == AztecTextFormat.FORMAT_BACKGROUND){
+        if (textFormat == AztecTextFormat.FORMAT_BACKGROUND) {
             //clear previous background before applying a new one to avoid problems when using multiple bg colors
             removeBackgroundInSelection(selectionStart, selectionEnd)
         }
@@ -238,11 +238,6 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle) : AztecFormat
     fun removeInlineStyle(spanToRemove: IAztecInlineSpan, start: Int = selectionStart, end: Int = selectionEnd) {
         val textFormat = spanToTextFormat(spanToRemove) ?: return
 
-        if (textFormat == AztecTextFormat.FORMAT_BACKGROUND){
-           // removeBackgroundInSelection(start, end)
-         //   return
-        }
-
         val spans = editableText.getSpans(start, end, IAztecInlineSpan::class.java)
         val list = ArrayList<AztecPart>()
 

From a96ef7cdbd64f56c9a5ef8a81039d43dca2d2694 Mon Sep 17 00:00:00 2001
From: Felps <felipe.valadares2@gmail.com>
Date: Thu, 2 Jul 2020 20:42:04 -0300
Subject: [PATCH 10/27] -

---
 .../main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt b/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt
index 5a0ca4052..e58514384 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt
@@ -48,7 +48,7 @@ enum class ToolbarAction constructor(
             R.id.format_bar_button_italic,
             R.drawable.format_bar_button_italic_selector,
             ToolbarActionType.INLINE_STYLE,
-            setOf(AztecTextFormat.FORMAT_EMPHASIS, AztecTextFormat.FORMAT_ITALIC)),
+            setOf(AztecTextFormat.FORMAT_ITALIC, AztecTextFormat.FORMAT_EMPHASIS)),
     STRIKETHROUGH(
             R.id.format_bar_button_strikethrough,
             R.drawable.format_bar_button_strikethrough_selector,

From ba6962ded866506670d747bea9a28a9fe743fce6 Mon Sep 17 00:00:00 2001
From: Felps <felipe.valadares2@gmail.com>
Date: Thu, 2 Jul 2020 20:47:22 -0300
Subject: [PATCH 11/27] - Fix broken test, changing to 'em' because it comes
 first on the italic action

---
 .../main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt    | 2 +-
 aztec/src/test/kotlin/org/wordpress/aztec/AztecToolbarTest.kt   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt b/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt
index e58514384..5a0ca4052 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt
@@ -48,7 +48,7 @@ enum class ToolbarAction constructor(
             R.id.format_bar_button_italic,
             R.drawable.format_bar_button_italic_selector,
             ToolbarActionType.INLINE_STYLE,
-            setOf(AztecTextFormat.FORMAT_ITALIC, AztecTextFormat.FORMAT_EMPHASIS)),
+            setOf(AztecTextFormat.FORMAT_EMPHASIS, AztecTextFormat.FORMAT_ITALIC)),
     STRIKETHROUGH(
             R.id.format_bar_button_strikethrough,
             R.drawable.format_bar_button_strikethrough_selector,
diff --git a/aztec/src/test/kotlin/org/wordpress/aztec/AztecToolbarTest.kt b/aztec/src/test/kotlin/org/wordpress/aztec/AztecToolbarTest.kt
index d6156c76c..ee6951228 100644
--- a/aztec/src/test/kotlin/org/wordpress/aztec/AztecToolbarTest.kt
+++ b/aztec/src/test/kotlin/org/wordpress/aztec/AztecToolbarTest.kt
@@ -549,7 +549,7 @@ class AztecToolbarTest {
         Assert.assertFalse(italicButton.isChecked)
 
         italicButton.performClick()
-        Assert.assertEquals("<b>bol</b><b><i>ditalic</i></b>", editText.toHtml())
+        Assert.assertEquals("<b>bol</b><b><em>ditalic</em></b>", editText.toHtml())
     }
 
     /**

From a95d50e93e6fd0095b121c20fc7bb1389d6c24b1 Mon Sep 17 00:00:00 2001
From: Felps <felipe.valadares2@gmail.com>
Date: Fri, 3 Jul 2020 14:35:01 -0300
Subject: [PATCH 12/27] - Removing bg color button from toolbar, Added
 BackgroundColorButton as plugin so that could be optional

---
 .../aztec/plugins/BackgroundColorButton.kt    | 28 +++++++++++++++++++
 .../wordpress/aztec/toolbar/ToolbarAction.kt  |  2 +-
 .../res/layout/aztec_format_bar_advanced.xml  |  8 ------
 .../res/layout/aztec_format_bar_basic.xml     |  8 ------
 .../res/layout/background_color_button.xml    | 10 +++++++
 aztec/src/main/res/values/strings.xml         |  2 +-
 6 files changed, 40 insertions(+), 18 deletions(-)
 create mode 100644 aztec/src/main/kotlin/org/wordpress/aztec/plugins/BackgroundColorButton.kt
 create mode 100644 aztec/src/main/res/layout/background_color_button.xml

diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/plugins/BackgroundColorButton.kt b/aztec/src/main/kotlin/org/wordpress/aztec/plugins/BackgroundColorButton.kt
new file mode 100644
index 000000000..132bfb487
--- /dev/null
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/plugins/BackgroundColorButton.kt
@@ -0,0 +1,28 @@
+package org.wordpress.aztec.plugins
+
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import org.wordpress.aztec.AztecText
+import org.wordpress.aztec.R
+import org.wordpress.aztec.toolbar.AztecToolbar
+import org.wordpress.aztec.toolbar.IToolbarAction
+import org.wordpress.aztec.toolbar.ToolbarAction
+
+class BackgroundColorButton(val visualEditor: AztecText) : IToolbarButton {
+
+    override val action: IToolbarAction = ToolbarAction.BACKGROUND
+    override val context = visualEditor.context!!
+
+    override fun toggle() {
+        visualEditor.toggleFormatting(action.textFormats.first())
+    }
+
+    override fun inflateButton(parent: ViewGroup) {
+        LayoutInflater.from(context).inflate(R.layout.background_color_button, parent)
+    }
+
+    override fun toolbarStateAboutToChange(toolbar: AztecToolbar, enable: Boolean) {
+        toolbar.findViewById<View>(action.buttonId).isEnabled = enable
+    }
+}
\ No newline at end of file
diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt b/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt
index 5a0ca4052..f4804eae1 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt
@@ -35,7 +35,7 @@ enum class ToolbarAction constructor(
             ToolbarActionType.BLOCK_STYLE,
             setOf(AztecTextFormat.FORMAT_NONE)),
     BACKGROUND(
-            R.id.format_bar_button_background,
+            R.id.button_background_color,
             R.drawable.format_bar_button_background_selector,
             ToolbarActionType.INLINE_STYLE,
             setOf(AztecTextFormat.FORMAT_BACKGROUND)),
diff --git a/aztec/src/main/res/layout/aztec_format_bar_advanced.xml b/aztec/src/main/res/layout/aztec_format_bar_advanced.xml
index 9268086bc..d271644eb 100644
--- a/aztec/src/main/res/layout/aztec_format_bar_advanced.xml
+++ b/aztec/src/main/res/layout/aztec_format_bar_advanced.xml
@@ -203,14 +203,6 @@
                                 android:contentDescription="@string/format_bar_description_quote">
                             </org.wordpress.aztec.toolbar.RippleToggleButton>
 
-                            <org.wordpress.aztec.toolbar.RippleToggleButton
-                                android:id="@+id/format_bar_button_background"
-                                style="@style/FormatBarButton"
-                                android:layout_width="wrap_content"
-                                android:layout_height="fill_parent"
-                                android:contentDescription="@string/format_bar_description_background">
-                            </org.wordpress.aztec.toolbar.RippleToggleButton>
-
                             <org.wordpress.aztec.toolbar.RippleToggleButton
                                 android:id="@+id/format_bar_button_bold"
                                 style="@style/FormatBarButton"
diff --git a/aztec/src/main/res/layout/aztec_format_bar_basic.xml b/aztec/src/main/res/layout/aztec_format_bar_basic.xml
index 5316c939e..415d5d4af 100644
--- a/aztec/src/main/res/layout/aztec_format_bar_basic.xml
+++ b/aztec/src/main/res/layout/aztec_format_bar_basic.xml
@@ -113,14 +113,6 @@
                             android:contentDescription="@string/format_bar_description_quote">
                         </org.wordpress.aztec.toolbar.RippleToggleButton>
 
-                        <org.wordpress.aztec.toolbar.RippleToggleButton
-                            android:id="@+id/format_bar_button_background"
-                            style="@style/FormatBarButton"
-                            android:layout_width="wrap_content"
-                            android:layout_height="fill_parent"
-                            android:contentDescription="@string/format_bar_description_background">
-                        </org.wordpress.aztec.toolbar.RippleToggleButton>
-
                         <org.wordpress.aztec.toolbar.RippleToggleButton
                             android:id="@+id/format_bar_button_bold"
                             style="@style/FormatBarButton"
diff --git a/aztec/src/main/res/layout/background_color_button.xml b/aztec/src/main/res/layout/background_color_button.xml
new file mode 100644
index 000000000..83a2efa8f
--- /dev/null
+++ b/aztec/src/main/res/layout/background_color_button.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<org.wordpress.aztec.toolbar.RippleToggleButton
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/button_background_color"
+    style="@style/FormatBarButton"
+    android:layout_width="wrap_content"
+    android:layout_height="fill_parent"
+    android:contentDescription="@string/format_bar_description_background">
+</org.wordpress.aztec.toolbar.RippleToggleButton>
+
diff --git a/aztec/src/main/res/values/strings.xml b/aztec/src/main/res/values/strings.xml
index 8176f05fb..1104f8f97 100644
--- a/aztec/src/main/res/values/strings.xml
+++ b/aztec/src/main/res/values/strings.xml
@@ -19,7 +19,7 @@
     <!-- FORMAT -->
     <string name="format_bar_description_heading">Heading</string>
     <string name="format_bar_description_bold">Bold</string>
-    <string name="format_bar_description_background">Background</string>
+    <string name="format_bar_description_background">Background Color</string>
     <string name="format_bar_description_italic">Italic</string>
     <string name="format_bar_description_underline">Underline</string>
     <string name="format_bar_description_strike">Strikethrough</string>

From 936884ed995fd067915e5ed0cd499ee1f251ae8a Mon Sep 17 00:00:00 2001
From: Felps <felipe.valadares2@gmail.com>
Date: Fri, 3 Jul 2020 15:01:25 -0300
Subject: [PATCH 13/27] - Removing bg color from ToolbarAction

---
 .../wordpress/aztec/plugins/BackgroundColorButton.kt | 12 ++++++++++--
 .../org/wordpress/aztec/toolbar/ToolbarAction.kt     |  5 -----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/plugins/BackgroundColorButton.kt b/aztec/src/main/kotlin/org/wordpress/aztec/plugins/BackgroundColorButton.kt
index 132bfb487..5a53ccd65 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/plugins/BackgroundColorButton.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/plugins/BackgroundColorButton.kt
@@ -4,14 +4,15 @@ import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
 import org.wordpress.aztec.AztecText
+import org.wordpress.aztec.AztecTextFormat
 import org.wordpress.aztec.R
 import org.wordpress.aztec.toolbar.AztecToolbar
 import org.wordpress.aztec.toolbar.IToolbarAction
-import org.wordpress.aztec.toolbar.ToolbarAction
+import org.wordpress.aztec.toolbar.ToolbarActionType
 
 class BackgroundColorButton(val visualEditor: AztecText) : IToolbarButton {
 
-    override val action: IToolbarAction = ToolbarAction.BACKGROUND
+    override val action: IToolbarAction = BackgroundColorAction()
     override val context = visualEditor.context!!
 
     override fun toggle() {
@@ -25,4 +26,11 @@ class BackgroundColorButton(val visualEditor: AztecText) : IToolbarButton {
     override fun toolbarStateAboutToChange(toolbar: AztecToolbar, enable: Boolean) {
         toolbar.findViewById<View>(action.buttonId).isEnabled = enable
     }
+
+    inner class BackgroundColorAction : IToolbarAction {
+        override val buttonId = R.id.button_background_color
+        override val actionType = ToolbarActionType.INLINE_STYLE
+        override val textFormats = setOf(AztecTextFormat.FORMAT_BACKGROUND)
+        override val buttonDrawableRes = R.drawable.format_bar_button_background_selector
+    }
 }
\ No newline at end of file
diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt b/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt
index f4804eae1..b987a3d38 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt
@@ -34,11 +34,6 @@ enum class ToolbarAction constructor(
             R.drawable.format_bar_button_ul_selector,
             ToolbarActionType.BLOCK_STYLE,
             setOf(AztecTextFormat.FORMAT_NONE)),
-    BACKGROUND(
-            R.id.button_background_color,
-            R.drawable.format_bar_button_background_selector,
-            ToolbarActionType.INLINE_STYLE,
-            setOf(AztecTextFormat.FORMAT_BACKGROUND)),
     BOLD(
             R.id.format_bar_button_bold,
             R.drawable.format_bar_button_bold_selector,

From 40503ef14439192b17ba294b39ea0a9c35a87c0f Mon Sep 17 00:00:00 2001
From: Felps <felipe.valadares2@gmail.com>
Date: Fri, 3 Jul 2020 16:03:52 -0300
Subject: [PATCH 14/27] - Fix highlight color not appearing when
 BackgroundColorSpan is applied

---
 .../main/kotlin/org/wordpress/aztec/demo/MainActivity.kt    | 4 +++-
 .../org/wordpress/aztec/spans/AztecBackgroundColorSpan.kt   | 6 ++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/src/main/kotlin/org/wordpress/aztec/demo/MainActivity.kt b/app/src/main/kotlin/org/wordpress/aztec/demo/MainActivity.kt
index dff12c973..d9980ea0d 100644
--- a/app/src/main/kotlin/org/wordpress/aztec/demo/MainActivity.kt
+++ b/app/src/main/kotlin/org/wordpress/aztec/demo/MainActivity.kt
@@ -45,6 +45,7 @@ import org.wordpress.aztec.IHistoryListener
 import org.wordpress.aztec.ITextFormat
 import org.wordpress.aztec.glideloader.GlideImageLoader
 import org.wordpress.aztec.glideloader.GlideVideoThumbnailLoader
+import org.wordpress.aztec.plugins.BackgroundColorButton
 import org.wordpress.aztec.plugins.CssBackgroundColorPlugin
 import org.wordpress.aztec.plugins.CssUnderlinePlugin
 import org.wordpress.aztec.plugins.IMediaToolbarButton
@@ -462,12 +463,13 @@ open class MainActivity : AppCompatActivity(),
             aztec.visualEditor.setCalypsoMode(false)
             aztec.sourceEditor?.setCalypsoMode(false)
 
-            aztec.visualEditor.setBackgroundSpanColor(resources.getColor(R.color.blue_wordpress))
+            aztec.visualEditor.setBackgroundSpanColor(resources.getColor(R.color.blue_dark))
 
             aztec.sourceEditor?.displayStyledAndFormattedHtml(EXAMPLE)
 
             aztec.addPlugin(CssUnderlinePlugin())
             aztec.addPlugin(CssBackgroundColorPlugin())
+            aztec.addPlugin(BackgroundColorButton(visualEditor))
         }
 
         if (savedInstanceState == null) {
diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/spans/AztecBackgroundColorSpan.kt b/aztec/src/main/kotlin/org/wordpress/aztec/spans/AztecBackgroundColorSpan.kt
index f8bb150c8..c1079fcaa 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/spans/AztecBackgroundColorSpan.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/spans/AztecBackgroundColorSpan.kt
@@ -1,5 +1,7 @@
 package org.wordpress.aztec.spans
 
+import android.graphics.Color
+import android.text.TextPaint
 import android.text.style.BackgroundColorSpan
 import org.wordpress.aztec.AztecAttributes
 
@@ -13,5 +15,9 @@ class AztecBackgroundColorSpan(
         return java.lang.String.format("#%06X", 0xFFFFFF and color)
     }
 
+    override fun updateDrawState(textPaint: TextPaint) {
+        textPaint.bgColor =  Color.argb(220, Color.red(color), Color.green(color), Color.blue(color))
+    }
+
     override val TAG = tag
 }
\ No newline at end of file

From c8765478dc25e218761d4203db5e6e6033171d9a Mon Sep 17 00:00:00 2001
From: Felps <felipe.valadares2@gmail.com>
Date: Fri, 3 Jul 2020 16:07:15 -0300
Subject: [PATCH 15/27] - Fix lint error, added alpha for custom
 implementations on AztecBackgroundColorSpan

---
 .../org/wordpress/aztec/spans/AztecBackgroundColorSpan.kt      | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/spans/AztecBackgroundColorSpan.kt b/aztec/src/main/kotlin/org/wordpress/aztec/spans/AztecBackgroundColorSpan.kt
index c1079fcaa..0aa4f5aaa 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/spans/AztecBackgroundColorSpan.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/spans/AztecBackgroundColorSpan.kt
@@ -7,6 +7,7 @@ import org.wordpress.aztec.AztecAttributes
 
 class AztecBackgroundColorSpan(
         val color: Int,
+        val alpha: Int = 220,
         tag: String = "span",
         override var attributes: AztecAttributes = AztecAttributes()
 ) : BackgroundColorSpan(color), IAztecInlineSpan {
@@ -16,7 +17,7 @@ class AztecBackgroundColorSpan(
     }
 
     override fun updateDrawState(textPaint: TextPaint) {
-        textPaint.bgColor =  Color.argb(220, Color.red(color), Color.green(color), Color.blue(color))
+        textPaint.bgColor = Color.argb(alpha, Color.red(color), Color.green(color), Color.blue(color))
     }
 
     override val TAG = tag

From 3a99a6eb3793e15c8c07224e77d8e08b81dcf27a Mon Sep 17 00:00:00 2001
From: Felps <felipe.valadares2@gmail.com>
Date: Mon, 6 Jul 2020 12:43:21 -0300
Subject: [PATCH 16/27] - Added possibility to clear references from toolbar
 and editor, to facilitate the use on recyclerview with multiple edittext for
 example

---
 aztec/src/main/kotlin/org/wordpress/aztec/AztecText.kt          | 2 +-
 .../main/kotlin/org/wordpress/aztec/toolbar/IAztecToolbar.kt    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/AztecText.kt b/aztec/src/main/kotlin/org/wordpress/aztec/AztecText.kt
index 07417d50c..8a3d81a38 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/AztecText.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/AztecText.kt
@@ -1081,7 +1081,7 @@ open class AztecText : AppCompatEditText, TextWatcher, UnknownHtmlSpan.OnUnknown
         }
     }
 
-    fun setToolbar(toolbar: IAztecToolbar) {
+    fun setToolbar(toolbar: IAztecToolbar?) {
         formatToolbar = toolbar
     }
 
diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/IAztecToolbar.kt b/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/IAztecToolbar.kt
index 589c2aa2a..cceb2320c 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/IAztecToolbar.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/IAztecToolbar.kt
@@ -8,7 +8,7 @@ import org.wordpress.aztec.source.SourceViewEditText
 interface IAztecToolbar {
     fun onKeyUp(keyCode: Int, keyEvent: KeyEvent): Boolean
     fun addButton(buttonPlugin: IToolbarButton)
-    fun setEditor(editor: AztecText, sourceEditor: SourceViewEditText?)
+    fun setEditor(editor: AztecText?, sourceEditor: SourceViewEditText?)
     fun setToolbarListener(listener: IAztecToolbarClickListener)
     fun toggleMediaToolbar()
     fun toggleEditorMode()

From a00fd4abbfd05c7f6a91815bf6fb39b15a5c0db3 Mon Sep 17 00:00:00 2001
From: Felps <felipe.valadares2@gmail.com>
Date: Mon, 6 Jul 2020 12:46:11 -0300
Subject: [PATCH 17/27] - Fix lint error

---
 .../src/main/kotlin/org/wordpress/aztec/toolbar/AztecToolbar.kt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/AztecToolbar.kt b/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/AztecToolbar.kt
index 4bcf86310..dd3d7e753 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/AztecToolbar.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/AztecToolbar.kt
@@ -378,7 +378,7 @@ class AztecToolbar : FrameLayout, IAztecToolbar, OnMenuItemClickListener {
         return editor != null && editor is AztecText
     }
 
-    override fun setEditor(editor: AztecText, sourceEditor: SourceViewEditText?) {
+    override fun setEditor(editor: AztecText?, sourceEditor: SourceViewEditText?) {
         this.sourceEditor = sourceEditor
         this.editor = editor
 

From aa138950e0541e9f8cf22fe035765a4d211cd896 Mon Sep 17 00:00:00 2001
From: Leonardo <leonardo.casasanta@quizlet.com>
Date: Fri, 22 Jan 2021 09:59:20 -0300
Subject: [PATCH 18/27] Fix the bug that keeps background button highlighted

---
 .../wordpress/aztec/plugins/BackgroundColorButton.kt   | 10 +++-------
 .../org/wordpress/aztec/toolbar/ToolbarAction.kt       |  6 ++++++
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/plugins/BackgroundColorButton.kt b/aztec/src/main/kotlin/org/wordpress/aztec/plugins/BackgroundColorButton.kt
index 5a53ccd65..5b49875d5 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/plugins/BackgroundColorButton.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/plugins/BackgroundColorButton.kt
@@ -1,5 +1,6 @@
 package org.wordpress.aztec.plugins
 
+import android.util.Log
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
@@ -8,11 +9,12 @@ import org.wordpress.aztec.AztecTextFormat
 import org.wordpress.aztec.R
 import org.wordpress.aztec.toolbar.AztecToolbar
 import org.wordpress.aztec.toolbar.IToolbarAction
+import org.wordpress.aztec.toolbar.ToolbarAction
 import org.wordpress.aztec.toolbar.ToolbarActionType
 
 class BackgroundColorButton(val visualEditor: AztecText) : IToolbarButton {
 
-    override val action: IToolbarAction = BackgroundColorAction()
+    override val action: IToolbarAction = ToolbarAction.BACKGROUND
     override val context = visualEditor.context!!
 
     override fun toggle() {
@@ -27,10 +29,4 @@ class BackgroundColorButton(val visualEditor: AztecText) : IToolbarButton {
         toolbar.findViewById<View>(action.buttonId).isEnabled = enable
     }
 
-    inner class BackgroundColorAction : IToolbarAction {
-        override val buttonId = R.id.button_background_color
-        override val actionType = ToolbarActionType.INLINE_STYLE
-        override val textFormats = setOf(AztecTextFormat.FORMAT_BACKGROUND)
-        override val buttonDrawableRes = R.drawable.format_bar_button_background_selector
-    }
 }
\ No newline at end of file
diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt b/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt
index c15b0a685..fd0d0f5c5 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt
@@ -15,6 +15,12 @@ enum class ToolbarAction constructor(
         override val textFormats: Set<ITextFormat> = setOf())
     : IToolbarAction {
 
+    BACKGROUND(
+            R.id.button_background_color,
+            R.drawable.format_bar_button_background_selector,
+            ToolbarActionType.INLINE_STYLE,
+            setOf(AztecTextFormat.FORMAT_BACKGROUND)
+    ),
     ADD_MEDIA_COLLAPSE(
             R.id.format_bar_button_media_collapsed,
             R.drawable.format_bar_button_media_expanded_selector,

From b25b30bce2e0720f2cf8fdba569d335fe62ed842 Mon Sep 17 00:00:00 2001
From: Leonardo <leonardo.casasanta@quizlet.com>
Date: Fri, 22 Jan 2021 10:10:34 -0300
Subject: [PATCH 19/27] Returning removeInlineCssStyle method

---
 .../org/wordpress/aztec/formatting/InlineFormatter.kt  | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt b/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt
index e631f819b..5aca2e2bf 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt
@@ -2,6 +2,7 @@ package org.wordpress.aztec.formatting
 
 import android.graphics.Typeface
 import android.text.Spanned
+import android.text.style.ForegroundColorSpan
 import android.text.style.StyleSpan
 import org.wordpress.android.util.AppLog
 import org.wordpress.aztec.AztecAttributes
@@ -248,6 +249,8 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle) : AztecFormat
             }
         }
 
+        removeInlineCssStyle()
+
         list.forEach {
             if (it.isValid) {
                 if (it.start < start) {
@@ -262,6 +265,13 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle) : AztecFormat
         joinStyleSpans(start, end)
     }
 
+    private fun removeInlineCssStyle(start: Int = selectionStart, end: Int = selectionEnd) {
+        val spans = editableText.getSpans(start, end, ForegroundColorSpan::class.java)
+        spans.forEach {
+            editableText.removeSpan(it)
+        }
+    }
+
     fun removeInlineStyle(textFormat: ITextFormat, start: Int = selectionStart, end: Int = selectionEnd) {
         removeInlineStyle(makeInlineSpan(textFormat), start, end)
     }

From 4c1566e8d95006a47994350c534811cb332c4488 Mon Sep 17 00:00:00 2001
From: Leonardo <leonardo.casasanta@quizlet.com>
Date: Fri, 22 Jan 2021 10:17:44 -0300
Subject: [PATCH 20/27] Removing attributes from constructor

---
 .../wordpress/aztec/spans/AztecBackgroundColorSpan.kt    | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/spans/AztecBackgroundColorSpan.kt b/aztec/src/main/kotlin/org/wordpress/aztec/spans/AztecBackgroundColorSpan.kt
index 0aa4f5aaa..650b0a33f 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/spans/AztecBackgroundColorSpan.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/spans/AztecBackgroundColorSpan.kt
@@ -6,12 +6,13 @@ import android.text.style.BackgroundColorSpan
 import org.wordpress.aztec.AztecAttributes
 
 class AztecBackgroundColorSpan(
-        val color: Int,
-        val alpha: Int = 220,
-        tag: String = "span",
-        override var attributes: AztecAttributes = AztecAttributes()
+        val color: Int
 ) : BackgroundColorSpan(color), IAztecInlineSpan {
 
+    var alpha: Int = 220
+    var tag: String = "span"
+    override var attributes: AztecAttributes = AztecAttributes()
+
     fun getColorHex(): String {
         return java.lang.String.format("#%06X", 0xFFFFFF and color)
     }

From 3523beba1c83692d2ba425bb24b82334e68210df Mon Sep 17 00:00:00 2001
From: Leonardo <leonardo.casasanta@quizlet.com>
Date: Fri, 22 Jan 2021 14:19:12 -0300
Subject: [PATCH 21/27] Visual Editor is using "blue_dark" #005082

Just standardizing the background color.
---
 app/src/main/kotlin/org/wordpress/aztec/demo/MainActivity.kt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/main/kotlin/org/wordpress/aztec/demo/MainActivity.kt b/app/src/main/kotlin/org/wordpress/aztec/demo/MainActivity.kt
index d9980ea0d..20d8a1f59 100644
--- a/app/src/main/kotlin/org/wordpress/aztec/demo/MainActivity.kt
+++ b/app/src/main/kotlin/org/wordpress/aztec/demo/MainActivity.kt
@@ -91,7 +91,7 @@ open class MainActivity : AppCompatActivity(),
         private val BOLD = "<b>Bold</b><br>"
         private val ITALIC = "<i style=\"color:darkred\">Italic</i><br>"
         private val UNDERLINE = "<u style=\"color:lime\">Underline</u><br>"
-        private val BACKGROUND = "<span style=\"background-color:#087BDE\">BACK<b>GROUND</b></span><br>"
+        private val BACKGROUND = "<span style=\"background-color:#005082\">BACK<b>GROUND</b></span><br>"
         private val STRIKETHROUGH = "<s style=\"color:#ff666666\" class=\"test\">Strikethrough</s><br>" // <s> or <strike> or <del>
         private val ORDERED = "<ol style=\"color:green\"><li>Ordered</li><li>should have color</li></ol>"
         private val ORDERED_WITH_START = "<h4>Start in 10 List:</h4>" +

From 810fe3d59150c6861d26755d7033d4e530acfb6f Mon Sep 17 00:00:00 2001
From: Leonardo <leonardo.casasanta@quizlet.com>
Date: Fri, 22 Jan 2021 14:21:37 -0300
Subject: [PATCH 22/27] Remove unnecessary check

This condition will not mark background spans with different colors.
It means background with different specified color will not have the background button highlighted.
---
 .../kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt  | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt b/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt
index 5aca2e2bf..3bb084133 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt
@@ -281,10 +281,6 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle) : AztecFormat
         if (firstSpan is StyleSpan && secondSpan is StyleSpan) {
             return firstSpan.style == secondSpan.style
         }
-        // special check for BackgroundSpan
-        if (firstSpan is AztecBackgroundColorSpan && secondSpan is AztecBackgroundColorSpan) {
-            return firstSpan.backgroundColor == secondSpan.backgroundColor
-        }
 
         return firstSpan.javaClass == secondSpan.javaClass
     }

From b58d9bdb37ce8ad1ac16c0920c2d3cc4f62a06b7 Mon Sep 17 00:00:00 2001
From: Yuval Gnessin <yuval.gnessin@quizlet.com>
Date: Tue, 26 Jan 2021 18:58:33 -0800
Subject: [PATCH 23/27] lint: address ktlint concerns

---
 .../org/wordpress/aztec/plugins/BackgroundColorButton.kt   | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/plugins/BackgroundColorButton.kt b/aztec/src/main/kotlin/org/wordpress/aztec/plugins/BackgroundColorButton.kt
index 5b49875d5..3a03c17d9 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/plugins/BackgroundColorButton.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/plugins/BackgroundColorButton.kt
@@ -1,18 +1,15 @@
 package org.wordpress.aztec.plugins
 
-import android.util.Log
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
 import org.wordpress.aztec.AztecText
-import org.wordpress.aztec.AztecTextFormat
 import org.wordpress.aztec.R
 import org.wordpress.aztec.toolbar.AztecToolbar
 import org.wordpress.aztec.toolbar.IToolbarAction
 import org.wordpress.aztec.toolbar.ToolbarAction
-import org.wordpress.aztec.toolbar.ToolbarActionType
 
-class BackgroundColorButton(val visualEditor: AztecText) : IToolbarButton {
+class BackgroundColorButton(private val visualEditor: AztecText) : IToolbarButton {
 
     override val action: IToolbarAction = ToolbarAction.BACKGROUND
     override val context = visualEditor.context!!
@@ -29,4 +26,4 @@ class BackgroundColorButton(val visualEditor: AztecText) : IToolbarButton {
         toolbar.findViewById<View>(action.buttonId).isEnabled = enable
     }
 
-}
\ No newline at end of file
+}

From 4261e3746f32670e07fa584c3ebb0e35bd247e07 Mon Sep 17 00:00:00 2001
From: Yuval Gnessin <yuval.gnessin@quizlet.com>
Date: Tue, 26 Jan 2021 19:27:39 -0800
Subject: [PATCH 24/27] test: fix broken unit tests and add BG color tests

---
 .../wordpress/aztec/toolbar/ToolbarAction.kt  |  2 +-
 .../res/layout/aztec_format_bar_advanced.xml  |  8 ++++
 .../res/layout/aztec_format_bar_basic.xml     |  8 ++++
 .../res/layout/background_color_button.xml    |  2 +-
 .../org/wordpress/aztec/AztecToolbarTest.kt   | 43 +++++++++++++++++++
 5 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt b/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt
index fd0d0f5c5..ada0fd3e3 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt
@@ -16,7 +16,7 @@ enum class ToolbarAction constructor(
     : IToolbarAction {
 
     BACKGROUND(
-            R.id.button_background_color,
+            R.id.format_bar_button_background_color,
             R.drawable.format_bar_button_background_selector,
             ToolbarActionType.INLINE_STYLE,
             setOf(AztecTextFormat.FORMAT_BACKGROUND)
diff --git a/aztec/src/main/res/layout/aztec_format_bar_advanced.xml b/aztec/src/main/res/layout/aztec_format_bar_advanced.xml
index d271644eb..b6cf19f2c 100644
--- a/aztec/src/main/res/layout/aztec_format_bar_advanced.xml
+++ b/aztec/src/main/res/layout/aztec_format_bar_advanced.xml
@@ -123,6 +123,14 @@
                                 android:contentDescription="@string/format_bar_description_strike">
                             </org.wordpress.aztec.toolbar.RippleToggleButton>
 
+                            <org.wordpress.aztec.toolbar.RippleToggleButton
+                                android:id="@+id/format_bar_button_background_color"
+                                style="@style/FormatBarButton"
+                                android:layout_width="wrap_content"
+                                android:layout_height="fill_parent"
+                                android:contentDescription="@string/format_bar_description_background">
+                            </org.wordpress.aztec.toolbar.RippleToggleButton>
+
                             <org.wordpress.aztec.toolbar.RippleToggleButton
                                 android:id="@+id/format_bar_button_align_left"
                                 style="@style/FormatBarButton"
diff --git a/aztec/src/main/res/layout/aztec_format_bar_basic.xml b/aztec/src/main/res/layout/aztec_format_bar_basic.xml
index 415d5d4af..76a5ed827 100644
--- a/aztec/src/main/res/layout/aztec_format_bar_basic.xml
+++ b/aztec/src/main/res/layout/aztec_format_bar_basic.xml
@@ -153,6 +153,14 @@
                             android:contentDescription="@string/format_bar_description_strike">
                         </org.wordpress.aztec.toolbar.RippleToggleButton>
 
+                        <org.wordpress.aztec.toolbar.RippleToggleButton
+                            android:id="@+id/format_bar_button_background_color"
+                            style="@style/FormatBarButton"
+                            android:layout_width="wrap_content"
+                            android:layout_height="fill_parent"
+                            android:contentDescription="@string/format_bar_description_background">
+                        </org.wordpress.aztec.toolbar.RippleToggleButton>
+
                         <org.wordpress.aztec.toolbar.RippleToggleButton
                             android:id="@+id/format_bar_button_align_left"
                             style="@style/FormatBarButton"
diff --git a/aztec/src/main/res/layout/background_color_button.xml b/aztec/src/main/res/layout/background_color_button.xml
index 83a2efa8f..908f3d1d3 100644
--- a/aztec/src/main/res/layout/background_color_button.xml
+++ b/aztec/src/main/res/layout/background_color_button.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <org.wordpress.aztec.toolbar.RippleToggleButton
     xmlns:android="http://schemas.android.com/apk/res/android"
-    android:id="@+id/button_background_color"
+    android:id="@+id/format_bar_button_background_color"
     style="@style/FormatBarButton"
     android:layout_width="wrap_content"
     android:layout_height="fill_parent"
diff --git a/aztec/src/test/kotlin/org/wordpress/aztec/AztecToolbarTest.kt b/aztec/src/test/kotlin/org/wordpress/aztec/AztecToolbarTest.kt
index 4b0e249ed..99565bcff 100644
--- a/aztec/src/test/kotlin/org/wordpress/aztec/AztecToolbarTest.kt
+++ b/aztec/src/test/kotlin/org/wordpress/aztec/AztecToolbarTest.kt
@@ -26,6 +26,7 @@ class AztecToolbarTest {
     lateinit var italicButton: ToggleButton
     lateinit var strikeThroughButton: ToggleButton
     lateinit var underlineButton: ToggleButton
+    lateinit var backgroundColorButton: ToggleButton
     lateinit var quoteButton: ToggleButton
     lateinit var linkButton: ToggleButton
     lateinit var htmlButton: ToggleButton
@@ -51,6 +52,7 @@ class AztecToolbarTest {
         italicButton = toolbar.findViewById(R.id.format_bar_button_italic)
         strikeThroughButton = toolbar.findViewById(R.id.format_bar_button_strikethrough)
         underlineButton = toolbar.findViewById(R.id.format_bar_button_underline)
+        backgroundColorButton = toolbar.findViewById(R.id.format_bar_button_background_color)
         quoteButton = toolbar.findViewById(R.id.format_bar_button_quote)
         linkButton = toolbar.findViewById(R.id.format_bar_button_link)
         htmlButton = toolbar.findViewById(R.id.format_bar_button_html)
@@ -245,6 +247,47 @@ class AztecToolbarTest {
         Assert.assertEquals("underline", editText.toHtml())
     }
 
+    /**
+     * Toggle backgroundColor button and type.
+     *
+     * @throws Exception
+     */
+    @Test
+    @Throws(Exception::class)
+    fun testBackgroundColorTyping() {
+        Assert.assertFalse(backgroundColorButton.isChecked)
+        backgroundColorButton.performClick()
+        Assert.assertTrue(backgroundColorButton.isChecked)
+
+        editText.append("backgroundColor")
+        Assert.assertEquals("<span>backgroundColor</span>", editText.toHtml())
+
+        backgroundColorButton.performClick()
+        Assert.assertFalse(backgroundColorButton.isChecked)
+    }
+
+    /**
+     * Select text and toggle backgroundColor button.
+     *
+     * @throws Exception
+     */
+    @Test
+    @Throws(Exception::class)
+    fun testBackgroundColorToggle() {
+        Assert.assertFalse(backgroundColorButton.isChecked)
+
+        editText.append("backgroundColor")
+        editText.setSelection(0, editText.length())
+        backgroundColorButton.performClick()
+        Assert.assertTrue(backgroundColorButton.isChecked)
+        Assert.assertEquals("<span>backgroundColor</span>", editText.toHtml())
+
+        backgroundColorButton.performClick()
+        Assert.assertFalse(backgroundColorButton.isChecked)
+
+        Assert.assertEquals("backgroundColor", editText.toHtml())
+    }
+
     /**
      * Test inline style when applying and removing styles while typing.
      *

From bdbce24cadad0a633d6ea92f99d322bd072a3740 Mon Sep 17 00:00:00 2001
From: Yuval Gnessin <yuval.gnessin@quizlet.com>
Date: Tue, 2 Feb 2021 11:29:31 -0800
Subject: [PATCH 25/27] Revert "Remove unnecessary check"

This reverts commit 810fe3d59150c6861d26755d7033d4e530acfb6f.
---
 .../kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt  | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt b/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt
index 3bb084133..5aca2e2bf 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt
@@ -281,6 +281,10 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle) : AztecFormat
         if (firstSpan is StyleSpan && secondSpan is StyleSpan) {
             return firstSpan.style == secondSpan.style
         }
+        // special check for BackgroundSpan
+        if (firstSpan is AztecBackgroundColorSpan && secondSpan is AztecBackgroundColorSpan) {
+            return firstSpan.backgroundColor == secondSpan.backgroundColor
+        }
 
         return firstSpan.javaClass == secondSpan.javaClass
     }

From ab286ede56b5534212bde3917d112d8c29f97cad Mon Sep 17 00:00:00 2001
From: Yuval Gnessin <yuval.gnessin@quizlet.com>
Date: Mon, 8 Feb 2021 15:45:34 -0800
Subject: [PATCH 26/27] fix: disable BG color if it is not added as a plugin

---
 .../kotlin/org/wordpress/aztec/toolbar/AztecToolbar.kt | 10 +++++++++-
 .../src/main/res/layout/aztec_format_bar_advanced.xml  |  8 --------
 aztec/src/main/res/layout/aztec_format_bar_basic.xml   |  8 --------
 .../kotlin/org/wordpress/aztec/AztecToolbarTest.kt     |  4 +++-
 4 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/AztecToolbar.kt b/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/AztecToolbar.kt
index dd3d7e753..a58b91ac3 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/AztecToolbar.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/AztecToolbar.kt
@@ -450,7 +450,15 @@ class AztecToolbar : FrameLayout, IAztecToolbar, OnMenuItemClickListener {
         toolbarButtonPlugins.add(buttonPlugin)
 
         val button = findViewById<ToggleButton>(buttonPlugin.action.buttonId)
-        button.setOnClickListener { buttonPlugin.toggle() }
+        val isToolbarAction = ToolbarAction.values().contains(buttonPlugin.action)
+        button.setOnClickListener {
+            if (isToolbarAction) {
+                onToolbarAction(buttonPlugin.action)
+            } else {
+                buttonPlugin.toggle()
+            }
+        }
+
         button.setBackgroundDrawableRes(buttonPlugin.action.buttonDrawableRes)
 
         setupMediaButtonForAccessibility(buttonPlugin)
diff --git a/aztec/src/main/res/layout/aztec_format_bar_advanced.xml b/aztec/src/main/res/layout/aztec_format_bar_advanced.xml
index b6cf19f2c..d271644eb 100644
--- a/aztec/src/main/res/layout/aztec_format_bar_advanced.xml
+++ b/aztec/src/main/res/layout/aztec_format_bar_advanced.xml
@@ -123,14 +123,6 @@
                                 android:contentDescription="@string/format_bar_description_strike">
                             </org.wordpress.aztec.toolbar.RippleToggleButton>
 
-                            <org.wordpress.aztec.toolbar.RippleToggleButton
-                                android:id="@+id/format_bar_button_background_color"
-                                style="@style/FormatBarButton"
-                                android:layout_width="wrap_content"
-                                android:layout_height="fill_parent"
-                                android:contentDescription="@string/format_bar_description_background">
-                            </org.wordpress.aztec.toolbar.RippleToggleButton>
-
                             <org.wordpress.aztec.toolbar.RippleToggleButton
                                 android:id="@+id/format_bar_button_align_left"
                                 style="@style/FormatBarButton"
diff --git a/aztec/src/main/res/layout/aztec_format_bar_basic.xml b/aztec/src/main/res/layout/aztec_format_bar_basic.xml
index 76a5ed827..415d5d4af 100644
--- a/aztec/src/main/res/layout/aztec_format_bar_basic.xml
+++ b/aztec/src/main/res/layout/aztec_format_bar_basic.xml
@@ -153,14 +153,6 @@
                             android:contentDescription="@string/format_bar_description_strike">
                         </org.wordpress.aztec.toolbar.RippleToggleButton>
 
-                        <org.wordpress.aztec.toolbar.RippleToggleButton
-                            android:id="@+id/format_bar_button_background_color"
-                            style="@style/FormatBarButton"
-                            android:layout_width="wrap_content"
-                            android:layout_height="fill_parent"
-                            android:contentDescription="@string/format_bar_description_background">
-                        </org.wordpress.aztec.toolbar.RippleToggleButton>
-
                         <org.wordpress.aztec.toolbar.RippleToggleButton
                             android:id="@+id/format_bar_button_align_left"
                             style="@style/FormatBarButton"
diff --git a/aztec/src/test/kotlin/org/wordpress/aztec/AztecToolbarTest.kt b/aztec/src/test/kotlin/org/wordpress/aztec/AztecToolbarTest.kt
index 99565bcff..0fe823bdb 100644
--- a/aztec/src/test/kotlin/org/wordpress/aztec/AztecToolbarTest.kt
+++ b/aztec/src/test/kotlin/org/wordpress/aztec/AztecToolbarTest.kt
@@ -9,6 +9,7 @@ import org.junit.runner.RunWith
 import org.robolectric.Robolectric
 import org.robolectric.RobolectricTestRunner
 import org.robolectric.annotation.Config
+import org.wordpress.aztec.plugins.BackgroundColorButton
 import org.wordpress.aztec.source.SourceViewEditText
 import org.wordpress.aztec.toolbar.AztecToolbar
 
@@ -52,7 +53,6 @@ class AztecToolbarTest {
         italicButton = toolbar.findViewById(R.id.format_bar_button_italic)
         strikeThroughButton = toolbar.findViewById(R.id.format_bar_button_strikethrough)
         underlineButton = toolbar.findViewById(R.id.format_bar_button_underline)
-        backgroundColorButton = toolbar.findViewById(R.id.format_bar_button_background_color)
         quoteButton = toolbar.findViewById(R.id.format_bar_button_quote)
         linkButton = toolbar.findViewById(R.id.format_bar_button_link)
         htmlButton = toolbar.findViewById(R.id.format_bar_button_html)
@@ -60,6 +60,8 @@ class AztecToolbarTest {
         alignCenterButton = toolbar.findViewById(R.id.format_bar_button_align_center)
         alignRightButton = toolbar.findViewById(R.id.format_bar_button_align_right)
 
+        toolbar.addButton(BackgroundColorButton(editText))
+        backgroundColorButton = toolbar.findViewById(R.id.format_bar_button_background_color)
     }
 
     /**

From baad141b08daf4a7dd1c60e0745a8cfbc5b30921 Mon Sep 17 00:00:00 2001
From: Yuval Gnessin <yuval.gnessin@quizlet.com>
Date: Thu, 11 Mar 2021 16:11:39 -0800
Subject: [PATCH 27/27] fix: add null check for toolbar action views

---
 .../src/main/kotlin/org/wordpress/aztec/toolbar/AztecToolbar.kt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/AztecToolbar.kt b/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/AztecToolbar.kt
index a58b91ac3..a5fb87946 100644
--- a/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/AztecToolbar.kt
+++ b/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/AztecToolbar.kt
@@ -505,7 +505,7 @@ class AztecToolbar : FrameLayout, IAztecToolbar, OnMenuItemClickListener {
             if (action != ToolbarAction.ELLIPSIS_COLLAPSE &&
                     action != ToolbarAction.ELLIPSIS_EXPAND) {
                 val view = findViewById<ToggleButton>(action.buttonId)
-                if (view.isChecked) actions.add(action)
+                if (view?.isChecked == true) actions.add(action)
             }
         }