Acessando a instância de uma lib JavaScript através do elemento DOM
Fala galera belezinha? Hoje tive um desafio interessante aqui no trabalho que parecia bem difícil de ser realizado, no primeiro momento que eu vi. Na real primeiro pareceu bem fácil, depois ficou complicado até chegar na solução bem simples, rs.
Estou trabalhando em um site construido em Drupal (não tenho nada a ver com a escolha dessa stack ok?) com um tema da Apigee. Esse tema basicamente serve para criar um portal onde desenvolvedores possam consultar o uso de uma determinada API, não vou entrar em detalhes de como funciona essa integração entre Apigee — Drupal porque não é o foco ok?
Tendo isso em mente, posso dizer que esse tema usa vários plugins para o Drupal, entre eles tem o cara chamado CodeMirror que de acordo com a descrição no site, a tradução livre é:
O CodeMirror é um editor de texto versátil implementado em JavaScript para o navegador. É especializado para edição de código e vem com vários modos de linguagem e addons que implementam funcionalidades de edição mais avançadas.
Aliás fazendo uma pesquisa rápida, esse CodeMirror é usado por várias iniciativas para criar editores de código que tanto amamos (ou não).
Daí meu desafio a princípio era bem fácil, só adicionar um line wrap no código, porque algumas linhas estavam gerando aquele não tão amado scroll horizontal e olhando a documentação do CodeMirror era só meter uma opção na hora de instanciar a lib que resolveria o problema:
{ lineWrapping: true }Lá fui eu futucar onde que estava sendo instanciado o CodeMirror e aí o desafio ficou difícil, por que o grande amigão Drupal (ou o tema do APIgee) gera um javascript que instancia o CodeMirror, com as opções que ele acha necessárias e encapsula isso numa função que nós não temos acesso, ou seja, f*deu a mariola né amigão, me ajuda!
Mas como o nosso javascript de todo dia é uma maravilha, descobri que tem como acessar essa instância e dar um override nas opções tendo acesso a API da lib de uma maneira bem simples. Basta você acessar o DOM element que a instância vai estar lá disponível, segue o código de exemplo:
Explicando rapidamente, a primeira linha está dentro de um javascript que o tema Apigee gera e eu não tenho acesso a esse arquivo, eu teria que mudar essas opções na marra “por fora” do tema. Então bastou acessar o DOM element no qual o CodeMirror foi instanciado (o customEditor do exemplo), pegar o próximo elemento (que é gerado pelo CodeMirror) e lá estava a API da lib disponível.
Imagino que isso seja possível fazer com qualquer lib, tipo acessar a API do jQuery de um elemento que tá definido lá nas entranhas de um plugin obscuro.
Fico por aqui, abraços!
