Empty div unexpectedly inserted into body #9533

MagnusOxlund · 2024-04-05T11:10:34Z

MagnusOxlund
Apr 5, 2024

An empty div element is being inserted into body after TinyMCE has been initialized. It has the classes tox, tox-silver-sink, and tox-tinymce-aux. I can't find any mention of it except for #5471 which doesn't reveal much.

Could someone explain what this div is and what it's doing in the markup?

MagnusOxlund · 2024-04-06T08:49:36Z

MagnusOxlund
Apr 6, 2024
Author

Turns out it's "the sink", a part of TinyMCE that's responsible for drawing UI overlays when the user interacts with UI controls like buttons in the toolbar. It's inserted into the body by default.

If you would like to move it after TinyMCE has finished loading, you can use the PostRender hook:

/* Move "sink" out of body and into editor's parent node. */
editor.on('PostRender', function() {
    let container = editor.getContainer();
    let sink = document.querySelector('div.tox.tox-tinymce-aux');
    container.parentNode.appendChild(sink);

    /* Match sink width to parent to prevent blowout. */
    sink = "width: 100%; position: relative;"
});

Another option is to set the ui_mode init parameter to split, which moves the sink into the editor's parent, just like the code sample above. It's mentioned in #7868.

4 replies

TheSpyder Apr 7, 2024
Maintainer

We don't recommend moving the sink manually. Many parts of the code use the assumed location to position UI elements placed inside it.

It exists as a separate concept to the editor so we can guarantee modal dialogs and long menus aren't constrained by potential CSS limits around the editor (such as overflow). We added ui_mode after it became clear that the end of the body doesn't work for all scenarios.

MagnusOxlund Apr 8, 2024
Author

Thank you for the warning. Setting ui_mode: 'split' does the job in my case, so I'll stick with that.

Is there a reason the sink is not mentioned in the docs?

Maybe I've missed it, but is doesn't look like there's anything that ties div.tox.tox-tinymce-aux to the ui_mode chapter.

TheSpyder Apr 12, 2024
Maintainer

No, it's part of the way our UI was built and shouldn't be something developers need to think about.

MagnusOxlund Apr 12, 2024
Author

Like I mentioned in #7868, the sink will interfere with a grid layout on body, triggering a row. This happens with the default configuration, so I think developers would appreciate being able to tie the mysterious div to the setting that fixes that issue.

Here's an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
    <title>Document</title>
    <script>
        tinymce.init({
            selector: '#tinymce',
            ui_mode: 'combined' // this is the default value
        });
    </script>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: grid;
            grid-template-rows: 1fr 1fr 1fr;
            grid-auto-rows: 1fr;
        }

        header, main, footer {
            background-color: teal;
        }
    </style>
</head>
<body>
    <header>header</header>
    <main>
        <form action="#">
            <textarea id="tinymce"></textarea>
        </form>
    </main>
    <footer>footer</footer>
</body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Empty div unexpectedly inserted into body #9533

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 4 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Empty div unexpectedly inserted into body #9533

MagnusOxlund Apr 5, 2024

Replies: 1 comment · 4 replies

MagnusOxlund Apr 6, 2024 Author

TheSpyder Apr 7, 2024 Maintainer

MagnusOxlund Apr 8, 2024 Author

TheSpyder Apr 12, 2024 Maintainer

MagnusOxlund Apr 12, 2024 Author

MagnusOxlund
Apr 5, 2024

Replies: 1 comment 4 replies

MagnusOxlund
Apr 6, 2024
Author

TheSpyder Apr 7, 2024
Maintainer

MagnusOxlund Apr 8, 2024
Author

TheSpyder Apr 12, 2024
Maintainer

MagnusOxlund Apr 12, 2024
Author