Frame wraps elements in a containing div for no reason

Describe the bug When trying to use react-slick inside a frame it reads the divs inside as one slide and for some reason wraps them inside a containing div

To Reproduce Steps to reproduce the behavior:

1-Make a frame inside an editor 2-Create a react slick slider there 3-Create multiple divs for the slides

below is the code used

  <Slider>
    <div>0</Element>
    <div>1</Element>
    <div>2</Element>
  </Slider>

the divs inside the slider get wrapped inside a parent div when put inside a frame, but work fine outside it.

Expected behavior the slider will have multiple slides.

Your environment

Software	Version(s)
craft.js	0.1.0-beta.19
React	17.0.2
TypeScript	3.7.5

[ankri]

Ooh. I liked the idea of embedding craft into SwiperJs so much (since I really like SwiperJs) that I gave it a shot, too and created a proof of concept (codesandbox)

This is the full code of the PoC.

import * as React from "react";
import { Editor, Frame, useNode, Element, useEditor } from "@craftjs/core";
import { Swiper } from "swiper";
import { SwiperSlide } from "swiper/react";

const Button = () => {
  const {
    connectors: { connect, drag }
  } = useNode();
  return (
    <button
      ref={(ref) => {
        connect(drag(ref));
      }}
    >
      Hello Button
    </button>
  );
};

const Text = () => {
  const {
    connectors: { connect, drag }
  } = useNode();
  return (
    <div
      ref={(ref) => {
        connect(drag(ref));
      }}
    >
      Hello Text
    </div>
  );
};

const Container = ({ style, children }) => {
  const {
    connectors: { connect }
  } = useNode();
  return (
    <div
      style={{
        width: 200,
        height: 200,
        ...style
      }}
      ref={(ref) => {
        connect(ref);
      }}
    >
      {children}
    </div>
  );
};

const Toolbox = () => {
  const { connectors } = useEditor();

  return (
    <>
      <button
        ref={(ref) => {
          connectors.create(ref, <Button />);
        }}
      >
        Button
      </button>
      <button
        ref={(ref) => {
          connectors.create(ref, <Text />);
        }}
      >
        Text
      </button>
    </>
  );
};

export default function IndexPage() {
  const [isMounted, setIsMounted] = React.useState(false);
  React.useEffect(() => {
    setIsMounted(true);
  }, []);

  React.useEffect(() => {
    if (isMounted) {
      requestAnimationFrame(() => {
        const swiper = new Swiper(".swiper", {
          spaceBetween: 100
        });
      });
    }
  }, [isMounted]);

  if (!isMounted) {
    return null;
  } else {
    return (
      <Editor resolvers={[Button, Container, Text]}>
        <Frame>
          <div className="swiper">
            <div className="swiper-wrapper">
              {/* Alternatively we could use is="div" and className="swiper-slide" */}
              <Element canvas is={SwiperSlide}>
                <Element is={Container} canvas style={{ background: "red" }} />
              </Element>
              <Element canvas is={SwiperSlide}>
                <Element
                  is={Container}
                  canvas
                  style={{ background: "green" }}
                />
              </Element>
              {/* need to find a logic how to add more slides */}
            </div>
          </div>
        </Frame>
        <div>
          <h2>Toolbox</h2>
          <Toolbox />
        </div>
      </Editor>
    );
  }
}

We need the isMounted stuff, since I used nextjs and we need to make sure we are not on the server.

[El-bana]

i will once it’s ready and yeah i will close it for now, thanks a lot for the help i’m just moving a bit slow with it