Merge pull request #624 from wordpress-mobile/issue/465-text-alignment

Text alignment support

Author: daniloercoli

CHANGELOG.md

@@ -1,4 +1,8 @@
 # Changelog
+## Unreleased
+### Added
+- Text alignment support
+
 ## [1.1](https://github.com/wordpress-mobile/AztecEditor-Android/releases/tag/v1.1) - 2018-01-29
 ### Added
 - Plugin that detects and hides Gutenberg editor blocks in the visual editor

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

@@ -27,7 +27,7 @@ class CssUnderlineFormattingTests : BaseTest() {
     fun testSimpleCssUnderlineFormatting() {
         val text1 = "some"
         val text2 = "text"
-        val html = "$text1<span style=\"text-decoration: underline\">$text2</span>"
+        val html = "$text1<span style=\"text-decoration: underline;\">$text2</span>"
 
         EditorPage()
                 .insertText(text1)
@@ -56,7 +56,7 @@ class CssUnderlineFormattingTests : BaseTest() {
         val text1 = "some"
         val text2 = "text"
         val html = "$text1<u>$text2</u>"
-        val expectedHtml = "$text1<span style=\"text-decoration: underline\">$text2</span>"
+        val expectedHtml = "$text1<span style=\"text-decoration: underline;\">$text2</span>"
 
         EditorPage()
                 .toggleHtml()
@@ -78,8 +78,8 @@ class CssUnderlineFormattingTests : BaseTest() {
         val text1 = "some"
         val text2 = "text"
         val html = "$text1<u>$text2</u>"
-        val expectedHtml = "$text1<span style=\"text-decoration: underline\">te</span>\n\n" +
-                "<span style=\"text-decoration: underline\">xt</span>"
+        val expectedHtml = "$text1<span style=\"text-decoration: underline;\">te</span>\n\n" +
+                "<span style=\"text-decoration: underline;\">xt</span>"
 
         EditorPage()
                 .toggleHtml()

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

@@ -54,6 +54,7 @@
 import org.wordpress.aztec.spans.FontSpan;
 import org.wordpress.aztec.spans.IAztecBlockSpan;
 import org.wordpress.aztec.spans.IAztecInlineSpan;
+import org.wordpress.aztec.spans.IAztecParagraphStyle;
 import org.wordpress.aztec.spans.UnknownClickableSpan;
 import org.wordpress.aztec.spans.UnknownHtmlSpan;
 import org.xml.sax.Attributes;
@@ -254,7 +255,7 @@ public Spanned convert() {
         // Fix flags and range for paragraph-type markup.
         Object[] paragraphs = spannableStringBuilder.getSpans(0, spannableStringBuilder.length(), ParagraphStyle.class);
         for (Object paragraph : paragraphs) {
-            if (paragraph instanceof UnknownHtmlSpan || paragraph instanceof IAztecBlockSpan || paragraph instanceof AztecMediaSpan) {
+            if (paragraph instanceof UnknownHtmlSpan || paragraph instanceof IAztecParagraphStyle || paragraph instanceof AztecMediaSpan) {
                 continue;
             }
             int start = spannableStringBuilder.getSpanStart(paragraph);

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

@@ -19,18 +19,21 @@
 package org.wordpress.aztec
 
 import android.content.Context
+import android.support.v4.text.TextDirectionHeuristicsCompat
 import android.text.Editable
 import android.text.Spannable
 import android.text.SpannableStringBuilder
 import android.text.Spanned
 import android.text.TextUtils
 import android.text.style.CharacterStyle
 import android.text.style.ForegroundColorSpan
+import org.wordpress.aztec.extensions.toCssString
 import org.wordpress.aztec.plugins.IAztecPlugin
 import org.wordpress.aztec.plugins.html2visual.ISpanPostprocessor
 import org.wordpress.aztec.plugins.visual2html.IHtmlPostprocessor
 import org.wordpress.aztec.plugins.visual2html.IInlineSpanHandler
 import org.wordpress.aztec.plugins.visual2html.ISpanPreprocessor
+import org.wordpress.aztec.source.CssStyleFormatter
 import org.wordpress.aztec.spans.AztecCursorSpan
 import org.wordpress.aztec.spans.AztecHorizontalRuleSpan
 import org.wordpress.aztec.spans.AztecListItemSpan
@@ -39,12 +42,11 @@ import org.wordpress.aztec.spans.AztecMediaSpan
 import org.wordpress.aztec.spans.AztecURLSpan
 import org.wordpress.aztec.spans.AztecVisualLinebreak
 import org.wordpress.aztec.spans.CommentSpan
-import org.wordpress.aztec.spans.HiddenHtmlSpan
 import org.wordpress.aztec.spans.IAztecBlockSpan
 import org.wordpress.aztec.spans.IAztecFullWidthImageSpan
 import org.wordpress.aztec.spans.IAztecInlineSpan
 import org.wordpress.aztec.spans.IAztecNestable
-import org.wordpress.aztec.spans.IAztecSpan
+import org.wordpress.aztec.spans.IAztecParagraphStyle
 import org.wordpress.aztec.spans.IAztecSurroundedWithNewlines
 import org.wordpress.aztec.spans.UnknownHtmlSpan
 import org.wordpress.aztec.util.SpanWrapper
@@ -182,7 +184,7 @@ class AztecParser(val plugins: List<IAztecPlugin> = ArrayList()) {
             if (spanned[spanEnd] == '\n'
                     && spanned.getSpans(spanEnd, spanEnd, AztecVisualLinebreak::class.java).isNotEmpty()) {
                 // but still, expand the span to include the newline for block spans, because they are paragraphs
-                if (it is IAztecBlockSpan) {
+                if (it is IAztecParagraphStyle) {
                     spanned.setSpan(it, spanned.getSpanStart(it), spanEnd + 1, spanned.getSpanFlags(it))
                 }
 
@@ -193,7 +195,7 @@ class AztecParser(val plugins: List<IAztecPlugin> = ArrayList()) {
             spanned.insert(spanEnd, "\n")
 
             // expand the span to include the new newline for block spans, because they are paragraphs
-            if (it is IAztecBlockSpan) {
+            if (it is IAztecParagraphStyle) {
                 spanned.setSpan(it, spanned.getSpanStart(it), spanEnd + 1, spanned.getSpanFlags(it))
             }
 
@@ -349,8 +351,7 @@ class AztecParser(val plugins: List<IAztecPlugin> = ArrayList()) {
             }
 
             when (nestable) {
-                is HiddenHtmlSpan -> withinNestable(out, text, i, next, nestable, parents, nestable.nestingLevel)
-                is IAztecBlockSpan -> withinNestable(out, text, i, next, nestable, parents, nestable.nestingLevel)
+                is IAztecParagraphStyle -> withinNestable(out, text, i, next, nestable, parents, nestable.nestingLevel)
                 is UnknownHtmlSpan -> withinUnknown(out, text, i, next, nestable)
                 else -> withinContent(out, text, i, next, parents)
             }
@@ -368,7 +369,20 @@ class AztecParser(val plugins: List<IAztecPlugin> = ArrayList()) {
     }
 
     private fun withinNestable(out: StringBuilder, text: Spanned, start: Int, end: Int,
-                               nestable: IAztecSpan, parents: ArrayList<IAztecNestable>?, nestingLevel: Int) {
+                               nestable: IAztecParagraphStyle, parents: ArrayList<IAztecNestable>?, nestingLevel: Int) {
+
+        if (nestable.shouldParseAlignmentToHtml()) {
+            CssStyleFormatter.removeStyleAttribute(nestable.attributes, CssStyleFormatter.CSS_TEXT_ALIGN_ATTRIBUTE)
+
+            nestable.align?.let {
+                val direction = TextDirectionHeuristicsCompat.FIRSTSTRONG_LTR
+                val isRtl = direction.isRtl(text, start, end - start)
+
+                CssStyleFormatter.addStyleAttribute(nestable.attributes,
+                        CssStyleFormatter.CSS_TEXT_ALIGN_ATTRIBUTE, nestable.align!!.toCssString(isRtl))
+            }
+        }
+
         out.append("<${nestable.startTag}>")
         withinHtml(out, text, start, end, parents, nestingLevel)
         out.append("</${nestable.endTag}>")

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

@@ -807,6 +807,9 @@ class AztecText : AppCompatEditText, TextWatcher, UnknownHtmlSpan.OnUnknownHtmlT
             AztecTextFormat.FORMAT_CODE -> inlineFormatter.toggle(textFormat)
             AztecTextFormat.FORMAT_UNORDERED_LIST -> blockFormatter.toggleUnorderedList()
             AztecTextFormat.FORMAT_ORDERED_LIST -> blockFormatter.toggleOrderedList()
+            AztecTextFormat.FORMAT_ALIGN_LEFT,
+            AztecTextFormat.FORMAT_ALIGN_CENTER,
+            AztecTextFormat.FORMAT_ALIGN_RIGHT -> return blockFormatter.toggleTextAlignment(textFormat)
             AztecTextFormat.FORMAT_QUOTE -> blockFormatter.toggleQuote()
             AztecTextFormat.FORMAT_HORIZONTAL_RULE -> lineBlockFormatter.applyHorizontalRule()
             else -> {
@@ -832,6 +835,9 @@ class AztecText : AppCompatEditText, TextWatcher, UnknownHtmlSpan.OnUnknownHtmlT
             AztecTextFormat.FORMAT_CODE -> return inlineFormatter.containsInlineStyle(format, selStart, selEnd)
             AztecTextFormat.FORMAT_UNORDERED_LIST,
             AztecTextFormat.FORMAT_ORDERED_LIST -> return blockFormatter.containsList(format, selStart, selEnd)
+            AztecTextFormat.FORMAT_ALIGN_LEFT,
+            AztecTextFormat.FORMAT_ALIGN_CENTER,
+            AztecTextFormat.FORMAT_ALIGN_RIGHT -> return blockFormatter.containsAlignment(format, selStart, selEnd)
             AztecTextFormat.FORMAT_QUOTE -> return blockFormatter.containsQuote(selectionStart, selectionEnd)
             AztecTextFormat.FORMAT_PREFORMAT -> return blockFormatter.containsPreformat(selectionStart, selectionEnd)
             AztecTextFormat.FORMAT_LINK -> return linkFormatter.containLink(selStart, selEnd)

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

@@ -17,6 +17,9 @@ enum class AztecTextFormat : ITextFormat {
     FORMAT_ITALIC,
     FORMAT_UNDERLINE,
     FORMAT_STRIKETHROUGH,
+    FORMAT_ALIGN_LEFT,
+    FORMAT_ALIGN_CENTER,
+    FORMAT_ALIGN_RIGHT,
     FORMAT_QUOTE,
     FORMAT_LINK,
     FORMAT_HORIZONTAL_RULE,

aztec/src/main/kotlin/org/wordpress/aztec/extensions/EnumExtensions.kt

@@ -0,0 +1,11 @@
+package org.wordpress.aztec.extensions
+
+import android.text.Layout
+
+fun Layout.Alignment.toCssString(isRtl: Boolean): String {
+    return when (this) {
+        Layout.Alignment.ALIGN_NORMAL -> if (!isRtl) "left" else "right"
+        Layout.Alignment.ALIGN_CENTER -> "center"
+        else -> if (isRtl) "left" else "right"
+    }
+}