BaseNode Integration Polish #48

Overview

Polish the CodeMirror integration to work seamlessly with all existing BaseNode features, ensuring no regression in functionality while supporting the new hybrid markdown rendering.

Scope

Seamless integration with existing BaseNode features:

• Cursor positioning compatibility evaluation (MockTextElement vs CodeMirror native)
• Multiline/single-line mode support
• Placeholder text handling
• Processing states and animations
• Mobile/responsive behavior
• MockTextElement removal investigation

Technical Specifications

Current BaseNode Integration Points

File: /nodespace-app/src/lib/design/components/BaseNode.svelte

Event Handlers to Maintain:

• handleInput(event) - lines 171-187
• handleBlur() - lines 196-200
• handleKeyDown(event) - lines 203-230
• startEditing(clickEvent?) - lines 72-97

State Variables:

• focused: boolean - line 39
• textareaElement: HTMLTextAreaElement → editorElement: EditorView
• mockElementRef - lines 41, 100-168 (potentially removable)

Props to Maintain:

• multiline: boolean - line 27
• placeholder: string - line 28
• editable: boolean - line 25
• contentEditable: boolean - line 26

Reference Files and Systems

• MockTextElement System: Current implementation for comparison testing (lines 100-168 in BaseNode.svelte)
• BaseNode Test Suite: Existing test suite for regression testing to ensure no functionality breaks

MockTextElement System Analysis

Current Implementation (lines 100-168 in BaseNode.svelte):

• Complex cursor positioning logic (~60 lines)
• MockTextElement.svelte component integration
• CursorPositioning.js utilities
• Total: ~360 lines of custom positioning code

Research Required:

1. CodeMirror Native Positioning: Test click-to-position accuracy
2. Performance Comparison: CodeMirror vs MockTextElement system
3. Edge Cases: Multi-line, different font sizes, mobile touch
4. Removal Feasibility: Can we eliminate entire MockTextElement system?

If CodeMirror positioning is superior:

• Remove MockTextElement.svelte import (line 16)
• Remove CursorPositioning import (line 17)
• Remove positionCursorFromClick() function (lines 100-168)
• Remove mockElementRef and related logic (lines 314-326)
• Simplify startEditing() function significantly

Implementation Tasks

• Test CodeMirror native click-to-position vs MockTextElement accuracy
• Implement multiline/single-line mode switching in CodeMirror
• Add placeholder text support for CodeMirror editor
• Ensure processing states (saving, etc.) work with CodeMirror
• Test and fix mobile/touch editing behavior
• Verify keyboard shortcuts and accessibility features
• Maintain focus/blur behavior consistency
• Document MockTextElement removal recommendation
• Create migration plan if MockTextElement can be removed

BaseNode Features to Maintain

• Click-to-Position: Native CodeMirror vs MockTextElement comparison
• Mode Switching: Dynamic multiline/single-line based on content
• Processing States: Visual feedback during save operations
• Placeholder Text: "Click to add content..." when empty
• Keyboard Shortcuts: Enter to save (single-line), Escape to exit
• Accessibility: Proper ARIA labels and keyboard navigation
• Responsive Design: Mobile-friendly editing experience

Acceptance Criteria

• Click-to-position cursor works correctly (CodeMirror native or MockTextElement)
• MockTextElement necessity evaluated with clear recommendation
• Multiline content automatically expands editor height
• Single-line mode prevents line breaks (Enter saves and exits)
• Placeholder text shows when content is empty
• Processing animations work during save operations
• All BaseNode states (focused, processing, etc.) display correctly
• Mobile editing experience maintained (touch, virtual keyboard)
• Keyboard shortcuts work as expected (Enter, Escape, etc.)
• Screen reader accessibility preserved
• No visual regressions compared to original textarea

Definition of Done

• All existing BaseNode functionality works with CodeMirror
• MockTextElement system evaluated with removal recommendation
• All acceptance criteria met and tested
• Mobile and desktop testing completed
• Accessibility verified with screen readers
• Performance remains smooth (no interaction lag)
• Code follows project standards (linting passes)
• Ready for Performance & Bundle Optimization #49 (performance optimization)

Dependencies

• Hybrid Markdown Rendering #47 must be completed

Related Issues

• Hybrid Markdown Rendering System - Live Preview with Syntax Visibility #26 (parent issue)
• Performance & Bundle Optimization #49 (next - Performance & Bundle Optimization)
• Mock Element Positioning System for Precise Cursor Handling #33 (MockTextElement positioning system - potentially removable)