Specific to jsonschema, long ago, I wrote a jsoneditor widget (demo at JSON Editor TW5 demo — a non-linear personal web notebook)
But @joshuafontany forked and much improved it (though I’m finding his demo site to be unreachable currently: https://joshuafontany.github.io/TW5-jsoneditor/).
Using the render()
widget lifecycle should work fine for react widgets. The key thing is that there needs to be a way to serialize the internal state of the react widget and save it to some tiddler field. That way if the dom element is destroyed during the normal tiddlywiki refresh cycle, the widget can be restored to its former state when re-drawn.
The underlying javascript library for jsoneditor provides an onChange
callback which makes it possible to keep the tiddler field in sync with the jsoneditor internal state. I see the reactjs library you linked to also has an onChange
callback.
Avoiding extra refreshes (and possible infinite loop of refresh) requires care. Updating a tiddler field from the onChange
callback triggers the tiddlywiki refresh to be propagated through the widget tree. Since the change came from the internal jsoneditor widget, there is no need to refresh it. Therefore, the onChange
callback needs to keep track of the serialized state and only refresh when the state from the tiddler field was independently changed to something different.
I found that difficult to describe. I hope my point is clear.