We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to add a custom component to the bottom of the page by clicking on the left side
The text was updated successfully, but these errors were encountered:
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> ) }
Sorry, something went wrong.
it only root that works why is that
No branches or pull requests
How to add a custom component to the bottom of the page by clicking on the left side
The text was updated successfully, but these errors were encountered: