How can I whitelist a class in a theme?

Johani · February 1, 2018, 4:18am

I have a working carousel which I would like to package as a theme:

I’ve been trying to figure out how to whitelist a class or attribute for the script to target that would work with under a theme.

I’ve read:

https://meta.discourse.org/t/whitelisting-some-html-tags/24280

and

Whitelist all the code inside of a div tag?

But these topics cover plugin structure and I could not get any of the methods to work in a theme.

I’ve used the [dir] attribute - white-listed by default - in another theme here

However, that won’t work for two reasons:

1- the Next and Previous buttons will be mixed up based on the text direction
2- The slides can contain text like so:

and I’d really rather not go down that rabbit hole where I override the text direction with CSS - that’s just too hacky even for me.

I’m pretty much stuck here

The current selector I’m using to initialize the script on the container is:

$('.cooked>div[dir*="rtl"]')

So my question is:

How can I while-list a class or attribute for a div in a theme?

sam · February 1, 2018, 4:33am

Oh you can not do that yet, what I would like to do is just have .theme-[a-z]+ automatically whitelisted, but it requires fiddling with the whitelister a bit.

Assigning this to me, but may take a few weeks to get around to it.

If @angus or @david feel like giving it a shot, be my guest.

Johani · February 1, 2018, 4:54am

No worries @sam

Thank you for taking this on - no rush at all I’m sure your plate is full

I have one last followup question.

Does defining new tags like:

[foo] 
// slides
[/foo]

to be later converted into

<div class="foo">
// slides
</div>

in the cooked output also require a plugin for now?

sam · February 1, 2018, 4:59am

Yeah if you are trying to amend the markdown pipeline I think you need a plugin. One thing that is good security wise with themes is that they are not allowed to run on the server, this would change it.

Johani · February 1, 2018, 8:07am

I spent a bit more time trying out different things and here's what I found

1- <div dir="foo"></div> is not filtered out even if the value does not match rtl or ltr
2- <div dir></div> is also not filtered out

This line has can be selected with [dir="foo"]

This line can be selected with div[dir=""]

So I can technically make

<div dir="carousel"> 
// slides
</div>

work but I have a feeling that you might be interested in preventing this behavior. I will wait and see what you think.

tshenry · February 14, 2018, 10:43am

Wow, this looks fantastic. Really hoping this sees the light of day.

Falco · February 14, 2018, 8:03pm

I wonder if we could adopt this somehow https://github.com/markdown-it/markdown-it-container

Maybe under a site setting or a plugin.

sam · February 14, 2018, 8:15pm

In general we do blocks in bbcode, so it gets a bit confusing to add another pattern.

The issue here is the whitelister per:

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/pretty-text/white-lister.js.es6#L114-L179

But our DSL is a bit too limited atm to add theme-* as a whitelisted class so we need to fix that.

Johani · February 15, 2018, 3:16am

<aside data-carousel="true"></aside>

Would also work.

Capture

And unlike

<div dir="foo"></div>
or
<div dir></div>

<aside data-carousel="true"></aside> is valid html

Still feels a bit unorthodox though

sam · February 15, 2018, 4:55am

Oh, I can add data-* to div quite easily, does that help?

Johani · February 15, 2018, 5:04am

Yes!

I think that would work and pretty much cover everything.

attribute selectors work with jQuery and CSS just fine.

riking · February 15, 2018, 6:19am

Perhaps data-custom-* or data-c-* – you don’t want to get stuff confused with data-lazyYT

joffreyjaffeux · February 15, 2018, 7:34am

yes and AFAIK it doesn’t have any noticeable performance hit

sam · February 15, 2018, 8:19am

Sure then, can you do a PR to add data-theme-* on DIV, I think it makes good sense and will not clash.

Johani · February 15, 2018, 8:48am

This is great news!

Well I tried anyway

https://github.com/discourse/discourse/pull/5598

PR submitted

bekircem · May 15, 2020, 10:37am

Can we use data-theme-* for the p tags?