# 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](section-editing.md)** - Click any section to edit it independently
- **[Keyboard Shortcuts](keyboard-shortcuts.md)** - Quick actions via keyboard
- **[Themes](themes.md)** - Visual theming system

### Control Panels

#### [Edit Control](edit-control.md) 📝
**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](edit-control.md)**

---

#### [Status Control](status-control.md) 📊
**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](status-control.md)**

---

#### [Contents Control](contents-control.md) 📋
**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](contents-control.md)**

---

####[Debug Control](debug-control.md) 🐛
**Position**: Southeast (se)
**Purpose**: Development and debugging tools

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

**[→ Full Documentation](debug-control.md)**

---

## 🎛️ Configuration

### Enabling/Disabling Controls

```javascript
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

```javascript
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)

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

### Writer Mode (Edit + Status)

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

### Reader Mode (Contents Only)

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

### Developer Mode (All Controls)

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

---

## 🔧 Advanced Features

### Auto-save

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

### Keyboard Shortcuts

```javascript
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

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

---

## 🎯 Use Cases

### Documentation Editor
```javascript
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
```javascript
new TestDriveJSUI({
    container: '#editor',
    controls: {
        editControl: true,      // Save drafts
        statusControl: true,    // Monitor length
        contentsControl: false, // Usually shorter posts
        debugControl: false
    }
});
```

### Code Documentation Viewer
```javascript
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](../../examples/) for working demos
- See [API Reference](../api/) for complete API documentation

---

**Version**: 1.0.0
**Last Updated**: 2025-12-16