Problem/Motivation

After inserting a link in CKEditor 5, attempting to type text before or after the link creates a new element with no href attribute.

Steps to reproduce

Insert a link using linkit.
Place the cursor directly before or after the link and start typing. The text turns blue, but doesn't go anywhere when you click on it. I can usually, but not always, reproduce this issue.

linkit

Issue fork linkit-3364963

Command icon Show commands

Start 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:

Comments

bgreco created an issue. See original summary.

mark_fullmer’s picture

Priority: Normal » Major

Thanks for the GIF illustrating the problem. I've encountered this problem, too. I assume it has to do with CKEditor 5's upcasted version of the element having a greedy boundary.

Setting the priority to "Major," as this could cause headaches for content editors.

mark_fullmer’s picture

Update: this is still considered a "Major" level bug for Linkit, and is still prioritized.

trackleft2 made their first commit to this issue’s fork.

trackleft2’s picture

Version: 6.0.0-rc1 » 6.1.x-dev
Status: Active » Needs review
StatusFileSize
new14.63 KB
trackleft2’s picture

Status: Needs review » Needs work

The issue is present, even with the patch applied.

trackleft2’s picture

Status: Needs work » Needs review

FYI https://ckeditor.com/docs/ckeditor5/latest/features/link.html#typing-aro...

Typing around links
CKEditor 5 allows for typing both at the inner and outer boundaries of links to make editing easier for the users.

To type inside a link, move the caret to its (start or end) boundary. As long as the link remains highlighted (by default: blue), typing and applying formatting will be done within its boundaries:

trackleft2’s picture

Status: Needs review » Needs work
trackleft2’s picture

Status: Needs work » Needs review
StatusFileSize
new14.64 KB

Status: Needs review » Needs work

The last submitted patch, 10: 3364963-this-link-has-no-url-10.patch, failed testing. View results

acbramley’s picture

#10 fixes it but it completely breaks linkit functionality, data attributes are missing entirely.

acbramley changed the visibility of the branch 6.1.x to hidden.

acbramley changed the visibility of the branch 3364963-this-link-has to hidden.

edwardsay’s picture

This issue was partially resolved in Drupal Core 10.2 because it uses CKEditor version 40.

After the update, there is no "This link has no URL" tooltip when clicking on the end of the link. But it is still present when clicking on the start of the link.

trackleft2’s picture

Status: Needs work » Needs review
StatusFileSize
new14.87 KB

Updated the MR and added a new patch against 6.1.x

Status: Needs review » Needs work

The last submitted patch, 16: 3364963-this-link-has-no-url-16.patch, failed testing. View results

drpldrp’s picture

StatusFileSize
new17.04 KB

CkEditor does special link handling if the element attribute data model name starts with "link", eg. "linkHref" or "linkWhatever".

LinkIt uses ['data-entity-type', 'data-entity-uuid', 'data-entity-substitution'] for both the attribute model and view names.

So because the model names don't start with "link", CkEditor thinks it should inherit the previous element attributes like for bold or other styling.

The fix is to split out the attribute vars so the model names start with "link" and the view names stay the same.

Attached patch tested with Drupal 10.1.8 and LinkIt 6.1.3.

drpldrp’s picture

Status: Needs work » Needs review

Marking as Needs Review. Sorry if this is not the appropriate workflow, ie. this is missing tests, requires MR, or anything else.

drpldrp changed the visibility of the branch 6.1.x to active.

drpldrp changed the visibility of the branch 6.1.x to hidden.

  • mark_fullmer committed c275d3b6 on 6.1.x authored by drpldrp
    Issue #3364963 by trackleft2, drpldrp, mark_fullmer, bgreco, acbramley,...
mark_fullmer’s picture

Status: Needs review » Fixed

The explanation for the root cause, provided in #18, makes sense to me, above, and the code change looks valid. Tests pass, so let's merge this!

acbramley’s picture

Amazing, thanks everyone! And thanks a lot @mark_fullmer for including this in a release already :)

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.