XWIKI-20879: New links around images in the WYSIWYG editor are lost o…

…n save

xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/resources/xwiki-image/plugin.js

@@ -117,6 +117,24 @@
     overrideImageWidget: function(editor, imageWidget) {
       CKEDITOR.plugins.registered['xwiki-image-old'].overrideImageWidget(editor, imageWidget);
 
+      /**
+       * Initializes the resize wrapper for the widget.
+       *
+       * @param widget the widget to initialize
+       * @returns {HTMLSpanElement} returns undefined of the resize wrapper was already initialized, otherwise returns
+       *   the wrapper span element
+       */
+      function initResizeWrapper(widget) {
+        var resizeWrapper;
+        if (widget.element.find('.cke_image_resizer_wrapper', true).count() === 0) {
+          resizeWrapper = editor.document.createElement('span');
+          resizeWrapper.addClass('cke_image_resizer_wrapper');
+          resizeWrapper.append(widget.parts.image);
+          resizeWrapper.append(widget.resizer);
+        }
+        return resizeWrapper;
+      }
+
       /**
        * Update the dom of the widget to place the resize span inside the previously created wrapping span.
        *
@@ -126,10 +144,7 @@
         if(widget.data.hasCaption) {
           return;
         } 
-        var resizeWrapper = editor.document.createElement('span');
-        resizeWrapper.addClass('cke_image_resizer_wrapper');
-        resizeWrapper.append(widget.parts.image);
-        resizeWrapper.append(widget.resizer);
+        var resizeWrapper = initResizeWrapper(widget);
 
         // Set the data.align to right when it's right so that the mousedown event is tricked into believing the
         // alignment is right.
@@ -151,12 +166,16 @@
           // This happens when removing the caption of an image. 
           var widgetElement = editor.document.createElement('span');
           widgetElement.addClass('cke_widget_element');
-          widgetElement.append(resizeWrapper);
+          if (resizeWrapper) {
+            widgetElement.append(resizeWrapper);
+          }
           widget.wrapper.append(widgetElement, true);
           widget.element = widgetElement;
           widget.element.setAttribute('data-widget', widget.name);
         } else {
-          widget.element.append(resizeWrapper, true);
+          if (resizeWrapper) {
+            widget.element.append(resizeWrapper, true);
+          }
         }
       }
 
@@ -332,9 +351,14 @@
           var img = el.findOne('img', true);
           // Cleanup and remove the wrapping span used for the resize caret.
           delete img.attributes['data-widget'];
-          img.parent.replaceWith(img);
+          var firstChild = el.children[0];
+          firstChild.replaceWith(firstChild.children[0]);
         }
 
+        // Safety data-widget removal as I noticed an additional data-widget being persisted. I did not identify the
+        // exact reproduction steps though. 
+        delete el.attributes['data-widget'];
+
         return el;
       };
     }

xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-test/xwiki-platform-ckeditor-test-docker/src/test/it/org/xwiki/ckeditor/test/ui/ImagePluginIT.java

@@ -358,6 +358,33 @@ void imageWrappedInLink(TestUtils setup, TestReference testReference) throws Exc
             + "[[aaaa>>image:image.gif]]", savedPage.editWiki().getContent());
     }
 
+    @Test
+    @Order(8)
+    void imageWrappedInLinkUI(TestUtils setup, TestReference testReference) throws Exception
+    {
+        // Upload an attachment to test with.
+        String attachmentName = "image.gif";
+        AttachmentReference attachmentReference = new AttachmentReference(attachmentName, testReference);
+        ViewPage newPage = uploadAttachment(setup, testReference, attachmentName);
+
+        // Move to the WYSIWYG edition page.
+        WYSIWYGEditPage wysiwygEditPage = newPage.editWYSIWYG();
+        CKEditor editor = new CKEditor("content").waitToLoad();
+
+        // Insert a with caption and alignment to center.
+        ImageDialogSelectModal imageDialogSelectModal = editor.clickImageButton();
+        imageDialogSelectModal.switchToTreeTab().selectAttachment(attachmentReference);
+        imageDialogSelectModal.clickSelect().clickInsert();
+
+        editor.executeOnIframe(() -> setup.getDriver().findElement(By.cssSelector("img")).click());
+
+        editor.clickLinkButton().setResourceValue("doc:", false).clickOK();
+
+        ViewPage savedPage = wysiwygEditPage.clickSaveAndView();
+
+        assertEquals("[[~[~[image:image.gif~]~]>>doc:]]", savedPage.editWiki().getContent());
+    }
+
     private static void createAndLoginStandardUser(TestUtils setup)
     {
         setup.createUserAndLogin("alice", "pa$$word", "editor", "Wysiwyg", "usertype", "Advanced");

xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-test/xwiki-platform-ckeditor-test-pageobjects/src/main/java/org/xwiki/ckeditor/test/po/LinkSelectorModal.java

@@ -46,12 +46,28 @@ public class LinkSelectorModal extends BaseElement
      * @return the current page object
      */
     public LinkSelectorModal setResourceValue(String value)
+    {
+        return setResourceValue(value, true);
+    }
+
+    /**
+     * Set the given value on the resource value search field.
+     *
+     * @param value the value to use to search for a resource (i.e., page or attachment)
+     * @param wait when {@code true}, wait for the dropdown to be shown before continuing
+     * @return the current page object
+     * @since 15.4RC1
+     * @since 14.10.10
+     */
+    public LinkSelectorModal setResourceValue(String value, boolean wait)
     {
         WebElement resourcePicker = getResourcePicker();
         WebElement element = resourcePicker.findElement(cssSelector(" input.resourceReference"));
         element.clear();
         element.sendKeys(value);
-        getDriver().waitUntilElementsAreVisible(resourcePicker, new By[] { DROPDOWN_ITEM_SELECTOR }, true);
+        if (wait) {
+            getDriver().waitUntilElementsAreVisible(resourcePicker, new By[] { DROPDOWN_ITEM_SELECTOR }, true);
+        }
         return this;
     }