BUGFIX: inline spoiler for text, block spoiler for images

app/assets/javascripts/discourse/dialects/bbcode_dialect.js

@@ -78,6 +78,19 @@ Discourse.Dialect.inlineBetween({
   emitter: function(contents) { return ['a', {href: contents, 'data-bbcode': true}, contents]; }
 });
 
+Discourse.Dialect.inlineBetween({
+  start: '[spoiler]',
+  stop: '[/spoiler]',
+  rawContents: true,
+  emitter: function(contents) {
+    if (/<img/i.test(contents)) {
+      return ['div', { 'class': 'spoiler' }, contents];
+    } else {
+      return ['span', { 'class': 'spoiler' }, contents];
+    }
+  }
+});
+
 replaceBBCodeParamsRaw("url", function(param, contents) {
   return ['a', {href: param, 'data-bbcode': true}, contents];
 });
@@ -99,12 +112,3 @@ Discourse.Dialect.replaceBlock({
     return ['p', ['pre'].concat(blockContents.join("\n"))];
   }
 });
-
-Discourse.Dialect.replaceBlock({
-  start: /(\[spoiler\])([\s\S]*)/igm,
-  stop: '[/spoiler]',
-
-  emitter: function(blockContents) {
-    return ['p', ['div', { 'class': 'spoiler' }, blockContents.join("\n")]];
-  }
-});

spec/components/pretty_text_spec.rb

@@ -40,8 +40,12 @@ describe PrettyText do
         match_html "<p>hello <span class=\"mention\">@bob</span>'s <span class=\"mention\">@bob</span>,<span class=\"mention\">@bob</span>; <span class=\"mention\">@bob</span>\"</p>"
     end
 
-    it 'should add spoiler tags' do
+    it 'should spoiler text' do
-      PrettyText.cook("[spoiler]hello[/spoiler]").should match_html "<p><div class=\"spoiler\">hello</div></p>"
+      PrettyText.cook("[spoiler]hello[/spoiler]").should match_html "<p><span class=\"spoiler\">hello</span></p>"
+    end
+
+    it 'should spoiler img' do
+      PrettyText.cook("[spoiler]<img src='http://cnn.com/a.gif'>[/spoiler]").should match_html "<p><div class=\"spoiler\"><img src=\"http://cnn.com/a.gif\"</div></p>"
     end
   end
 

test/javascripts/lib/bbcode_test.js

@@ -30,7 +30,7 @@ test('code', function() {
 });
 
 test('spoiler', function() {
-  format("[spoiler]it's a sled[/spoiler]", "<div class=\"spoiler\">it's a sled</div>", "supports spoiler tags on text");
+  format("[spoiler]it's a sled[/spoiler]", "<span class=\"spoiler\">it's a sled</span>", "supports spoiler tags on text");
   format("[spoiler]<img src='http://eviltrout.com/eviltrout.png' width='50' height='50'>[/spoiler]", "<div class=\"spoiler\"><img src='http://eviltrout.com/eviltrout.png' width='50' height='50'></div>", "supports spoiler tags on images");
 });