search

ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
https://ckeditor.com/ckeditor-5
Other
9.25k stars 3.67k forks source link

Clicking a link with padding does not select the link #15324

Open mstrelan opened 9 months ago

mstrelan commented 9 months ago

📝 Provide detailed reproduction steps (if any)

  1. Open the Feature-rich editor demo
  2. Open browser developer tools and add the styles below
  3. Click in the empty space on the CKBox link
.ck-content a[href] {
  display: inline-block;
  padding: 0 1rem;
  background: yellow;
  border: 1px solid red;
}

✔️ Expected result

Link balloon appears, caret moves to start or end of text inside the link

❌ Actual result

No link balloon appears, caret moves outside the link

📃 Other details

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

Witoso commented 9 months ago

Not sure how much this is a bug on our side, or this is just how browsers interpret inline-block in the contenteditable. @oleq, @niegowski help :)

niegowski commented 9 months ago

This is our custom handling of clicking on the edge of a link:

https://github.com/ckeditor/ckeditor5/blob/f43de84a80e8677b25161d1c60bb35de048dc394/packages/ckeditor5-link/src/linkediting.ts#L403-L457

The purpose of this action is to allow typing around the link node directly after a click.

See https://github.com/ckeditor/ckeditor5/issues/1016.
mstrelan commented 9 months ago

Interesting. Makes sense for typing and changing link text, and it's a lot less problematic for regular inline links. The use case I'm coming from is interacting with the balloon on an existing link, e.g. to change the href, or in the example provided it could be to interact with the Downloadable option. It's not obvious to content authors they have to click the text part of the button.

Witoso commented 9 months ago

Adding to our support queue to figure this out.