feat(node-toolbar): make nodeId optional and get id from context

examples/vite-app/src/examples/NodeToolbar/CustomNode.tsx

@@ -4,7 +4,7 @@ import { Handle, Position, NodeProps, NodeToolbar } from 'reactflow';
 const CustomNode: FC<NodeProps> = ({ id, data }) => {
   return (
     <>
-      <NodeToolbar nodeId={id} isVisible={data.toolbarVisible} position={data.toolbarPosition}>
+      <NodeToolbar isVisible={data.toolbarVisible} position={data.toolbarPosition}>
         <button>delete</button>
         <button>copy</button>
         <button>expand</button>

packages/node-toolbar/src/NodeToolbar.tsx

@@ -8,6 +8,7 @@ import {
   Rect,
   Position,
   internalsSymbol,
+  useNodeId,
 } from '@reactflow/core';
 import cc from 'classcat';
 import shallow from 'zustand/shallow';
@@ -72,9 +73,11 @@ function NodeToolbar({
   offset = 10,
   ...rest
 }: NodeToolbarProps) {
+  const contextNodeId = useNodeId();
+
   const nodesSelector = useCallback(
     (state: ReactFlowState): Node[] => {
-      const nodeIds: string[] = typeof nodeId === 'string' ? [nodeId] : nodeId;
+      const nodeIds = Array.isArray(nodeId) ? nodeId : [nodeId || contextNodeId || ''];
 
       return nodeIds.reduce<Node[]>((acc, id) => {
         const node = state.nodeInternals.get(id);
@@ -84,7 +87,7 @@ function NodeToolbar({
         return acc;
       }, [] as Node[]);
     },
-    [nodeId]
+    [nodeId, contextNodeId]
   );
   const nodes = useStore(nodesSelector, nodesEqualityFn);
   const { transform, nodeOrigin, selectedNodesCount } = useStore(storeSelector, shallow);

packages/node-toolbar/src/types.ts

@@ -2,7 +2,7 @@ import { Position } from '@reactflow/core';
 import type { HTMLAttributes } from 'react';
 
 export type NodeToolbarProps = HTMLAttributes<HTMLDivElement> & {
-  nodeId: string | string[];
+  nodeId?: string | string[];
   isVisible?: boolean;
   position?: Position;
   offset?: number;