fix(builder): regenerate node ids on duplicate/paste to prevent state corruption
Craft.js duplicate (ContextMenu + keyboard shortcut) and paste were reusing the original node's toNodeTree() output verbatim, so addNodeTree() inserted duplicate node ids into the editor tree. Added regenerateTreeIds() which deep-clones a NodeTree and remaps rootNodeId, node map keys, node.id, internal node.data.parent, node.data.nodes, and node.data.linkedNodes via Craft.js's own getRandomId(). Also fixed pasteNode to insert as a sibling of the right-clicked node (using its parent) instead of using a leaf node as the new parent, which previously threw. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,132 @@
|
||||
import { describe, test, expect } from 'vitest';
|
||||
import type { NodeTree, Node } from '@craftjs/core';
|
||||
import { regenerateTreeIds } from './craft-tree';
|
||||
|
||||
function makeNode(overrides: Partial<Node>): Node {
|
||||
return {
|
||||
id: 'placeholder',
|
||||
data: {
|
||||
props: {},
|
||||
type: 'div',
|
||||
name: 'div',
|
||||
displayName: 'div',
|
||||
isCanvas: false,
|
||||
parent: null,
|
||||
linkedNodes: {},
|
||||
nodes: [],
|
||||
hidden: false,
|
||||
},
|
||||
info: {},
|
||||
events: { selected: false, dragged: false, hovered: false },
|
||||
dom: null,
|
||||
related: {},
|
||||
rules: {
|
||||
canDrag: () => true,
|
||||
canDrop: () => true,
|
||||
canMoveIn: () => true,
|
||||
canMoveOut: () => true,
|
||||
},
|
||||
_hydrationTimestamp: 0,
|
||||
...overrides,
|
||||
} as Node;
|
||||
}
|
||||
|
||||
function makeTree(): NodeTree {
|
||||
// root -> [childA, childB]; root also has a linkedNodes entry -> childB
|
||||
const root = makeNode({
|
||||
id: 'root-1',
|
||||
data: {
|
||||
...makeNode({}).data,
|
||||
parent: null,
|
||||
nodes: ['child-a-1'],
|
||||
linkedNodes: { slot: 'child-b-1' },
|
||||
},
|
||||
});
|
||||
const childA = makeNode({
|
||||
id: 'child-a-1',
|
||||
data: {
|
||||
...makeNode({}).data,
|
||||
parent: 'root-1',
|
||||
nodes: [],
|
||||
linkedNodes: {},
|
||||
},
|
||||
});
|
||||
const childB = makeNode({
|
||||
id: 'child-b-1',
|
||||
data: {
|
||||
...makeNode({}).data,
|
||||
parent: 'root-1',
|
||||
nodes: [],
|
||||
linkedNodes: {},
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
rootNodeId: 'root-1',
|
||||
nodes: {
|
||||
'root-1': root,
|
||||
'child-a-1': childA,
|
||||
'child-b-1': childB,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
describe('regenerateTreeIds', () => {
|
||||
test('produces an id set fully disjoint from the input', () => {
|
||||
const input = makeTree();
|
||||
const inputIds = Object.keys(input.nodes);
|
||||
const output = regenerateTreeIds(input);
|
||||
const outputIds = Object.keys(output.nodes);
|
||||
|
||||
for (const id of outputIds) {
|
||||
expect(inputIds).not.toContain(id);
|
||||
}
|
||||
});
|
||||
|
||||
test('rootNodeId is a key in nodes and equals that node id', () => {
|
||||
const output = regenerateTreeIds(makeTree());
|
||||
expect(output.nodes[output.rootNodeId]).toBeDefined();
|
||||
expect(output.nodes[output.rootNodeId].id).toBe(output.rootNodeId);
|
||||
});
|
||||
|
||||
test('every child data.parent points to a NEW id that exists in the output', () => {
|
||||
const output = regenerateTreeIds(makeTree());
|
||||
for (const id of Object.keys(output.nodes)) {
|
||||
const node = output.nodes[id];
|
||||
if (node.data.parent !== null) {
|
||||
expect(output.nodes[node.data.parent]).toBeDefined();
|
||||
}
|
||||
}
|
||||
// specifically the two children under the (new) root
|
||||
const newRoot = output.nodes[output.rootNodeId];
|
||||
expect(newRoot.data.nodes.length).toBe(1);
|
||||
const newChildAId = newRoot.data.nodes[0];
|
||||
expect(output.nodes[newChildAId].data.parent).toBe(output.rootNodeId);
|
||||
});
|
||||
|
||||
test('linkedNodes values are remapped to existing new ids', () => {
|
||||
const output = regenerateTreeIds(makeTree());
|
||||
const newRoot = output.nodes[output.rootNodeId];
|
||||
const linkedId = newRoot.data.linkedNodes.slot;
|
||||
expect(linkedId).toBeDefined();
|
||||
expect(output.nodes[linkedId]).toBeDefined();
|
||||
// linked node's parent should still reference the new root
|
||||
expect(output.nodes[linkedId].data.parent).toBe(output.rootNodeId);
|
||||
});
|
||||
|
||||
test('structure/count is preserved', () => {
|
||||
const input = makeTree();
|
||||
const output = regenerateTreeIds(input);
|
||||
expect(Object.keys(output.nodes).length).toBe(Object.keys(input.nodes).length);
|
||||
expect(output.nodes[output.rootNodeId].data.nodes.length).toBe(
|
||||
input.nodes[input.rootNodeId].data.nodes.length
|
||||
);
|
||||
});
|
||||
|
||||
test('does not mutate the input tree', () => {
|
||||
const input = makeTree();
|
||||
const snapshot = JSON.parse(JSON.stringify(input));
|
||||
regenerateTreeIds(input);
|
||||
expect(JSON.parse(JSON.stringify(input))).toEqual(snapshot);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user