Dialog is not rendered in a root which causes stacking context problems.

What is the current behavior? Describe the bug Source dialog is rendered right after the toolbar. So both depend on fixed_toolbar_container setting.

Please provide the steps to reproduce and if possible a minimal demo of the problem via fiddle.tiny.cloud or similar.

1. Create some element with position relative + some positive z-index
2. Render editor after that element
3. Open source dialog

What is the expected behavior? It would be better to render it directly to the body (documentElement) html element. Or at least add some config setting which would accept the element/selector where to render the dialogs.

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE? Npm packages:

• “@tinymce/tinymce-angular”: “^6.0.1”,
• “tinymce”: “^6.0.2”,

Browser:

• Google chrome version 100.0.4896.127 (Official Build) (64-bit)

OS:

• Windows 11

[TheSpyder]

We’re actually looking at an adjustment to separate the dialogs into their own root element for other reasons. I’m not sure if this plan will fit into the next release scope but it sounds like it would resolve that issue.

The menus look like a different issue - we need those tied to the toolbar so they scroll together. However they should be positioning themselves so they’re not squished up against the edge of the view like that.

[liesahead]

@TheSpyder , ping