Hybrid Markdown Rendering System - Live Preview with Syntax Visibility #26

Implement real-time hybrid markdown rendering where textareas show both syntax characters AND formatting simultaneously during editing, following Logseq's proven implementation pattern.

Implementation Approach - CodeMirror 6

Based on technical analysis, this feature will be implemented using CodeMirror 6 instead of the original textarea approach. CodeMirror 6 provides:

• Built-in hybrid markdown rendering (syntax + formatting simultaneously)
• Professional cursor management (no jumping issues)
• Real-time syntax detection and styling
• Lightweight, modular architecture
• Foundation for future rich decorations (Hover previews for node references #34)

Implementation Breakdown

This issue has been broken into manageable sub-issues for iterative development:

• CodeMirror Foundation Setup #46
• Hybrid Markdown Rendering #47
• BaseNode Integration Polish #48
• Performance & Bundle Optimization #49
• Architectural Documentation - Hybrid Markdown Decisions #50

Branching Strategy: Single branch approach - all sub-issues will be implemented on feature/issue-26-hybrid-markdown and included in one comprehensive PR.

Dependencies

None - This is a self-contained feature that can be implemented independently.

Related Issues

• Mock Element Positioning System for Precise Cursor Handling #33 (Mock element positioning system will enhance cursor accuracy)
• Hover previews for node references #34 (Rich decorations will build on this foundation)

Sub-Issues

• CodeMirror Foundation Setup #46
• Hybrid Markdown Rendering #47
• BaseNode Integration Polish #48
• Performance & Bundle Optimization #49
• Architectural Documentation - Hybrid Markdown Decisions #50

Self-Contained Scope

• Complete hybrid markdown rendering system using CodeMirror 6
• Real-time font size changes based on markdown syntax detection
• Local state management with upgrade path to shared state
• Mock integration points for future rich features
• Comprehensive testing with demo scenarios
• Documentation and usage examples
• Architectural decision documentation capturing learnings and decisions

Overall Requirements

• Real-time Rendering: Typing # Header immediately shows large font while preserving #
• Syntax Preservation: All markdown characters remain visible during editing
• Font Size Matching: Edit mode font sizes identical to display mode rendering
• Performance: No lag or cursor jumping during real-time updates
• Integration Ready: Clean interfaces for mock element positioning and decorations
• Knowledge Capture: Document architectural decisions and implementation learnings

Overall Acceptance Criteria

• Typing # Header shows large font immediately while keeping # visible
• Removing # returns to normal font size immediately
• All heading levels (H1-H6) work correctly with proper font sizes
• Cursor position preserved during font size changes
• No visual lag or glitches during real-time updates
• Integration with existing save-on-change detection works
• Performance remains smooth (< 50ms for style updates)
• CSS classes applied correctly to editor elements
• Display mode shows identical styling to edit mode
• All linting and formatting checks pass
• Architectural decisions documented for future reference

Definition of Done

• All sub-issues (CodeMirror Foundation Setup #46, Hybrid Markdown Rendering #47, BaseNode Integration Polish #48, Performance & Bundle Optimization #49, Architectural Documentation - Hybrid Markdown Decisions #50) completed and acceptance criteria met
• Feature works end-to-end with all heading levels
• Unit tests >90% coverage for detection logic
• Visual regression tests for font size changes
• Manual testing completed across all scenarios
• Code follows project standards (ESLint, Prettier, TypeScript)
• Documentation updated with usage examples
• Demo available showing real-time markdown rendering
• Bundle size impact documented and acceptable
• Architectural decisions documented for institutional knowledge
• Ready for integration with positioning and decoration systems