Delete a Top-level node

[alihammad99]

I need to delete a top-level node but the deletion feature works only with nested nodes.

The challenge here is when building a section architecture where you can delete everything inside the section, but the section is still in the dom, which is a problem.

It will be amazing to be able to delete a top-level node just like any other node as it's not the root node.

I read the docs and couldn't find a solution, if you know any solution please let me know.

import { CraftComponents as C } from "@/app/settings/craft-components";
import { Element, useEditor, useNode, Canvas } from "@craftjs/core";

const HeroBase = (props: any) => {
  const {
    id,
    connectors: { connect, drag },
  } = useNode();
  const { isActive } = useEditor((_, query) => ({
    isActive: query.getEvent("selected").contains(id),
  }));

  return (
    <Element // undeletable
      ref={(ref: any) => connect(drag(ref))}
      id="hero-section"
      is={C.Container}
      className="conrainer grow h-side min-h-[50vh] px-4 text-center gap-8 flex flex-col items-center justify-center bg-white"
      {...props}
      custom={{
        displayName: "Hero",
      }}
      canvas
    >
      <Element // deletable
        is={C.Heading}
        className="text-5xl font-bold"
        text={"The Best E-Commerce <br/> Website"}
      />
      <Element
        is={C.Paragraph}
        className="text-sm opacity-80 font-base max-w-[32rem]"
        text={"E-commerce is when individuals or companies buy and sell goods or services online. E-commerce can be carried out on a smartphone app or online store, social media platform, or online marketplace."}
      />
      <div className="flex items-center justify-center gap-2">
        <Element
          is={C.Button}
          size="3"
          text="Browse Products"
          className="uk-button uk-button-ghost"
        />
        <Element
          is={C.Button}
          size="3"
          text="Buy Now"
          className="uk-button uk-button-primary"
        />
      </div>
    </Element>
  );
};

export default HeroBase;

HeroBase.craft = {
  rules: {
    type: "section",
    // Only accept components
    canDrop: (incomingNodes: any) => !incomingNodes?.data?.parent,
  },
};

[fizefeko]

I'm building a large page-builder app and i'll have some base components and some composed components(which will be composed by using those base components) and i'm facing the exact issue. To avoid this i had to add an extra div but it seems redundant and complicates stuff. Is there smth that i'm not understanding about craft js?

@prevwong thank u for Craft.js :)

[prevwong]

Yeah I agree, just need to replace this line with preventing the consumer from deleting the ROOT_NODE instead 🤔

[alihammad99]

Wonderful! I hope it will be solved in the upcoming versions ✨