Add unlink button to escape out of adding link #1146
Conversation
|
@jasmussen - first part is adding the extra unlink button when adding the link is clicked. Screenshot below, can I get your design eyes and let me know what you think.
I'm trying now if I can grab the Esc key to cancel just adding the link and not kill the whole text block |
|
@notnownikki I think I have this working as you described the bug. A cancel button was added and the ability to escape when it opens without canceling the full block. Take a look and let me know what you think. |
|
UX seems nice! 👍 |
There was a problem hiding this comment.
This doesn't work for me...
This is what I did:
I added a new text block and typed some text. I selected the text I wanted to turn into a link. I entered "http://google.com/" into the link box and pressed enter.
I expected the input to disappear at that point so I can carry on with the post, but it doesn't. Clicking back in the block doesn't make it go away either. So I pressed escape to get out of the link editing, and it removed the link completely.
I tried the same steps again, but tried clicking the "enter" icon instead, and that seemed to make the link but still left me in the input UI. I had to add another block, focus the new block, and go back to the original block to get out of it. When I did that, the text looked like a link, but clicking on it to bring back the link editing UI showed that there was no URL in the link.
blocks/editable/format-toolbar.js
Outdated
| } | ||
|
|
||
| componentDidMount() { | ||
| document.addEventListener( 'keydown', this.onKeyDown ); |
There was a problem hiding this comment.
If keydown the event we want, or do we want to wait for a complete press?
blocks/editable/format-toolbar.js
Outdated
| @@ -44,6 +50,19 @@ class FormatToolbar extends wp.element.Component { | |||
| } | |||
| } | |||
|
|
|||
| onKeyDown( keydown ) { | |||
| switch ( keydown.keyCode ) { | |||
There was a problem hiding this comment.
Maybe a simple if would be enough here for now.
blocks/editable/format-toolbar.js
Outdated
| @@ -44,6 +50,19 @@ class FormatToolbar extends wp.element.Component { | |||
| } | |||
| } | |||
|
|
|||
| onKeyDown( keydown ) { | |||
There was a problem hiding this comment.
By convention we might want to name this variable event.
Add a keydown listener on component, which if you hit Escape while you are editing the link will stop without canceling out of the block. If you hit escape again, it will cancel the block.
|
@notnownikki - there is an extra step after hitting (or clicking) enter that converts what was entered into a link and you can see it as a link (blue underline) in the input field. You then need to type Esc, or click out and it closes for me. So I'm not duplicating what it sounds like you described.
The change I added was not to fix the above behavior, which seems to be working as designed. But to fix if you start a link and don't type anything and then hit escape to cancel making an empty link. |
|
Ah, I see now, the problems I'm seeing are caused by selection code, totally unrelated to this branch. Somehow I'm able to lock things up by the way I select the text to convert to a link, and end up with a URL input box that I can't get rid of. But the ESC functionality works :) |
Bugs were unrelated to the changes in this branch
Add ability to cancel adding a link after you clicked the linked button.
Fixes #778