generated from coulomb/repo-seed
docs: add comprehensive feature documentation
Created feature documentation structure: docs/features/README.md: - Overview of all control panels - Configuration examples - Use case scenarios - Feature toggle documentation docs/features/section-editing.md: - Complete section editing guide - How it works (automatic detection, states, visual feedback) - Configuration options - Advanced features (metadata, events, section types) - Examples and troubleshooting - Best practices Remaining documentation to be created: - edit-control.md - status-control.md - contents-control.md - debug-control.md - keyboard-shortcuts.md - themes.md 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com)
This commit is contained in:
305
docs/features/README.md
Normal file
305
docs/features/README.md
Normal file
@@ -0,0 +1,305 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user