name: editor-core description: Work with the contenteditable editor implementation. Use when modifying text input behavior, cursor handling, or undo/redo functionality.

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:

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

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