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
1function Editor(element, highlight) {
2  const listeners = []
3  const history = []
4  let at = -1, prev
5
6  // Debounced highlighting
7  const debounceHighlight = debounce(30, () => {
8    const pos = save()
9    highlight(element)
10    restore(pos)
11  })
12
13  // Event handlers
14  on('keydown', event => { /* ... */ })
15  on('keyup', event => { /* ... */ })
16  on('paste', () => setTimeout(recordHistory, 10))
17  on('cut', () => setTimeout(recordHistory, 10))
18
19  return {
20    set(content) { /* ... */ },
21    undo() { /* ... */ },
22    redo() { /* ... */ },
23    destroy() { /* ... */ }
24  }
25}

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

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