Puck shouldn't add extraneous elements

[par5er]

I am trying to make an email template editor using Puck and React Email. However, Puck is adding a few extra elements between the root element and the component (see screenshot) which is causing styles such as:

#my-email-container {
  display: flex;
  flex-flow: column;
  align-items: center;
}

to not work as expected.

Example code:

const config = {
  root: {
    render({ children }) {
      return <div className="my-email-container">{children}</div>;
    },
  },
  components: {
    Button: {
      fields: { ... },
      render({ content, url, bgColor }) {
        return (
          <Button
            pX={20}
            pY={12}
            href={url}
            style={{ background: bgColor, color: "#000" }}
          >
            {content}
          </Button>
        );
      },
    },
  },
};

const initialData = {
  root: {
    title: "Title",
  },
  content: [],
};

export default function EmailEditorPage() {
  return (
        <Puck
          config={config}
          data={initialData}
        />
  );
}

[chrisvxd]

Hey @par5er! An email builder is a great use-case.

The elements exist partially because that's how the drag-and-drop (well, react-beautiful-dnd) works. There might be ways to change the behaviour, but it's not something I've explored and my suspicion is that it's non-trivial.

I'd be interested to know what exactly you're trying to achieve stylistically to see if there's another way we can get Puck to behave for you.

[chrisvxd]

Closing in favour of #455