Added duplicate functionality to RenderNode.

[JohnFromme]

Added a duplicate button beside the delete button in the landing example for more functionality within the editor. This also provides developers with more examples on how they can use craft.js to meet there needs.

[netlify]

✅ Deploy Preview for craftjs ready!

Name	Link
🔨 Latest commit	3dd2607
🔍 Latest deploy log	https://app.netlify.com/sites/craftjs/deploys/644af7cdf0e69300082e9aed
😎 Deploy Preview	https://deploy-preview-521--craftjs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[JohnFromme]

Question: @prevwong do you have any suggestions on how I can make my pull request better?

Thank you very much for your time!

[nilooy]

i have tried different ways to add duplicate functionality works for any section except ROOT, but couldn't make it work.

const duplicate = () => {
    const {
      data: { type, props },
    } = query.node(id).get();
    actions.add(query.createNode(React.createElement(type, props)), parent);
  };

this one can duplicate the selected element but not the child ones. Any idea how to achieve that?

[nilooy]

the closest i got duplicating the entire node with children is

  const duplicate = () => {
    const originalNodeTree = query.node(id).toNodeTree();

    const {
      data: { parent },
    } = query.node(id).get();

    console.log({ originalNodeTree });

    actions.addNodeTree(originalNodeTree, parent, 1);
  };

but the issue i can see the the old ids remains which causes bunch of issues,

[ismajl-ramadani]

Hey @JohnFromme, there are some cases that need to be handled when cloning elements. You can't do it just by creating a new element with React and adding it to the editor. Check out this comment and also other discussions on the thread. #209 (comment)

[nilooy]

Hey @JohnFromme, there are some cases that need to be handled when cloning elements. You can't do it just by creating a new element with React and adding it to the editor. Check out this comment and also other discussions on the thread. #209 (comment)

Thanks, the code from your reference issues, works fantastically.

[JohnFromme]

Hey @JohnFromme, there are some cases that need to be handled when cloning elements. You can't do it just by creating a new element with React and adding it to the editor. Check out this comment and also other discussions on the thread. #209 (comment)

Thank you very much! I will take a look & make improvements.

[jorgegonzalez]

Any updates on this? This would be a great feature to have in the core library @prevwong

[changeset-bot]

⚠️ No Changeset found

Latest commit: 00350fd

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
craftjs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 2, 2023 1:05am

[xs-nayeem]

The clone appears at the end of the Editor. How do I duplicate it right after the node itself?

[rohailtaha]

The clone appears at the end of the Editor. How do I duplicate it right after the node itself?

You can get the current node's index in the parent node's children and add the duplicate in the next index.

const { actions, query } = useEditor()
const { parentNodeId, id } = useNode(node => ({
parentNodeId: node.data.parent
}))

const childNodes = query.node(parentNodeId).get().data.nodes;
currentNodeIndex = childNodes.indexOf(id);
actions.addNodeTree(nodeTree, parent, currentNodeIndex + 1);