iframe style injection #409
Comments
|
My first pick would be Opt 1 for maximum flexibility, though I'd be okay with Opt 2 as well. |
|
Ideally for my use-case, this would be dynamic, so updating the props would work (this is isn't clear given the name 'initialContent'). |
|
Considering opening a PR for this, but I came across some potential challenges based on my use case, particularly for working with tailwind. I looked at the code where the styles are being mirrored, and after testing, realized that puck.css and global.css all get injected together in a style tag in the host's layout file. For my use case to work, I'd need style isolation. My assumption is that shadow dom would cause problems with drag/drop (I already tried this a few months ago). Then I tried adding to @measured/puck's build script by additionally generating a module that exports a raw string of puck.css to do something like this: import puckStylesRaw from "../dist/raw-styles"
const AutoFrameComponent = React.forwardRef<HTMLIFrameElement, AutoFrameProps>(
function ({ mirrorHostStyles: boolean, ...props }: AutoFrameProps, ref) {
return (
<Frame {...props} ref={ref}>
<CopyHostStyles puckStyles={puckStylesRaw} mirrorHostStyles={mirrorHostStyles}... >Ultimately, my goal was to keep the puck.css styles in the frame since they're needed, while making the rest of the host styles optional to include. But it started feeling clunky and I realized I may be overcomplicating it. 😅 |
|
@nicolas-angelo @4leite do you need style isolation in the Puck editor, or just in the final rendered output? |
|
@chrisvxd both. Although I know it's easier to manage styles for rendered output. The problem is the mirrored styles showing up in editor. I plan on loading the tailwind play CDN in the editor and letting users enter dynamic classes, so I don't want the tailwind classes (or any classes from my host global stylesheet) ending up in the editor. Im less concerned about isolating the puck.css classes because I don't really expect that to clash. But preferably the editor can be used as a clean slate for styles. |
|
I have the above working. (Tailwind play CDN and users entering dynamic classes). |
|
@4leite that dawned on me the other day but I still felt uneasy having the host styles mirrored in by default, even styles that weren't specifically tailwind generated. Awesome that you got it working though! Feel free to share you're approach if you don't mind it being public 😅 |
|
You can see the gist of it there, although I haven't merged the class isolation and some bug fixes. |
|
@chrisvxd This is not a priority feature for me personally (I have solved it for my use case), I was more chiming in to document how I solved it for what seems like a similar use case. |
|
@chrisvxd yea I think I'm going to work off @4leite solution. But as far as general style injection feedback, I'd be happy with:
And nice to have but not critical:
|
|
Thanks for the feedback both. I'll factor this all in when solving for that. |
Description
Users want to be able to inject styles into iframes for some use-cases.
We should leverage the iframe API to support this.
Proposals
Option 1
Consider leveraging the
initialContentAPI fromauto-frame-component:Option 2
Use a stripped back version of
initialContentAPI fromauto-frame-component:Option 3
Add a dedicated parameters
The text was updated successfully, but these errors were encountered: