Making Custom Actions Undoable

The historyAction Wrapper

// historyAction is exposed as part of the workflowStore state
// It is added by historyMiddleware and available on the store

historyAction: (fn: () => void) => void

// Usage pattern:
myNewAction: (param: string) => {
    get().historyAction(() => {
        set(state => ({
            // ... your state mutation here
        }));
    });
}

Example: Adding a Custom "Duplicate Node" Action

// Add to workflowStore actions
duplicateNode: (nodeId: string) => {
    get().historyAction(() => {
        const { nodes } = get();
        const original = nodes.find(n => n.id === nodeId);
        if (!original) return;

        const duplicate: WorkflowNode = {
            ...original,
            id      : crypto.randomUUID(),
            position: { x: original.position.x + 40, y: original.position.y + 40 },
            data    : JSON.parse(JSON.stringify(original.data))  // deep copy config
        };

        set(state => ({ nodes: [...state.nodes, duplicate] }));
    });
}

// Now duplicateNode is undoable with Ctrl+Z
// The snapshot before duplication is stored → undo removes the duplicate

Example: "Add Comment Node" (Non-Executable Node)

addCommentNode: (text: string, position: XYPosition) => {
    get().historyAction(() => {
        set(state => ({
            nodes: [...state.nodes, {
                id      : crypto.randomUUID(),
                type    : 'CommentNode',
                position,
                data    : { label: text, config: {}, inputPorts: [], outputPorts: [] }
            }]
        }));
    });
}

Decision Guide: Should My Action Use historyAction?