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.

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 TinyMCE edit link when link contains html #1814

Merged
merged 2 commits into from
Aug 25, 2024

Conversation

satrun77
Copy link
Contributor

@satrun77 satrun77 commented Aug 20, 2024

Description

If you have a link in tinymce like <a href=""><span>Title</span></a>, then you can edit the link. The HTML inside the link tag can be any tag.

The issue is that the selected node is the inside HTML tag instead of the link tag.

I'm not 100% keen on the solution using while but this is legacy code, so might be ok! Alternative code is welcomed :)

The PR silverstripe/silverstripe-cms#2993 depends on this PR.

Manual testing steps

  1. Install fresh CMS
  2. Edit a page
  3. Add a link (internal or external)
  4. Edit HTML code in TinyMCE, add any HTML tags inside the link
  5. Close the HTML code view in TInyMCE
  6. Try to edit the link, it won't show the popup form.

Issues

Pull request checklist

  • The target branch is correct
  • All commits are relevant to the purpose of the PR (e.g. no debug statements, unrelated refactoring, or arbitrary linting)
    • Small amounts of additional linting are usually okay, but if it makes it hard to concentrate on the relevant changes, ask for the unrelated changes to be reverted, and submitted as a separate PR.
  • The commit messages follow our commit message guidelines
  • The PR follows our contribution guidelines
  • Code changes follow our coding conventions
  • This change is covered with tests (or tests aren't necessary for this change)
  • Any relevant User Help/Developer documentation is updated; for impactful changes, information is added to the changelog for the intended release
  • CI is green

@satrun77 satrun77 changed the title Pull/edit link tinymce Fix TinyMCE edit link when link contains html Aug 20, 2024
@satrun77 satrun77 marked this pull request as ready for review August 20, 2024 08:47
@satrun77 satrun77 changed the base branch from 3 to 2.2 August 20, 2024 08:55
@satrun77 satrun77 force-pushed the pull/edit-link-tinymce branch from 0a71c70 to b995ba7 Compare August 20, 2024 08:59
Copy link
Member

@GuySartorelli GuySartorelli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The comments in silverstripe/silverstripe-cms#2993 (review) apply to this PR as well.

@GuySartorelli GuySartorelli self-assigned this Aug 21, 2024
@satrun77 satrun77 force-pushed the pull/edit-link-tinymce branch from b995ba7 to bd2518d Compare August 21, 2024 05:16
@satrun77
Copy link
Contributor Author

I have updated the fix by moving the selection to the link element. This does not need the other PR. I have tested this with internal and external linking, it worked for me as expected.

@satrun77 satrun77 requested a review from GuySartorelli August 25, 2024 21:17
Copy link
Member

@GuySartorelli GuySartorelli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, this works great locally. Just one tiny change to make.

@@ -35,6 +35,9 @@ const plugin = {

// Callback for opening the edit link dialog form
function openLinkDialog() {
// Find "a" node, issue https://github.com/silverstripe/silverstripe-cms/issues/2439
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// Find "a" node, issue https://github.com/silverstripe/silverstripe-cms/issues/2439
// Find "a" node (we might have clicked on a child element e.g. "span")

There's no need to list the issue - git blame will inevitably lead us back to this PR and then to that issue if we really need that level of context on this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done updated

@satrun77 satrun77 force-pushed the pull/edit-link-tinymce branch from bd2518d to 03e0286 Compare August 25, 2024 23:08
@satrun77 satrun77 requested a review from GuySartorelli August 25, 2024 23:08
Copy link
Member

@GuySartorelli GuySartorelli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, works well locally. Thanks for this!

@GuySartorelli GuySartorelli merged commit 27a2da7 into silverstripe:2.2 Aug 25, 2024
15 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants