Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FIX Allow wrapping an image in a link #2884

Merged
merged 1 commit into from
Sep 11, 2023
Merged

FIX Allow wrapping an image in a link #2884

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion client/dist/js/TinyMCE_sslink-anchor.js
View file
Open in desktop

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
View file
Open in desktop

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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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