Skip to content

Commit e2d2c9b

Browse files
mzorzmzorz
authored
Merge pull request #715 from wordpress-mobile/issue/714-Aztec-break-CSS-style
Aztec may break css styles, and GB cover image blocks
2 parents 7eeb866 + 8d53ea9 commit e2d2c9b

File tree

6 files changed

+76
-62
lines changed

6 files changed

+76
-62
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ class CssUnderlineFormattingTests : BaseTest() {
2727
fun testSimpleCssUnderlineFormatting() {
2828
val text1 = "some"
2929
val text2 = "text"
30-
val html = "$text1<span style=\"text-decoration: underline;\">$text2</span>"
30+
val html = "$text1<span style=\"text-decoration:underline;\">$text2</span>"
3131

3232
EditorPage()
3333
.insertText(text1)
@@ -56,7 +56,7 @@ class CssUnderlineFormattingTests : BaseTest() {
5656
val text1 = "some"
5757
val text2 = "text"
5858
val html = "$text1<u>$text2</u>"
59-
val expectedHtml = "$text1<span style=\"text-decoration: underline;\">$text2</span>"
59+
val expectedHtml = "$text1<span style=\"text-decoration:underline;\">$text2</span>"
6060

6161
EditorPage()
6262
.toggleHtml()
@@ -78,8 +78,8 @@ class CssUnderlineFormattingTests : BaseTest() {
7878
val text1 = "some"
7979
val text2 = "text"
8080
val html = "$text1<u>$text2</u>"
81-
val expectedHtml = "$text1<span style=\"text-decoration: underline;\">te</span>\n\n" +
82-
"<span style=\"text-decoration: underline;\">xt</span>"
81+
val expectedHtml = "$text1<span style=\"text-decoration:underline;\">te</span>\n\n" +
82+
"<span style=\"text-decoration:underline;\">xt</span>"
8383

8484
EditorPage()
8585
.toggleHtml()

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,21 @@ class GutenbergCompatTests : BaseTest() {
5151
.verifyHTML(html)
5252
}
5353

54+
@Test
55+
fun testRetainGutenbergPostContentWithCoverImage() {
56+
val html = "<!-- wp:cover-image {\"url\":\"https://cldup.com/Fz-ASbo2s3.jpg\",\"align\":\"wide\"} -->" +
57+
"<div class=\"wp-block-cover-image has-background-dim alignwide\" style=\"background-image:url('https://cldup.com/Fz-ASbo2s3.jpg');\">" +
58+
" <p class=\"wp-block-cover-image-text\">Of Mountains &amp; Printing Presses</p>" +
59+
"</div>" +
60+
"<!-- /wp:cover-image -->"
61+
62+
EditorPage().toggleHtml()
63+
.insertHTML(html)
64+
.toggleHtml()
65+
.toggleHtml()
66+
.verifyHTML(html)
67+
}
68+
5469
@Test
5570
fun testRetainGutenbergPostContentAndInlineGutenbergComment() {
5671
val html = "<!-- wp:latest-posts {\"postsToShow\":4,\"displayPostDate\":true} /-->" +

‎aztec/src/main/kotlin/org/wordpress/aztec/source/CssStyleFormatter.kt‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,6 @@ class CssStyleFormatter {
9595
attributes.removeAttribute(STYLE_ATTRIBUTE)
9696
} else {
9797
newStyle = newStyle.replace(";".toRegex(), "; ")
98-
newStyle = newStyle.replace(":".toRegex(), ": ")
9998
attributes.setValue(STYLE_ATTRIBUTE, newStyle.trim())
10099
}
101100
}
@@ -119,7 +118,7 @@ class CssStyleFormatter {
119118
style += ";"
120119
}
121120

122-
style += " $styleAttributeName: $styleAttributeValue;"
121+
style += " $styleAttributeName:$styleAttributeValue;"
123122
attributes.setValue(STYLE_ATTRIBUTE, style.trim())
124123
}
125124

@@ -131,7 +130,7 @@ class CssStyleFormatter {
131130

132131
var style = ""
133132
mergedArray.forEach({
134-
style = style + it.replace(":", ": ") + "; "
133+
style = style + it + ";"
135134
})
136135
return style.trimEnd()
137136
}

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

Lines changed: 45 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -809,18 +809,18 @@ class AztecToolbarTest {
809809

810810
editText.setSelection(3)
811811
alignRightButton.performClick()
812-
Assert.assertEquals("<p style=\"text-align: right;\">Hello, this is some unformatted text.</p>",
812+
Assert.assertEquals("<p style=\"text-align:right;\">Hello, this is some unformatted text.</p>",
813813
editText.toHtml())
814814

815815
alignRightButton.performClick()
816816
Assert.assertEquals("<p>Hello, this is some unformatted text.</p>", editText.toHtml())
817817

818818
alignLeftButton.performClick()
819-
Assert.assertEquals("<p style=\"text-align: left;\">Hello, this is some unformatted text.</p>",
819+
Assert.assertEquals("<p style=\"text-align:left;\">Hello, this is some unformatted text.</p>",
820820
editText.toHtml())
821821

822822
alignCenterButton.performClick()
823-
Assert.assertEquals("<p style=\"text-align: center;\">Hello, this is some unformatted text.</p>",
823+
Assert.assertEquals("<p style=\"text-align:center;\">Hello, this is some unformatted text.</p>",
824824
editText.toHtml())
825825
}
826826

@@ -831,14 +831,14 @@ class AztecToolbarTest {
831831

832832
editText.setSelection(3)
833833
alignRightButton.performClick()
834-
Assert.assertEquals("<p style=\"text-align: right;\">Hello, this is some unformatted text.</p>" +
834+
Assert.assertEquals("<p style=\"text-align:right;\">Hello, this is some unformatted text.</p>" +
835835
"Another line<br>Third line",
836836
editText.toHtml())
837837

838838
editText.setSelection(editText.text.indexOf("Third"))
839839
alignCenterButton.performClick()
840-
Assert.assertEquals("<p style=\"text-align: right;\">Hello, this is some unformatted text.</p>" +
841-
"Another line<p style=\"text-align: center;\">Third line</p>",
840+
Assert.assertEquals("<p style=\"text-align:right;\">Hello, this is some unformatted text.</p>" +
841+
"Another line<p style=\"text-align:center;\">Third line</p>",
842842
editText.toHtml())
843843
}
844844

@@ -849,20 +849,20 @@ class AztecToolbarTest {
849849

850850
editText.setSelection(editText.text.indexOf("bold"))
851851
alignRightButton.performClick()
852-
Assert.assertEquals("<p style=\"text-align: right;\"><b>bold</b></p><i>italic</i><br><u>underline</u>",
852+
Assert.assertEquals("<p style=\"text-align:right;\"><b>bold</b></p><i>italic</i><br><u>underline</u>",
853853
editText.toHtml())
854854

855855
editText.setSelection(editText.text.indexOf("italic"))
856856
alignCenterButton.performClick()
857-
Assert.assertEquals("<p style=\"text-align: right;\"><b>bold</b></p>" +
858-
"<p style=\"text-align: center;\"><i>italic</i></p><u>underline</u>",
857+
Assert.assertEquals("<p style=\"text-align:right;\"><b>bold</b></p>" +
858+
"<p style=\"text-align:center;\"><i>italic</i></p><u>underline</u>",
859859
editText.toHtml())
860860

861861
editText.setSelection(editText.text.indexOf("underline"))
862862
alignLeftButton.performClick()
863-
Assert.assertEquals("<p style=\"text-align: right;\"><b>bold</b></p>" +
864-
"<p style=\"text-align: center;\"><i>italic</i></p>" +
865-
"<p style=\"text-align: left;\"><u>underline</u></p>",
863+
Assert.assertEquals("<p style=\"text-align:right;\"><b>bold</b></p>" +
864+
"<p style=\"text-align:center;\"><i>italic</i></p>" +
865+
"<p style=\"text-align:left;\"><u>underline</u></p>",
866866
editText.toHtml())
867867
}
868868

@@ -873,7 +873,7 @@ class AztecToolbarTest {
873873

874874
editText.setSelection(2, editText.length() - 2)
875875
alignRightButton.performClick()
876-
Assert.assertEquals("<p style=\"text-align: right;\"><b>bold</b><br><i>italic</i><br><u>underline</u></p>",
876+
Assert.assertEquals("<p style=\"text-align:right;\"><b>bold</b><br><i>italic</i><br><u>underline</u></p>",
877877
editText.toHtml())
878878
}
879879

@@ -884,7 +884,7 @@ class AztecToolbarTest {
884884

885885
editText.setSelection(editText.text.indexOf("Heading 2"))
886886
alignRightButton.performClick()
887-
Assert.assertEquals("<h1>Heading 1</h1><h2 style=\"text-align: right;\">Heading 2</h2><h3>Heading 3</h3>",
887+
Assert.assertEquals("<h1>Heading 1</h1><h2 style=\"text-align:right;\">Heading 2</h2><h3>Heading 3</h3>",
888888
editText.toHtml())
889889
}
890890

@@ -895,7 +895,7 @@ class AztecToolbarTest {
895895

896896
editText.setSelection(editText.text.indexOf("2") + 1)
897897
alignCenterButton.performClick()
898-
Assert.assertEquals("<h1>Heading 1</h1><h2 style=\"text-align: center;\">Heading 2</h2><h3>Heading 3</h3>",
898+
Assert.assertEquals("<h1>Heading 1</h1><h2 style=\"text-align:center;\">Heading 2</h2><h3>Heading 3</h3>",
899899
editText.toHtml())
900900
}
901901

@@ -906,8 +906,8 @@ class AztecToolbarTest {
906906

907907
editText.setSelection(editText.text.indexOf("2"), editText.text.length)
908908
alignCenterButton.performClick()
909-
Assert.assertEquals("<h1>Heading 1</h1><h2 style=\"text-align: center;\">Heading 2</h2>" +
910-
"<h3 style=\"text-align: center;\">Heading 3</h3>",
909+
Assert.assertEquals("<h1>Heading 1</h1><h2 style=\"text-align:center;\">Heading 2</h2>" +
910+
"<h3 style=\"text-align:center;\">Heading 3</h3>",
911911
editText.toHtml())
912912
}
913913

@@ -918,9 +918,9 @@ class AztecToolbarTest {
918918

919919
editText.setSelection(0, editText.length())
920920
alignLeftButton.performClick()
921-
Assert.assertEquals("<ul><li style=\"text-align: left;\">item 1</li>" +
922-
"<li style=\"text-align: left;\">item 2</li>" +
923-
"<li style=\"text-align: left;\">item 3</li></ul>",
921+
Assert.assertEquals("<ul><li style=\"text-align:left;\">item 1</li>" +
922+
"<li style=\"text-align:left;\">item 2</li>" +
923+
"<li style=\"text-align:left;\">item 3</li></ul>",
924924
editText.toHtml())
925925
}
926926

@@ -931,13 +931,13 @@ class AztecToolbarTest {
931931

932932
editText.setSelection(editText.text.indexOf("1"))
933933
alignLeftButton.performClick()
934-
Assert.assertEquals("<ul><li style=\"text-align: left;\">item 1</li>" +
934+
Assert.assertEquals("<ul><li style=\"text-align:left;\">item 1</li>" +
935935
"<li>item 2</li><li>item 3</li></ul>",
936936
editText.toHtml())
937937

938938
editText.setSelection(editText.text.indexOf("1") + 1)
939939
alignRightButton.performClick()
940-
Assert.assertEquals("<ul><li style=\"text-align: right;\">item 1</li>" +
940+
Assert.assertEquals("<ul><li style=\"text-align:right;\">item 1</li>" +
941941
"<li>item 2</li><li>item 3</li></ul>",
942942
editText.toHtml())
943943

@@ -947,25 +947,25 @@ class AztecToolbarTest {
947947

948948
editText.setSelection(editText.text.indexOf("1") + 2)
949949
alignCenterButton.performClick()
950-
Assert.assertEquals("<ul><li>item 1</li><li style=\"text-align: center;\">item 2</li><li>item 3</li></ul>",
950+
Assert.assertEquals("<ul><li>item 1</li><li style=\"text-align:center;\">item 2</li><li>item 3</li></ul>",
951951
editText.toHtml())
952952

953953
editText.setSelection(editText.text.length)
954954
alignCenterButton.performClick()
955-
Assert.assertEquals("<ul><li>item 1</li><li style=\"text-align: center;\">item 2</li><li style=\"text-align: center;\">item 3</li></ul>",
955+
Assert.assertEquals("<ul><li>item 1</li><li style=\"text-align:center;\">item 2</li><li style=\"text-align:center;\">item 3</li></ul>",
956956
editText.toHtml())
957957
}
958958

959959
@Test
960960
@Throws(Exception::class)
961961
fun orderedListMultiselectAlignment() {
962-
editText.fromHtml("<ol><li>item 1</li><li style=\"text-align: center;\">item 2</li></ol>" +
962+
editText.fromHtml("<ol><li>item 1</li><li style=\"text-align:center;\">item 2</li></ol>" +
963963
"<hr /><ol><li>item 3</li><li>item 4</li></ol>")
964964

965965
editText.setSelection(editText.text.indexOf("2"), editText.text.indexOf("3"))
966966
alignRightButton.performClick()
967-
Assert.assertEquals("<ol><li>item 1</li><li style=\"text-align: right;\">item 2</li></ol><hr />" +
968-
"<ol><li style=\"text-align: right;\">item 3</li><li>item 4</li></ol>",
967+
Assert.assertEquals("<ol><li>item 1</li><li style=\"text-align:right;\">item 2</li></ol><hr />" +
968+
"<ol><li style=\"text-align:right;\">item 3</li><li>item 4</li></ol>",
969969
editText.toHtml())
970970
}
971971

@@ -976,7 +976,7 @@ class AztecToolbarTest {
976976

977977
editText.setSelection(1)
978978
alignRightButton.performClick()
979-
Assert.assertEquals("<blockquote style=\"text-align: right;\">Quote<br>newline</blockquote>",
979+
Assert.assertEquals("<blockquote style=\"text-align:right;\">Quote<br>newline</blockquote>",
980980
editText.toHtml())
981981
}
982982

@@ -987,7 +987,7 @@ class AztecToolbarTest {
987987

988988
editText.setSelection(1)
989989
alignCenterButton.performClick()
990-
Assert.assertEquals("<pre style=\"text-align: center;\">test<br>newline</pre>",
990+
Assert.assertEquals("<pre style=\"text-align:center;\">test<br>newline</pre>",
991991
editText.toHtml())
992992
}
993993

@@ -999,7 +999,7 @@ class AztecToolbarTest {
999999
editText.setSelection(7)
10001000
alignLeftButton.performClick()
10011001
Assert.assertEquals("<code>Code</code>" +
1002-
"<p style=\"text-align: left;\"><code>newline</code></p>",
1002+
"<p style=\"text-align:left;\"><code>newline</code></p>",
10031003
editText.toHtml())
10041004
}
10051005

@@ -1010,7 +1010,7 @@ class AztecToolbarTest {
10101010

10111011
editText.setSelection(3)
10121012
alignRightButton.performClick()
1013-
Assert.assertEquals("<p style=\"text-align: right;\"><!-- Comment --></p>", editText.toHtml())
1013+
Assert.assertEquals("<p style=\"text-align:right;\"><!-- Comment --></p>", editText.toHtml())
10141014

10151015
alignRightButton.performClick()
10161016
Assert.assertEquals("<p><!-- Comment --></p>", editText.toHtml())
@@ -1023,21 +1023,21 @@ class AztecToolbarTest {
10231023

10241024
editText.setSelection(editText.text.indexOf("a"))
10251025
alignRightButton.performClick()
1026-
Assert.assertEquals("<div style=\"text-align: right;\">a<br><div>b<br><span>c</span><br>d</div></div>",
1026+
Assert.assertEquals("<div style=\"text-align:right;\">a<br><div>b<br><span>c</span><br>d</div></div>",
10271027
editText.toHtml())
10281028

10291029
editText.setSelection(editText.text.indexOf("c") + 1)
10301030
alignCenterButton.performClick()
1031-
Assert.assertEquals("<div style=\"text-align: center;\">a<br>" +
1032-
"<div style=\"text-align: center;\">b<br>" +
1033-
"<span style=\"text-align: center;\">c</span><br>d</div></div>",
1031+
Assert.assertEquals("<div style=\"text-align:center;\">a<br>" +
1032+
"<div style=\"text-align:center;\">b<br>" +
1033+
"<span style=\"text-align:center;\">c</span><br>d</div></div>",
10341034
editText.toHtml())
10351035

10361036
editText.setSelection(editText.text.indexOf("d"))
10371037
alignLeftButton.performClick()
1038-
Assert.assertEquals("<div style=\"text-align: left;\">a<br>" +
1039-
"<div style=\"text-align: left;\">b<br>" +
1040-
"<span style=\"text-align: center;\">c</span><br>d</div></div>",
1038+
Assert.assertEquals("<div style=\"text-align:left;\">a<br>" +
1039+
"<div style=\"text-align:left;\">b<br>" +
1040+
"<span style=\"text-align:center;\">c</span><br>d</div></div>",
10411041
editText.toHtml())
10421042
}
10431043

@@ -1048,24 +1048,24 @@ class AztecToolbarTest {
10481048

10491049
editText.setSelection(0)
10501050
alignLeftButton.performClick()
1051-
Assert.assertEquals("<p style=\"text-align: left;\">latin</p>بعبثخز",
1051+
Assert.assertEquals("<p style=\"text-align:left;\">latin</p>بعبثخز",
10521052
editText.toHtml())
10531053

10541054
editText.setSelection(editText.length())
10551055
alignLeftButton.performClick()
1056-
Assert.assertEquals("<p style=\"text-align: left;\">latin</p>" +
1057-
"<p style=\"text-align: left;\">بعبثخز</p>",
1056+
Assert.assertEquals("<p style=\"text-align:left;\">latin</p>" +
1057+
"<p style=\"text-align:left;\">بعبثخز</p>",
10581058
editText.toHtml())
10591059

10601060
alignRightButton.performClick()
1061-
Assert.assertEquals("<p style=\"text-align: left;\">latin</p>" +
1062-
"<p style=\"text-align: right;\">بعبثخز</p>",
1061+
Assert.assertEquals("<p style=\"text-align:left;\">latin</p>" +
1062+
"<p style=\"text-align:right;\">بعبثخز</p>",
10631063
editText.toHtml())
10641064

10651065
editText.setSelection(0)
10661066
alignRightButton.performClick()
1067-
Assert.assertEquals("<p style=\"text-align: right;\">latin</p>" +
1068-
"<p style=\"text-align: right;\">بعبثخز</p>",
1067+
Assert.assertEquals("<p style=\"text-align:right;\">latin</p>" +
1068+
"<p style=\"text-align:right;\">بعبثخز</p>",
10691069
editText.toHtml())
10701070
}
10711071
}

‎aztec/src/test/kotlin/org/wordpress/aztec/CssStyleAttributeTest.kt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ import org.wordpress.aztec.spans.AztecStyleBoldSpan
2020
class CssStyleAttributeTest : AndroidTestCase() {
2121

2222
private val EMPTY_STYLE_HTML = "<b>bold</b>"
23-
private val HTML = "<b style=\"name: value;\">bold</b>"
24-
private val COMPLEX_HTML = "<b style=\"a: b; name: value;\">bold</b>"
23+
private val HTML = "<b style=\"name:value;\">bold</b>"
24+
private val COMPLEX_HTML = "<b style=\"a:b; name:value;\">bold</b>"
2525

2626
private lateinit var parser: AztecParser
2727

‎aztec/src/test/kotlin/org/wordpress/aztec/CssUnderlinePluginTest.kt‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,14 @@ class CssUnderlinePluginTest {
2121
lateinit var editText: AztecText
2222

2323
private val REGULAR_UNDERLINE_HTML = "<u>Underline</u>"
24-
private val REGULAR_UNDERLINE_WITH_STYLES_HTML = "<u style=\"color: green;\">Underline</u>"
25-
private val CSS_STYLE_UNDERLINE_WITH_OTHER_STYLES_HTML = "<span style=\"color: green; text-decoration: underline;\">Underline</span>"
26-
private val COMPLEX_HTML = "<span style=\"test: value\">$CSS_STYLE_UNDERLINE_WITH_OTHER_STYLES_HTML</span>"
27-
private val COMPLEX_REGULAR_DIV_HTML = "<div style=\"test: value;\">$REGULAR_UNDERLINE_WITH_STYLES_HTML</div>"
28-
private val COMPLEX_CSS_DIV_HTML = "<div style=\"test: value;\">$CSS_STYLE_UNDERLINE_WITH_OTHER_STYLES_HTML</div>"
29-
private val CSS_STYLE_UNDERLINE_WITH_EVEN_MORE_STYLES_REORDERED_HTML = "<span style=\"color: green; text-decoration: underline; test: value;\">Underline</span>"
30-
private val CSS_UNDERLINE_INSIDE_BOLD = "<b><span style=\"color: lime; text-decoration: underline;\">Underline</span></b>"
31-
private val CSS_UNDERLINE_OUTSIDE_BOLD = "<span style=\"color: lime; text-decoration: underline;\"><b>Underline</b></span>"
24+
private val REGULAR_UNDERLINE_WITH_STYLES_HTML = "<u style=\"color:green;\">Underline</u>"
25+
private val CSS_STYLE_UNDERLINE_WITH_OTHER_STYLES_HTML = "<span style=\"color:green; text-decoration:underline;\">Underline</span>"
26+
private val COMPLEX_HTML = "<span style=\"test:value\">$CSS_STYLE_UNDERLINE_WITH_OTHER_STYLES_HTML</span>"
27+
private val COMPLEX_REGULAR_DIV_HTML = "<div style=\"test:value;\">$REGULAR_UNDERLINE_WITH_STYLES_HTML</div>"
28+
private val COMPLEX_CSS_DIV_HTML = "<div style=\"test:value;\">$CSS_STYLE_UNDERLINE_WITH_OTHER_STYLES_HTML</div>"
29+
private val CSS_STYLE_UNDERLINE_WITH_EVEN_MORE_STYLES_REORDERED_HTML = "<span style=\"color:green; text-decoration:underline; test:value;\">Underline</span>"
30+
private val CSS_UNDERLINE_INSIDE_BOLD = "<b><span style=\"color:lime; text-decoration:underline;\">Underline</span></b>"
31+
private val CSS_UNDERLINE_OUTSIDE_BOLD = "<span style=\"color:lime; text-decoration:underline;\"><b>Underline</b></span>"
3232

3333
/**
3434
* Initialize variables.

0 commit comments

Comments
 (0)