Hoisting Halogen with a JS lib’s DOM

I’m using a JS library (ProseMirror in this case) that provides a rich editor, and a way to embed arbitrary DOM elements into it. As a simple example, check out dinosaurs :t_rex: embedded in the document: ProseMirror dino example

I’m going to make a Halogen component wrapping ProseMirror, which is easy enough, but I want the ability to embed an arbitrary Halogen component in the document, while still basically behaving the same: I want it to be updated as usual, that queries and raises work as usual, etc.

Is there a standard-ish way to achieve this?

I think if I move the DOM element—I.e change its parent—manually after it’s created, that’ll cause trouble.

An idea I had was to create a kind of “proxy” and make a fresh call to runUI for each child, and the proxy would forward queries and inputs up and down, or something like that.

Anyone done something similar?


You’d probably want something like portals Add support for portals by thomashoneyman · Pull Request #705 · purescript-halogen/purescript-halogen · GitHub

You can probably get by building something like this yourself by nesting runUI calls, but you’ll need to be in Aff.


Thanks Nate! That lead me to halogen-portal, which satisfies all my criteria:

  • I’m using Aff anyway.
  • I’m using a component.
  • I don’t think runUI is a particular downside.

In fact, my use-case seems to be even more fitting than the example (modal dialog situation), because the logical DOM nesting will still be preserved; it’s just that a JS lib is controlling one layer in the tree: Halogen (ProseMirror (Halogen ...))

Thanks again @natefaubion!