82 lines
3.4 KiB
Markdown
82 lines
3.4 KiB
Markdown
|
# WYSIWYG Editor Refactoring
|
||
|
|
|
||
|
|
## Summary of Changes
|
||
|
|
|
||
|
|
This refactoring cleaned up the wysiwyg editor implementation to fix focus, cursor position, and selection issues.
|
||
|
|
|
||
|
|
### Phase 1: Code Organization
|
||
|
|
|
||
|
|
#### 1. Removed Duplicate Code
|
||
|
|
- Removed duplicate `handleBlockInput` method from main component (was already in inputHandler)
|
||
|
|
- Removed duplicate `handleBlockKeyDown` method from main component (was already in keyboardHandler)
|
||
|
|
- Consolidated all input handling in the respective handler classes
|
||
|
|
|
||
|
|
#### 2. Simplified Focus Management
|
||
|
|
- Removed complex `updated` lifecycle method that was trying to maintain focus
|
||
|
|
- Simplified `handleBlockBlur` to not immediately close menus
|
||
|
|
- Added `requestAnimationFrame` to focus operations for better timing
|
||
|
|
- Removed `slashMenuOpenTime` tracking which was no longer needed
|
||
|
|
|
||
|
|
#### 3. Fixed Slash Menu Behavior
|
||
|
|
- Changed from `@mousedown` to `@click` events for better UX
|
||
|
|
- Added proper event prevention to avoid focus loss
|
||
|
|
- Menu now closes when clicking outside
|
||
|
|
- Simplified the insertBlock method to close menu first
|
||
|
|
|
||
|
|
### Phase 2: Cursor & Selection Fixes
|
||
|
|
|
||
|
|
#### 4. Enhanced Cursor Position Management
|
||
|
|
- Added `focusWithCursor()` method to block component for precise cursor positioning
|
||
|
|
- Improved `handleSlashCommand` to preserve cursor position when menu opens
|
||
|
|
- Added `getCaretCoordinates()` for accurate menu positioning based on cursor location
|
||
|
|
- Updated `focusBlock()` to support numeric cursor positions
|
||
|
|
|
||
|
|
#### 5. Fixed Selection Across Shadow DOM
|
||
|
|
- Added custom `block-text-selected` event to communicate selections across shadow boundaries
|
||
|
|
- Implemented `handleMouseUp()` in block component to detect selections
|
||
|
|
- Updated main component to listen for selection events from blocks
|
||
|
|
- Selection now works properly even with nested shadow DOMs
|
||
|
|
|
||
|
|
#### 6. Improved Slash Menu Close Behavior
|
||
|
|
- Added optional `clearSlash` parameter to `closeSlashMenu()`
|
||
|
|
- Escape key now properly clears the slash command
|
||
|
|
- Clicking outside clears the slash if menu is open
|
||
|
|
- Selecting an item preserves content and just transforms the block
|
||
|
|
|
||
|
|
### Technical Improvements
|
||
|
|
|
||
|
|
#### Block Component (`dees-wysiwyg-block`)
|
||
|
|
- Better focus management with immediate focus (removed unnecessary requestAnimationFrame)
|
||
|
|
- Added cursor position control methods
|
||
|
|
- Custom event dispatching for cross-shadow-DOM communication
|
||
|
|
- Improved content handling for different block types
|
||
|
|
|
||
|
|
#### Input Handler
|
||
|
|
- Preserves cursor position when showing slash menu
|
||
|
|
- Better caret coordinate calculation for menu positioning
|
||
|
|
- Ensures focus stays in the block when menu appears
|
||
|
|
|
||
|
|
#### Block Operations
|
||
|
|
- Enhanced `focusBlock()` to support start/end/numeric positions
|
||
|
|
- Better timing with requestAnimationFrame for focus operations
|
||
|
|
|
||
|
|
### Key Benefits
|
||
|
|
- Slash menu no longer causes focus or cursor position loss
|
||
|
|
- Text selection works properly across shadow DOM boundaries
|
||
|
|
- Cursor position is preserved when interacting with menus
|
||
|
|
- Cleaner, more maintainable code structure
|
||
|
|
- Better separation of concerns
|
||
|
|
|
||
|
|
## Testing
|
||
|
|
|
||
|
|
Use the test files in `.nogit/debug/`:
|
||
|
|
- `test-slash-menu.html` - Tests slash menu focus behavior
|
||
|
|
- `test-wysiwyg-formatting.html` - Tests text formatting
|
||
|
|
|
||
|
|
## Known Issues Fixed
|
||
|
|
- Slash menu disappearing immediately on first "/"
|
||
|
|
- Focus lost when slash menu opens
|
||
|
|
- Cursor position lost when typing "/"
|
||
|
|
- Text selection not working properly
|
||
|
|
- Selection events not propagating across shadow DOM
|
||
|
|
- Duplicate event handling causing conflicts
|