TinyMCE dialogs in editor in Backdrop dialog (iframe in iframe, dialog in dialog)

[indigoxela]

The code plugin (editing html source in a TinyMCE dialog) behaves very odd when editing custom block content in layout forms.

The markup is visible, can be marked, but isn't editable in the browser. This only affects editing blocks in layout forms, where the editor itself in in an iframe.

Oddly, if I run tinymce.activeEditor.setContent('<p>hello</p>') this content gets set in the editor. So the dialog does actually - sort of - work.

Similar odd behavior affects other dialogs, but not all form elements are unusable.

Checkboxes, for example, seem to work, text input of any kind doesn't, select lists... behave weird.

Seems to be a focus problem. The Backdrop dialog has the focus, the TinyMCE dialog gets it for a moment, then the focus's back on the jquery.ui dialog.

And unfortunately this breaks following plugins in Backdrop dialogs:

• tinymce_snippets
• tinymce_video_filter
• tinymce_imce (the image attribute part)
• any native TinyMCE plugin that uses dialogs (code, link, image - the latter two are hardly ever in use)

[indigoxela]

And oops, CKE5 is also affected. See https://github.com/backdrop/backdrop-issues/issues/6351

[indigoxela]

Weird experiment...

document.getElementById('backdrop-modal').style.display = 'none' 

Then the Tiny dialog works, after that...

document.getElementById('backdrop-modal').style.display = 'block'

The problem is: there's no opportunity where I could set that. At least not for the code plugin dialog. And as the smaller Tiny dialogs don't fully cover the Backdrop dialogs, it would look weird, too.

[indigoxela]

It's focusin handling ... hard to prevent jquery.ui dialogs to completely break TinyMCE form elements, but possible. It may have side effects, but ... :shrug: