Hoisting Halogen with a JS lib’s DOM

Help
#1

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?

2 Likes
#2

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.

2 Likes
#3

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!

2 Likes