FIX Allow wrapping an image in a link (#1397)

Relies on logic added to silverstripe/admin, so we need to bump the constraint as well. Also migrates some behat fixture logic to the behat-extension module, so that it can be used by other modules for their related behat tests.
silverstripe · Sep 6, 2023 · 8a6ee41 · 8a6ee41
1 parent 6c31888
commit 8a6ee41
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 70 deletions.
diff --git a/client/dist/js/TinyMCE_sslink-file.js b/client/dist/js/TinyMCE_sslink-file.js
diff --git a/client/src/entwine/TinyMCE_sslink-file.js b/client/src/entwine/TinyMCE_sslink-file.js
@@ -68,11 +68,8 @@ jQuery.entwine('ss', ($) => {
 
       const handleInsert = (...args) => this.handleInsert(...args);
       const attrs = this.getOriginalAttributes();
-      const selection = tinymce.activeEditor.selection;
       const folderId = this.getFolderId();
-      const selectionContent = selection.getContent() || '';
-      const tagName = selection.getNode().tagName;
-      const requireLinkText = tagName !== 'A' && selectionContent.trim() === '';
+      const requireLinkText = this.getRequireLinkText();
 
       // create/update the react component
       ReactDOM.render(

diff --git a/composer.json b/composer.json
@@ -6,7 +6,7 @@
     "require": {
         "php": "^7.4 || ^8.0",
         "silverstripe/framework": "^4.11",
-        "silverstripe/admin": "^1.7",
+        "silverstripe/admin": "^1.13",
         "silverstripe/graphql": "^3.5 || ^4"
     },
     "require-dev": {

diff --git a/tests/behat/features/insert-an-image.feature b/tests/behat/features/insert-an-image.feature
@@ -154,3 +154,17 @@ 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
+    Given I fill in the "Content" HTML field with "<p><img src='file1.jpg'></p>"
+    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 ".mce-menu" 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]"><img src="file1.jpg"></a>"
+      # Required to avoid "unsaved changed" browser dialog
+      And I press the "Save" button
diff --git a/tests/behat/src/FixtureContext.php b/tests/behat/src/FixtureContext.php
@@ -442,70 +442,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 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$/
      */