Set Component Not to Drop in Child Components

[AgnRakul]

Having Card Components

<div data-gjs-type="Template" id="template" class="template">
        <h3 data-gjs-type="Text">Company Name</h3>
        <h1 style="text-align:center" data-gjs-type="Text">
          We Have one Heck of a newsletter
        </h1>
        <div>
          <input
            data-gjs-type="Input"
            placeholder="Email"
            style="border:none;padding:10px"
          />
          <button
            data-gjs-type="Button"
            style="padding:10px;background-color:black;color:white;border:none"
          >
            Join Now
          </button>
        </div>
        <p data-gjs-type="Text" style="text-decoration:underline">
          No Thanks
        </p>
</div>

I am trying to restrict dropping same component twice so i restricted using data-gjs-type="Template" if its there in the canvas added droppable false so for the first time it will be added because in canvas only body will be available while block:drag for the first time. On the second time block dragging the specified component will be there in the canvas so it will not dropped .. here is this the actually issue if i drop inside child component its added in the canvas for example if i drag the component over the h1 tag inside the data-gjs-type="Template" the component is droppable

const getAllComponents = (model: any, result: any = []) => {
    result.push(model);
    model.components().each((mod: any) => getAllComponents(mod, result));
    return result;
  };

  editor.on("block:drag", (comp: grapesjs.Block) => {
    const GetAllComponentsFromCanvas = getAllComponents(
      editor.DomComponents.getWrapper()
    );
    GetAllComponentsFromCanvas.map((info: grapesjs.Component) => {

      if (info.attributes.type === "Template" ) {
       
        editor.getWrapper().set("droppable", false);
      }
    });
  });

[artf]

The draggable and droppable properties could be defined as functions in order to support custom logic. So, I'd suggest extending your Template component and put that logic inside a custom draggable function.