I am using the ‘@codemirror/autocomplete’ module and feeding a custom list of values into it.
It positions the autocomplete div below or above the current line based on how close it is to the boundary. But when it positions it above the line, it overlaps with the code line by a few pixels. How can I control this behaviour? Couldn’t figure out a way to tell the module to adjust its positioning (top property in style)
Think these 2 functions are responsible for setting the top property
measureInfo() {
let sel = this.dom.querySelector("[aria-selected]");
if (!sel)
return null;
let rect = this.dom.getBoundingClientRect();
let top = sel.getBoundingClientRect().top - rect.top;
if (top < 0 || top > this.list.clientHeight - 10)
return null;
let left = this.view.textDirection == Direction.RTL;
let spaceLeft = rect.left, spaceRight = innerWidth - rect.right;
if (left && spaceLeft < Math.min(MaxInfoWidth, spaceRight))
left = false;
else if (!left && spaceRight < Math.min(MaxInfoWidth, spaceLeft))
left = true;
return { top, left };
}
positionInfo(pos) {
if (this.info && pos) {
this.info.style.top = pos.top + "px";
this.info.classList.toggle("cm-completionInfo-left", pos.left);
this.info.classList.toggle("cm-completionInfo-right", !pos.left);
}
}
