testdrive-jsui/docs/features/README.md

TestDrive-JSUI Features

Complete feature documentation for TestDrive-JSUI

TestDrive-JSUI provides a modular system of interactive controls that enhance markdown editing and viewing. Each control can be enabled/disabled independently and positioned using compass directions.

---

📚 Feature Documentation

Core Features

• Section Editing - Click any section to edit it independently
• Keyboard Shortcuts - Quick actions via keyboard
• Themes - Visual theming system

Control Panels

Edit Control 📝

Position: Northeast (ne) Purpose: Document actions and editing tools

Features:

• Print, save, export document
• Navigation helpers (scroll to top/bottom, go to line)
• Text formatting tools
• Find & replace
• Font size adjustment
• Markdown shortcuts

→ Full Documentation

---

Status Control 📊

Position: East (e) Purpose: Real-time document statistics

Features:

• Word and character count
• Reading time estimation
• Document structure analysis (headings, paragraphs, lists)
• Change tracking
• Content complexity metrics

→ Full Documentation

---

Contents Control 📋

Position: Northwest (nw) Purpose: Table of contents navigation

Features:

• Automatic heading extraction
• Hierarchical display with indentation
• Click to navigate with smooth scrolling
• Search within headings
• Real-time updates

→ Full Documentation

---

####Debug Control 🐛 Position: Southeast (se) Purpose: Development and debugging tools

Features:

• Real-time debug logs
• Error tracking
• Performance monitoring
• Component state inspection
• Event tracking

→ Full Documentation

---

🎛️ Configuration

Enabling/Disabling Controls

const editor = new TestDriveJSUI({
    container: '#editor',
    markdown: '# My Document',
    mode: 'edit',

    // Control configuration
    controls: {
        editControl: true,      // Document actions (default: true)
        statusControl: true,    // Statistics (default: true)
        contentsControl: true,  // Table of contents (default: true)
        debugControl: false     // Debug logs (default: false)
    }
});

Custom Positioning

const editor = new TestDriveJSUI({
    container: '#editor',

    // Custom compass positions
    controlPositions: {
        editControl: 'ne',      // Northeast (default)
        statusControl: 'e',     // East (default)
        contentsControl: 'nw',  // Northwest (default)
        debugControl: 'se'      // Southeast (default)
    }
});

Compass Positions:

• nw - Northwest (top-left)
• ne - Northeast (top-right)
• e - East (middle-right)
• se - Southeast (bottom-right)
• s - South (bottom-center)
• sw - Southwest (bottom-left)
• w - West (middle-left)

---

🎨 Control Behavior

States

Each control has two states:

1. Collapsed (40x40px icon button)

   • Minimal screen space
   • Shows icon only
   • Click to expand

2. Expanded (full panel)

   • Shows full functionality
   • Draggable by header
   • Resizable from bottom-left corner
   • Click close (✕) to collapse

Interactions

• Click icon: Expand panel
• Click header: Toggle content visibility (header-only mode)
• Drag header: Reposition panel
• Drag resize handle: Resize panel
• Click close (✕): Collapse to icon

---

📖 Example Configurations

Minimal (Section Editing Only)

new TestDriveJSUI({
    container: '#editor',
    controls: {
        editControl: false,
        statusControl: false,
        contentsControl: false,
        debugControl: false
    }
});

Writer Mode (Edit + Status)

new TestDriveJSUI({
    container: '#editor',
    controls: {
        editControl: true,
        statusControl: true,
        contentsControl: false,
        debugControl: false
    }
});

Reader Mode (Contents Only)

new TestDriveJSUI({
    container: '#editor',
    mode: 'view',
    controls: {
        editControl: false,
        statusControl: false,
        contentsControl: true,
        debugControl: false
    }
});

Developer Mode (All Controls)

new TestDriveJSUI({
    container: '#editor',
    controls: {
        editControl: true,
        statusControl: true,
        contentsControl: true,
        debugControl: true  // Enable debug panel
    }
});

---

🔧 Advanced Features

Auto-save

new TestDriveJSUI({
    container: '#editor',
    autosave: true  // Saves to localStorage every 30 seconds
});

Keyboard Shortcuts

new TestDriveJSUI({
    container: '#editor',
    shortcuts: true  // Enable keyboard shortcuts (default: true)
});

Common shortcuts:

• Ctrl+S - Save document
• Escape - Close editor/dialog
• Ctrl+F - Find & replace
• Ctrl+B - Bold
• Ctrl+I - Italic

Themes

new TestDriveJSUI({
    container: '#editor',
    theme: 'github'  // Available: 'github' (more coming soon)
});

---

🎯 Use Cases

Documentation Editor

new TestDriveJSUI({
    container: '#editor',
    controls: {
        editControl: true,      // For saving/exporting
        statusControl: true,    // Track word count
        contentsControl: true,  // Navigate long docs
        debugControl: false
    }
});

Blog Post Editor

new TestDriveJSUI({
    container: '#editor',
    controls: {
        editControl: true,      // Save drafts
        statusControl: true,    // Monitor length
        contentsControl: false, // Usually shorter posts
        debugControl: false
    }
});

Code Documentation Viewer

new TestDriveJSUI({
    container: '#viewer',
    mode: 'view',
    controls: {
        editControl: false,
        statusControl: false,
        contentsControl: true,  // Navigate API docs
        debugControl: false
    }
});

---

📚 Next Steps

• Read individual control documentation for detailed features
• Check out examples for working demos
• See API Reference for complete API documentation

---

Version: 1.0.0 Last Updated: 2025-12-16