How do I save a node as a template that I can drag into the editor

Describe the solution you’d like save a node as a template that I can drag into the editor

Something like #209 needs to regenerate the ID of each node. But how do I save it in the sidebar and drag it?

The second parameter can now only be ReactElement, and it should be possible to customize the NodeTree type

connectors.create(
    ref,
    <Element />
  )

should like this

connectors.create(
    ref,
    // executed at the start of each drag to generate a new id for each node
   () => {
        const nodeTree = ...;
        const newNodeId = getRandomId();
        ......
        return nodeTree;
    }
  )

[linxianxi]

@hugominas This example can save the template anywhere you want, but you can’t drag it from the sidebar to the editor yet, maybe when my PR passes.

// import { getRandomId } from "@craftjs/utils";

const fromEntries = (pairs) => {
  if (Object.fromEntries) {
    return Object.fromEntries(pairs);
  }
  return pairs.reduce(
    (accum, [id, value]) => ({
      ...accum,
      [id]: value,
    }),
    {}
  );
};

const getCloneTree = useCallback(
  (tree: NodeTree) => {
    const newNodes = {};
    const changeNodeId = (node: Node, newParentId?: string) => {
      const newNodeId = getRandomId();
      const childNodes = node.data.nodes.map((childId) =>
        changeNodeId(tree.nodes[childId], newNodeId)
      );
      const linkedNodes = Object.keys(node.data.linkedNodes).reduce(
        (acc, id) => {
          const newLinkedNodeId = changeNodeId(
            tree.nodes[node.data.linkedNodes[id]],
            newNodeId
          );
          return {
            ...acc,
            [id]: newLinkedNodeId,
          };
        },
        {}
      );

      let tmpNode = {
        ...node,
        id: newNodeId,
        data: {
          ...node.data,
          parent: newParentId || node.data.parent,
          nodes: childNodes,
          linkedNodes,
        },
      };
      let freshNode = query.parseFreshNode(tmpNode).toNode();
      newNodes[newNodeId] = freshNode;
      return newNodeId;
    };

    const rootNodeId = changeNodeId(tree.nodes[tree.rootNodeId]);
    return {
      rootNodeId,
      nodes: newNodes,
    };
  },
  [query]
);

// to save as a template
const handleSaveTemplate = useCallback(() => {
  const tree = query.node(id).toNodeTree();
  const nodePairs = Object.keys(tree.nodes).map((id) => [
    id,
    query.node(id).toSerializedNode(),
  ]);
  const serializedNodesJSON = JSON.stringify(fromEntries(nodePairs));
  const saveData = {
    rootNodeId: tree.rootNodeId,
    nodes: serializedNodesJSON,
  };
  // save to your database
  localStorage.setItem("template", JSON.stringify(saveData));
}, [id, query]);

// add templates where you want
const handleAdd = useCallback(() => {
 // get the template from your database
  const data = JSON.parse(localStorage.getItem("template"));
  const newNodes = JSON.parse(data.nodes);
  const nodePairs = Object.keys(newNodes).map((id) => {
    let nodeId = id;

    return [
      nodeId,
      query
        .parseSerializedNode(newNodes[id])
        .toNode((node) => (node.id = nodeId)),
    ];
  });
  const tree = { rootNodeId: data.rootNodeId, nodes: fromEntries(nodePairs) };
  const newTree = getCloneTree(tree);

  // add templates where you want
  actions.addNodeTree(newTree, ROOT_NODE, 0);
  actions.selectNode(newTree.rootNodeId);
}, [actions, getCloneTree, query]);

[prevwong]

#317 Released in 0.2.0-beta.2 🎉