feat: [US-021] - Add dialogue node from toolbar

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/app/editor/[projectId]/FlowchartEditor.tsx

@@ -7,12 +7,15 @@ import ReactFlow, {
   Controls,
   useNodesState,
   useEdgesState,
+  useReactFlow,
+  ReactFlowProvider,
   addEdge,
   Connection,
   Node,
   Edge,
   NodeTypes,
 } from 'reactflow'
+import { nanoid } from 'nanoid'
 import 'reactflow/dist/style.css'
 import Toolbar from '@/components/editor/Toolbar'
 import DialogueNode from '@/components/editor/nodes/DialogueNode'
@@ -45,9 +48,8 @@ function toReactFlowEdges(edges: FlowchartEdge[]): Edge[] {
   }))
 }
 
-export default function FlowchartEditor({
-  initialData,
-}: FlowchartEditorProps) {
+// Inner component that uses useReactFlow hook
+function FlowchartEditorInner({ initialData }: FlowchartEditorProps) {
   // Define custom node types - memoized to prevent re-renders
   const nodeTypes: NodeTypes = useMemo(
     () => ({
@@ -56,6 +58,8 @@ export default function FlowchartEditor({
     []
   )
 
+  const { getViewport } = useReactFlow()
+
   const [nodes, setNodes, onNodesChange] = useNodesState(
     toReactFlowNodes(initialData.nodes)
   )
@@ -68,10 +72,27 @@ export default function FlowchartEditor({
     [setEdges]
   )
 
-  // Placeholder handlers - functionality will be added in future stories
+  // Get center position of current viewport for placing new nodes
+  const getViewportCenter = useCallback(() => {
+    const viewport = getViewport()
+    // Calculate center based on viewport dimensions (assume ~800x600 visible area)
+    // Adjust based on zoom level
+    const centerX = (-viewport.x + 400) / viewport.zoom
+    const centerY = (-viewport.y + 300) / viewport.zoom
+    return { x: centerX, y: centerY }
+  }, [getViewport])
+
+  // Add dialogue node at viewport center
   const handleAddDialogue = useCallback(() => {
-    // TODO: Implement in US-021
-  }, [])
+    const position = getViewportCenter()
+    const newNode: Node = {
+      id: nanoid(),
+      type: 'dialogue',
+      position,
+      data: { speaker: '', text: '' },
+    }
+    setNodes((nodes) => [...nodes, newNode])
+  }, [getViewportCenter, setNodes])
 
   const handleAddChoice = useCallback(() => {
     // TODO: Implement in US-023
@@ -120,3 +141,12 @@ export default function FlowchartEditor({
     </div>
   )
 }
+
+// Outer wrapper component with ReactFlowProvider
+export default function FlowchartEditor(props: FlowchartEditorProps) {
+  return (
+    <ReactFlowProvider>
+      <FlowchartEditorInner {...props} />
+    </ReactFlowProvider>
+  )
+}