Medium-editor: Make toolbar stay near selection with overflow scroll editor

Created on 23 Apr 2017 · 6Comments · Source: yabwe/medium-editor

My DOM is structured this way -

<div class="entry">
  <div class="entry-editor">

  </div>
</div>

I am initializing MediumEditor on .entry-editor.

.entry has overflow-y: scroll and entry-editor has position:relative; height: auto

Now, because the toolbars are appended to the <body> tag, when I scroll the scrollable div, the toolbar does not stay with the content. Instead it remains fixed in the viewport as if it was position: fixed.

I tried to use the elementsContainer option and I set it to .entry-editor, but then when I used .serialize(), the toolbar DOM elements also were in the value.

How do I solve this?

Thanks!

easy first bug

Source

steverob

👍4

All 6 comments

try setting the elementsContainer to .entry.

dmx-patrick on 21 Jul 2017

Hi guys, I´m having the same issue, my editor it's also in a container who has "overflow:auto", any updates on this?

RogerQuiros on 19 Feb 2018

👍1

Having the same issue too. Even if i manage to scope it in somehow, the position is way off.

jackmcdade on 5 Mar 2018

Any updates?

jackmcdade on 4 Jun 2018

Same issue here, would be great if there is a core fix or solution for this. Thanks in advance.

Workaround
I needed to get this working asap so I did a quick & dirty workaround by adding an extension which updates the top value of the toolbar on scroll. Maybe helpful for somebody else:

import * as MediumEditor from 'medium-editor';

export const MediumEditorScrollOverflowFix = MediumEditor.Extension.extend({
  name: 'scrollOverflowFix',
  scrollElement: null,
  toolbar: null,
  initialScrollPosition: 0,
  initialToolBarPosition: 0,

  init() {
    this.setToolBarPosition();
    this.listenForScrollEvent();
  },

  destroy() {
    window.removeEventListener('scroll', this.updatePositionOnScroll.bind(this), true);
  },

  setToolBarPosition() {
    this.subscribe('positionedToolbar', () => {
      this.toolbar = document.querySelector('.medium-editor-toolbar');
      this.initialToolBarPosition = parseFloat(this.toolbar.style.top);
    });
  },

  listenForScrollEvent() {
    this.scrollElement = document.querySelector('#dda-container .ng-scrollbar-view');
    if (this.scrollElement) {
      this.initialScrollPosition = this.scrollElement.scrollTop;
      window.addEventListener('scroll', this.updatePositionOnScroll.bind(this), true);
    }
  },

  updatePositionOnScroll(e) {
    if (this.toolbar) {
      const diff = e.target.scrollTop - this.initialScrollPosition;
      this.toolbar.style.top = (this.initialToolBarPosition - diff) + 'px';
    }
});

Load extension:
```
import { MediumEditorScrollOverflowFix } from './medium-editor-scroll-overflow-fix.extension';

new MediumEditor(el, {
// your options here
extensions: {
'scrollOverflowFix': new MediumEditorScrollOverflowFix()
}
});

thanuzz on 5 Oct 2018

👍1

Seems that extension sort of solves the problem - need to ensure it's the active toolbar with document.querySelector('.medium-editor-toolbar-active'); and obviously replace #dda-container with your class