Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[4.x] Ability to add inline scripts into the CP #9386

Merged
merged 3 commits into from
Jan 26, 2024

Conversation

jacksleight
Copy link
Contributor

@jacksleight jacksleight commented Jan 24, 2024

This PR allows you to inject custom HTML into the head or body of all CP pages, eg:

Statamic::headHtml('<script>/* 3rd party embed code */</script>');
Statamic::bodyHtml('<custom-vue-component />');

Our use case for this is to embed a custom Vue component that will display a modal overlay in certain circumstances.

Other use cases include:

  1. Adding a chunk of 3rd party embed code such as a support/chat widget
  2. Adding custom portal targets

@jackmcdade
Copy link
Member

Oh man I've wanted this for ages <3

@jasonvarga
Copy link
Member

FYI You can already inject your own components onto the page: https://statamic.dev/extending/vue-components#appending-components

@jackmcdade
Copy link
Member

Oh I misread and thought this was for the frontend. 😬

@jasonvarga
Copy link
Member

Yeah at first I thought the method named was going to need to change because it implied the frontend. But I see we have a bunch of others like Statamic::script(), style(), etc that don't mention CP but are for the CP.

@jacksleight
Copy link
Contributor Author

jacksleight commented Jan 24, 2024

FYI You can already inject your own components onto the page: statamic.dev/extending/vue-components#appending-components

Oh nice! Didn't know that. In that case we might not need this 😂 . Still, might be a useful addition.

@jasonvarga
Copy link
Member

@jacksleight I've replaced what you've done with a Statamic::inlineScript() method. This way, if we ever need to inject script tags with nonces on them, this'll continue to hum away.

I'd rather not start allowing completely arbitrary stuff unless it's absolutely needed.

With the combination of this and the existing way of appending Vue components, you should be able to do what you need.

Let me know!

@jasonvarga jasonvarga changed the title [4.x] Ability to inject custom HTML into all CP pages [4.x] Ability to add inline scripts into the CP Jan 26, 2024
@jacksleight
Copy link
Contributor Author

jacksleight commented Jan 26, 2024

Sounds good! Totally get not wanting to allow any old HTML, something more specific makes sense.

We've actually managed to do what we needed with the component append method you mentioned, but this could still be useful for other things.

@jasonvarga
Copy link
Member

but this could still be useful for other things.

Cool I'll merge this with just the inline scripts then, but if you find a need for one of those other things, we can revisit.

@jasonvarga jasonvarga merged commit 74387f0 into statamic:4.x Jan 26, 2024
19 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants