Make em the default tag for italic

CHANGELOG.md

@@ -1,4 +1,8 @@
 # Changelog
+## [v1.3.20](https://github.com/wordpress-mobile/AztecEditor-Android/releases/tag/v1.3.20)
+### Changed
+- Support for `<em>` for italic and using it as default via the formatting toolbar #777
+
 ## [v1.3.19](https://github.com/wordpress-mobile/AztecEditor-Android/releases/tag/v1.3.19)
 ### Fixed
 - Option to avoid autofocus when getting visible #783

app/src/androidTest/kotlin/org/wordpress/aztec/demo/tests/FormattingHistoryTests.kt

@@ -187,7 +187,7 @@ class FormattingHistoryTests : BaseHistoryTest() {
     @Test
     fun testAddItalicAndUnderlineUndoRedo() {
         val text = "There's no crying in baseball!"
-        val htmlRegex = Regex("<i><u>$text</u></i>|<u><i>$text</i></u>")
+        val htmlRegex = Regex("<em><u>$text</u></em>|<u><em>$text</em></u>")
         val editorPage = EditorPage()
 
         // Insert text snippet

app/src/androidTest/kotlin/org/wordpress/aztec/demo/tests/MixedTextFormattingTests.kt

@@ -22,7 +22,7 @@ class MixedTextFormattingTests : BaseTest() {
         val text1 = "so"
         val text2 = "me "
         val text3 = "text "
-        val regex = Regex("<strong>$text1</strong><i>$text2</i><(strong|i)><(strong|i)>$text3</(strong|i)></(strong|i)>")
+        val regex = Regex("<strong>$text1</strong><em>$text2</em><(strong|em)><(strong|em)>$text3</(strong|em)></(strong|em)>")
 
         EditorPage()
                 .toggleBold()

app/src/androidTest/kotlin/org/wordpress/aztec/demo/tests/SimpleTextFormattingTests.kt

@@ -32,7 +32,7 @@ class SimpleTextFormattingTests : BaseTest() {
     fun testSimpleItalicFormatting() {
         val text1 = "some"
         val text2 = "text"
-        val html = "$text1<i>$text2</i>"
+        val html = "$text1<em>$text2</em>"
 
         EditorPage()
                 .insertText(text1)
@@ -335,7 +335,7 @@ class SimpleTextFormattingTests : BaseTest() {
     @Test
     fun testInlineStyleAndDelete() {
         val text1 = "some"
-        val html = "<i>som</i>"
+        val html = "<em>som</em>"
 
         EditorPage()
                 .toggleItalics()

aztec/src/main/java/org/wordpress/aztec/Html.java

@@ -46,6 +46,7 @@
 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.AztecSubscriptSpan;
 import org.wordpress.aztec.spans.AztecSuperscriptSpan;
@@ -318,7 +319,7 @@ private void handleStartTag(String tag, Attributes attributes, int nestingLevel)
         } else if (tag.equalsIgnoreCase("b")) {
             start(spannableStringBuilder, AztecTextFormat.FORMAT_BOLD, attributes);
         } else if (tag.equalsIgnoreCase("em")) {
-            start(spannableStringBuilder, AztecTextFormat.FORMAT_ITALIC, attributes);
+            start(spannableStringBuilder, AztecTextFormat.FORMAT_EMPHASIS, attributes);
         } else if (tag.equalsIgnoreCase("cite")) {
             start(spannableStringBuilder, AztecTextFormat.FORMAT_CITE, attributes);
         } else if (tag.equalsIgnoreCase("dfn")) {
@@ -411,7 +412,7 @@ private void handleEndTag(String tag, int nestingLevel) {
         } else if (tag.equalsIgnoreCase("b")) {
             end(spannableStringBuilder, AztecTextFormat.FORMAT_BOLD);
         } else if (tag.equalsIgnoreCase("em")) {
-            end(spannableStringBuilder, AztecTextFormat.FORMAT_ITALIC);
+            end(spannableStringBuilder, AztecTextFormat.FORMAT_EMPHASIS);
         } else if (tag.equalsIgnoreCase("cite")) {
             end(spannableStringBuilder, AztecTextFormat.FORMAT_CITE);
         } else if (tag.equalsIgnoreCase("dfn")) {
@@ -498,6 +499,9 @@ private static void start(SpannableStringBuilder text, AztecTextFormat textForma
             case FORMAT_ITALIC:
                 newSpan = new AztecStyleItalicSpan(attributes);
                 break;
+            case FORMAT_EMPHASIS:
+                newSpan = new AztecStyleEmphasisSpan(attributes);
+                break;
             case FORMAT_CITE:
                 newSpan = new AztecStyleCiteSpan(attributes);
                 break;
@@ -550,6 +554,9 @@ private static void end(SpannableStringBuilder text, AztecTextFormat textFormat)
             case FORMAT_ITALIC:
                 span = (AztecStyleItalicSpan) getLast(text, AztecStyleItalicSpan.class);
                 break;
+            case FORMAT_EMPHASIS:
+                span = (AztecStyleEmphasisSpan) getLast(text, AztecStyleEmphasisSpan.class);
+                break;
             case FORMAT_CITE:
                 span = (AztecStyleCiteSpan) getLast(text, AztecStyleCiteSpan.class);
                 break;

aztec/src/main/kotlin/org/wordpress/aztec/AztecText.kt

@@ -925,6 +925,7 @@ open class AztecText : AppCompatEditText, TextWatcher, UnknownHtmlSpan.OnUnknown
             AztecTextFormat.FORMAT_HEADING_6,
             AztecTextFormat.FORMAT_PREFORMAT -> blockFormatter.toggleHeading(textFormat)
             AztecTextFormat.FORMAT_ITALIC,
+            AztecTextFormat.FORMAT_EMPHASIS,
             AztecTextFormat.FORMAT_CITE,
             AztecTextFormat.FORMAT_UNDERLINE,
             AztecTextFormat.FORMAT_STRIKETHROUGH,
@@ -957,6 +958,7 @@ open class AztecText : AppCompatEditText, TextWatcher, UnknownHtmlSpan.OnUnknown
             AztecTextFormat.FORMAT_BOLD,
             AztecTextFormat.FORMAT_STRONG,
             AztecTextFormat.FORMAT_ITALIC,
+            AztecTextFormat.FORMAT_EMPHASIS,
             AztecTextFormat.FORMAT_CITE,
             AztecTextFormat.FORMAT_UNDERLINE,
             AztecTextFormat.FORMAT_STRIKETHROUGH,
@@ -1361,6 +1363,7 @@ open class AztecText : AppCompatEditText, TextWatcher, UnknownHtmlSpan.OnUnknown
         inlineFormatter.removeInlineStyle(AztecTextFormat.FORMAT_BOLD, start, end)
         inlineFormatter.removeInlineStyle(AztecTextFormat.FORMAT_STRONG, start, end)
         inlineFormatter.removeInlineStyle(AztecTextFormat.FORMAT_ITALIC, start, end)
+        inlineFormatter.removeInlineStyle(AztecTextFormat.FORMAT_EMPHASIS, start, end)
         inlineFormatter.removeInlineStyle(AztecTextFormat.FORMAT_CITE, start, end)
         inlineFormatter.removeInlineStyle(AztecTextFormat.FORMAT_STRIKETHROUGH, start, end)
         inlineFormatter.removeInlineStyle(AztecTextFormat.FORMAT_UNDERLINE, start, end)

aztec/src/main/kotlin/org/wordpress/aztec/AztecTextFormat.kt

@@ -16,6 +16,7 @@ enum class AztecTextFormat : ITextFormat {
     FORMAT_BOLD,
     FORMAT_STRONG,
     FORMAT_ITALIC,
+    FORMAT_EMPHASIS,
     FORMAT_CITE,
     FORMAT_UNDERLINE,
     FORMAT_STRIKETHROUGH,

aztec/src/main/kotlin/org/wordpress/aztec/formatting/InlineFormatter.kt

@@ -16,6 +16,7 @@ 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.AztecStyleSpan
 import org.wordpress.aztec.spans.AztecUnderlineSpan
@@ -65,6 +66,7 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle) : AztecFormat
                     AztecTextFormat.FORMAT_BOLD,
                     AztecTextFormat.FORMAT_STRONG,
                     AztecTextFormat.FORMAT_ITALIC,
+                    AztecTextFormat.FORMAT_EMPHASIS,
                     AztecTextFormat.FORMAT_CITE,
                     AztecTextFormat.FORMAT_STRIKETHROUGH,
                     AztecTextFormat.FORMAT_UNDERLINE,
@@ -198,6 +200,7 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle) : AztecFormat
             AztecStyleBoldSpan::class.java -> return AztecTextFormat.FORMAT_BOLD
             AztecStyleStrongSpan::class.java -> return AztecTextFormat.FORMAT_STRONG
             AztecStyleItalicSpan::class.java -> return AztecTextFormat.FORMAT_ITALIC
+            AztecStyleEmphasisSpan::class.java -> return AztecTextFormat.FORMAT_EMPHASIS
             AztecStyleCiteSpan::class.java -> return AztecTextFormat.FORMAT_CITE
             AztecStrikethroughSpan::class.java -> return AztecTextFormat.FORMAT_STRIKETHROUGH
             AztecUnderlineSpan::class.java -> return AztecTextFormat.FORMAT_UNDERLINE
@@ -341,6 +344,7 @@ class InlineFormatter(editor: AztecText, val codeStyle: CodeStyle) : AztecFormat
             AztecTextFormat.FORMAT_BOLD -> return AztecStyleBoldSpan()
             AztecTextFormat.FORMAT_STRONG -> return AztecStyleStrongSpan()
             AztecTextFormat.FORMAT_ITALIC -> return AztecStyleItalicSpan()
+            AztecTextFormat.FORMAT_EMPHASIS -> return AztecStyleEmphasisSpan()
             AztecTextFormat.FORMAT_CITE -> return AztecStyleCiteSpan()
             AztecTextFormat.FORMAT_STRIKETHROUGH -> return AztecStrikethroughSpan()
             AztecTextFormat.FORMAT_UNDERLINE -> return AztecUnderlineSpan()

aztec/src/main/kotlin/org/wordpress/aztec/spans/AztecStyleEmphasisSpan.kt

@@ -0,0 +1,18 @@
+package org.wordpress.aztec.spans
+
+import android.graphics.Typeface
+import org.wordpress.aztec.AztecAttributes
+
+class AztecStyleEmphasisSpan(attributes: AztecAttributes = AztecAttributes())
+    : AztecStyleSpan(Typeface.ITALIC, attributes) {
+
+    override val TAG by lazy {
+        when (style) {
+            Typeface.ITALIC -> {
+                return@lazy "em"
+            }
+        }
+        throw IllegalArgumentException()
+    }
+}
+

aztec/src/main/kotlin/org/wordpress/aztec/toolbar/AztecToolbar.kt

@@ -182,7 +182,7 @@ class AztecToolbar : FrameLayout, IAztecToolbar, OnMenuItemClickListener {
             }
             KeyEvent.KEYCODE_I -> {
                 if (event.isCtrlPressed) { // Italic = Ctrl + I
-                    aztecToolbarListener?.onToolbarFormatButtonClicked(AztecTextFormat.FORMAT_ITALIC, true)
+                    aztecToolbarListener?.onToolbarFormatButtonClicked(AztecTextFormat.FORMAT_EMPHASIS, true)
                     findViewById<ToggleButton>(ToolbarAction.ITALIC.buttonId).performClick()
                     return true
                 }

aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt

@@ -34,7 +34,7 @@ enum class ToolbarAction constructor(override val buttonId: Int, override val ac
     ITALIC(
             R.id.format_bar_button_italic,
             ToolbarActionType.INLINE_STYLE,
-            setOf(AztecTextFormat.FORMAT_ITALIC)),
+            setOf(AztecTextFormat.FORMAT_EMPHASIS, AztecTextFormat.FORMAT_ITALIC)),
     STRIKETHROUGH(
             R.id.format_bar_button_strikethrough,
             ToolbarActionType.INLINE_STYLE,

aztec/src/test/kotlin/org/wordpress/aztec/AztecToolbarTest.kt

@@ -136,7 +136,7 @@ class AztecToolbarTest {
         Assert.assertTrue(italicButton.isChecked)
 
         editText.append("italic")
-        Assert.assertEquals("<i>italic</i>", editText.toHtml())
+        Assert.assertEquals("<em>italic</em>", editText.toHtml())
         italicButton.performClick()
         Assert.assertFalse(italicButton.isChecked)
     }
@@ -155,7 +155,7 @@ class AztecToolbarTest {
         editText.setSelection(0, editText.length())
         italicButton.performClick()
         Assert.assertTrue(italicButton.isChecked)
-        Assert.assertEquals("<i>italic</i>", editText.toHtml())
+        Assert.assertEquals("<em>italic</em>", editText.toHtml())
 
         italicButton.performClick()
         Assert.assertFalse(italicButton.isChecked)
@@ -268,21 +268,21 @@ class AztecToolbarTest {
         editText.append("Ita")
         italicButton.performClick()
         editText.append("lic")
-        Assert.assertEquals("<strong>Bo</strong>ld<i>Ita</i>lic", editText.toHtml())
+        Assert.assertEquals("<strong>Bo</strong>ld<em>Ita</em>lic", editText.toHtml())
 
         // Strike
         strikeThroughButton.performClick()
         editText.append("Str")
         strikeThroughButton.performClick()
         editText.append("ike")
-        Assert.assertEquals("<strong>Bo</strong>ld<i>Ita</i>lic<del>Str</del>ike", editText.toHtml())
+        Assert.assertEquals("<strong>Bo</strong>ld<em>Ita</em>lic<del>Str</del>ike", editText.toHtml())
 
         // Underline
         underlineButton.performClick()
         editText.append("Under")
         underlineButton.performClick()
         editText.append("line")
-        Assert.assertEquals("<strong>Bo</strong>ld<i>Ita</i>lic<del>Str</del>ike<u>Under</u>line", editText.toHtml())
+        Assert.assertEquals("<strong>Bo</strong>ld<em>Ita</em>lic<del>Str</del>ike<u>Under</u>line", editText.toHtml())
 
         // Clear text
         editText.setText("")
@@ -299,21 +299,21 @@ class AztecToolbarTest {
         italicButton.performClick()
         editText.append("lic")
         italicButton.performClick()
-        Assert.assertEquals("Bo<strong>ld</strong>Ita<i>lic</i>", editText.toHtml())
+        Assert.assertEquals("Bo<strong>ld</strong>Ita<em>lic</em>", editText.toHtml())
 
         // Strike
         editText.append("Str")
         strikeThroughButton.performClick()
         editText.append("ike")
         strikeThroughButton.performClick()
-        Assert.assertEquals("Bo<strong>ld</strong>Ita<i>lic</i>Str<del>ike</del>", editText.toHtml())
+        Assert.assertEquals("Bo<strong>ld</strong>Ita<em>lic</em>Str<del>ike</del>", editText.toHtml())
 
         // Underline
         editText.append("Under")
         underlineButton.performClick()
         editText.append("line")
         underlineButton.performClick()
-        Assert.assertEquals("Bo<strong>ld</strong>Ita<i>lic</i>Str<del>ike</del>Under<u>line</u>", editText.toHtml())
+        Assert.assertEquals("Bo<strong>ld</strong>Ita<em>lic</em>Str<del>ike</del>Under<u>line</u>", editText.toHtml())
     }
 
     /**
@@ -342,7 +342,7 @@ class AztecToolbarTest {
         editText.append("Ita")
         italicButton.performClick()
         editText.append("lic")
-        Assert.assertEquals(" <strong>Bo</strong>ld <i>Ita</i>lic", editText.toHtml())
+        Assert.assertEquals(" <strong>Bo</strong>ld <em>Ita</em>lic", editText.toHtml())
 
         // Space
         editText.append(" ")
@@ -352,7 +352,7 @@ class AztecToolbarTest {
         editText.append("Str")
         strikeThroughButton.performClick()
         editText.append("ike")
-        Assert.assertEquals(" <strong>Bo</strong>ld <i>Ita</i>lic <del>Str</del>ike", editText.toHtml())
+        Assert.assertEquals(" <strong>Bo</strong>ld <em>Ita</em>lic <del>Str</del>ike", editText.toHtml())
 
         // Space
         editText.append(" ")
@@ -362,7 +362,7 @@ class AztecToolbarTest {
         editText.append("Under")
         underlineButton.performClick()
         editText.append("line")
-        Assert.assertEquals(" <strong>Bo</strong>ld <i>Ita</i>lic <del>Str</del>ike <u>Under</u>line", editText.toHtml())
+        Assert.assertEquals(" <strong>Bo</strong>ld <em>Ita</em>lic <del>Str</del>ike <u>Under</u>line", editText.toHtml())
     }
 
     /**
@@ -392,7 +392,7 @@ class AztecToolbarTest {
         italicButton.performClick()
         Assert.assertTrue(italicButton.isChecked)
 
-        Assert.assertEquals("<strong>bold</strong> <strong><i>bolditalic</i></strong> italic strike underline normal", editText.toHtml())
+        Assert.assertEquals("<strong>bold</strong> <strong><em>bolditalic</em></strong> italic strike underline normal", editText.toHtml())
 
         editText.setSelection(16, 22)
 
@@ -407,14 +407,14 @@ class AztecToolbarTest {
         strikeThroughButton.performClick()
         Assert.assertTrue(strikeThroughButton.isChecked)
 
-        Assert.assertEquals("<strong>bold</strong> <strong><i>bolditalic</i></strong> <i>italic</i> <del>strike</del> underline normal", editText.toHtml())
+        Assert.assertEquals("<strong>bold</strong> <strong><em>bolditalic</em></strong> <em>italic</em> <del>strike</del> underline normal", editText.toHtml())
 
         editText.setSelection(30, 39)
 
         underlineButton.performClick()
         Assert.assertTrue(underlineButton.isChecked)
 
-        Assert.assertEquals("<strong>bold</strong> <strong><i>bolditalic</i></strong> <i>italic</i> <del>strike</del> <u>underline</u> normal", editText.toHtml())
+        Assert.assertEquals("<strong>bold</strong> <strong><em>bolditalic</em></strong> <em>italic</em> <del>strike</del> <u>underline</u> normal", editText.toHtml())
     }
 
     /**
@@ -435,31 +435,31 @@ class AztecToolbarTest {
         italicButton.performClick()
         Assert.assertTrue(boldButton.isChecked)
         editText.append("bolditalic")
-        Assert.assertEquals("<strong>bold</strong><strong><i>bolditalic</i></strong>", editText.toHtml())
+        Assert.assertEquals("<strong>bold</strong><strong><em>bolditalic</em></strong>", editText.toHtml())
         boldButton.performClick()
         Assert.assertFalse(boldButton.isChecked)
 
         editText.append("italic")
-        Assert.assertEquals("<strong>bold</strong><strong><i>bolditalic</i></strong><i>italic</i>", editText.toHtml())
+        Assert.assertEquals("<strong>bold</strong><strong><em>bolditalic</em></strong><em>italic</em>", editText.toHtml())
         italicButton.performClick()
         Assert.assertFalse(italicButton.isChecked)
 
         strikeThroughButton.performClick()
         Assert.assertTrue(strikeThroughButton.isChecked)
         editText.append("strike")
-        Assert.assertEquals("<strong>bold</strong><strong><i>bolditalic</i></strong><i>italic</i><del>strike</del>", editText.toHtml())
+        Assert.assertEquals("<strong>bold</strong><strong><em>bolditalic</em></strong><em>italic</em><del>strike</del>", editText.toHtml())
         strikeThroughButton.performClick()
         Assert.assertFalse(strikeThroughButton.isChecked)
 
         underlineButton.performClick()
         Assert.assertTrue(underlineButton.isChecked)
         editText.append("underline")
-        Assert.assertEquals("<strong>bold</strong><strong><i>bolditalic</i></strong><i>italic</i><del>strike</del><u>underline</u>", editText.toHtml())
+        Assert.assertEquals("<strong>bold</strong><strong><em>bolditalic</em></strong><em>italic</em><del>strike</del><u>underline</u>", editText.toHtml())
         underlineButton.performClick()
         Assert.assertFalse(underlineButton.isChecked)
 
         editText.append("normal")
-        Assert.assertEquals("<strong>bold</strong><strong><i>bolditalic</i></strong><i>italic</i><del>strike</del><u>underline</u>normal", editText.toHtml())
+        Assert.assertEquals("<strong>bold</strong><strong><em>bolditalic</em></strong><em>italic</em><del>strike</del><u>underline</u>normal", editText.toHtml())
     }
 
     /**
@@ -606,12 +606,12 @@ class AztecToolbarTest {
     @Test
     @Throws(Exception::class)
     fun extendStyleFromWholeSelection() {
-        editText.fromHtml("<b>bold</b><b><i>italic</i></b>")
+        editText.fromHtml("<b>bold</b><b><em>italic</em></b>")
 
         editText.setSelection(0, editText.length())
 
         italicButton.performClick()
-        Assert.assertEquals("<b><i>bolditalic</i></b>", editText.toHtml())
+        Assert.assertEquals("<b><em>bolditalic</em></b>", editText.toHtml())
     }
 
     /**
@@ -630,7 +630,7 @@ class AztecToolbarTest {
         Assert.assertEquals("bold<i>italic</i>", editText.toHtml())
 
         italicButton.performClick()
-        Assert.assertEquals("<i>bolditalic</i>", editText.toHtml())
+        Assert.assertEquals("<em>bolditalic</em>", editText.toHtml())
 
         italicButton.performClick()
         Assert.assertEquals("bolditalic", editText.toHtml())
@@ -679,13 +679,13 @@ class AztecToolbarTest {
 
         editText.setSelection(4, 8)
         italicButton.performClick()
-        Assert.assertEquals("<div class=\"third\"><strong>Div</strong><br><span><i>Span</i></span><br>Hidden</div>",
+        Assert.assertEquals("<div class=\"third\"><strong>Div</strong><br><span><em>Span</em></span><br>Hidden</div>",
                 editText.toHtml())
 
         editText.setSelection(9, 15)
         strikeThroughButton.performClick()
 
-        Assert.assertEquals("<div class=\"third\"><strong>Div</strong><br><span><i>Span</i></span><br><del>Hidden</del></div>",
+        Assert.assertEquals("<div class=\"third\"><strong>Div</strong><br><span><em>Span</em></span><br><del>Hidden</del></div>",
                 editText.toHtml())
     }