BUGFIX: spoiler tag on lightboxed images wasn't working

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

@@ -57,8 +57,6 @@ replaceBBCode('ul', function(contents) { return ['ul'].concat(contents); });
 replaceBBCode('ol', function(contents) { return ['ol'].concat(contents); });
 replaceBBCode('li', function(contents) { return ['li'].concat(contents); });
 
-replaceBBCode('spoiler', function(contents) { return ['span', {'class': 'spoiler'}].concat(contents); });
-
 Discourse.Dialect.inlineBetween({
   start: '[img]',
   stop: '[/img]',
@@ -80,7 +78,6 @@ Discourse.Dialect.inlineBetween({
   emitter: function(contents) { return ['a', {href: contents, 'data-bbcode': true}, contents]; }
 });
 
-
 replaceBBCodeParamsRaw("url", function(param, contents) {
   return ['a', {href: param, 'data-bbcode': true}, contents];
 });
@@ -103,3 +100,11 @@ Discourse.Dialect.replaceBlock({
   }
 });
 
+Discourse.Dialect.replaceBlock({
+  start: /(\[spoiler\])([\s\S]*)/igm,
+  stop: '[/spoiler]',
+
+  emitter: function(blockContents) {
+    return ['p', ['div', { 'class': 'spoiler' }, blockContents.join("\n")]];
+  }
+});

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

@@ -213,7 +213,7 @@ Discourse.Dialect = {
       @param {String} [opts.start] The starting token we want to find
       @param {String} [opts.matcher] The regular expression to match
       @param {Boolean} [opts.wordBoundary] If true, the match must be on a word boundary
-      @param {Boolean} [opts.spaceBoundary] If true, the match must be on a sppace boundary
+      @param {Boolean} [opts.spaceBoundary] If true, the match must be on a space boundary
   **/
   inlineRegexp: function(args) {
     this.registerInline(args.start, function(text, match, prev) {

app/assets/javascripts/discourse/lib/lightbox.js

@@ -9,7 +9,11 @@ Discourse.Lightbox = {
   apply: function($elem) {
     $LAB.script("/javascripts/jquery.magnific-popup-min.js").wait(function() {
       $("a.lightbox", $elem).each(function(i, e) {
-        $(e).magnificPopup({
+        var $e = $(e);
+        // do not lightbox spoiled images
+        if ($e.parents(".spoiler").length > 0 || $e.parents(".spoiled").length > 0) { return; }
+
+        $e.magnificPopup({
           type: "image",
           closeOnContentClick: false,
 

spec/components/pretty_text_spec.rb

@@ -41,7 +41,7 @@ describe PrettyText do
     end
 
     it 'should add spoiler tags' do
-      PrettyText.cook("[spoiler]hello[/spoiler]").should match_html "<p><span class=\"spoiler\">hello</span></p>"
+      PrettyText.cook("[spoiler]hello[/spoiler]").should match_html "<p><div class=\"spoiler\">hello</div></p>"
     end
   end
 

test/javascripts/lib/bbcode_test.js

@@ -10,7 +10,6 @@ test('basic bbcode', function() {
   format("[i]emphasis[/i]", "<span class=\"bbcode-i\">emphasis</span>", "italics text");
   format("[u]underlined[/u]", "<span class=\"bbcode-u\">underlined</span>", "underlines text");
   format("[s]strikethrough[/s]", "<span class=\"bbcode-s\">strikethrough</span>", "strikes-through text");
-  format("[spoiler]it's a sled[/spoiler]", "<span class=\"spoiler\">it's a sled</span>", "supports spoiler tags");
   format("[img]http://eviltrout.com/eviltrout.png[/img]", "<img src=\"http://eviltrout.com/eviltrout.png\"/>", "links images");
   format("[url]http://bettercallsaul.com[/url]", "<a href=\"http://bettercallsaul.com\">http://bettercallsaul.com</a>", "supports [url] without a title");
   format("[email]eviltrout@mailinator.com[/email]", "<a href=\"mailto:eviltrout@mailinator.com\">eviltrout@mailinator.com</a>", "supports [email] without a title");
@@ -30,6 +29,11 @@ test('code', function() {
   format("[code]abc\n#def\n[/code]", '<pre>abc\n#def</pre>', 'it handles headings in a [code] block');
 });
 
+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]<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");
+});
+
 test('lists', function() {
   format("[ul][li]option one[/li][/ul]", "<ul><li>option one</li></ul>", "creates an ul");
   format("[ol][li]option one[/li][/ol]", "<ol><li>option one</li></ol>", "creates an ol");