Как передать все события мыши через абсолютно позиционированный элемент?

Question

pointer-events это не решение

Я пытаюсь расположить компоненты React (например, hover=tooltip, dblclick=toolbar) поверх редактора ProseMirror.

Удобный метод, который я нашел, состоит в том, чтобы создавать виджеты, абсолютно позиционируемые над соответствующим содержимым. Проблема, которую я имею, состоит в том, что выбор текста отбрасывается этим подходом.

https://jsfiddle.net/8w5x7e1s/145/

var a = document.querySelector('#a');
var b = document.querySelector('#b');

a.addEventListener('mousedown', evt => {
    a.style.display = 'none';

const { clientX, clientY } = evt;
  const target = document.elementFromPoint(clientX, clientY);
  const newEvt = new MouseEvent(evt.type, evt);
  target.dispatchEvent(newEvt);

  setTimeout(() => (a.style.display = 'inline'), 0);
});

b.addEventListener('mousedown', evt => {
    console.log('b', evt);
});

Я нашел решение, которое работает с Chrome и Safari, но Firefox не примет продолжение нажатия и перетаскивания таким образом.

https://jsfiddle.net/8w5x7e1s/155/

var a = document.querySelector('#a');

a.addEventListener('mousedown', evt => {
  a.style.display = 'none';

  const { clientX, clientY } = evt;

  let range;
  if (document.caretPositionFromPoint) {
    downPos = document.caretPositionFromPoint(clientX, clientY);
    range = document.createRange();
    range.setStart(downPos.offsetNode, downPos.offset);
  } else if (document.caretRangeFromPoint) {
    range = document.caretRangeFromPoint(clientX, clientY);
  }

  const selection = window.getSelection();
  selection.removeAllRanges();
  setTimeout(() => (selection.addRange(range)), 0);

  window.addEventListener('mouseup', () => {
    a.style.display = 'inline';
    // destroy self
  });
});

Какие-нибудь мысли? Совершенно другой подход тоже подойдет, но мы остановились на React/ProseMirror.