Improve Wysiwyg editor
This commit is contained in:
@@ -76,4 +76,68 @@
|
||||
- Works both inside and outside forms
|
||||
- Supports disabled state
|
||||
- Fixed: Radio buttons now properly deselect others in the group on first click
|
||||
- Note: When using in forms, set both `name` (for grouping) and `key` (for the value)
|
||||
- Note: When using in forms, set both `name` (for grouping) and `key` (for the value)
|
||||
|
||||
## WYSIWYG Editor Architecture
|
||||
|
||||
### Recent Refactoring (2025-06-24)
|
||||
|
||||
The WYSIWYG editor has been refactored to improve maintainability and separation of concerns:
|
||||
|
||||
#### New Handler Classes
|
||||
|
||||
1. **WysiwygBlockOperations** (`wysiwyg.blockoperations.ts`)
|
||||
- Manages all block-related operations
|
||||
- Methods: createBlock, insertBlockAfter, removeBlock, findBlock, focusBlock, etc.
|
||||
- Centralized block manipulation logic
|
||||
|
||||
2. **WysiwygInputHandler** (`wysiwyg.inputhandler.ts`)
|
||||
- Handles all input events for blocks
|
||||
- Manages block content updates based on type
|
||||
- Detects block type transformations
|
||||
- Handles slash commands
|
||||
- Manages auto-save with debouncing
|
||||
|
||||
3. **WysiwygKeyboardHandler** (`wysiwyg.keyboardhandler.ts`)
|
||||
- Handles all keyboard events
|
||||
- Manages formatting shortcuts (Cmd/Ctrl + B/I/U/K)
|
||||
- Handles special keys: Tab, Enter, Backspace
|
||||
- Manages slash menu navigation
|
||||
|
||||
4. **WysiwygDragDropHandler** (`wysiwyg.dragdrophandler.ts`)
|
||||
- Manages drag and drop operations
|
||||
- Tracks drag state
|
||||
- Handles visual feedback during drag
|
||||
- Manages block reordering
|
||||
|
||||
5. **WysiwygModalManager** (`wysiwyg.modalmanager.ts`)
|
||||
- Static methods for showing modals
|
||||
- Language selection for code blocks
|
||||
- Block settings modal
|
||||
- Reusable modal patterns
|
||||
|
||||
#### Main Component Updates
|
||||
|
||||
The main `DeesInputWysiwyg` component now:
|
||||
- Instantiates handler classes in `connectedCallback`
|
||||
- Delegates complex operations to appropriate handlers
|
||||
- Maintains cleaner, more focused code
|
||||
- Better separation of concerns
|
||||
|
||||
#### Benefits
|
||||
- Reduced main component size from 1100+ lines
|
||||
- Each handler class is focused on a single responsibility
|
||||
- Easier to test individual components
|
||||
- Better code organization
|
||||
- Improved maintainability
|
||||
|
||||
#### Fixed Issues
|
||||
- Enter key no longer duplicates content in new blocks
|
||||
- Removed problematic `setBlockContents()` method
|
||||
- Content is now managed directly through DOM properties
|
||||
- Better timing for block creation and focus
|
||||
|
||||
#### Notes
|
||||
- Some old methods remain in the main component for backwards compatibility
|
||||
- These can be removed in a future cleanup once all references are updated
|
||||
- The refactoring maintains all existing functionality
|
Reference in New Issue
Block a user