Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Positioning the menu at the caret
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();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.