editor-core

# Editor Core Skill Work with the contenteditable editor in kheMessage. ## When to Use - Modifying text input behavior - Fixing cursor/selection issues - Enhancing undo/redo functionality - Adding keyboard shortcuts ## Editor Implementation The `Editor` class manages the contenteditable element: ```javascript function Editor(element, highlight) { const listeners = [] const history = [] let at = -1, prev // Debounced highlighting const debounceHighlight = debounce(30, () => { const pos = save() highlight(element) restore(pos) }) // Event handlers on('keydown', event => { /* ... */ }) on('keyup', event => { /* ... */ }) on('paste', () => setTimeout(recordHistory, 10)) on('cut', () => setTimeout(recordHistory, 10)) return { set(content) { /* ... */ }, undo() { /* ... */ }, redo() { /* ... */ }, destroy() { /* ... */ } } } ``` ## Key Functions ### save() / restore() Saves and restores cursor position across DOM changes: - Handles text nodes and element nodes - Preserves selection direction - Works with normalized DOM ### recordHistory() Records editor state for undo/redo: - Stores HTML and cursor position - Debounced to avoid excessive entries - Limited to 10,000 entries ### highlight() Applies Markdown formatting: - Called via `parseMarkdown` function - Replaces text nodes with styled spans - Preserves cursor position ## Keyboard Shortcuts | Shortcut | Action | |----------|--------| | Ctrl+Z | Undo | | Ctrl+Y / Ctrl+Shift+Z | Redo | | Ctrl+S | Save | | Ctrl+N | New note | | Ctrl+O | Import file | ## ContentEditable Quirks - Use `plaintext-only` mode to avoid HTML injection - Normalize DOM after changes - Handle composition events for IME - Watch for `beforeinput` events ## Adding Features When extending the editor: 1. Add event listener via `on()` 2. Save position before DOM changes 3. Restore position after changes 4. Record history for undoable actions