Positioning the menu at the caret

positionMenu.js

import containByScreen from 'contain-by-screen';

function positionMenuAtCaret({menuContainer, cursorContext, activeQuery}: {menuContainer: HTMLElement; cursorContext: CursorContext; activeQuery: string;}){
  let textNode = cursorContext.textNode;
  const menuLeftEdgeCharaterPosition = Math.max(cursorContext.cursorCharacterPosition - activeQuery.length, 0);
  const range = document.createRange();
  range.setStart(textNode, menuLeftEdgeCharaterPosition);
  range.setEnd(textNode, menuLeftEdgeCharaterPosition);
  range.collapse(true);

  const marker = document.createElement('span');
  range.insertNode(marker);

  document.body.appendChild(menuContainer);
  containByScreen(menuContainer, marker, {position: 'bottom', hAlign: 'left'});
  marker.remove();

  cursorContext.textNodeParent.normalize();
}