Editor: Fix tinymce float toolbar not hide (fixes #1486)

[ralder]

Reason of this issue was that on blur event activeToolbar was hidden but after if window is got scroll event it was shown again.

Changed 'resize' to 'resizewindow' because it's right for window target (tested in ie11 on win10; ff, chrome, safari on mac os)

PS:

• This PR not fixed Editor: Media: image toolbar overlaps Actions and Preview screens on iPhone 6 iOS 9.1 #331 (there are errors with firing blur in tinymce codebase for ios)
• This PR may be fixed Editor: contextual menu occasionally appears above preview #1815 (it's hard to reproduce)

[aduth]

Hi @ralder, thanks for the pull request!

As a bit of background, the wpcom TinyMCE plugin is a forked version of the core WordPress wordpress TinyMCE plugin, found here. We try to keep these files in sync as changes are made, so it can help to check for more recent changes to the WordPress file, or vice versa, if we make changes, it's probably a good idea to submit a patch to the core WordPress Trac.

To the changes here, I think adding the condition for blur makes sense, as below there is an event binding for blur which is never otherwise accounted for in the hide function.

However, I'm not so certain about the resizewindow event. I can't find any reference in the spec about a resizewindow event, and based on the event bindings for calling hide, it wouldn't appear to reach the function anyways. Where did you find information about resizewindow?

[ralder]

resizewindow isn't event. It's value of event.type for resize event when it binding to window. I also not found any specification for this. But browsers do this (I tested in ie11 on win and chrome, ff, safari on macos)

[nylen]

I'm seeing event.type === 'resize' on my browser as well. As expected, given the spec and the list of available event names.

I'm also seeing that your other change does not fix #1486 - I'm able to reproduce it intermittently in both master and this branch.

In master, we still call activeToolbar.hide() to hide the toolbar when a blur event occurs. What you changed was to prevent the toolbar from being shown again after the editor is blurred and then refocused. I think the existing behavior (hide the toolbar, but allow it to be shown again when the editor is refocused) is correct.

Related to #1486 - the editor doesn't always get that blur event when I click the notifications icon, so none of this code is ever called and the toolbar remains active. I'm not sure why this is happening.

[ralder]

I'm sorry 😳. @nylen is right, browsers send event.type = 'resize' by spec. But here tinymce rewrites it to 'resizewindow'

I think the existing behavior (hide the toolbar, but allow it to be shown again when the editor is refocused) is correct.

In my test in browser I cant do this when I refocused editor by click him. If I clicked by previous element with hidden toolbar(toolbar is shown again) if I clicked by element without toolbar (previous toolbar is shown and then hides straight away), i.e. i cant found element in editor for click for just got focus for showing hidden toolbar. And when I changed in blur handler activeToolbar = false I got same behavior.
If i'm wrong here and there is approach to do this, then we need here additional variable 'isFocused' for editor, because in hide function hidden toolbar will be shown again for events 'scroll' and 'resize' even editor hasn't focus.

If you not get blur event for click notification icon, say whats environment you have. I always got it except touch devices

[nylen]

Sorry for the delay @ralder, I've been meaning to come back to this but got pulled onto another project and haven't had time.

I didn't look at the event type in the context of that code - you're correct that it is resizewindow here due to TinyMCE (fired as ResizeWindow then lower-cased).

I'm still seeing that this PR does not fix #1486 because the blur event is not always fired. I'm seeing this in OS X and latest Chrome, but the problem doesn't appear consistently.

Still, these are good changes. They make more sense to me now, thanks for explaining. There are 2 different issues that this PR fixes.

Inline toolbar reappears after blur then scroll

• Click an image or do something else to show an inline toolbar.
• Click outside the editor to fire a blur event; the inline toolbar should disappear.
• Scroll the window; the inline toolbar will reappear because it wasn't disabled on blur.

Fixed by clearing the active toolbar on blur.

Inline toolbar does not reappear after resizing window

• Click an image or do something else to show an inline toolbar.
• Resize the window; the inline toolbar should disappear briefly then reappear, but it doesn't. (Then, if you scroll the window, the inline toolbar reappears again.)

Fixed by testing for event.type === 'resizewindow' (non-standard, but set by TinyMCE as described above).