OpenNoodl/dev-docs/tasks/phase-2-react-migration/TASK-002-react19-ui-fixes/CHECKLIST.md

TASK-002: React 19 UI Fixes - Checklist

Pre-Flight Checks

• Confirm on correct branch
• Review current error messages in devtools
• Understand existing code patterns in each file

File Migrations

1. nodegrapheditor.debuginspectors.js (Critical)

• Replace require('react-dom') with require('react-dom/client')
• Add root property to store React root reference
• Update render() method:
  • Create root only once (if not exists)
  • Use this.root.render() instead of ReactDOM.render()
• Update dispose() method:
  • Use this.root.unmount() instead of ReactDOM.unmountComponentAtNode()
• Test: Right-click on canvas should show node picker
• Test: Debug inspector popups should work

2. commentlayer.ts (High Priority)

• Update _renderReact() to check if roots already exist before creating
• Only call createRoot() if this.backgroundRoot is null/undefined
• Only call createRoot() if this.foregroundRoot is null/undefined
• Test: No warnings about "container already passed to createRoot"
• Test: Comment layer renders correctly

3. TextStylePicker.jsx (Medium Priority)

• Replace import ReactDOM from 'react-dom' with import { createRoot } from 'react-dom/client'
• Update popup rendering logic to use createRoot()
• Store root reference for cleanup
• Update cleanup to use root.unmount() instead of unmountComponentAtNode()
• Test: Text style popup opens and closes correctly

4. nodegrapheditor.ts (Additional - Found During Work)

• Add toolbarRoots: Root[] array for toolbar React roots
• Add titleRoot: Root | null for title bar root
• Update toolbar rendering to reuse roots
• Update reset() to properly unmount all roots
• Test: Toolbar buttons render correctly

5. createnewnodepanel.ts (Additional - Popup Positioning Fix)

• Add explicit dimensions (800x600) to container div
• Compensates for React 18's async createRoot() rendering
• Test: Node picker popup appears centered

Post-Migration Verification

Console Errors

• No ReactDOM.render is not a function errors
• No ReactDOM.unmountComponentAtNode is not a function errors
• No createRoot() on a container already passed warnings

UI Functionality

• Right-click on canvas → Node picker appears (not grab hand)
• Click plus icon → Node picker appears in correct position
• Click visual node → Config panel appears on left
• Click logic node → Config panel appears on left
• Drag wire connectors → Connection can be made between nodes
• Debug inspectors → Show values on connections
• Text style picker → Opens and edits correctly
• Comment layer → Comments can be added and edited

Final Steps

• Update CHANGELOG.md with changes made
• Update LEARNINGS.md if new patterns discovered
• Commit changes with descriptive message