FIX Allow wrapping an image in a link

client/src/entwine/TinyMCE_sslink-file.js

@@ -70,12 +70,8 @@ jQuery.entwine('ss', ($) => {
 
       const handleInsert = (...args) => this.handleInsert(...args);
       const attrs = this.getOriginalAttributes();
-      const editor = this.getElement().getEditor();
-      const selection = editor.getInstance().selection;
-      const selectionContent = editor.getSelection();
       const folderId = this.getFolderId();
-      const tagName = selection.getNode().tagName;
-      const requireLinkText = tagName !== 'A' && selectionContent.trim() === '';
+      const requireLinkText = this.getRequireLinkText();
 
       // create/update the react component
       let root = this.getReactRoot();

tests/behat/features/insert-an-image.feature

@@ -154,3 +154,27 @@ Feature: Insert an image into a page
     Then I should see the "Form_fileInsertForm" form
       And the "Description" field should contain "My file"
       And I should see "Link to file" in the "button[name=action_insert]" element
+
+  Scenario: I can wrap an image in a link to a file
+    # Add an actual image to the WYSIWYG
+    Given I press the "Insert from Files" HTML field button
+      And I select the file named "folder1" in the gallery
+      And I click on the file named "file1" in the gallery
+      And I press the "Insert file" button
+      # Required to avoid "unsaved changes" browser dialog
+      And I press the "Save" button
+    # Validate that everything is ready for the test
+    Then I should not see a ".tox-pop__dialog .tox-toolbar" element
+      And I should not see the "Form_fileInsertForm" form
+      And the "Content" HTML field should contain "file1.jpg"
+    When I select the image "file1.jpg" in the "Content" HTML field
+      And I press the "Insert link" HTML field button
+      And I click "Link to a file" in the ".tox-collection__group" element
+      And I select the file named "folder1" in the gallery
+      And I click on the file named "file1" in the gallery
+    Then I should see the "Form_fileInsertForm" form
+      And I should not see "Link text"
+      And I press the "Link to file" button
+    Then the "Content" HTML field should contain "<a href="[file_link,id=2]">[image src="/assets/folder1/3d0ef6ec37/file1.jpg" id="2" width="50" height="50" class="leftAlone ss-htmleditorfield-file image"]</a>"
+      # Required to avoid "unsaved changed" browser dialog
+      And I press the "Save" button

tests/behat/src/FixtureContext.php

@@ -446,18 +446,6 @@ public function iShouldSeeTheTableGalleryFolderInPosition(string $name, string $
         Assert::assertNotNull($title, sprintf('Folder at position %s should be named %s', $position, $name));
     }
 
-    /**
-     * Selects the first image match in the HTML editor (tinymce)
-     *
-     * @When /^I select the image "([^"]+)" in the "([^"]+)" HTML field$/
-     * @param string $filename
-     * @param string $field
-     */
-    public function iSelectTheImageInHtmlField($filename, $field)
-    {
-        $this->selectInTheHtmlField("img[src*='$filename']", $field);
-    }
-
     /**
      * Selects the first media embed match in the HTML editor (tinymce)
      *
@@ -468,58 +456,6 @@ public function iSelectTheMediaInHtmlField(string $url, string $field)
         $this->selectInTheHtmlField("div.embed[data-url='$url']", $field);
     }
 
-    /**
-     * Selects the first match of $select in the given HTML editor (tinymce)
-     */
-    protected function selectInTheHtmlField(string $select, string $field)
-    {
-        $inputField = $this->getHtmlField($field);
-        $inputField->getParent()->find('css', 'iframe')->click();
-        $inputFieldId = $inputField->getAttribute('id');
-        $js = <<<JS
-        var editor = jQuery('#$inputFieldId').entwine('ss').getEditor(),
-            doc = editor.getInstance().getDoc(),
-            sel = doc.getSelection(),
-            rng = new Range(),
-            matched = false;
-
-        jQuery(doc).find("$select").each(function() {
-            if(!matched) {
-                rng.selectNode(this);
-                sel.removeAllRanges();
-                sel.addRange(rng);
-                matched = true;
-            }
-        });
-        JS;
-        $this->getMainContext()->getSession()->executeScript($js);
-    }
-
-    /**
-     * Locate an HTML editor field
-     *
-     * @param string $locator Raw html field identifier as passed from
-     * @return NodeElement
-     */
-    protected function getHtmlField($locator)
-    {
-        $locator = str_replace('\\"', '"', $locator ?? '');
-        $page = $this->getMainContext()->getSession()->getPage();
-        $element = $page->find('css', 'textarea.htmleditor[name=\'' . $locator . '\']');
-        if ($element) {
-            return $element;
-        }
-        $label = $page->findAll('xpath', sprintf('//label[contains(text(), \'%s\')]', $locator));
-        if (!empty($label)) {
-            Assert::assertCount(1, $label, "Found more than one element containing the phrase \"$locator\"");
-            $label = array_shift($label);
-            $fieldId = $label->getAttribute('for');
-            $element = $page->find('css', '#' . $fieldId);
-        }
-        Assert::assertNotNull($element, sprintf('HTML field "%s" not found', $locator));
-        return $element;
-    }
-
     /**
      * @When /^I scroll the editor details panel to the top$/
      */