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

**URL:** https://meta.discourse.org/t/awesome-bbcodes-plugin-multi-paragraph-nestable-with-auto-complete/28104
**Category:** Plugin
**Tags:** broken
**Created:** [29 april 2015 om 19:08 UTC](https://meta.discourse.org/t/awesome-bbcodes-plugin-multi-paragraph-nestable-with-auto-complete/28104 "2015-04-29T19:08:29Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![masda70](https://avatars.discourse-cdn.com/v4/letter/m/94ad74/32.png) [@masda70](https://meta.discourse.org/u/masda70)
#### Post date: [29 april 2015 om 19:08 UTC](https://meta.discourse.org/t/awesome-bbcodes-plugin-multi-paragraph-nestable-with-auto-complete/28104/1 "2015-04-29T19:08:29Z")

</div>

Location: [GitHub - rux-pizza/discourse-awesome-bbcodes · GitHub](https://github.com/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.

![](https://global.discourse-cdn.com/meta/original/3X/d/2/d283d64abcf81c48d7a0020b270f4c9fcb59cfd8.png)

##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:  
[https://meta.discourse.org/t/es6-in-server-side-plugin-javascript/27219](https://meta.discourse.org/t/es6-in-server-side-plugin-javascript/27219)  
It’s not impossible though, so that in the future I might split each tag’s functionality into a separate plugin.

##Usage

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)

![](https://global.discourse-cdn.com/meta/original/3X/6/b/6b0075574897c9401b10cd0ddc42bd565198680f.png)

---

<div class="post-metadata">

### Author: ![purldator](https://avatars.discourse-cdn.com/v4/letter/p/bcef8e/32.png) [@purldator](https://meta.discourse.org/u/purldator)
#### Post date: [30 april 2015 om 20:10 UTC](https://meta.discourse.org/t/awesome-bbcodes-plugin-multi-paragraph-nestable-with-auto-complete/28104/2 "2015-04-30T20:10:08Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![masda70](https://avatars.discourse-cdn.com/v4/letter/m/94ad74/32.png) [@masda70](https://meta.discourse.org/u/masda70)
#### Post date: [1 mei 2015 om 06:47 UTC](https://meta.discourse.org/t/awesome-bbcodes-plugin-multi-paragraph-nestable-with-auto-complete/28104/3 "2015-05-01T06:47:00Z")

</div>

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 🙂 .  
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.

---

<div class="post-metadata">

### Author: ![Alankrit\_Choudh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alankrit_choudh/32/119698_2.png) [@Alankrit\_Choudh](https://meta.discourse.org/u/Alankrit_Choudh)
#### Post date: [4 februari 2016 om 14:10 UTC](https://meta.discourse.org/t/awesome-bbcodes-plugin-multi-paragraph-nestable-with-auto-complete/28104/4 "2016-02-04T14:10:31Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![masda70](https://avatars.discourse-cdn.com/v4/letter/m/94ad74/32.png) [@masda70](https://meta.discourse.org/u/masda70)
#### Post date: [5 februari 2016 om 11:01 UTC](https://meta.discourse.org/t/awesome-bbcodes-plugin-multi-paragraph-nestable-with-auto-complete/28104/5 "2016-02-05T11:01:25Z")

</div>

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).

---

<div class="post-metadata">

### Author: ![uppfinnarn](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/uppfinnarn/32/121981_2.png) [@uppfinnarn](https://meta.discourse.org/u/uppfinnarn)
#### Post date: [7 februari 2016 om 14:00 UTC](https://meta.discourse.org/t/awesome-bbcodes-plugin-multi-paragraph-nestable-with-auto-complete/28104/6 "2016-02-07T14:00:58Z")

</div>

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

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

```

This does:

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

```

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.

---

<div class="post-metadata">

### Author: ![Alankrit\_Choudh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alankrit_choudh/32/119698_2.png) [@Alankrit\_Choudh](https://meta.discourse.org/u/Alankrit_Choudh)
#### Post date: [7 februari 2016 om 14:12 UTC](https://meta.discourse.org/t/awesome-bbcodes-plugin-multi-paragraph-nestable-with-auto-complete/28104/7 "2016-02-07T14:12:58Z")

</div>

> [@masda70](#):
>
> Perhaps what you need is a way to disable certain effects/features of this plugin.

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.

Regards  
Alankrit

---

<div class="post-metadata">

### Author: ![masda70](https://avatars.discourse-cdn.com/v4/letter/m/94ad74/32.png) [@masda70](https://meta.discourse.org/u/masda70)
#### Post date: [7 februari 2016 om 23:02 UTC](https://meta.discourse.org/t/awesome-bbcodes-plugin-multi-paragraph-nestable-with-auto-complete/28104/8 "2016-02-07T23:02:11Z")

</div>

> [@uppfinnarn](#):
>
> Found a bug. This doesn’t properly blur out the image, but does with the official spoiler plugin:

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

> [@README](#):
>
> In your posts, surround text or images with `[spoiler]` … `[/spoiler]`.  
> For example:
> 
> ```plaintext
> I watched the murder mystery on TV last night. [spoiler]The butler did it[/spoiler].
> 
> ```
> 
> For images, make sure to add a line-break after the opening tag, this activates block semantics and prevents the light-box post-processor that runs server-side to break your spoiler.
> 
> ```plaintext
> I watched the murder mystery on TV last night. [spoiler]
> <img src="murder.jpg">
> [/spoiler].
> 
> ```
> 
> Spoiler is an improved version over the original discourse-spoiler-alert plugin, in that it spoils links and colored text correctly, but it also spoils multiline content.

---

<div class="post-metadata">

### Author: ![uppfinnarn](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/uppfinnarn/32/121981_2.png) [@uppfinnarn](https://meta.discourse.org/u/uppfinnarn)
#### Post date: [7 februari 2016 om 23:27 UTC](https://meta.discourse.org/t/awesome-bbcodes-plugin-multi-paragraph-nestable-with-auto-complete/28104/9 "2016-02-07T23:27:20Z")

</div>

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…)

---

<div class="post-metadata">

### Author: ![masda70](https://avatars.discourse-cdn.com/v4/letter/m/94ad74/32.png) [@masda70](https://meta.discourse.org/u/masda70)
#### Post date: [8 februari 2016 om 08:11 UTC](https://meta.discourse.org/t/awesome-bbcodes-plugin-multi-paragraph-nestable-with-auto-complete/28104/10 "2016-02-08T08:11:32Z")

</div>

> [@uppfinnarn](#):
>
> Would it be possible to add a way to disable at least the spoiler tag, and keep the other ones active?

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

[https://meta.discourse.org/t/es6-in-server-side-plugin-javascript/27219/2](https://meta.discourse.org/t/es6-in-server-side-plugin-javascript/27219/2)

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

---

<div class="post-metadata">

### Author: ![masda70](https://avatars.discourse-cdn.com/v4/letter/m/94ad74/32.png) [@masda70](https://meta.discourse.org/u/masda70)
#### Post date: [26 maart 2016 om 20:37 UTC](https://meta.discourse.org/t/awesome-bbcodes-plugin-multi-paragraph-nestable-with-auto-complete/28104/11 "2016-03-26T20:37:09Z")

</div>

> [@uppfinnarn](#):
>
> Would it be possible to add a way to disable at least the spoiler tag, and keep the other ones active?

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

 ![](https://global.discourse-cdn.com/meta/original/3X/c/3/c367be7cd1ec14a143fa8cc5f02990d23c4039ff.png)

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

---

<div class="post-metadata">

### Author: ![Alankrit\_Choudh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alankrit_choudh/32/119698_2.png) [@Alankrit\_Choudh](https://meta.discourse.org/u/Alankrit_Choudh)
#### Post date: [4 april 2016 om 19:54 UTC](https://meta.discourse.org/t/awesome-bbcodes-plugin-multi-paragraph-nestable-with-auto-complete/28104/12 "2016-04-04T19:54:39Z")

</div>

@masda70 David thanks for this awesome, BB code plugin. I am using it on my [community](https://discuss.moe)

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.

[![](https://global.discourse-cdn.com/meta/original/4X/1/0/f/10fb3b5238a411e60fd9da379eef7d089fdaa4a6.png) ](https://i.imgur.com/removed.png)  
No text displayed when under `[rainbow]` tag

---

<div class="post-metadata">

### Author: ![masda70](https://avatars.discourse-cdn.com/v4/letter/m/94ad74/32.png) [@masda70](https://meta.discourse.org/u/masda70)
#### Post date: [8 april 2016 om 18:17 UTC](https://meta.discourse.org/t/awesome-bbcodes-plugin-multi-paragraph-nestable-with-auto-complete/28104/13 "2016-04-08T18:17:41Z")

</div>

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:

```plaintext
.typefaces-tag.<tagname>{
 // css properties
}

```

---

<div class="post-metadata">

### Author: ![RGJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rgj/32/523185_2.png) [@RGJ](https://meta.discourse.org/u/RGJ)
#### Post date: [31 mei 2022 om 19:29 UTC](https://meta.discourse.org/t/awesome-bbcodes-plugin-multi-paragraph-nestable-with-auto-complete/28104/14 "2022-05-31T19:29:49Z")

</div>

Broken per [Failure to rebuild app - #6 by DeadlyDragon](https://meta.discourse.org/t/failure-to-rebuild-app/228658/6)
