Obter linhas e colunas da janela de visualização no CodeMirror

O CodeMirror é um utilitário incrível para apresentar códigos em um ambiente de navegador. O destaque de sintaxe, os widgets e várias funções avançadas fazem dele uma ferramenta única e útil. Ao usar o CodeMirror dentro do depurador DevTools do Firefox, descobri que adicionar centenas de widgets de ponto de interrupção de coluna a linhas de código muito longas realmente prejudicava o desempenho, e com certeza não posso proporcionar aos senhores uma experiência horrível durante a depuração do JavaScript.

Eu queria ser extravagante para garantir que o desempenho fosse bom, por isso decidi mexer apenas com a exibição de widgets de ponto de interrupção de coluna que apareciam na janela de visualização. Para fazer isso, precisei calcular a linha inicial, a coluna inicial, a linha final e a coluna final do conteúdo do editor CodeMirror, alguns dos quais não pareciam ser fornecidos nos métodos do CodeMirror.

Minha experimentação me levou a uma solução com a qual estou bastante satisfeito; o código é limpo, o desempenho é bom e o método tem sido incrivelmente confiável. Aqui está ela:

function getLocationsInViewport(editor) {
  const charWidth = editor.defaultCharWidth();
  const scrollArea = editor.getScrollInfo();
  const { scrollLeft } = editor.doc;
  const rect = editor.getWrapperElement().getBoundingClientRect();

  const topVisibleLine = editor.lineAtHeight(rect.top, "window");
  const bottomVisibleLine = editor.lineAtHeight(
    rect.bottom,
    "window"
  );

  const leftColumn = Math.floor(scrollLeft > 0 ? scrollLeft / charWidth : 0);
  const rightPosition = scrollLeft + (scrollArea.clientWidth - 30);
  const rightColumn = Math.floor(rightPosition / charWidth);
   return {
    start: {
      line: topVisibleLine,
      column: leftColumn
    },
    end: {
      line: bottomVisibleLine,
      column: rightColumn
    }
  };
}

O CodeMirror fornece métodos fáceis para obter as linhas iniciais e finais na viewport (lineAtHeight), mas não há uma funcionalidade semelhante para colunas. Optei por obter o scrollLeft do scroller do CodeMirror e, em seguida, usar a largura padrão do caractere e outras dimensões para obter a coluna aproximada nessa posição. Meus testes com usuários mostraram que esse método é muito confiável, seja com o caractere exato ou com um caractere a menos (provavelmente devido à matemática de subpixel).

Nunca proclamei ser o melhor desenvolvedor do mundo (estou longe disso), mas ser inteligente para encontrar soluções para problemas interessantes é algo de que sempre me orgulhei.