Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support for Frame inside iframe / react-frame-component / react-styled-frame

See original GitHub issue

I’d like to use Craft for a drag-and-drop React editor, where the preview is resizable to show responsive behavior.

I tried using react-styled-frame like this:

<Editor resolver={allComponents}>
    <StyledFrame>
        <Frame>
            <Canvas>
                <TextComponent text="Hello world" />
            </Canvas>
        </Frame>
    </StyledFrame>
</Editor>

…but the drag-and-drop indicators show up in the wrong space, probably using the global window coordinates instead of the coordinates within the iframe.

Issue Analytics

State:
Created 4 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

4reactions

nicoladefranceschicommented, Sep 24, 2020

Hi, not sure if this could help, but I’m working to make it support iframes

https://github.com/prevwong/craft.js/pull/125

2reactions

prevwongcommented, Jan 17, 2020

@ackvf Craft.js does not introduce additional markup/attributes (only the draggable attribute is added to the elements with the drag connector). You can still pass the json prop to preview the result and also set the enabled prop to false in the <Editor /> and that will disable all editing features, and remove the draggable attribute as well.

Top Results From Across the Web

Styled components are not rendering in React Iframe?

I've created a React Iframe (using 'react-frame-component'), and some styled components. When I try to render the styled components inside ...

Best practices for React iframes - LogRocket Blog

Short for inline frame, an iframe is essentially a frame within a frame. Using the <iframe/> tag, you can easily embed external content...

react-styled-frame - npm

React iframe that works well with styled-components.. Latest version: 1.1.0, last published: 4 years ago. Start using react-styled-frame in ...

react-styled-frame examples - CodeSandbox

Learn how to use react-styled-frame by viewing and forking example apps that make use of react-styled-frame on CodeSandbox. ; material-ui ; Inject styled...

Perfect iframe React component - clubmate.fi

Here's a cool iframe component that loads fast, is accessible, and easy on the eyes. I'm thinking the iframe (Inline Frame) should have...