Close TinyMCE plugin window on click away

Question

I've created a small plugin which adds a button to the TinyMCE toolbar. When clicked, it opens a popup window via editor.windowManager.open(). That popup can be closed by (1) clicking the "Cancel" or "OK" buttons, or (2) pressing the esc key.

I'm trying to figure out how I can also close my plugin's popup by clicking away from it (e.g., if I click the TinyMCE overlay outside the popup itself). WP's Insert/edit link triggers a popup with that capability but from what I can tell that plugin uses a custom dialog box and I was hoping there might be a TinyMCE API method/property that can enable this, but the documentation is pretty terse.

Here is my plugin, for reference:

(function() {
  tinymce.PluginManager.add('custom_plugin', function(editor, url) {
    editor.addButton('custom_plugin', {
      text: 'Plugin',
      icon: false,
      onClick: function() {
        editor.windowManager.open({
          title: 'Custom Plugin',
          body: [
            {
              type: 'textbox',
              name: 'theText',
              label: 'Text',
              value: '',
              minWidth: 800
            }
          ],
          onsubmit: function(e) {
            editor.insertContent('[tag]'+e.data.theText+'[/tag]');
          }
        });
      });
    });
  });
})();

Answer 1

You asked the question a long ago but I was looking for something similar and found a solution.

Enqueue an admin side script on post edit screens(where we have tinyMCE). Then use the code below:

(function($) {
    'use strict';

    $(document).ready(function() {
        $(document).on( 'click', '#mce-modal-block', function() {
            tinyMCE.activeEditor.windowManager.close();
        });
    });

})(jQuery);

This way you can close any popup comes from tinyMCE by clicking outside of it.