Skip to content

Commit

Permalink
FIX Allow wrapping an image in a link (#2884)
Browse files Browse the repository at this point in the history
  • Loading branch information
GuySartorelli authored Sep 11, 2023
1 parent 7e42058 commit 4a92f5e
Show file tree
Hide file tree
Showing 6 changed files with 44 additions and 23 deletions.
2 changes: 1 addition & 1 deletion client/dist/js/TinyMCE_sslink-anchor.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion client/dist/js/TinyMCE_sslink-internal.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 1 addition & 5 deletions client/src/legacy/TinyMCE_sslink-anchor.js
Original file line number Diff line number Diff line change
Expand Up @@ -76,11 +76,7 @@ jQuery.entwine('ss', ($) => {
const handleHide = () => this.close();
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 tagName = selection.getNode().tagName;
const requireLinkText = tagName !== 'A' && selectionContent.trim() === '';
const requireLinkText = this.getRequireLinkText();
const currentPageID = Number($('#Form_EditForm_ID').val() || 0);

// create/update the react component
Expand Down
16 changes: 0 additions & 16 deletions client/src/legacy/TinyMCE_sslink-internal.js
Original file line number Diff line number Diff line change
Expand Up @@ -95,22 +95,6 @@ jQuery.entwine('ss', ($) => {
);
},

/**
* Determine whether to show the link text field
*
* @return {Boolean}
*/
getRequireLinkText() {
const editor = this.getElement().getEditor();
const selection = editor.getInstance().selection;
const selectionContent = editor.getSelection();

const tagName = selection.getNode().tagName;
const requireLinkText = tagName !== 'A' && selectionContent.trim() === '';

return requireLinkText;
},

/**
* @param {Object} data - Posted data
* @return {Object}
Expand Down
26 changes: 26 additions & 0 deletions tests/behat/features/insert-a-link.feature
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,19 @@ So that I can link to a external website or a page on my site
# Required to avoid "unsaved changes" browser dialog
Then I press the "Save" button

Scenario: I can wrap an image in a link to an internal page
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 "Page on this site" in the ".tox-collection__group" element
Then I should see an "form#Form_editorInternalLink" element
And I should not see "Link text"
When I select "About Us" in the "#Form_editorInternalLink_PageID_Holder" tree dropdown
And I press the "Insert link" button
Then the "Content" HTML field should contain "<a href="[sitetree_link,id=2]"><img src="file1.jpg"></a>"
# Required to avoid "unsaved changed" browser dialog
And I press the "Save" button

Scenario: I can edit a link to an internal page
Given I fill in the "Content" HTML field with "<a title='my desc' href='[sitetree_link,id=2]'>awesome</a>"
And I select "awesome" in the "Content" HTML field
Expand Down Expand Up @@ -53,6 +66,19 @@ So that I can link to a external website or a page on my site
# Required to avoid "unsaved changes" browser dialog
Then I press the "Save" button

Scenario: I can wrap an image in a link to an external URL
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
When I click "Link to external URL" in the ".tox-collection__group" element
And I should see an "form#Form_ModalsEditorExternalLink" element
And I should not see "Link text"
When I fill in "http://silverstripe.org" for "URL"
And I press the "Insert link" button
Then the "Content" HTML field should contain "<a href="http://silverstripe.org"><img src="file1.jpg"></a>"
# Required to avoid "unsaved changed" browser dialog
And I press the "Save" button

Scenario: I can edit a link
Given I fill in the "Content" HTML field with "<p>My <a href='http://silverstripe.org'>awesome</a> content"
And I select "awesome" in the "Content" HTML field
Expand Down
15 changes: 15 additions & 0 deletions tests/behat/features/insert-anchor-link.feature
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,21 @@ So that I can link to a external website or a page on my site
# Required to avoid "unsaved changes" browser dialog
Then I press the "Save" button

Scenario: I can wrap an image in a link to an anchor in an internal page
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 "Anchor on a page" in the ".tox-collection__group" element
Then I should see an "form#Form_editorAnchorLink" element
And I should not see "Link text"
And I should see "About Us" in the "#Form_editorAnchorLink_PageID_Holder .treedropdownfield__value-container" element
When I select "Details" in the "#Form_editorAnchorLink_PageID_Holder" tree dropdown
And I select "youranchor" in the "#Form_editorAnchorLink_Anchor_Holder" anchor dropdown
And I press the "Insert link" button
Then the "Content" HTML field should contain "<a href="[sitetree_link,id=3]#youranchor"><img src="file1.jpg"></a>"
# Required to avoid "unsaved changed" browser dialog
And I press the "Save" button

Scenario: I can link to an anchor from a dataobject on the current page
When I select "awesome" in the "Content" HTML field
And I press the "Insert link" HTML field button
Expand Down

0 comments on commit 4a92f5e

Please sign in to comment.