Posso definir o valor de elementos DOM de estilo de entrada (input/div contenteditable=true) com bastante facilidade, definindo suas.value ouinnerText propriedades via JS.

Mas é possível enviar eventos de teclado para eles, carregados com um caractere, para que ele insira o caractere despachado na posição atual do cursor?

Aqui está um exemplo que não funciona.

'use strict'

const btn = document.querySelector('#btn')
const editable = document.querySelector('#editable')

btn.addEventListener('mousedown', e => {
  // prevent unfocus when clicking button
  e.preventDefault()
  
  const customEvt = new KeyboardEvent('keypress', {
    bubbles: true, 
    cancelable: true, 
    key: 'X', 
    char: 'X'
  })

  editable.dispatchEvent(customEvt)
})

#editable {
  border: 1px solid;
  padding: 8px 12px;
}

<p> Make sure the editable is focused before pressing button</p>
<div id="editable" contenteditable="true">Lorem Ipsum</div>
<button id="btn"> Add 'X' character at cursor position</button>

Por que eu preciso disso:

Estamos construindo um teclado de símbolos para um aplicativo, que permitirá aos usuários adicionar símbolos à posição atual do cursor.

Rastreando a posição atual do cursor em umcontenteditable, para que possamos inserir o símbolo clicado, é suscetível a erros e requer código extra (e geralmente feio). Eu gostaria de evitá-lo.

Acho que isso não pode ser feito, pois pode ser um risco à segurança, mas nunca é demais perguntar.