lucky icon indicating copy to clipboard operation
lucky copied to clipboard

HTML attributes that aren't pre-escaped?

Open mdwagner opened this issue 2 years ago • 8 comments

When using LuckyHTML, I've noticed you don't need to run HTML.escape, as it does this for you behind the scenes (#9). Normally, this would make sense to do on everything: both text and attributes.

However, if you're using something like htmx for your client-server interactions, there are situations where the attributes shouldn't be pre-escaped.

As an example, this Screen Shot 2023-08-28 at 4 24 35 PM becomes this Screen Shot 2023-08-28 at 4 24 48 PM which is undesirable ~~(and broken)~~.

We could provide a new tag method that will not escape attributes (you can already do unescaped text with the raw tag helper), but idk if anyone has any other ideas.

mdwagner avatar Aug 28 '23 20:08 mdwagner

Yeah, that makes sense. I've been talking with @watzon on doing better integration with HTMX for Lucky. Another thing needed would be allowing Actions as attribute values.

jwoertink avatar Aug 28 '23 20:08 jwoertink

https://github.com/guilleiguaran/rails-htmx looks like a decent start at what an integration could look like for Lucky.

mdwagner avatar Aug 28 '23 20:08 mdwagner

I was actually looking at the Laravel HTMX library as inspiration, but that Rails one could be a good pattern too

watzon avatar Aug 28 '23 20:08 watzon

also https://github.com/mauricius/laravel-htmx

jwoertink avatar Aug 28 '23 21:08 jwoertink

Actually, it appears I only assumed this pre-escaped text was breaking with htmx, because it looked weird in the dev tools. But it actually works fine. So, maybe this isn't really a bug...

mdwagner avatar Aug 29 '23 02:08 mdwagner

@mdwagner : Thanks for opening this issue, I'm bumping my head into this issue right now (trying to pass the X-CSRF-Token value along with the htmx non get/post request).

Are you sure your request has a myHeader key with a My value value ? (Mine don't with the same "badly" escaped string)

More on topic, when using the https://luckyframework.org/html tool to "translate" this <div hx-get="/example" hx-headers='{"myHeader": "My Value"}'>Get Some HTML, Including A Custom Header in the Request</div> to lucky html, I get invalid code : div "Get Some HTML, Including A Custom Header in the Request", hx_get: "/example", hx_headers: "{"myHeader": "My Value"}" Error: unexpected token: "myHeader"

If the tool is reliable, then it is a bug :-)

rmarronnier avatar Aug 29 '23 17:08 rmarronnier

@rmarronnier Yeah, that does seem like a bug in the html builder, which we should on address on https://github.com/luckyframework/website.

But to your point, yes, I can confirm it does add the correct headers to my outgoing request (I put hx-headers on the body tag).

mdwagner avatar Aug 29 '23 18:08 mdwagner

Yeah, that does seem like a bug in the html builder, which we should on address on https://github.com/luckyframework/website.

Good idea, I'll open an issue.

But to your point, yes, I can confirm it does add the correct headers to my outgoing request (I put hx-headers on the body tag).

I'll try that.

rmarronnier avatar Aug 30 '23 06:08 rmarronnier