How to add a custom component to the bottom of the page by clicking on the left side

[guanfengwu]

How to add a custom component to the bottom of the page by clicking on the left side

[shota-f]

Document is here(https://craft.js.org/docs/api/useEditor#creating-new-nodes)

This is simple example.

import { Editor, Element, Frame, UserComponent, useEditor } from "@craftjs/core"

const Text: UserComponent<{ children: string }> = ({ children }) => {
  return <div>{children}</div>
}

const Others: UserComponent = () => {
  return <div style={{ padding: 20, backgroundColor: "pink" }}>others</div>
}

const Toolbox = () => {
  const { actions, query } = useEditor()

  return (
    <div>
      <button
        style={{ backgroundColor: "cyan" }}
        onClick={() => {
          // important!!!
          const newNode = query
            .parseFreshNode({
              data: { type: Text, props: { children: "text-2" } },
            })
            .toNode()
          actions.add(newNode, "ROOT")
        }}
      >
        Add Text to Bottom
      </button>
    </div>
  )
}

export default function Demo() {
  return (
    <div>
      <h1>Demo to Add anywhere</h1>
      <Editor resolver={{ Text, Others }}>
        <Toolbox />
        <Frame>
          <Element is="div" canvas>
            <Text>text-1</Text>
            <Others />
          </Element>
        </Frame>
      </Editor>
    </div>
  )
}

[MARKOTHEDEV]

it only root that works why is that