FIX: Don't surround <aside> with <p> as that is malformed HTML.

This commit is contained in:
Robin Ward 2014-06-30 18:10:46 -04:00
parent 3bd59a55fb
commit 9c48f8f154
5 changed files with 31 additions and 44 deletions

View file

@ -71,31 +71,13 @@ Discourse.Dialect.replaceBlock({
return ['p', ['aside', params, contents]];
}
return ['p', ['aside', params,
['div', {'class': 'title'},
['div', {'class': 'quote-controls'}],
avatarImg ? ['__RAW', avatarImg] : "",
username ? I18n.t('user.said', {username: username}) : ""
],
contents
]];
return ['aside', params,
['div', {'class': 'title'},
['div', {'class': 'quote-controls'}],
avatarImg ? ['__RAW', avatarImg] : "",
username ? I18n.t('user.said', {username: username}) : ""
],
contents
];
}
});
Discourse.Dialect.on("parseNode", function(event) {
var node = event.node,
path = event.path;
// Make sure any quotes are followed by a <br>. The formatting looks weird otherwise.
if (node[0] === 'aside' && node[1] && node[1]['class'] === 'quote') {
var parent = path[path.length - 1],
location = parent.indexOf(node)+1,
trailing = parent.slice(location);
if (trailing.length) {
parent.splice(location, 0, ['br']);
}
}
});

View file

@ -47,9 +47,9 @@ class PostAnalyzer
# strip quotes and code blocks
cooked_stripped = cooked_document
cooked_stripped.search("aside.quote").remove
cooked_stripped.search("pre").remove
cooked_stripped.search("code").remove
cooked_stripped.css("aside.quote").remove
cooked_stripped.css("pre").remove
cooked_stripped.css("code").remove
results = cooked_stripped.to_html.scan(PrettyText.mention_matcher)
@raw_mentions = results.uniq.map { |un| un.first.downcase.gsub!(/^@/, '') }

View file

@ -14,15 +14,15 @@ describe PrettyText do
end
it "produces a quote even with new lines in it" do
PrettyText.cook("[quote=\"EvilTrout, post:123, topic:456, full:true\"]ddd\n[/quote]").should match_html "<p><aside class=\"quote\" data-post=\"123\" data-topic=\"456\" data-full=\"true\"><div class=\"title\">\n<div class=\"quote-controls\"></div>\n<img width=\"20\" height=\"20\" src=\"http://test.localhost/uploads/default/avatars/42d/57c/46ce7ee487/40.png\" class=\"avatar\">EvilTrout said:</div>\n<blockquote><p>ddd</p></blockquote></aside></p>"
PrettyText.cook("[quote=\"EvilTrout, post:123, topic:456, full:true\"]ddd\n[/quote]").should match_html "<aside class=\"quote\" data-post=\"123\" data-topic=\"456\" data-full=\"true\"><div class=\"title\">\n<div class=\"quote-controls\"></div>\n<img width=\"20\" height=\"20\" src=\"http://test.localhost/uploads/default/avatars/42d/57c/46ce7ee487/40.png\" class=\"avatar\">EvilTrout said:</div>\n<blockquote><p>ddd</p></blockquote></aside>"
end
it "should produce a quote" do
PrettyText.cook("[quote=\"EvilTrout, post:123, topic:456, full:true\"]ddd[/quote]").should match_html "<p><aside class=\"quote\" data-post=\"123\" data-topic=\"456\" data-full=\"true\"><div class=\"title\">\n<div class=\"quote-controls\"></div>\n<img width=\"20\" height=\"20\" src=\"http://test.localhost/uploads/default/avatars/42d/57c/46ce7ee487/40.png\" class=\"avatar\">EvilTrout said:</div>\n<blockquote><p>ddd</p></blockquote></aside></p>"
PrettyText.cook("[quote=\"EvilTrout, post:123, topic:456, full:true\"]ddd[/quote]").should match_html "<aside class=\"quote\" data-post=\"123\" data-topic=\"456\" data-full=\"true\"><div class=\"title\">\n<div class=\"quote-controls\"></div>\n<img width=\"20\" height=\"20\" src=\"http://test.localhost/uploads/default/avatars/42d/57c/46ce7ee487/40.png\" class=\"avatar\">EvilTrout said:</div>\n<blockquote><p>ddd</p></blockquote></aside>"
end
it "trims spaces on quote params" do
PrettyText.cook("[quote=\"EvilTrout, post:555, topic: 666\"]ddd[/quote]").should match_html "<p><aside class=\"quote\" data-post=\"555\" data-topic=\"666\"><div class=\"title\">\n<div class=\"quote-controls\"></div>\n<img width=\"20\" height=\"20\" src=\"http://test.localhost/uploads/default/avatars/42d/57c/46ce7ee487/40.png\" class=\"avatar\">EvilTrout said:</div>\n<blockquote><p>ddd</p></blockquote></aside></p>"
PrettyText.cook("[quote=\"EvilTrout, post:555, topic: 666\"]ddd[/quote]").should match_html "<aside class=\"quote\" data-post=\"555\" data-topic=\"666\"><div class=\"title\">\n<div class=\"quote-controls\"></div>\n<img width=\"20\" height=\"20\" src=\"http://test.localhost/uploads/default/avatars/42d/57c/46ce7ee487/40.png\" class=\"avatar\">EvilTrout said:</div>\n<blockquote><p>ddd</p></blockquote></aside>"
end
end

View file

@ -5,6 +5,11 @@ var format = function(input, expected, text) {
equal(cooked, "<p>" + expected + "</p>", text);
};
var formatQ = function(input, expected, text) {
var cooked = Discourse.Markdown.cook(input, {lookupAvatar: false});
equal(cooked, expected, text);
};
test('basic bbcode', function() {
format("[b]strong[/b]", "<span class=\"bbcode-b\">strong</span>", "bolds text");
format("[i]emphasis[/i]", "<span class=\"bbcode-i\">emphasis</span>", "italics text");
@ -106,19 +111,19 @@ test("quotes", function() {
test("quote formatting", function() {
format("[quote=\"EvilTrout, post:123, topic:456, full:true\"][sam][/quote]",
formatQ("[quote=\"EvilTrout, post:123, topic:456, full:true\"][sam][/quote]",
"<aside class=\"quote\" data-post=\"123\" data-topic=\"456\" data-full=\"true\"><div class=\"title\">" +
"<div class=\"quote-controls\"></div>EvilTrout said:</div><blockquote><p>[sam]</p></blockquote></aside>",
"it allows quotes with [] inside");
format("[quote=\"eviltrout, post:1, topic:1\"]abc[/quote]",
formatQ("[quote=\"eviltrout, post:1, topic:1\"]abc[/quote]",
"<aside class=\"quote\" data-post=\"1\" data-topic=\"1\"><div class=\"title\"><div class=\"quote-controls\"></div>eviltrout said:" +
"</div><blockquote><p>abc</p></blockquote></aside>",
"renders quotes properly");
format("[quote=\"eviltrout, post:1, topic:1\"]abc[/quote]\nhello",
formatQ("[quote=\"eviltrout, post:1, topic:1\"]abc[/quote]\nhello",
"<aside class=\"quote\" data-post=\"1\" data-topic=\"1\"><div class=\"title\"><div class=\"quote-controls\"></div>eviltrout said:" +
"</div><blockquote><p>abc</p></blockquote></aside></p>\n\n<p>hello",
"</div><blockquote><p>abc</p></blockquote></aside>\n\n<p>hello</p>",
"handles new lines properly");
});
@ -126,8 +131,8 @@ test("quote formatting", function() {
test("quotes with trailing formatting", function() {
var cooked = Discourse.Markdown.cook("[quote=\"EvilTrout, post:123, topic:456, full:true\"]\nhello\n[/quote]\n*Test*", {lookupAvatar: false});
equal(cooked,
"<p><aside class=\"quote\" data-post=\"123\" data-topic=\"456\" data-full=\"true\"><div class=\"title\">" +
"<div class=\"quote-controls\"></div>EvilTrout said:</div><blockquote><p>hello</p></blockquote></aside></p>\n\n<p><em>Test</em></p>",
"<aside class=\"quote\" data-post=\"123\" data-topic=\"456\" data-full=\"true\"><div class=\"title\">" +
"<div class=\"quote-controls\"></div>EvilTrout said:</div><blockquote><p>hello</p></blockquote></aside>\n\n<p><em>Test</em></p>",
"it allows trailing formatting");
});

View file

@ -161,20 +161,20 @@ test("Quotes", function() {
cookedOptions("[quote=\"eviltrout, post: 1\"]\na quote\n\nsecond line\n\nthird line[/quote]",
{ topicId: 2 },
"<p><aside class=\"quote\" data-post=\"1\"><div class=\"title\"><div class=\"quote-controls\"></div>eviltrout said:</div><blockquote>" +
"<p>a quote</p><p>second line</p><p>third line</p></blockquote></aside></p>",
"<aside class=\"quote\" data-post=\"1\"><div class=\"title\"><div class=\"quote-controls\"></div>eviltrout said:</div><blockquote>" +
"<p>a quote</p><p>second line</p><p>third line</p></blockquote></aside>",
"works with multiple lines");
cookedOptions("1[quote=\"bob, post:1\"]my quote[/quote]2",
{ topicId: 2, lookupAvatar: function(name) { return "" + name; }, sanitize: true },
"<p>1</p>\n\n<p><aside class=\"quote\" data-post=\"1\"><div class=\"title\"><div class=\"quote-controls\"></div>bob" +
"bob said:</div><blockquote><p>my quote</p></blockquote></aside></p>\n\n<p>2</p>",
"<p>1</p>\n\n<aside class=\"quote\" data-post=\"1\"><div class=\"title\"><div class=\"quote-controls\"></div>bob" +
"bob said:</div><blockquote><p>my quote</p></blockquote></aside>\n\n<p>2</p>",
"handles quotes properly");
cookedOptions("1[quote=\"bob, post:1\"]my quote[/quote]2",
{ topicId: 2, lookupAvatar: function() { } },
"<p>1</p>\n\n<p><aside class=\"quote\" data-post=\"1\"><div class=\"title\"><div class=\"quote-controls\"></div>bob said:" +
"</div><blockquote><p>my quote</p></blockquote></aside></p>\n\n<p>2</p>",
"<p>1</p>\n\n<aside class=\"quote\" data-post=\"1\"><div class=\"title\"><div class=\"quote-controls\"></div>bob said:" +
"</div><blockquote><p>my quote</p></blockquote></aside>\n\n<p>2</p>",
"includes no avatar if none is found");
});