Toolbar does not position properly when elementsContainer is inside absolute or fixed dom

[disintegrator]

The top position of the toolbar gets screwed up because the window.pageYOffset is used in the calculation when elementsContainer is inside a parent with absolute/fixed position (think: modals).

On my page I follow these steps:

1. Scroll the page down a few pixels
2. Open a modal with medium-editor inside
3. Type and select text
   Issue: toolbar vertical alignment is off

Note: I am using the editor in a react app with the following config (the two refs are divs):

this.editor = new MediumEditor(this.refs.editor, {
  elementsContainer: this.refs.medium
})

Seen below is a full screen modal over a scrollable body.

[nmielnik]

First off, it's good to hear you're having success with react. contenteditable and React have not gotten along for quite a while, as contenteditable inherently allows significant DOM manipulation outside of react's knowledge. Have you had to work through any issues with this?

There are 2 things I can think of around this:

1. There may need to be a change to setToolbarPosition() in toolbar.js (source code here) to account for cases when it is inside an absolute or fixed position element.
2. There may be a workaround for your case using the diffLeft and/or diffTop options for the toolbar. You can find the documentation here.

We would gladly accept a pull request to fix this for option 1, as the issue you are describing has likely been encountered by others, and probably be encountered by others moving forward as well 😄

[disintegrator]

@nmielnik thanks for the quick response.
With regards to react integration: I do make sure that the editor does not affect the virtual dom held by react.
I think diffLeft and diffTop should be treated as constants at initialisation time to fine tune the toolbar position.
After digging through the code, I have pinpointed the problem to be in positionToolbar() which simply relies on this.window.pageYOffset to determine the toolbar position which causes it to fall apart when placed under non-static parents. I am trying to figure out how to fix it by using looking at the toolbar's offsetParents - I'll keep digging and create a PR if I have any success.

Another relevant issue worth noting is that using offsetWidth for calculating the left position of the toolbar is problematic since actual width might be a float and different browsers treat that differently. I've been trying to address that as well by using getComputedStyle(toolbarElement)

[linkesch]

@disintegrator have you found a solution for this? I'm trying to use medium-editor inside an absolutely positioned container which is even scrollable.