Make all child editable

[rajatdhoot123]

All Child are not editable

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

  return (
    <div className="space-y-6 p-5">
      {COMPONENTS_ARRAY.map(({ name, components }) => (
        <div className="p-2" key={name}>
          <div>{name}</div>
          <ul className="flex flex-col">
            {components.map((Comp, index) => (
              <button
                key={index}
                ref={(ref) =>
                  connectors.create(
                    ref,
                    <Element
                      canvas
                      is={Container}
                      width="800px"
                      height="auto"
                      background={{ r: 255, g: 255, b: 255, a: 1 }}
                      padding={["40", "40", "40", "40"]}
                      custom={{ displayName: name }}
                    >
                      <Comp />
                    </Element>
                  )
                }
              >{`Varient ${index + 1}`}</button>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
};

https://ui-components-git-drag-dropv2-rajatdhoot.vercel.app/app_v2__ Working demo

Now here all child of comp become non editable if we write this way.

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

  return (
    <div className="space-y-6 p-5">
      {COMPONENTS_ARRAY.map(({ name, components }) => (
        <div className="p-2" key={name}>
          <div>{name}</div>
          <ul className="flex flex-col">
            {components.map((comp, index) => (
              <button
                key={index}
                ref={(ref) => connectors.create(ref, comp)}
              >{`Varient ${index + 1}`}</button>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
};

Working Demo https://ui-components-git-drag-drop-rajatdhoot.vercel.app/app_v2__

Here all childs are editable but now work with react component where we use hook it throws error need to call hook in functional component

How can we make all child editable.

[rajatdhoot123]

"use client";
import { Editor, Frame, Element, useEditor, useNode } from "@craftjs/core";

import RenderNode from "./render_node";

import { COMPONENTS_ARRAY } from "../constants__/floater";

const Container = ({ background, padding, children, ...props }) => {
  const {
    connectors: { connect, drag },
  } = useNode();
  return (
    <div
      {...props}
      ref={(ref) => connect(drag(ref))}
      style={{
        margin: "5px 0",
        background,
        padding: `${padding}px`,
        zIndex: 9999,
      }}
    >
      {children}
    </div>
  );
};

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

  return (
    <div className="space-y-6 p-5">
      {COMPONENTS_ARRAY.map(({ name, components }) => (
        <div className="p-2" key={name}>
          <div>{name}</div>
          <ul className="flex flex-col">
            {components.map((comp, index) => (
              <button
                key={index}
                ref={(ref) => connectors.create(ref, comp)}
              >{`Varient ${index + 1}`}</button>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
};

const all_components = COMPONENTS_ARRAY.reduce((acc, currentComp) => {
  return {
    ...acc,
    ...currentComp.components.reduce((acc, currentVarient, index) => {
      return {
        ...acc,
        [`${currentComp.name}${index + 1}`]: currentVarient,
      };
    }, {}),
  };
}, {});

const App = () => {
  return (
    <div className="w-full flex page-container">
      <Editor
        onRender={RenderNode}
        resolver={{
          Container,
          ...all_components,
        }}
      >
        <div className="w-3/12">
          <SideBar />
        </div>
        <div className="w-full min-h-screen">
          <Frame className="h-56 w-full bg-red-100">
            <Element
              canvas
              is={Container}
              width="800px"
              height="auto"
              background={{ r: 255, g: 255, b: 255, a: 1 }}
              padding={["40", "40", "40", "40"]}
              custom={{ displayName: "App" }}
            >
              <div>Drag and Drop your component</div>
            </Element>
          </Frame>
        </div>
      </Editor>
    </div>
  );
};

export default App;

Here is full code