Preview dialog - Dompurify parsing error with image shortcode

Pat64 · 2024-10-31 08:45:02

… Or could it be a simple @import “custom-preview.css”; within /textpattern/preview.css in order to keep the checksum rules intact?

etc · 2024-10-31 20:48:53

This does not work (yet) in constructed stylesheets.

phiw13 · 2024-11-01 06:00:22

fwiw, I just checked now, preview.css is not included in the checksums.txt (4.9.0-dev and beta1). So you can edit as much as you want without Diagnostics complaining.
I am not sure @import would ever be allowed to work in this type of stylesheets. I think that would be a little “un-sandboxy”… I could be wrong of course.

etc · 2024-11-02 19:08:00

phiw13 wrote #338102:

fwiw, I just checked now, preview.css is not included in the checksums.txt (4.9.0-dev and beta1). So you can edit as much as you want without Diagnostics complaining.

That’s fine then, caveat utilitor.

For testing purposes, I have just incorporated and enabled PrismJS rules in text previews too, to highlight eventual txp tags/shortcodes. But there is a little annoyance: these rules are proper to each admin theme and are directly incorporated into the main theme stylesheet. Since we have no convention on theme assets paths, core does not know where to extract these rules from. Presently, I have added the ruleset supplied with Hive to preview.css, but this is not ideal (though users can modify them to their liking). Ideas welcome.

Pat64 · 2024-11-03 05:34:45

Yep! Fascinating (I’m loving it).

First: maybe you could change the “break-space” property to avoid long code view by Prism (horizontal scroll bar):

code[class*=language-],pre[class*=language-]{
	/*
	white-space:pre
	*/
	white-space:break-spaces
}

Second: Adding this could render links into current text color: a{color:currentColor}

Finally: the color rendering by Prism in Dark Mode is a little dark, IMHO…

I added part of my front CSS code in the preview.css file: preview is rendered as expected (a photo gallery associated to a TXP short code). Excepted that’s not a solution (and I don’t know what other possibility)…

Last edited by Pat64 (2024-11-03 05:37:11)

phiw13 · 2024-11-03 07:33:14

etc wrote #338119:

For testing purposes, I have just incorporated and enabled PrismJS rules in text previews too, to highlight eventual txp tags/shortcodes. But there is a little annoyance: these rules are proper to each admin theme and are directly incorporated into the main theme stylesheet. Since we have no convention on theme assets paths, core does not know where to extract these rules from. Presently, I have added the ruleset supplied with Hive to preview.css, but this is not ideal (though users can modify them to their liking). Ideas welcome.

hmmm. None too enthusiast.

If you start to go that way, it might make sense (eventually) to make preview.css part of the theme. Might not be ideal as that sanitising in the preview widget is a kind of core security feature.

Pat64 wrote #338121:

Yep! Fascinating (I’m loving it).

First: maybe you could change the “break-space” property to avoid long code view by Prism (horizontal scroll bar):

code[class*=language-],pre[class*=language-]{…

Yes absolutely.

I would make that white-space: pre-wrap as that preserves the white-space sequences better in my experience.

Second: Adding this could render links into current text color: a{color:currentColor}

Why making link colour identical to the current text colour?

Pat64 · 2024-11-03 08:30:43

… The solution could be to check if a custom-preview.css file is present (quite logical and follows the custom.css file available for admin themes); then add it in the Shadow DOM: (textpattern.js line)

etc · 2024-11-03 09:50:06

Thanks for testing. I tend to agree that simpler is better, though PrismJS is handy. Actually, PrismJS is not a very reliable way to highlight txp tags with deeply nested attributes, unless we tweak its regex patterns. My css-fu is very limited, so if you see a simple alternative to PrismJS, I can tweak the markup of txp tags/shortcodes in text preview. Currently they are just wrapped in <code class="language-markup txp-tag" />.

Otherwise, we can leave PrismJS markup in place and let users choose their rules. There is a problem with dark mode though: body.darkmode .token.tag-like rules (logically) seem to be ignored in shadow dom, only css variables are imported. Isn’t there a better way (media rule?) to switch darkmode than applying a class?

phiw13 wrote #338122:

If you start to go that way, it might make sense (eventually) to make preview.css part of the theme. Might not be ideal as that sanitising in the preview widget is a kind of core security feature.

Admin themes are also php/js, so we have to trust theme authors anyway. But I’m all for a core solution.

Pat64 wrote #338123:

… The solution could be to check if a custom-preview.css file is present (quite logical and follows the custom.css file available for admin themes); then add it in the Shadow DOM: (textpattern.js line)

Where must it be searched for? We have no conventions on admin theme structure.

etc · 2024-11-04 16:17:54

etc wrote #338124:

Actually, PrismJS is not a very reliable way to highlight txp tags with deeply nested attributes, unless we tweak its regex patterns.

That’s about it, up to dark mode styling. If someone fancies converting colors into css variables and providing their dark mode variants, please be my guest.

jakob · 2024-11-04 21:09:44

There’s some mind-boggling regex-foo going on in your latest commits. I wouldn’t even know how to start writing that! Just expressing my admiration :-)

At some point I should sit down and try to understand it. I’d love to make my favourite code editor work better with txp:tags.

etc · 2024-11-04 21:43:31

jakob wrote #338127:

There’s some mind-boggling regex-foo going on in your latest commits. I wouldn’t even know how to start writing that! Just expressing my admiration :-)

All credits go to the father of tags in tags attributes (Ruud?). Still looks like a wizardry for me :-)

He has also broken the original XML syntax of txp, making me struggle with code highlighters now.

phiw13 · 2024-11-05 02:00:05

etc wrote #338126:

If someone fancies converting colors into css variables and providing their dark mode variants, please be my guest.

Ok. Here is an idea:

Create a core stylesheet at the root of /textpattern/ that is always loaded independent of theme. Link it from txp-libhead.php, before the JS files.
Populate it with a set of custom-properties, preferably starting with a --txp- prefix (similar to the convention of core class name).
give them some values (could be copied from Hive.css).

These values will be used by the admin theme (by default). An individual theme could then override those values if preferred; or ignore them completely and go their own way. That theme could even alias those core custom-properties to their own naming scheme, eg. --txp-primary-color: var(--mytheme-main-color).

Give me a day or two and I’ll post you some first draft.

That will also solve of the hard to read choices from the default prism styling (which is what Hive uses, I think) as the individual theme can assign them values as needed.

–^–

Your addition to prism.js to handle (nested) txp tags is quite interesting and after a very brief test works fine here.

Could that also be used outside of Textpattern admin, e.g if one uses prism.js for code colouring on the public side? Or is your code dependent on other things in Textpattern.js (haven’t really tried to untangle all).

Textpattern CMS

Textpattern CMS support forum

#13 2024-10-31 08:45:02

Re: Preview dialog - Dompurify parsing error with image shortcode

#14 2024-10-31 20:48:53

Re: Preview dialog - Dompurify parsing error with image shortcode

#15 2024-11-01 06:00:22

Re: Preview dialog - Dompurify parsing error with image shortcode

#16 2024-11-02 19:08:00

Re: Preview dialog - Dompurify parsing error with image shortcode

phiw13 wrote #338102:

#17 2024-11-03 05:34:45

Re: Preview dialog - Dompurify parsing error with image shortcode

#18 2024-11-03 07:33:14

Re: Preview dialog - Dompurify parsing error with image shortcode

etc wrote #338119:

Pat64 wrote #338121:

#19 2024-11-03 08:30:43

Re: Preview dialog - Dompurify parsing error with image shortcode

#20 2024-11-03 09:50:06

Re: Preview dialog - Dompurify parsing error with image shortcode

phiw13 wrote #338122:

Pat64 wrote #338123:

#21 2024-11-04 16:17:54

Re: Preview dialog - Dompurify parsing error with image shortcode

etc wrote #338124:

#22 2024-11-04 21:09:44

Re: Preview dialog - Dompurify parsing error with image shortcode

#23 2024-11-04 21:43:31

Re: Preview dialog - Dompurify parsing error with image shortcode

jakob wrote #338127:

#24 2024-11-05 02:00:05

Re: Preview dialog - Dompurify parsing error with image shortcode

etc wrote #338126:

Board footer