How can I whitelist a class in a theme?

dev
1

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:

slideshow
625626aa-d8ab-4411-a2e5-69a7ae51075a.gif1156×1000 1.35 MB

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 :sweat_smile:

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?

11 Likes
2

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.

4 Likes
4

No worries @sam :sunflower:

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

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?

5

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.

2 Likes
6
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=""]

Capture
Capture.PNG793×54 3.73 KB

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.

1 Like
7

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

1 Like
8

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

Maybe under a site setting or a plugin.

1 Like
9

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.

4 Likes
10 
<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 :no_mouth:

6 Likes
11

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

4 Likes
12

Yes! :fire:

I think that would work and pretty much cover everything.

attribute selectors work with jQuery and CSS just fine. :wine_glass:

2 Likes
13

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

5 Likes
14

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

2 Likes
15

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

2 Likes
16

This is great news! :star_struck:

Well I tried anyway :sweat_smile:

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

PR submitted

8 Likes
17

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