dees-catalog/readme.refactoring.md

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