Fixes an issue where the TinyMCE floating/inline toolbar (usually when editing a link in the WYSIWYG) "flickers" endlessly. This is especially likely to happen when the TinyMCE editor is inside of a repeater (as in the Accordion block, for example) due the restricted horizontal space.
The issue is caused by some poor positioning logic in wp-includes/js/tinymce/plugins/wordpress/plugin.js, which sometimes places the floating toolbar slightly off-screen when positioning it next to the inline element being edited. Overflowing the body this way causes horizontal scrollbars to appear and triggers a scrollwindow event. The same plugin hides the toolbar during scroll events to be repositioned over the inline element being edited once the scrolling finishes. Hiding the toolbar causes the scrollbars to disappear and the plugin then shows the toolbar again, triggering the scrollbars, triggering the hiding of the toolbar, etc, etc.
The fix is rather simple, but difficult to apply. It would essentially be a one-liner in the core TinyMCE Wordpress plugin, were that a normal library you could patch or replace. 😢 Instead, I've created a custom TinyMCE plugin to observe the toolbar and fix the positioning in the trouble cases. TinyMCE plugins are meant to be independent and "closed", so there's no way to fix the errant positioning function directly. Instead we quickly recalculate and reposition the element ourselves after the bad positioning has been done.
Important note:
This can potentially affect any inline WYSIWYG toolbar, so the potential effects of some bad code here are substantial. Also, there's already some existing "weirdness" with the TinyMCE editor toolbar positioning in some scenarios that isn't related to this fix—this fix should just make the toolbar (at-least) usable in all cases.
Tests
Does this have tests?
[ ] Yes
[x] No, this doesn't need tests because I don't know how you'd test it. Maybe it does?
[ ] No, I need help figuring out how to write the tests.
What does this do/fix?
Fixes an issue where the TinyMCE floating/inline toolbar (usually when editing a link in the WYSIWYG) "flickers" endlessly. This is especially likely to happen when the TinyMCE editor is inside of a repeater (as in the Accordion block, for example) due the restricted horizontal space.
The issue is ticketed here: https://core.trac.wordpress.org/ticket/44911 and everyone pretty much agrees that it exists, but no one has fixed it in ~3 years.
The issue is caused by some poor positioning logic in
wp-includes/js/tinymce/plugins/wordpress/plugin.js, which sometimes places the floating toolbar slightly off-screen when positioning it next to the inline element being edited. Overflowing the body this way causes horizontal scrollbars to appear and triggers ascrollwindowevent. The same plugin hides the toolbar during scroll events to be repositioned over the inline element being edited once the scrolling finishes. Hiding the toolbar causes the scrollbars to disappear and the plugin then shows the toolbar again, triggering the scrollbars, triggering the hiding of the toolbar, etc, etc.The fix is rather simple, but difficult to apply. It would essentially be a one-liner in the core TinyMCE Wordpress plugin, were that a normal library you could patch or replace. 😢 Instead, I've created a custom TinyMCE plugin to observe the toolbar and fix the positioning in the trouble cases. TinyMCE plugins are meant to be independent and "closed", so there's no way to fix the errant positioning function directly. Instead we quickly recalculate and reposition the element ourselves after the bad positioning has been done.
QA
The ticket for this PR: https://github.com/moderntribe/turner-industries/pull/78 Original fix forMilitary Affairs: https://github.com/Microsoft-Stories/military-affairs/pull/221 Subsequent fix for Turner Industries: https://github.com/moderntribe/turner-industries/pull/78
Screenshots/video:
Important note: This can potentially affect any inline WYSIWYG toolbar, so the potential effects of some bad code here are substantial. Also, there's already some existing "weirdness" with the TinyMCE editor toolbar positioning in some scenarios that isn't related to this fix—this fix should just make the toolbar (at-least) usable in all cases.
Tests
Does this have tests?