If an existing link is selected by clicking somewhere in the link (rather than highlighting the entire link) and a change is made to the displayed text in the link, the output generates two links instead of updating the attributes of the existing link.
<p>
<a href="/node/2519">Test Co</a><a href="/node/2519" data-entity-type="node" data-entity-uuid="adcf4651-4d96-4eea-8a58-8d56f233b1b5" data-entity-substitution="canonical">n</a><a href="/node/2519">t</a><a href="/node/2519" data-entity-type="node" data-entity-uuid="adcf4651-4d96-4eea-8a58-8d56f233b1b5" data-entity-substitution="canonical">ent</a>
</p>
<p>
<a href="/node/2519">T</a><a href="/node/2519" title="Title" data-entity-type="node" data-entity-uuid="adcf4651-4d96-4eea-8a58-8d56f233b1b5" data-entity-substitution="canonical">e</a><a href="/node/2519" data-entity-type="node" data-entity-uuid="adcf4651-4d96-4eea-8a58-8d56f233b1b5" data-entity-substitution="canonical">st</a>
</p>
This issue happens only when you don't select the entire link text before editing it.
This is due to a change in CKEditor version 45, which Drupal core updated to in Drupal 10.5/11.2. See https://ckeditor.com/blog/ckeditor-45-0-0-release-highlights/#smarter-li... . In the CKEditor terminology, the problem is specific to the scenario where attributes are being updated when the "selection" is "collapsed" (i.e., the element was selected by clicking within, rather than highlighting the entire element). From the Linkit code:
if (selection.isCollapsed) {
const node = firstPosition.textNode || firstPosition.nodeBefore;
if (extraAttributeValues[attribute]) {
writer.setAttribute(attribute, extraAttributeValues[attribute], writer.createRangeOn(node));
} else {
writer.removeAttribute(attribute, writer.createRangeOn(node));
}
writer.removeSelectionAttribute(attribute);
}
| Comment | File | Size | Author |
|---|---|---|---|
| #22 | drupal-core-link-collapsed-duplication.mov | 7.36 MB | mark_fullmer |
| #17 | 3540235-17.patch | 37.54 KB | weseze |
| #7 | ckeditorduplicated.gif | 13.77 MB | mark_fullmer |
| Multiple_Links.png | 60.17 KB | giancarlorosa | |
| Updating_Link.png | 32.66 KB | giancarlorosa |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
mark_fullmerComment #3
mark_fullmerI've created a new target development branch, 7.1.x, for this work, since it will require introducing backwards-compatibility-breaking changes. See https://www.drupal.org/project/linkit/releases/7.1.x-dev
Comment #4
mark_fullmerComment #5
mrshowermanThis sounds exactly like the same issue I described in #3534699-14: [CKEditor5 v45+] Attributes can overwrite other attributes and editing displayed text from collapsed selection generates multiple links .
Comment #6
jannakha commenteduse 7.0.7 and MR122 from https://www.drupal.org/project/linkit/issues/3535479 (hidden branch)
Comment #7
mark_fullmerIn my testing today, using that MR does not have any effect or resolving this particular issue. Regardless of whether Editor Advanced Link is being used, the problem described above still happens, triggered by clicking within the link text and editing the link, as shown in the screencast below.
I have opened a new merge request that applies to the new 7.1.x branch and which replays the proposed changes from MR122 from #3535479: CKEditor v45: Compatibility with other plugins that modify link attributes, specifically switching to the CKEditor balloon API, replacing previous code that was a workaround. As you'll see, the problem described in that issue is still present with those changes.
I'll keep working on this, but to me, this suggests that the solution may NOT require backwards compatibility-breaking changes. Rather the underlying problem seems to do with how Linkit is find the CKEditor link start and end (i.e., the "selection range" when an existing link is clicked on.
Comment #8
mark_fullmerComment #10
mark_fullmerComment #13
mark_fullmerI've refactored the relevant code to handle the scenario below. I would greatly appreciate followers of this issue to test the merge request with their sites to confirm that the following is fixed:
Comment #14
jastraat commentedConfirmed that when following the test steps in #13 with Drupal 10.5.3 only a single a tag is created. It sounds like we still need someone to test the scenario of a site with an earlier version of Drupal.
Comment #15
ammaletu commentedI am on Drupal 10.5.3 with the modules "Linkit" in version 7.0.9 and "Editor Advanced Link" in version 2.3.1.
I had to install both the patch from this issue as well as the patch from the companion Editor Advanced Link issue (MR 43 only): https://www.drupal.org/project/editor_advanced_link/issues/3534699#comme...
I first followed the steps in #13 and could reproduce the problem. Then I installed both patches, cleared the cache and tried the same steps again. Initially, I got a JavaScript error "Uncaught CKEditorError: can't access property "attributes", s[a] is undefined" in step 6. But with the second patch from the other issue this now works and I only get one link.
Comment #16
mark_fullmerYes, thanks for pointing that out. Confirming that for people using the Linkit and Editor Advanced Link modules, the same problem is present in both module and both need to be patched/fixed to avoid the multiple links problem.
Comment #17
weseze commentedCan confirm this issue on Drupal 11.2.4 and confirmed that the MR fixes it.
Also adding a static patch based in the MR, for use in composer patches workflow.
Comment #18
mark_fullmerBased on the multiple RTBCs above and my own testing with Drupal < 10.5 to confirm backwards compatiblity, I'm going to proceed to merge this and cut a release. Thanks, everyone!
Comment #19
mark_fullmerComment #21
weseze commentedThis is still an issue for is, but now only when using styles on links.If we have a "button-style" on a link, we still get "the 3 links issue". It disappears after clicking somewhere in the ckeditor.
If the link does not use a style, there is no visual issue anymore.
Setting back to needs work.
If this is no longer a linkit issue, but an issue with the styles dropdown, feel free to close again.UPDATE:
So it seems that the changes made here do not actually fix the issue. I Initially thought they did because visually there was no issue for me and when inspecting the source code there was only 1 link instead of 3.
But, when live-inspecting the source in ckeditor I can clearly see 3 links still being generated and then as soon as you click somewhere they merge into 1 link again.
This effect can be clearly seen if you have a "button-like" style on your link.
The reason I wrongly reported that this was fixed is because I was testing on a plain link, without any styling, and our QA team was testing with styling... So sorry for the bad testing on my part.
If I disabled linkit in the format settings the problem is fixed.
So the default link functionality from Drupal core does work correctly.
I found the core issue where the changes to the core link button/balloon/popup (however it is named :)) was described with regard to the implementation in linkit: https://www.drupal.org/project/drupal/issues/3523018#comment-16141873
Also here is the CR from ckeditor itself: https://ckeditor.com/docs/ckeditor5/latest/updating/guides/update-to-45.....
Comment #22
mark_fullmerThanks for the due diligence here! I am able to reproduce the problem without Linkit installed on a generic Drupal site, as shown in the screencast below, and the steps to reproduce. If someone else can confirm that they can reproduce the issue using Drupal core without any other appurtenances, we should report this in the Drupal core issue queue.
Screencast of problem
https://www.drupal.org/files/issues/2025-10-08/drupal-core-link-collapse...
Steps to reproduce
1. Install Drupal core (11.2.x) using the "Standard" installation profile
2. Go to
admin/config/content/formatsand choose the "Basic HTML" text format3. Add the "Style" dropdown to the CKEditor 5 toolbar
4. Under the CKEditor plugin settings for "Style" add
a.btn|Button5. Create a Basic page and add a link using the Link toolbar (text: "text", link: "https://drupal.org"), and insert the link into the content.
6. Use the "Styles" dropdown to apply the "Button" class to the existing link.
7. Important here!: Click somewhere within the text of the link (do not highlight the link).
8. Click the "Link" icon in the toolbar.
9. Use the link "Pencil" icon to change the displayed text of the link.
10. Press the "Update" button in the link balloon.
11. Inspect the page source. There are now two links, divided by the text, when there should be one.
The fix in the merge request on Linkit's issue should be a good model for Drupal core to fix the problem. This is a problem introduced in CKEditor 5 due to the new presence of the "displayedText" input element. All implementers that are modifying link attributes now must use a different range calculation for a "collapsed" selection (i.e., when someone just clicks the link (Step 7, above).
Comment #23
mark_fullmerI created an issue in the Drupal core queue for the remaining problem with the Styles dropdown: #3551314: [CKEditor v45+] Using the Styles dropdown for a link results in multiple links in markup. Setting this back to "Fixed," as there is no known issue originating in Linkit.