Whitelisting elements in Discourse Plugin

Dev
1

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 as well as the 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:

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!

1 Like
2

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

3

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!

4

Did you try:

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

Maybe something is up with -- try without that.

5

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.

3 Likes
6

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