medium-editor Make toolbar stay near selection with overflow scroll 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!

Apr 23 '17 12:04 steverob

try setting the elementsContainer to .entry.

Jul 21 '17 11:07 dmx-patrick

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

Feb 19 '18 19:02 RogerQuiros

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

Mar 05 '18 18:03 jackmcdade

Any updates?

Jun 04 '18 20:06 jackmcdade

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()
  }
});

Oct 05 '18 09:10 thanuzz

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

Jan 12 '21 16:01 evanjmg

medium-editor medium-editor copied to clipboard

Make toolbar stay near selection with overflow scroll editor

medium-editor
medium-editor copied to clipboard