Block-style spoiler tags

(Luke Granger Brown) #1

Need support for [spoiler] tags which are actually misnamed and are [hide] (or [details]) tags? Look no further!

(yes, this is basically the same as the official GitHub - discourse/discourse-details: plugin, you might want to use that instead!)


(FLARD is an injoke on my forum)


[spoiler]contents go here[/spoiler] if you want the default title.

[spoiler=Button title]contents go here[/spoiler] if you don’t.


  • Fully supports nested [spoiler] tags and markdown (so HRs, headers, etc, work fine)
  • No JS! This isn’t really a feature, given that the rest of the forums run on Ember, but I thought it’d be fun.
  • Removes the spoiler contents from emails which are sent. (This needs rethinking, but for my usecase it’s OK since we don’t have reply-via-email turned on yet)
  • Always shows in expanded mode in post previews to allow for easier editing
  • Configurable default spoiler text (i.e. what happens if no button override text is specified)

Known issues

  • Currently recursively invokes the full Markdown->JsonML transpiler instead of letting Discourse pass me the inner JsonML. It (Discourse) seems to have weird issues with block-level Markdown tags at the moment, but that could just be me messing up.
  • Horrific UUID generation stuff in order to easily refer to the checkbox.
  • Currently overrides [spoiler] and not [hide] and this is not configurable (at the moment). PRs welcome, but I’m planning to come back to this in a bit.
  • Probably(?) doesn’t scroll properly in preview mode.

(Kane York) #2

On line 58, I think you can use this.toTree(inner) instead - discourse-bbcode-spoiler/bbcode_spoiler_dialect.js at 9716d81686d0ef728409be53fce545a37cd9224e · lukegb/discourse-bbcode-spoiler · GitHub

(Jake Whitaker) #3

One issue I’ve encountered: block spoilers cannot read links that are outside of the block spoiler, which makes it difficult to use them for organization as a collapsible text feature. You can manually move the links, yes, but adding new ones moves them all back to the bottom of the post.

(Luke Granger Brown) #4

Yeah, I know about this one. The workaround is to use non-ref style links, but it’s a bit of a pain since the Markdown editor uses them by default.