TinyMCE sticky toolbar with element scroll (not window scroll)

Question

Problem : We are trying to achieve toolbar sticky behavior in tinyMCE. It works when we created a separate application that had a normal window scroll. As soon as we apply it in our application it doesn't work. Our application doesn't have any window-level scroll, we are only applying div/element scrolls.

We are using tinyMCE 5.9.0 version and the following is our init function for tinyMCE

tinyConfig: 
{
   selector: '#' + elementId,
   suffix: '.min',
   base_url: '/app/tinymce',
   skin_url: '/app/tinymce/skins/ui/oxide',
   content_css: '/app/tinymce/skins/ui/oxide/content.min.css',
   theme: 'silver',
   browser_spellcheck: true,              
   contextmenu: false,
   toolbar_sticky: true,
   toolbar_sticky_offset: 150
}

// intializing
tinymce.init(this.tinyConfig);

Following is the html that we are using:

<body style="height: 100%; width: 100%; margin: 0;padding: 0; overflow: hidden; scroll-behavior: smooth;">
<main class = "d-inline-block w-100 overflow-hidden position-relative">
<section class="pl-default pr-default pb-default overflow-y-auto" style="overflow-x: hidden;">
<rich-text-editor>
</rich-text-editor>
</section>
</main>
</body>

How to make tinyMCE toolbar sticky with element scroll (not window scroll)?

We tried adding scroll event listeners and calling ScrollWindow event of tinyMCE. This does make the toolbar sticky but never unsticks the toolbar, also other resizing events are not working properly.
Also tried adding an event listener to the element using:

document.getElementById('sectionId').addEventListner();
document.addEventListener('scroll', event => { 
    this._tinyMceInstance.fire('ScrollWindow', event); 
});

TinyMCE sticky toolbar with element scroll (not window scroll)

0 Answers0