Ckeditor5: Shouldn't link button be on when caret is inside a link?

[Reinmar]

Right now the toolbar doesn't react to moving the caret which I suddenly found a bit odd. Bold, italic, block quote, etc. – they all are highlighted, but the link isn't.

This gets more important now when we add https://github.com/ckeditor/ckeditor5-link/issues/72.

[Reinmar]

cc @oleq @dkonopka @jodator

[jodator]

From my POV it could be highlighted as you described. It does look odd to me. Also for the two-step caret movement would be additionally good to highlight the link button as the caret goes into link.

[oleq]

If the button is "on" in this situation, then it supposed to be a 2-state.

What would happen if a user clicked the button in such situation? My common sense tells me the button goes off but... then what? Unlink?

And if it does not go off, how to tell the user that it was pushed (even further?) to open the link UI? It can't be "super-on" ;-)

[Reinmar]

What would happen if a user clicked the button in such situation? My common sense tells me the button goes off but... then what? Unlink?

Can't it simply focus the URL input (if it wasn't focused)? Sounds ok to me, but I'd need to see this live.

[oleq]

ATM the first step is the link actions view so there's no input there to focus. We could switch to the link editing view in such situation but I'm not sure this is the expected UX for the users.

[Reinmar]

I've been playing today with the link highlight and two-step caret movement and I find this really missing that nothing changes in the toolbar when the highlight appears. The button switching on would make the signal that you enter a link clearer.

Are you sure, @oleq, that it's a big deal that the button would be on?

[oleq]

Are you sure, @oleq, that it's a big deal that the button would be on?

Google Docs keeps it off (but they always display the balloon)

I also checked other WYSIWYG editors. Some follow this approach and some don't.

If this a such a big deal, then OK, let's have it on and see if this feels _right_.

[Reinmar]

Google Docs thinks that a link is underlined blue text :D So...

[Reinmar]

I've just reported https://github.com/ckeditor/ckeditor5-highlight/issues/16 which might be an answer to my question:

Are you sure, @oleq, that it's a big deal that the button would be on?

When the button is on I was expecting that pressing it will have an action. I'm not sure whether moving focus to link editing balloon will be enough. Perhaps it will, but we certainly have to provide that action.

[Reinmar]

Are you typing with a link or not?

Which also made me think that

    --ck-color-link-selected-background:                        hsl(201, 100%, 96%);

Should use a hsla() so to look better on non-white backgrounds. cc @dkonopka

[dkonopka]

--- a/theme/ckeditor5-ui/globals/_colors.css
+++ b/theme/ckeditor5-ui/globals/_colors.css
@@ -94,5 +94,5 @@
        /* -- Link ----------------------------------------------------------------- */
-       --ck-color-link-selected-background: hsl(201, 100%, 96%);
+       --ck-color-link-selected-background: hsla(201, 100%, 85%, 0.4);

👍 Alpha channel is neccessary here, we can change hsl format to hsla globally in this variable without any doubts.

hsla() format inside table

hsla() format inside white content

[Reinmar]

Based on the first 3 comments I can see we have 5 votes for and @oleq's "ok".

I again worked on some things in CKEditor 5 and felt that it's missing. Plus, we had another slightly confused user asking how to write after links. Let's change the button's behaviour and see what happens.