When I drag an Element into frame, it is not deletable

[nikitakofman]

I am trying to make custom components (headers, footers etc...) and add them as buttons on the toolbox I can drag into the Frame.

This is a simple example of my header component:

import { Element } from "@craftjs/core";
import React from "react";
import { Container } from "../Container";
import { Text } from "../Text";

const HeaderComponent = () => {
  return (
    <Element
      canvas
      id="header"
      is={Container}
      background={{ r: 39, g: 41, b: 41, a: 1 }}
      flexDirection="row"
      width="100%"
      height="60px"
      padding={["10", "20", "10", "20"]}
      alignItems="center"
      justifyContent="space-between"
      custom={{ displayName: "Header" }}
    >
        <Text
          color={{
            r: "255",
            g: "255",
            b: "255",
            a: "1",
          }}
          fontSize="24"
          fontWeight="700"
          text="Logo"
        />
    </Element>
  );
};

export default HeaderComponent;

I have it as a "Header" button in the toolbox that I can drag into the frame, but whenever I do this the element is marked as not deletable, I checked the 'selected' isDeletable prop on it.

What's funny, is that if I directly put the code inside the frame like this:

"use client";

import { Editor, Frame, Element } from "@craftjs/core";
import React, { useState } from "react";

import { Viewport, RenderNode } from "./editor";
import { Container, Text } from "./selectors";
import { Button } from "./selectors/Button";
import { Custom1, OnlyButtons } from "./selectors/Custom1";
import { Custom2, Custom2VideoDrop } from "./selectors/Custom2";
import { Custom3, Custom3BtnDrop } from "./selectors/Custom3";
import { Video } from "./selectors/Video";

import lz from "lzutf8";
import { fetchCall } from "@/hooks/fetchCall";
import Custom4 from "./selectors/Custom4";
import HeaderComponent from "./selectors/Headers/header-1";
import { Button as ShadButton } from "@/components/ui/Button";
import AuthButtons from "@/app/(main)/dashboard/_components/auth-buttons";
import Link from "next/link";
import { Header } from "./editor/Viewport/Header";
import FooterComponent from "./selectors/Footers/footer-1";

type Props = {
  page: string;
};

const EditorNew = (userId: any, websiteId: string) => {
  const [selectedPage, setSelectedPage] = useState<string | null>(null);

  return (
    <div className="h-full">
      <Editor
        resolver={{
          Container,
          Text,
          Custom1,
          Custom2,
          Custom2VideoDrop,
          Custom3,
          Custom3BtnDrop,
          OnlyButtons,
          Button,
          Video,
          Custom4,
          HeaderComponent,
          FooterComponent,
        }}
        enabled={false}
        onRender={RenderNode}
      >
        <Viewport websiteId={userId.websiteId}>
          <Frame>
            <Element
              canvas
              is={Container}
              width="100%"
              height="auto"
              background={{ r: 255, g: 255, b: 255, a: 1 }}
              padding={["40", "40", "40", "40"]}
              custom={{ displayName: "Page", isMainContainer: true }}
            >
              <Element
                is={Container}
                flexDirection="row"
                alignItems="center"
                background={{ r: 39, g: 41, b: 41, a: 1 }}
                justifyContent="center"
                width="auto"
                height="auto"
                custom={{ displayName: "Logo" }}
              >
                <Text
                  color={{
                    r: "255",
                    g: "255",
                    b: "255",
                    a: "1",
                  }}
                  fontSize="24"
                  fontWeight="700"
                  text="Logo"
                />
              </Element>
            </Element>
          </Frame>
        </Viewport>
      </Editor>
    </div>
  );
};

export default EditorNew;

It works perfectly, and has the delete buttons. Seems to be when I specifically drag the 'HeaderComponent' into it for some reason it acts as if it's a top level component and not deletable.

As additional info, when I put the component directly like this :

"use client";

import { Editor, Frame, Element } from "@craftjs/core";
import React, { useState } from "react";

import { Viewport, RenderNode } from "./editor";
import { Container, Text } from "./selectors";
import { Button } from "./selectors/Button";
import { Custom1, OnlyButtons } from "./selectors/Custom1";
import { Custom2, Custom2VideoDrop } from "./selectors/Custom2";
import { Custom3, Custom3BtnDrop } from "./selectors/Custom3";
import { Video } from "./selectors/Video";

import lz from "lzutf8";
import { fetchCall } from "@/hooks/fetchCall";
import Custom4 from "./selectors/Custom4";
import HeaderComponent from "./selectors/Headers/header-1";
import { Button as ShadButton } from "@/components/ui/Button";
import AuthButtons from "@/app/(main)/dashboard/_components/auth-buttons";
import Link from "next/link";
import { Header } from "./editor/Viewport/Header";
import FooterComponent from "./selectors/Footers/footer-1";

type Props = {
  page: string;
};

const EditorNew = (userId: any, websiteId: string) => {
  const [selectedPage, setSelectedPage] = useState<string | null>(null);

  return (
    <div className="h-full">
      <Editor
        resolver={{
          Container,
          Text,
          Custom1,
          Custom2,
          Custom2VideoDrop,
          Custom3,
          Custom3BtnDrop,
          OnlyButtons,
          Button,
          Video,
          Custom4,
          HeaderComponent,
          FooterComponent,
        }}
        enabled={false}
        onRender={RenderNode}
      >
        <Viewport websiteId={userId.websiteId}>
          <Frame>
            <Element
              canvas
              is={Container}
              width="100%"
              height="auto"
              background={{ r: 255, g: 255, b: 255, a: 1 }}
              padding={["40", "40", "40", "40"]}
              custom={{ displayName: "Page", isMainContainer: true }}
            >
              <HeaderComponent />
            </Element>
          </Frame>
        </Viewport>
      </Editor>
    </div>
  );
};

export default EditorNew;

It also doesn't work. It only works when I directly put all the code.

Would greatly appreciate your help, thank you in advance ! :)