0

The problem: Given a HTML element and potentially some children, can you (and how can you) determine whether it is or will display it's children in a left/right flow (inline) or top-bottom flow (block)?

This problem comes up, e.g., when you want to display a 'dropcursor' that shows where an element can be dropped, as is done by prosemirror-dropcursor. The cursor should be shown as a vertical bar if the elements are in inline flow, or as a horizontal bar above/below the elements if they are in block flow. You can see the same behavior in any text editor if you try to drag & drop things into it.

There are a few solutions that are perhaps less than perfect:

  • You can look at the type of HTML element and it's defaults. Prosemirror does something like this by relying on the schema of the data being displayed, and it's tricked when you don't display the content in a way consistent with the model. CSS can of course override this.

  • Using getComputedStyle() to look at the .display and other properties, in a way mimic what the browser rendering algorithm is doing. But that seems potentially awfully complicated and somewhat error prone - consider CSS flexbox, grid, etc.

  • You can look at the children element's relative position and infer which direction the flow is, but again, that won't work if you have zero or one elements, and may have corner cases anyways.

I was just wondering if it was possible to get this kind of thing directly from the browser, or if there was a robust and/or ready-made way to do it.

beorn
  • 11
  • 3
  • What's complicated about `getComputedStyle()`?? – Pointy May 24 '20 at 16:32
  • There's so many different `display` options (grid, flexbox, etc) with sub-options (auto-flow direction, etc) that it just seemed like a fool's errand to try to mimic. But perhaps that is the best way? – beorn May 24 '20 at 16:40
  • Well those `display` values do actually exist, so it seems like you'd have to handle them one way or another. You can always just ignore layout options that you haven't gotten working. – Pointy May 24 '20 at 16:57
  • I was just thinking that since the browser knows this, maybe there was a way to get to the flow information directly. One option I thought of to infer this was, if you have access to two children, look at the relative rects of those children. But I presume this has all kinds of shortcomings. – beorn May 24 '20 at 20:06
  • Can you set up a minimal example of the issue you're facing? Sounds like there would be some simple solutions for that specific situation you describe, but your description is not quite clear to be sure. – Kaiido May 25 '20 at 01:48

0 Answers0