# 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