# Whitelisting elements in Discourse Plugin

**URL:** https://meta.discourse.org/t/whitelisting-elements-in-discourse-plugin/109727
**Category:** Development
**Created:** [February 21, 2019, 7:23am UTC](https://meta.discourse.org/t/whitelisting-elements-in-discourse-plugin/109727 "2019-02-21T07:23:30Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![timuism](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/timuism/32/112096_2.png) [@timuism](https://meta.discourse.org/u/timuism)
#### Post date: [February 21, 2019, 7:23am UTC](https://meta.discourse.org/t/whitelisting-elements-in-discourse-plugin/109727/1 "2019-02-21T07:23:30Z")

</div>

Hello! I’m super new to discourse, but I am trying to make a plugin that basically creates a bunch of markdown rules. I am using [Developer’s Guide to Markdown Extensions](https://meta.discourse.org/t/developers-guide-to-markdown-extensions/66023) as well as the [discourse-markdown/quotes.js.es6](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/pretty-text/engines/discourse-markdown/quotes.js.es6) for guidance.

My goal is to make a rule that creates a wrap: `<div class="callout callout--dashed>…</div>`. My problem is that whenever I add a 2nd class to an element. It stops assigning any classes to it.

Here is my code:

```javascript
const rulesForCallout = {
  tag: 'callout',
  before: function(state, tagInfo) {
    let token = state.push('div_open', 'div', 1);
    token.attrs = [];
    token.attrs.push(['class', 'callout callout--dashed']);
  },
  after: function(state) {
    state.push('div_close', 'div', -1);
  }
};

export function setup(helper) {
  if(!helper.markdownIt) { return; }

  helper.whiteList(['div.callout']);

  helper.registerPlugin( md => {
    md.block.bbcode.ruler.push("callout", rulesForCallout);
  });
}

```

I have done `console.log(token.attrs)` which returns what I’d expect: ( `[['class', 'callout callout--dashed']]` ). So I am thinking maybe I am not whitelisting properly?

Any help would be much appreciated. Thank you!

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [February 21, 2019, 7:30am UTC](https://meta.discourse.org/t/whitelisting-elements-in-discourse-plugin/109727/2 "2019-02-21T07:30:03Z")

</div>

Interesting … but looks like you are missing a whitelist here for `callout--dashed` ?

---

<div class="post-metadata">

### Author: ![timuism](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/timuism/32/112096_2.png) [@timuism](https://meta.discourse.org/u/timuism)
#### Post date: [February 21, 2019, 7:35am UTC](https://meta.discourse.org/t/whitelisting-elements-in-discourse-plugin/109727/3 "2019-02-21T07:35:25Z")

</div>

Yeah that is missing here, but I did try that, `div.callout.callout--dashed`, and a few other variations.

And thanks for a quick reply btw!

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [February 21, 2019, 7:38am UTC](https://meta.discourse.org/t/whitelisting-elements-in-discourse-plugin/109727/4 "2019-02-21T07:38:25Z")

</div>

Did you try:

```js
helper.whiteList(['div.callout', 'div.callout--dashed']);

```

Maybe something is up with `--` try without that.

---

<div class="post-metadata">

### Author: ![timuism](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/timuism/32/112096_2.png) [@timuism](https://meta.discourse.org/u/timuism)
#### Post date: [February 21, 2019, 7:58am UTC](https://meta.discourse.org/t/whitelisting-elements-in-discourse-plugin/109727/5 "2019-02-21T07:58:29Z")

</div>

I just tried: `helper.whiteList(['div.callout', 'div.callout--dashed']);` which did not work.

I also tried what you recommended & removed the dashes (`calloutdashes`). Issue persists.

So then I tried to remove `div.callout` from `token.attrs.push()` so that it would only set `callout--dashed`. Andddd that works.

---

<div class="post-metadata">

### Author: ![carkod](https://avatars.discourse-cdn.com/v4/letter/c/91b2a8/32.png) [@carkod](https://meta.discourse.org/u/carkod)
#### Post date: [December 9, 2022, 10:42am UTC](https://meta.discourse.org/t/whitelisting-elements-in-discourse-plugin/109727/6 "2022-12-09T10:42:17Z")

</div>

Hi, where did you `console.log`? Inside of the setup function or outside?