Converting a dom element to virtual-dom in widgets

dev
1

I currently have a dom element that is a result of a custom katex render.

It is generated like this:

var dom_element = document.createElement("p")
dom_element.innerHTML = "some text that contain latex"
renderMathInElement(dom_element)

At this point dom_element contains the html that I would like to render. And I return it like this:

html() {
 return h(some other component ...... , h("div", dom_element))
}

Since h expects a VNode, this gives an error. I try to give the inner html instead:

html() {
 return h(some other component ...... , h("div", dom_element.innerHTML))
}

This renders the tags inside dom_element.innerHTML as pure text and not as html.

Is there a solution to this?

2

A widget is almost certainly not the right tool for this.

A widget should not be accessing any other information other than what is fed to it explicitly via args and should then only be concerned about what is going on inside itself and at most send actions back up. It should not be involved in the Dom elsewhere.

You’d be better off using a Component imho.

Is there any reason why you can’t find a javascript function that will process the latex including the maths stuff and return it as html which you can then render in the component? If you can avoid extra-framework dom manipulation completely that would be the best option.

3

My use case is the following:

I am using the tag banners component and was editing it’s source. Basically, some of the tag descriptions on my website include latex. And I want to render them properly on the banner.

I wanted to add a script to the “Head” section in the customize theme, instead of editing the widget. But I couldn’t find a way of knowing whether the widget is loaded yet, so I get an empty element when I do document.getElementById in the “Head” section because the related html component that displays the tag description is not loaded yet.

4

You can’t guarantee when a widget or a component is loaded. However you can do the work in a component event like didInsertElement.