search

tinymce / tinymce-react

Offical TinyMCE React component
MIT License
937 stars 152 forks source link

Toolbar Sticky not working properly #529

Open rajraii opened 1 month ago

rajraii commented 1 month ago

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 image

image

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

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

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

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?

danoaky-tiny commented 1 month ago

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 commented 3 weeks ago

@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 commented 4 days ago

I am having the same issue @rajraii

Did you manage to make it work?