Linked nodes aren't properly rendered when added manually

I’m saving/loading node trees to a database, and everything is working except for linked nodes. When I use actions.addNodeTree to add a node that includes editable canvases, the content in those canvases is replaced by the default content specified in the UserComponent.

Using the example from the docs:

const Hero = ({background}) => {
  return (
    <div style={{ background }}>
      <Element is={Text} text="Hero Title" id="title_text" />
      <Element canvas is="section" id="droppable_container">
        <h2>I'm dropped here for now</h2>
      </Element>
    </div>
  )
}

If I were to manually add a node tree where the <h2> was replaced with some other content, it would instead load the <h2>I'm dropped here for now</h2> that’s defined above.

[prevwong]

@hdaggett Fixed in beta.9! 🥳

On another note, based on your example - I think we should probably introduce a helper function to allow developers to easily create a valid Node rather than having to manually create the object and ensuring all the necessary properties are there 😄

[hdaggett]

@Tashows You’ll want to serialize the nodes before saving, and then deserialize after saving and add the deserialized nodeTree to the ROOT node.

Serializing before saving

You might be able to do this with just query.getSerializedNodes(). In my case, I needed to separate into nodeTrees (because my ROOT node has multiple “pages” which can also be rendered independently).

Code for serializing multiple nodeTrees before saving (I call this from the Editor’s onNodesChange event, passing query)

getSerializedPageNodes = (query) => {
  // Get current nodes
  const allNodes = query.getSerializedNodes();
  const rootNode = query.node("ROOT").get();
  const pageNodes = rootNode.data.nodes;
  if (!pageNodes) return;
  const nodeArray = pageNodes.map((nodeId) => {
    const pageNode = query.node(nodeId);
    const pageNodeTree = pageNode.toNodeTree();
    const serializedNodes = nodesToSerializedNodes(
      pageNodeTree.nodes,
      allNodes
    );
    return {
      rootNodeId: nodeId,
      nodes: {
        [nodeId]: allNodes[nodeId],
        ...serializedNodes,
      },
    };
  });

  var pagesObject = {};
  pageNodes.forEach((nodeId, index) => {
    pagesObject[nodeId] = nodeArray[index];
  });
  return pagesObject;
};

// Helper: Replace Nodes with serializedNodes
const nodesToSerializedNodes = (nodes, allNodes) => {
  const serializedNodes = {};
  Object.keys(nodes).forEach((nodeId) => {
    serializedNodes[nodeId] = allNodes[nodeId];
  });
  return serializedNodes;
};

Deserializing after saving

Where serializedTree is a JSON tree as saved above and query is from the useEditor hook:

serializedTreeToNodeTree = (serializedTree, query) => {
  var nodeTree = { ...serializedTree };
  Object.keys(serializedTree.nodes).forEach((nodeId) => {
    nodeTree.nodes[nodeId] = query
      .parseSerializedNode(serializedTree.nodes[nodeId])
      .toNode((node) => (node.id = nodeId));
  });
  return nodeTree;
};

Add the nodeTree to the ROOT node:

actions.addNodeTree(pageNodeTree, "ROOT");

This took a lot of trial and error, and I haven’t updated Craft in a while so maybe there’s a better way. Hope this helps!