Converting a dom element to virtual-dom in widgets

Development

AI-generated summary

Converting a DOM Element to Virtual-DOM in Widgets

The discussion revolves around converting a DOM element to a virtual-DOM in widgets. attj is trying to render LaTeX in a widget using a custom KaTeX render, but is encountering errors when passing the DOM element to the h function.

merefield suggests that widgets are not the right tool for this task and recommends using a Component instead. They also propose finding a JavaScript function to process the LaTeX and return it as HTML, which can then be rendered in the Component.

attj explains their use case, which involves editing the tag banners component to render LaTeX in tag descriptions. They initially tried adding a script to the “Head” section but encountered issues with accessing the widget’s HTML element before it was loaded.

merefield advises against relying on the load order of widgets or components and suggests doing the work in a Component event like didInsertElement.

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.