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:

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() { /* ... */ }
  }
}