Johani
February 1, 2018, 4:18am
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
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?
11 Likes
sam
February 1, 2018, 4:33am
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
Johani
February 1, 2018, 4:54am
4
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
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
Johani
February 1, 2018, 8:07am
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<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.
1 Like
tshenry
February 14, 2018, 10:43am
7
Wow, this looks fantastic. Really hoping this sees the light of day.
1 Like
Falco
February 14, 2018, 8:03pm
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
sam
February 14, 2018, 8:15pm
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
Johani
February 15, 2018, 3:16am
10
<aside data-carousel="true"></aside>
Would also work.
This line can be selected with [data-carousel="true"]
And unlike
<div dir="foo"></div><div dir></div>
<aside data-carousel="true"></aside> is valid html
Still feels a bit unorthodox though
6 Likes
sam
February 15, 2018, 4:55am
11
Oh, I can add data-* to div quite easily, does that help?
4 Likes
Johani
February 15, 2018, 5:04am
12
Yes!
I think that would work and pretty much cover everything.
attribute selectors work with jQuery and CSS just fine.
2 Likes
riking
February 15, 2018, 6:19am
13
Perhaps data-custom-* or data-c-* – you don’t want to get stuff confused with data-lazyYT
5 Likes
yes and AFAIK it doesn’t have any noticeable performance hit
2 Likes
sam
February 15, 2018, 8:19am
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
Can we use data-theme-* for the p tags?
