# WYSIWYG Form Builder - Comprehensive Improvement Roadmap
## Current State Assessment
The existing form builder provides basic functionality but lacks the sophistication and features expected from a modern WYSIWYG editor. It supports simple field addition, basic property editing, and preview mode, but misses critical features like true drag-and-drop, undo/redo, advanced layouts, validation rules, and collaborative capabilities.
---
## Phase 1: Foundation Enhancements (Core UX/UI)
### 1.1 Implement True Drag-and-Drop
**Priority: HIGH | Complexity: MEDIUM**
**Current Issue**: Fields are added by clicking and reordered with up/down buttons only.
**Tasks**:
- Add `mx.dragable` mixin to `PaletteItem` instances
- Implement drop zones in canvas with visual feedback (highlight on dragover)
- Support drag-from-palette-to-canvas for field creation
- Support drag-within-canvas for field reordering
- Add ghost/preview element during drag showing field position
- Implement `_on_drop(event, field_type, index)` handler
- Add drag handle (⋮⋮) to field preview headers for better grab UX
**Files to modify**:
- `client.js`: `PaletteItem`, `FormFieldPreview`, `FormBuilder._createLayout`, `FormBuilder._renderEditMode`
- `styles.css`: `.palette-item.dragging`, `.canvas-drop-zone`, `.field-drag-handle`
**Code snippet**:
```javascript
// In FormFieldPreview constructor
this.drag_handle = new Control({ context, tag_name: 'span' });
this.drag_handle.add_class('field-drag-handle');
this.drag_handle.add('⋮⋮');
this.header.add(this.drag_handle, 0);
// In activate()
mx.dragable(this, {
handle: this.drag_handle.dom.el,
on_drag_start: () => { this.add_class('dragging'); },
on_drag_end: () => { this.remove_class('dragging'); }
});
```
### 1.2 Add Undo/Redo System
**Priority: HIGH | Complexity: MEDIUM**
**Current Issue**: No way to undo mistakes or redo undone actions.
**Tasks**:
- Create `history_manager.js` module with `Command` pattern
- Implement commands: `AddFieldCommand`, `DeleteFieldCommand`, `MoveFieldCommand`, `UpdateFieldCommand`, `UpdateTitleCommand`
- Maintain undo/redo stacks (max 50 items)
- Add keyboard shortcuts: Ctrl+Z (undo), Ctrl+Y/Ctrl+Shift+Z (redo)
- Add undo/redo buttons to toolbar with enabled/disabled states
- Store command metadata for display (e.g., "Added Text Field", "Moved Email Field")
- Update all field mutations to use command system
**New file**: `dev-examples/wysiwyg-form-builder/history_manager.js`
**Code structure**:
```javascript
class Command {
execute(model) { /* override */ }
undo(model) { /* override */ }
get_description() { return 'Action'; }
}
class Add_Field_Command extends Command {
constructor(field, index) {
super();
this.field = field;
this.index = index;
}
execute(model) {
const fields = model.get('fields');
fields.splice(this.index, 0, this.field);
model.set('fields', fields);
}
undo(model) {
const fields = model.get('fields');
fields.splice(this.index, 1);
model.set('fields', fields);
}
get_description() { return `Added ${this.field.type} field`; }
}
class History_Manager {
constructor() {
this.undo_stack = [];
this.redo_stack = [];
this.max_size = 50;
}
execute(command, model) {
command.execute(model);
this.undo_stack.push(command);
if (this.undo_stack.length > this.max_size) {
this.undo_stack.shift();
}
this.redo_stack = [];
}
undo(model) { /* implementation */ }
redo(model) { /* implementation */ }
can_undo() { return this.undo_stack.length > 0; }
can_redo() { return this.redo_stack.length > 0; }
}
```
**Files to modify**:
- `client.js`: Integrate `History_Manager`, update all mutation methods
- `styles.css`: `.toolbar-button:disabled` styles
### 1.3 Field Copy/Paste/Duplicate
**Priority: MEDIUM | Complexity: LOW**
**Tasks**:
- Add duplicate button (⊕) to field preview headers
- Add copy/paste buttons to property editor
- Implement keyboard shortcuts: Ctrl+C (copy), Ctrl+V (paste), Ctrl+D (duplicate)
- Store copied field in memory (not just selected field reference, deep clone)
- Paste below currently selected field or at end if none selected
- Increment field names on duplicate (e.g., `field_1` → `field_1_copy`, `field_1_copy_2`)
**Files to modify**:
- `client.js`: Add `_copy_field()`, `_paste_field()`, `_duplicate_field(index)` methods
---
## Phase 2: Advanced Field Types & Properties
### 2.1 Add Rich Field Types
**Priority: HIGH | Complexity: MEDIUM-HIGH**
**New field types to implement**:
1. **Date Picker** (`type: 'date'`)
- Native `` with fallback
- Properties: min_date, max_date, default_value
2. **Time Picker** (`type: 'time'`)
- Native ``
- Properties: min_time, max_time, step (minutes)
3. **Color Picker** (`type: 'color'`)
- Native ``
- Property: default_color
4. **File Upload** (`type: 'file'`)
- Properties: accept (file types), multiple, max_size_mb
5. **Radio Group** (`type: 'radio'`)
- Properties: options (array), layout ('vertical' | 'horizontal'), default_value
6. **Checkbox Group** (`type: 'checkbox_group'`)
- Multiple checkboxes, properties: options (array), min_selections, max_selections
7. **Range Slider** (`type: 'range'`)
- Properties: min, max, step, default_value, show_value
8. **Rating** (`type: 'rating'`)
- Star rating, properties: max_stars (default 5), icon (star, heart, etc.)
9. **Rich Text** (`type: 'richtext'`)
- Basic WYSIWYG editor (bold, italic, underline, lists)
- Consider lightweight library or contenteditable DIV
10. **Image** (`type: 'image'`)
- Display image in form, properties: src, alt, width, height, align
**Tasks**:
- Add each type to palette with appropriate icon
- Implement preview rendering in `FormFieldPreview._renderPreview()`
- Create specialized controls or enhance `FormField` to handle each type
- Update property editor to show type-specific properties
- Add validation for type-specific constraints
**Files to modify**:
- `client.js`: `_createPalette()`, `FormFieldPreview._renderPreview()`, `FormBuilder._renderPreviewMode()`
- Consider new file: `field_types.js` with type definitions and renderers
### 2.2 Advanced Validation Rules
**Priority: HIGH | Complexity: MEDIUM**
**Current Issue**: Only "required" checkbox exists.
**Tasks**:
- Add validation section to property editor with expandable rules
- Implement rule types:
- **Pattern**: Regex validation (with common presets: email, phone, postal code, etc.)
- **Min/Max Length**: For text inputs (characters)
- **Min/Max Value**: For number/range inputs
- **Custom Error Messages**: Per rule type
- **Cross-Field**: Compare with other fields (e.g., "Confirm Password")
- **Async Validation**: Placeholder for server-side checks (username availability, etc.)
- Visual rule builder UI with "Add Rule" button
- Display validation rules as chips/tags in property editor
- Preview validation by attempting form submission in preview mode
**Files to modify**:
- `client.js`: Add `validation_rules` array to field schema, update property editor
- `styles.css`: `.validation-rule-chip`, `.validation-rules-list`
**Data structure**:
```javascript
{
type: 'text',
label: 'Username',
validation_rules: [
{ type: 'required', message: 'Username is required' },
{ type: 'min_length', value: 3, message: 'Minimum 3 characters' },
{ type: 'max_length', value: 20, message: 'Maximum 20 characters' },
{ type: 'pattern', value: '^[a-zA-Z0-9_]+$', message: 'Letters, numbers, underscore only' }
]
}
```
### 2.3 Conditional Logic & Visibility Rules
**Priority: MEDIUM | Complexity: HIGH**
**Feature**: Show/hide or enable/disable fields based on values of other fields.
**Tasks**:
- Add "Conditional Logic" section to property editor
- Implement rule builder:
- Condition: "Show this field when..."
- Trigger field selector dropdown (all previous fields)
- Operator: equals, not_equals, contains, greater_than, less_than, is_empty, is_not_empty
- Value input (type-aware based on trigger field type)
- Support multiple conditions with AND/OR logic
- Implement real-time evaluation in preview mode
- Add visual indicator in edit mode (⚡ icon) for fields with conditional logic
- Store rules in field schema: `conditional_logic: { show_when: [...], enabled_when: [...] }`
**Files to modify**:
- `client.js`: Add conditional logic evaluator, update preview rendering
- `styles.css`: `.conditional-logic-indicator`, `.conditional-rule-builder`
---
## Phase 3: Layout & Styling
### 3.1 Multi-Column Layouts
**Priority: HIGH | Complexity: MEDIUM**
**Current Issue**: All fields are 100% width in single column.
**Tasks**:
- Add layout container concept: rows with configurable columns
- Implement "Add Row" button in canvas
- Each row can have 1-4 columns (adjustable split: 50/50, 33/33/33, 25/75, etc.)
- Drag fields into columns
- Field property: `column_width` percentage within its column
- Responsive breakpoints: collapse to single column on mobile
- Visual grid lines in edit mode showing column boundaries
- Row properties: background_color, padding, border
**New classes**:
```javascript
class Form_Row extends Control {
constructor(options = {}) {
super(options);
this.columns = options.columns || 1;
this.fields_per_column = [[], [], [], []]; // max 4 columns
// Render column containers
}
}
```
**Files to modify**:
- `client.js`: Restructure data model to support rows, update rendering
- `styles.css`: `.form-row`, `.form-column`, `.column-boundary`
**Data structure change**:
```javascript
{
formTitle: "My Form",
layout: [
{
type: 'row',
columns: 2,
fields: [
[{ /* field 1 */ }, { /* field 2 */ }], // column 1
[{ /* field 3 */ }] // column 2
]
},
{
type: 'row',
columns: 1,
fields: [[{ /* field 4 */ }]]
}
]
}
```
### 3.2 Sections & Fieldsets
**Priority: MEDIUM | Complexity: LOW**
**Tasks**:
- Add "Section" and "Fieldset" to palette
- Section: Visual divider with title, description, collapsible
- Fieldset: Grouped fields with border and legend
- Properties: title, description, collapsible (boolean), default_collapsed (boolean)
- Nest fields within sections/fieldsets in data model
- Render with appropriate HTML semantics (`