feat: implement insert mode with heading protection and fix content display bugs

This commit implements a comprehensive insert mode that preserves document structure
by protecting heading levels 1-3 from modification while allowing full content editing.

## Insert Mode Features
- CLI integration with --insert flag for md-render command
- Protected heading display (read-only) for levels 1-3
- Content-only editing for sections with protected headings
- Full editing capability for heading levels 4-6
- Theme-aware CSS styling for all UI themes
- Modal confirmation dialogs with proper positioning
- Section splitting with automatic protection inheritance
- Validation to prevent protected heading modifications

## Implementation Details
- Added MARKITECT_INSERT_MODE JavaScript flag and configuration
- Enhanced Section class with heading level detection and protection methods
- Added getHeadingText() and getHeadingContent() methods for content separation
- Implemented insert mode UI with protected heading display above content editor
- Added comprehensive CSS styling for insert mode components and modals
- Updated CLI with --insert option and mutual exclusion with --edit

## Bug Fixes
- Fixed JavaScript syntax errors caused by unescaped newline characters in string literals
- Corrected split('\n') and join('\n') calls to use proper escaping for Python string context
- Fixed heading level 3 display showing "null" by improving regex pattern matching
- Resolved content not displaying in edit/insert modes due to JavaScript parsing failures

## Documentation
- Updated UserInterfaceFramework.md with complete Insert Mode Editor section
- Added behavioral comparison table between edit and insert modes
- Updated Component Integration Matrix to reflect new capabilities

🤖 Generated with [Claude Code](https://claude.ai/code)

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

UserInterfaceFramework.md

@@ -248,6 +248,96 @@ Provides user confirmation for potentially destructive operations that cannot be
 
 ---
 
+## 7. Insert Mode Editor
+
+**Component Name**: `Insert Mode Editor`
+**Type**: Structured editing mode with heading protection
+**Location**: Replaces section content during editing (contextual)
+
+### Description ✅ COMPLETED
+A specialized editing mode that duplicates edit mode functionality while enforcing document structure integrity. Provides content editing with selective heading protection for levels 1-3, maintaining document outline consistency.
+
+### Current Implementation ✅ COMPLETED
+- **CLI Activation**: `markitect md-render document.md --insert`
+- **Mode Detection**: Uses `MARKITECT_INSERT_MODE` JavaScript flag
+- **Heading Protection**: Levels 1-3 are read-only, displayed above content editor
+- **Content Editing**: Full editing capability for content following protected headings
+
+### Features Implemented
+- **Structured Editing Interface**:
+  - Protected heading display (read-only) for levels 1-3
+  - Content-only textarea for body text editing
+  - Level 4+ headings remain fully editable
+- **Heading Protection Logic**:
+  - Visual distinction with warning-styled heading display
+  - Prevents modification of heading text in protected sections
+  - Server-side validation ensures heading integrity
+- **Section Management**:
+  - Automatic section splitting on new heading introduction
+  - New heading sections inherit protection based on level
+  - Maintains document structure during complex edits
+- **Theme Integration**:
+  - Adapts to all UI themes (standard, greyscale, electric, psychedelic)
+  - Consistent styling with edit mode components
+  - Special styling for protected heading display
+
+### Use Cases
+- **Document Structure Preservation**: Maintain established outline while allowing content updates
+- **Collaborative Editing**: Prevent accidental heading modifications in shared documents
+- **Template-Based Content**: Edit content within predefined structural frameworks
+- **Controlled Authoring**: Allow content contributions without structural changes
+
+### Technical Implementation
+**CLI Integration**:
+- `--insert` flag added to `md-render` command
+- Mutually exclusive with `--edit` flag
+- Validation prevents simultaneous mode activation
+
+**CSS Classes**:
+- `.markitect-insert-mode` - Body class for insert mode
+- `.ui-insert-protected-panel` - Container for protected heading sections
+- `.ui-insert-heading-display` - Read-only heading display component
+- `.ui-insert-content-editor` - Content-only editing textarea
+
+**JavaScript Configuration**:
+```javascript
+const MARKITECT_INSERT_MODE = true;
+const MARKITECT_EDITOR_CONFIG = {
+    mode: 'insert',
+    restrictedHeadingLevels: [1, 2, 3],
+    // ... standard editor config
+};
+```
+
+**Section Enhancement**:
+- `Section.detectHeadingLevel()` - Identify heading levels 1-6
+- `Section.isProtectedHeading()` - Check if heading is protected in current mode
+- `Section.getHeadingText()` - Extract heading text for display
+- `Section.getHeadingContent()` - Extract content after heading for editing
+
+**Validation Logic**:
+- Pre-acceptance validation ensures protected headings remain unchanged
+- Error handling for attempted heading modifications
+- Content reconstruction maintains heading + content structure
+
+### Behavioral Differences from Edit Mode
+| Feature | Edit Mode | Insert Mode |
+|---------|-----------|-------------|
+| Heading Levels 1-3 | ✏️ Fully Editable | 🔒 Read-Only Display |
+| Heading Levels 4-6 | ✏️ Fully Editable | ✏️ Fully Editable |
+| Content Editing | ✏️ Full Section | ✏️ Content Only (for protected) |
+| Section Splitting | ✅ All Headings | ✅ All Headings |
+| New Heading Creation | ✅ Unlimited | ✅ With Level-Based Protection |
+| Theme Support | ✅ All Themes | ✅ All Themes |
+
+### Future Enhancements
+- **Configurable Protection Levels**: Allow customization of which heading levels are protected
+- **Conditional Protection**: Enable/disable protection based on section content or metadata
+- **Protection Indicators**: Visual badges showing protection status in section list
+- **Bulk Mode Switching**: Convert between edit and insert modes for existing documents
+
+---
+
 ## Design Principles
 
 ### 1. **Theme Consistency**
@@ -348,8 +438,9 @@ All components must adapt to the selected UI theme:
 | Toast System | ❌ No | ✅ Yes | ❌ N/A | ✅ Yes | ⚠️ Basic |
 | Document Canvas | ✅ Yes | ✅ Yes | ⚠️ Partial | ✅ Yes | ✅ Yes |
 | Section Editor | ✅ Yes | ⚠️ Partial | ⚠️ Basic | ⚠️ Basic | ⚠️ Partial |
+| Insert Mode Editor | ✅ Yes | ⚠️ Partial | ⚠️ Basic | ⚠️ Basic | ⚠️ Partial |
 | Status Modal | ❌ No | ❌ No | ❌ No | ❌ No | ❌ No |
-| Confirmation | ❌ No | ❌ No | ❌ No | ❌ No | ❌ No |
+| Confirmation | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Yes |
 
 **Legend**: ✅ Full Support | ⚠️ Partial/Needs Work | ❌ Not Implemented