From ad8755aa7049447c6e1174e0f1306543d2f74baf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9gis=20Hanol?= <regis@hanol.fr>
Date: Wed, 15 Jan 2014 00:53:06 +0100
Subject: [PATCH] BUGFIX: inline spoiler for text, block spoiler for images

---
 .../discourse/dialects/bbcode_dialect.js      | 22 +++++++++++--------
 spec/components/pretty_text_spec.rb           |  8 +++++--
 test/javascripts/lib/bbcode_test.js           |  2 +-
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/discourse/dialects/bbcode_dialect.js b/app/assets/javascripts/discourse/dialects/bbcode_dialect.js
index 3222747ca9e..9cdb9de55be 100644
--- a/app/assets/javascripts/discourse/dialects/bbcode_dialect.js
+++ b/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")]];
-  }
-});
diff --git a/spec/components/pretty_text_spec.rb b/spec/components/pretty_text_spec.rb
index 5f70dbe1455..ef5c1a6600d 100644
--- a/spec/components/pretty_text_spec.rb
+++ b/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
-      PrettyText.cook("[spoiler]hello[/spoiler]").should match_html "<p><div class=\"spoiler\">hello</div></p>"
+    it 'should spoiler text' do
+      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
 
diff --git a/test/javascripts/lib/bbcode_test.js b/test/javascripts/lib/bbcode_test.js
index 70cda0b6e21..d1b059180f3 100644
--- a/test/javascripts/lib/bbcode_test.js
+++ b/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");
 });