How can I whitelist a class in a theme?


(Joe) #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:

Whitelisting some HTML tags

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


Discourse 2.0.0.beta3 Release Notes
How to add a class attribute to a table created using markdown
(Sam Saffron) #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_Taylor feel like giving it a shot, be my guest.


(Joe) #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?


(Sam Saffron) #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.


(Joe) #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=""]


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.


#7

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


(Rafael dos Santos Silva) #8

I wonder if we could adopt this somehow GitHub - markdown-it/markdown-it-container: Fenced container plugin for markdown-it markdown parser

Maybe under a site setting or a plugin.


(Sam Saffron) #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:

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


(Joe) #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:


(Sam Saffron) #11

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


(Joe) #12

Yes! :fire:

I think that would work and pretty much cover everything.

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


(Kane York) #13

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


(Joffrey Jaffeux) #14

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


(Sam Saffron) #15

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


(Joe) #16

This is great news! :star_struck:

Well I tried anyway :sweat_smile:

PR submitted


User styled posts?