Linking an image creates an empty paragraph tag in CKEditor

My guess is that this issue may be rooted in CKEditor's code, this portion of the image2 plugin seems suspicious:

// Once widget was re-created, it may become an inline element without
// block wrapper (i.e. when unaligned, end not captioned). Let's do some
// sort of autoparagraphing here (#10853).
if ( this.widget.inline && !( new CKEDITOR.dom.elementPath( this.widget.wrapper, editable ).block ) ) {
  var block = doc.createElement( editor.activeEnterMode == CKEDITOR.ENTER_P ? 'p' : 'div' );
  block.replace( this.widget.wrapper );
  this.widget.wrapper.move( block );

This is within image2/plugin.js in the inflate() function: https://github.com/ckeditor/ckeditor-dev/blob/ae5d06af6963b1b3fd7ef93c88...

BUT: This issue does not present itself in CKEditor's widget demo. Only in the Drupal implementation is this problem exhibited. Meaning it's likely we can fix it within our plugin code.

Within our code base, here's the line that triggers the problem:

      var originalInit = widgetDefinition.init;
      widgetDefinition.init = function () {
        originalInit.call(this);
        // Update data.link object with attributes if the link has been
        // discovered.
        // @see plugins/image2/plugin.js/init() in CKEditor; this is similar.
        if (this.parts.link) {
          this.setData('link', CKEDITOR.plugins.image2.getLinkAttributesParser()(editor, this.parts.link));
        }
      };

Removing the this.setData('link', CKEDITOR.plugins.image2.getLinkAttributesParser()(editor, this.parts.link)); prevents the problem (but it also prevents the linking entirely).

So it appears as though this is some weird side-effect of the browser caret location (I think). If the caret is in a contenteditable paragraph, removing that paragraph doesn't seem to work. So what appears to happen is that the parent <p> tag isn't removed, and then another child <p> tag is created. You can't have nested paragraph tags in HTML though, so what ends up happening is the browser then tries to separate the two paragraph tags to make the HTML valid.

The apparent fix is to focus the widget element after it has been wrapped in the anchor tag. With the selection moved to the widget, the previous paragraph tag can be removed (and then re-added) by CKEditor's widget handling. Previously the caret would end up *before* the image (in the old paragraph tag), making the user advance it a few times before they could start typing again. This fix has the added benefit of putting the cursor in a better location. And after linking an image the "Unlink" button immediately highlights, indicating that a link as been created.

Here's a version that doesn't break the image button.

We found one more issue where the image save button would not work some of the time. This patch appears to work in all situations.