TinyMCE DOM stack status bar isn't pinned

[johnbillion]

A while ago I considered opening a ticket to propose removing the status bar in TinyMCE which displays the cursor position's DOM stack (eg. "p » strong") but azaozz pointed out that this can be useful. I still think it should be removed for simplicity, but I can see that it can have some value.

Regardless, this status bar is not currently pinned to the bottom of our pinned visual editor in 4.0. If your content is long enough to scroll within the editor, this status bar disappears off the bottom, while the word count status bar remains pinned in place.

Tested in Chrome 36 on OS X.

[wolfhoundjesse]

This behavior is caused because the elements are completely separate from each other, although they appear seamless when together. The post status is in a table outside of TinyMCE. Now that the editor expands as content exceeds the textarea, the TinyMCE statusbar is pushed down with the content while the post status never travels beyond the bottom of the viewport.

A few solutions that will maintain familiarity (none of which are pretty):

1. Move the post status into the TinyMCE where it doesn't belong.
2. Hack up editor.css (editor.min.css) to reposition the TinyMCE statusbar.
   • Position it at the bottom, fixed somewhere above the post status which is contained in an element without an explicit height. Don't forget to enable it to change from fixed position to relative position as the editor pulls away from the viewport.
   • Position it underneath the TinyMCE buttons. Some of the above issues will apply.
   • Change the order in which the element is generated (the ID is mceu-34 on my installation) so that it can be reordered at the top. Yuck.
3. Throw it away (you've seen the ruckus in the forums).
4. Put the editor back the way it was (I love the just write idea, so this isn't even an option in my mind).

What else?

[iseulde]

That should pin the status bar too. I'll also take a look at the menubar (which is not visible by default).

[iseulde]

Okay, this is what I have so far... Needs testing. I'll come back to this later.

[azaozz]

In [29579]:

Editor scrolling:

• Pin the TinyMCE statusbar (elements path) to the bottom.
• Add support for pinning the menu when present.
• Add borders from CSS.
• Optimize getting most elements outerHeight.

Part props avryl, fixes #29293, see #28328.

[helen]

#28881 was marked as a duplicate.