Function/method for getting a line's DOM element

v6
1

I am working on extensions that need to do a lot of DOM measurement on lines and their text’s rectangles. I frequently need to get the DOM element for a line, and my current way of doing this looks something like:

function getLineDOM(view: EditorView, pos: number) {
  const { node } = view.domAtPos(pos);

  let current: Node | null = node;

  do {
    if (current instanceof HTMLElement && current.classList.contains('cm-line')) {
      return current;
    }

    current = current.parentNode;
  } while (current)

  return null;
}

which is fine I suppose, but in profiling I was unhappy with the performance of this (it’s in a pretty hot path). I did some digging, and came up with a faster way of doing this:

function getLineDOM(view: EditorView, pos: number) {
  // this checks if the pos is covered by `view.visibleRanges`
  if (!isVisible(view, pos)) {
    return null;
  }

  // @ts-expect-error private api
  const children: Array<any> | undefined = view.docView?.children;

  if (!children) {
    return null;
  }

  let from = 0;

  for (let i = 0; i < children.length; i++) {
    const child = children[i];
    const to = from + child.length;

    // brand check for line views
    if ('addLineDeco' in child && pos >= from && pos <= to) {
      return (child.dom ?? null) as HTMLElement | null;
    }

    from = to + child.breakAfter;

    if (pos < from) {
      break;
    }
  }

  return null;
}

But, this is pretty cursed. I think it’s “correct”, but it obviously uses private APIs and that’s not great. So my request here is just to expose something like the above function, so we can skip the overhead of domAtPos. I’d be perfectly happy with something like view.getLineDOM(pos).