Convertendo um elemento dom para virtual-dom em widgets

Dev
1

Atualmente, tenho um elemento DOM que é o resultado de uma renderização personalizada do KaTeX.

Ele é gerado assim:

var dom_element = document.createElement("p")
dom_element.innerHTML = "algum texto que contém latex"
renderMathInElement(dom_element)

Neste ponto, dom_element contém o HTML que eu gostaria de renderizar. E eu o retorno assim:

html() {
 return h(algum outro componente ...... , h("div", dom_element))
}

Como h espera um VNode, isso gera um erro. Eu tento fornecer o HTML interno em vez disso:

html() {
 return h(algum outro componente ...... , h("div", dom_element.innerHTML))
}

Isso renderiza as tags dentro de dom_element.innerHTML como texto puro e não como HTML.

Existe uma solução para isso?

2

Um widget quase certamente não é a ferramenta certa para isso.

Um widget não deve acessar nenhuma outra informação além do que lhe é fornecido explicitamente por meio de args e deve se preocupar apenas com o que está acontecendo dentro de si e, no máximo, enviar ações de volta. Ele não deve estar envolvido no DOM em outro lugar.

Seria melhor usar um Component, na minha opinião.

Existe algum motivo pelo qual você não consegue encontrar uma função JavaScript que processe o LaTeX, incluindo o material de matemática, e o retorne como HTML, que você pode então renderizar no componente? Se você puder evitar completamente a manipulação do DOM fora do framework, essa seria a melhor opção.

3

Meu caso de uso é o seguinte:

Estou usando o componente de banners de tags e estava editando seu código-fonte. Basicamente, algumas das descrições de tags no meu site incluem latex. E eu quero renderizá-las adequadamente no banner.

Eu queria adicionar um script à seção “Head” na personalização do tema, em vez de editar o widget. Mas não consegui encontrar uma maneira de saber se o widget já foi carregado, então obtenho um elemento vazio quando uso document.getElementById na seção “Head” porque o componente HTML relacionado que exibe a descrição da tag ainda não foi carregado.

4

Você não pode garantir quando um widget ou um componente é carregado. No entanto, você pode fazer o trabalho em um evento de componente como didInsertElement.