Iframe component

[maxbaluev]

Please add ability to work with iframe components like https://github.com/ryanseddon/react-frame-component or https://github.com/swiftcarrot/react-frame

All works fine, except styles.

[asabaylus]

@maxbaluev can you please explain what your trying to do? I’m not familiar with the component you linked to.

[maxbaluev]

I use your component in chrome extension.When a component is embedded in web pages, it looks different because of the styles of the pages themselves. The only way is to put the component into the iframe.

[asabaylus]

I’ll see if I can reproduce

[maxbaluev]

It's easy, load u component with and inside any of plugins above

[asabaylus]

@maxbaluev I'm looking into the issue now and its a bit tricky. Adding either frame component will bloat the react-command-palette with code that has a very narrow use case. Also the command palette itself must be wrapped, this mean the trigger must be disabled as the menu will open in a portal DOM node.

Before I invest in a solution, can you explain why you cannot change the CSS in the react-command-palette. It's pretty easy to theme. Do you have a link to your project you can share or a code example I can look at?

[maxbaluev]

@asabaylus I was send you invitation to gitlab repo by email. Currently, the command-palette is injecting directly into pages by crome extension. The main problem is that the palette looks different and with errors on different pages. I think styles simply conflict with sites styles.

[asabaylus]

Yeah I can see how you arrived at the iframe solution. One thing you might consider is wrapping the command-palette in the frame component and setting it to use inline mode. You’ll lose the modal window but you can make your own for this purpose.

See the display prop, one of "modal" or "inline", when set to "modal" the command palette is rendered centered inside a modal. When set to "inline", it is render inline with other page content. Defaults to "modal".

Inline should be compatible with iframe

I’ll see what it’ll take to enable a wrapping component but I can’t promise I’ll add that capability.

[asabaylus]

@maxbaluev it's possible but not simple to pass CSS into iframes. The problem you're likely to hit will be related to browser cross origin policy: https://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe.

I see a couple of options

1. You pass in a custom CSS and render it inside the frame using JSS. ex: https://gist.github.com/sorahn/aba9e0538c0a275df4ad929b158b3e8d here's a link to the docs: https://cssinjs.org/?v=v10.0.0

2. If you dont use a frame component, you can make a custom theme and mark every rule with "!important" and hope for the best ex:

   .atom-container {
   font-family: "system-ui" !important;
   font-weight: lighter !important;
   font-size: 12px !important;
   }
   ...

   FWIW, I think your first option is the way to go I took a crack at getting it started, unfortunately no luck so far. Ill have another look in a few days https://codesandbox.io/s/react-command-palette-with-frame-x14bm

[asabaylus]

@maxbaluev please have a look at the codesandbox. I’m adding a prop from #186 that sets a target node to render the react-modal inside. Hopefully that will enable the frame to work for CSS isolation.

[maxbaluev]

Awesome, thank you!

[asabaylus]

@maxbaluev please note I just published v0.4.0 which introduces a new prop reactModalParentSelector you can use that prop to target a specific DOM node with a selector ex:

    <div id="myElement"></div>
    <CommandPalette
        commands={commands}
        reactModalParentSelector="#myElement"
        open />

Also you may want to checkout https://www.npmjs.com/package/react-shadow I think it may be a better fit for your chrome extension than an iframe. Please LMK if this doesn't work for you.