Awesome BBCodes Plugin: multi-paragraph, nestable, with auto-complete

(David) #1

Location: GitHub - rux-pizza/discourse-awesome-bbcodes
Created by: @masda70 @cpa

A Discourse Plugin to support nestable BBCode tags spawning across multiple paragraphs in your posts.
By default, support is provided for the following tags:

  • [hide=], [nsfw] : works similarly to the discourse-details plugin
  • [color=] : lets you color text
  • [rainbow] : colors text with rainbow colors.
  • [humanism],[corporate],[smartass],[alpha] : special fonts.
  • [spoiler] : similar to the discourse-spoiler tag

It also features auto-complete to the composer for these tags.

##Other features/improvements

  • fully nestable: you can put colored text inside a hide that is within a spoiler, etc.
  • spoiler works on links and color text, you can put a hide inside a spoiler.
  • implements a standalone BBCode interpreter outside Discourse’s Markdown pipeline.

At the beginning, I wanted to put the parser into its own separate plugin so that each special tag can be in its own plugin, but my initial attempt at packaging the parser into an es6 module failed:

It’s not impossible though, so that in the future I might split each tag’s functionality into a separate plugin.


By pressing [ into the composer, the auto-complete dropdown kicks in to let you choose the tag you want. BBCodes have two modes: block and inline.

  • block: puts its content in a new <div> block.
  • inline: puts the first line of its content within the current the line, and each new line in its own nestable <span> tag.

By default, hide and nsfw have block semantics. The other tags have inline semantics by default, unless a line-break is added after the opening tag.

Tag preview (screenshot)

Do we need to keep support for bbcode [ol] and [li] tags
(mountain) #2

Glad you are showing this plugin here! I remember starring this on GitHub a week or two ago. Other than teaching me a thing or two about Discourse plugins, it also has the ability to be expanded with some extra copying and pasting (for new bbcodes) as I see it.

(David) #3

Glad this taught you a thing or two. It’s one of the reasons I wanted to share it. I learnt from other plugins myself :slight_smile: .
The second reason is why I designed with extensibility in mind: if people show interest, I’m interested in splitting the core functionality into a standalone. It’s indeed very easy to add a new BBCode. People familiar with JsonML emitters as in the original Discourse Markdown pipeline should have no problem extending it. Before I make it a standalone, it also needs a little more testing and feedback from the community so I that perhaps I can improve it to fit people’s use cases.

(@SenpaiMass) #4

Hey @masda70 Thanks, this does look really nice. Though i have a question, can i stack this plugin up with Discourse spoiler alert. I mean on a single instance can i have both discourse spoiler alert as well as Awesome BBCodes installed together, without errors?

(David) #5

Hi Alankrit. This plugin was designed to replace spoiler-alert and the spoiler effect when stacking both is undefined. The spoiler effect of this plugin was specifically tested to properly combine with the other text effects. However I understand the need for a more “modular” approach for adding these effects.

Perhaps what you need is a way to disable certain effects/features of this plugin. I can definitely add do that for a future release.

FYI, if you want to use this plugin, the latest version (0.3.2) is compatible with v1.5.0.beta9, 0.3.1 should work with 1.4.0. (in any case, only auto-complete breaks).


Found a bug. This doesn’t properly blur out the image, but does with the official spoiler plugin:

[spoiler]<img src="..." />[/spoiler]

This does:

<img src="..." />

I would appreciate a way to enable/disable individual BBCodes, we want mainly the color one (…for an in-joke of sorts…), but don’t want the typeface ones or the hide one.

(@SenpaiMass) #7

Thanks David, for your reply. a option as of such would really be helpful. So i can stack it up with Discourse spoiler alert. Patiently waiting for this in the future.


(David) #8

Yes, this is a known issue. It’s documented in the README. It’s a compromise that is hardly satisfactory.


Ah, I see, I must have missed that. Unfortunately, it’s not exactly satisfactory with an existing forum, with a large number of spoiler’d images already posted…

Would it be possible to add a way to disable at least the spoiler tag, and keep the other ones active?

(I could fork your plugin and cut it out myself, but it seems like a rather heavy-handed solution…)

(David) #10

Yes I will be working on it. Ideally I would split the plugin into multiple ones, but I depend on this issue:

It’s easy to hard-code disable it, so forking it in the mean-time is a reasonable solution.

(David) #11

It’s now possible (v0.4.0). Note this version is now only compatible with the new plugin api (v0.1).

Also please note that changing any the above settings require a server restart (similar to toggling html table rendering).

(@SenpaiMass) #12

@masda70 David thanks for this awesome, BB code plugin. I am using it on my community

There is an issue with firefox. Rainbow text doesnt show up. At first i thought this would be my end, but i checked it up with a buddy of mine who uses firefox it is the same.

No text displayed when under [rainbow] tag

(David) #13

Hello @Alankrit_Choudh . Thanks for the feedback.

Firefox does not support the background-clip: text required by this the rainbow tag.

I will update the documentation and provided some graceful degradation for unsupported browsers.

Also, I need to document that it’s now possible to define custom “typeface” tags in the Admin settings, and customize the end result via site CSS customization:

 // css properties