Toolbar Sticky not working properly

[rajraii]

What is the current behavior? Tinymce React Toolbar not working properly There are following cases here:

1. Toolbar doesnt automatically sticks to top when scrolled down in content

2. Toolbar only gets sticked to top when there is a click event inside content Reproduced this behaviour after pressing enter inside content

3. It will be sticked to top of the page even when user scrolls out of the content area

4. Selector option in init json is not accepting a string value

###NOTE: I was able to identify the issue: The css in parent element consist of overflow: auto. Need to rectify it

What is the expected behavior? Should have stick only to the top of content context (not at page) when users scrolls on page, Clicking or event should have not been the trigger here.

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE or tinymce-react?

• Browser: Chrome
• OS: Ubuntu
• First affected version: React Tinymce Version : 4.3.2
• Worked in version: React Tinymce Version : 4.3.2

[danoaky-tiny]

You're using the selector prop, which is purposely overridden and won't be used, see https://www.tiny.cloud/docs/tinymce/latest/react-ref/#init.

Apart from that, could you please fork our code sandbox to replicate your issue. Or provide a codepen or something similar. Then we can help you further.

[rajraii]

@danoaky-tiny In this demo, I have tried to replicate my behavior, Though I could not make the TinyMCE resizable according to the size of the content in it. If you click inside the editor, the editor toolbar is sticky. But when you scroll outside of Editor then the behavior changes to Static

Code Sandbox

Tinymce Tollbar is not sticky when parent has a Overflow styling in it.

[andresmotiva]

I am having the same issue @rajraii

• Sticky toolbar does not understand when I scroll back up and remains on top
• I am having also the issue of the toolbar having different behavior when editor is focused and blurred.

Did you manage to make it work?

[tiny-stale-bot]

This issue is stale because it has been open 30 days with no activity. Please comment if you wish to keep this issue open or it will be closed in 7 days.

[rajraii]

@andresmotiva I was able to fix this issue with a hack, manually dispatching event resize

editor.on("LoadContent", function() {
         window.dispatchEvent(new Event('resize'))
}

Note: Loadcontent event fires before the painting, You can add a setInterval as well on it

[lorenzo-pomili]

hi, I'm having hard time reproducing the bug, it is possible that I'm doing the wrong steps to reproduce it, could you record a video just to be sure that I'm trying to reproduce it in the correct way?

[andrewbarnhart]

@lorenzo-pomili This code sandbox should show the issues. There are two editors using toolbar_sticky inside a container with an overflow applied. The toolbars don't become sticky until interacting with the content in the editor (adding a newline is the easiest way). The second editor's toolbar is hidden until the same interaction occurs. Once the toolbars are visible and sticky they do not align to the correct position in the container but instead stick to the top of the viewport.

Sandbox

[lorenzo-pomili]

hi, to solve this problem you should add ui_mode: "split" to your init, this is the documentation of the ui_mode, let me know if you still have the problem

[andrewbarnhart]

@lorenzo-pomili Thank you that solves it. I can't believe I missed this in the docs.