Two thoughts so far:

1. If possible, should definitely offload this to a library like tether.js but you're right, I took a look at seemingly no support for range. I also think given the way its setup, it might be hard to replicate that. Also - their homepage seems pretty jerky while scrolling, scroll jacking?
2. We should also definitely try merge the behaviours between simpla-img-editor and simpla-text. There's a lot of duplicated logic, it'd be much easier to maintain in one shared thing.

Maybe worth looking into some libs like tether, or just tether itself, and if we can't use them directly, copy out chunks of logic.

Found popper.js which might be the way to go. Apparently it's a "positioning engine", but sounds like it doesn't make many assumptions and can be configured nicely. Only thing to check would be if it supports (or could support via plugin) using a Range as a reference, rather than an element.

The "range as reference" is a feature request that already has a ticket open for it.
floating-ui/floating-ui#193

Great! Thanks @FezVrasta - I'll comment on that issue and see if I can help out at all

As per my comment on that issue, looks like all you'd have to do is have clientWidth and clientHeight

e.g. something like:

function makeReferenceFromRange(range) {
  let getRect = () => range.getBoundingClientRect();

  return {
    getBoundingClientRect: getRect,
    get clientWidth: () => getRect().width,
    get clientHeight: () => getRect().height
  };
}

Though not sure if for a range the clientWidth is equivalent to getBoundingClientRect().width

See:
floating-ui/floating-ui#193 (comment)

Forked the codepen in that comment and put together a rough example of what it would look like for our use case. Looks promising!

👍

Let's do a spike on this for simpla-text, and if it works we can generalise to a behavior for reuse throughout simpla, going to be a reasonably common pattern

Or, of course, the other option is to bail on scroll and resize. That would be equal robust and possibly much more performant, but worse UX.

For me would depend entirely on perf - don't like the idea of handling scroll events with js, no matter how you spin it that's a heavy weight for a minor piece of functionality.

That pen looks okay, but only tested on my 2015 MacBook without throttling.

I tested Popper extensively to make sure it provides great performance. Your fiddle with a CPU throttling down to 20x works smoothly.

Yep, I did another few tests after making that comment and it's pretty impressive, I generally associate scroll interaction of any sort with woeful perf (for the outcome), but can't argue with real world results.

@bedeoverend I'm happy to go ahead with testing this in real elements

So I did a quick spike of this locally, but it seems popper assumes a reference elements are fixed...? Not sure, but have raised an issue on popper. See this pen for minimum repro of the behaviour.

A workaround is requesting an update from popper in a requestAnimationFrame call - perhaps we can test how performant that is until the bug is resolved

Sure sounds good. That's implementation details anyway.