Added node editing feature with save/cancel utility

[c-jank]

Adds inline editing capability to graph visualization nodes. Users can now click an edit button (✎) on any node to modify its value directly within the graph, with changes automatically syncing to the left-hand JSON text editor.

Changes

New Features

• Inline Node Editing: Click the ✎ button on any graph node to enter edit mode
• Dual Editor Support:
  • Text nodes (primitive values): Single-line text input with type-aware parsing
  • Object/Array nodes: Row-level editing for individual properties
• Synchronized Updates: Changes to graph nodes automatically update the JSON text editor and re-parse the graph
• Keyboard Navigation:
  • Enter or Save button to commit changes
  • Escape or Cancel button to discard changes
• Visual Feedback: Edit button appears on hover, active state shows when in edit mode

Files Created

• src/features/editor/views/GraphView/CustomNode/TextEditComponent.tsx — Inline editor for primitive values
• src/features/editor/views/GraphView/CustomNode/RowEditComponent.tsx — Inline editor for object/array rows
• src/features/editor/views/GraphView/stores/useNodeEdit.ts — Zustand store for edit state management
• src/lib/utils/updateJsonByPath.ts — Utility for updating nested JSON by path

Files Modified

• src/features/editor/views/GraphView/CustomNode/TextNode.tsx — Added edit mode rendering and edit button
• src/features/editor/views/GraphView/CustomNode/ObjectNode.tsx — Added row-level editing and edit button
• src/features/editor/views/GraphView/CustomNode/styles.tsx — Added styled components for editor UI and button
• src/store/useJson.ts — Added handleSave() and handleCancel() actions; handleSave() syncs changes to left-hand editor via useFile.setContents()

Technical Details

State Management

• useNodeEdit store: Tracks which node is in edit mode (editingNodeId) and provides toggleEdit(), startEdit(), and stopEdit() actions
• useJson store: Extended with handleSave(path, newValue) that updates JSON, re-parses the graph, and syncs the text editor

Architecture

• Edit UI is rendered inside SVG foreignObject elements (valid HTML-in-SVG pattern)
• Edit button is positioned absolutely within the foreignObject and revealed on hover via CSS
• Parser (jsonParser.ts) provides node paths used by update utilities to modify nested JSON structures

User Flow

1. Hover over a node → edit button (✎) becomes visible
2. Click edit button → node switches to edit mode with input field(s)
3. Edit value(s) and press Enter or click Save → updates JSON, re-renders graph, syncs text editor
4. Press Escape or click Cancel → exits edit mode without saving

Testing

• Tested with text nodes (strings, numbers, booleans) and object/array nodes (properties)
• Verified that changes persist to global JSON state and update the left-hand editor
• Confirmed that graph re-parses correctly after edits
• Linter and formatter pass without errors

UI/UX Notes

• Edit button uses a subtle pencil icon (✎) and appears only on hover to keep the interface clean
• Input fields inherit theme colors for visual consistency
• Buttons provide visual feedback on hover and click states

Related Issues

• Implements inline editing for graph nodes as requested

---

Ready to merge. The feature is fully functional and tested.