toolbar of TinyMCE multilanguage textarea not rendered correctly in new version of AdminThemeUikit with LanguageTabs

[yellowmastodon]

Tinymce sticky toolbar probably gets wrong position and width assigned when switching multi-language tabs. This results in toolbar rendered vertically on the left side of the screen. Tested with current master version of Processwire and this issue does not occur there.

TinyMCE Settings:

Editor mode: Normal editor
When to load and initialize the normal editor? Load editor when it becomes visible
I think it also happens with "Load editor when the page loads".

Steps to reproduce:

1. Install Processwire 3.0.251 with site-languages site profile
2. Change the field "body" to TinyMCE
3. Edit some page and switch body field's language tab

Versions:

AdminThemeUikit 0.3.6
Processwire 3.0.251
LanguageTabs 1.1.7

Screenshot

[tiberium-v]

I can confirm that misbehave on my clients, also with MultiLanguageTabs

[ryancramerdesign]

@yellowmastodon This is an issue we've been aware of for awhile, but have no idea how to fix it. It occurs without multi-language too, and can also be reproduced without the Konkat/default theme and in older versions of PW. It seems to be a bug in TinyMCE itself, though maybe there's something the new admin theme that makes it more common, I'm not really sure. So far it seems like we can entirely avoid it when using the regular editor with "Sticky bars" option disabled in the TinyMCE field settings.

[matjazpotocnik]

@yellowmastodon @tiberium-v does this commit processwire/processwire@cc8d818 solve the issue?

[yellowmastodon]

@matjazpotocnik It seems to be replaced by new issue: now the assigned position top: is 0px (even before languageTab switch), so it is bellow main navbar. But reverting 'toolbar_sticky_offset' => 55, brings issue back.

Proposed workaround:
Keep init.php without 'toolbar_sticky_offset', and add the offset manually in css.

.tox-tinymce--toolbar-sticky-on .tox-editor-header{ top: 55px !important; }

This works for me, but I have not yet tested it with all the possible TinyMCE settings.

[matjazpotocnik]

@yellowmastodon How do I replicate what you describe? It works as expected here, there is no jumping.

[yellowmastodon]

@matjazpotocnik in the latest version, with 'toolbar_sticky_offset' removed, it does not occur for me (but the offset is not set, so sticky toolbar is partially obscured by main PW navbar). In the version I described in the issue, the most sure way to replicate it was to scroll down just so that the language tab buttons are barely visible (obscured a little bit by the main navbar) and then click on some of them. But it also happened other times, just not so often.

[matjazpotocnik]

I still can't replicate with Konkat theme and PW 3.0.252

[yellowmastodon]

@matjazpotocnik the original issue is in 3.0.251 (as described in the issue itself). In 3.0.252, that "jumping" does not occur. But instead of that, sticky toolbar for tinymce is partially obscured by main navbar, as I described in my previous comment. So basically the original issue is gone in 252, but the solution itself introduced different problem. See attached screenshots for problem in 3.0.252.

[matjazpotocnik]

Ok, now I understand and can recplicate, thank you.

[matjazpotocnik]

@yellowmastodon could you check if this commit processwire/processwire@dbbb239 fixes the issue?

[jploch]

@matjazpotocnik , @ryancramerdesign , @yellowmastodon we already have a solid fix for this. Ryan just needs to push it to the theme 😊

[yellowmastodon]

Sorry for late reply, I just tested it, seems to work great now. One small thing is position inside a modal, since that does not include the fixed top navbar. Probably easily fixable, but not sure if there are some edge cases (modal with topnav, nested modals?)

This:
.pw .tox.tox-tinymce.tox-tinymce--toolbar-sticky-on .tox-editor-header { transition: translate 0.3s ease; translate: 0 55px; }

should just be changed to something like:
.pw body:not(.modal) .tox.tox-tinymce.tox-tinymce--toolbar-sticky-on .tox-editor-header { transition: translate 0.3s ease; translate: 0 55px; }