Respnsive frame / container

[alihammad99]

Hi there, I have been searching for a solution to my challenge of responsive features to the nodes when the canvas root node size changes, just like any other dnd editor, there are sizes for mobile, tablet, and web.

I have tried to add a global state for frame size as a temporary solution, I have searched and found this demo destak editor, but I think it's been built with Grapesjs. I searched more and found the same project but it was updated. The bad thing is it doesn't have a responsive button like the old version.

I'm stuck with this for weeks, and I hope you can help me.

Thanks a lot
@prevwong

[alihammad99]

⚠️ Shortest, but not the best solution

I think I found the solution (the only one solution).
We have to wrap our craft.js frame with iframe element, but there will be an issue and your code won't work,

We have to use react-frame-component package, but when you use it, you'll find that tailwind classes won't work, so insert a link tag with an href to a tailwind-cdn.

And finally, make sure to turn of SSR.
There's a helpful guide by Tristan , but I think it's not published yet.

Here's the code:

import dynamic from "next/dynamic";
import IFrame, { useFrame } from "react-frame-component";

...
 <div
          // some logic to handle container responsive size, replace it with yours ...           
            style={{
              containerType: "inline-size",
              minWidth: 0,
              width:
                screen.width === screens.desktop.width
                  ? "100%"
                  : screen.width + "px",
              height:
                screen.width === screens.desktop.width
                  ? "100%"
                  : screen.height + "px",
            }}
          >
            <IFrame className="w-full h-full">
            
            // Tailwind Link
              <link
                href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
                rel="stylesheet"
              />

              <Frame data={store || ""}>
              ...

        //      Dynamic export:     
          export default dynamic(() => Promise.resolve(StoreBuilder), { ssr: false });

[nikitakofman]

The way I did it is I made a react global context that calculates width of the ROOT frame (which is the main "page") , then inside elements I made props that resize depending on the width of the root frame.

[alihammad99]

Well, sounds there's no short solution yet.
There are bugs with using iframe so I had to refactor my code again and update styles with global states