WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#32604 closed task (blessed) (fixed)

Inline link toolbar

Reported by: iseulde Owned by: iseulde
Milestone: 4.3 Priority: normal
Severity: normal Version: 4.3
Component: TinyMCE Keywords: has-patch
Focuses: javascript Cc:

Description

Show an inline toolbar when the user moves the cursor inside a link.

  • The user will be able to see the URL immediately, no need to open the modal.
  • It will be a hyperlink, so the user can navigate to that page. This is not currently possible. You have to copy paste the URL in the browser.
  • There will be two buttons, one to edit and remove. For now we can link the edit button to the modal. When this is done, we can look into making it inline too.

Attachments (21)

existing-link-2.png (26.0 KB) - added by iseulde 4 years ago.
32604.patch (6.7 KB) - added by iseulde 4 years ago.
32604.2.patch (6.6 KB) - added by iseulde 4 years ago.
32604.3.patch (7.1 KB) - added by iseulde 4 years ago.
32604.4.patch (7.2 KB) - added by iseulde 4 years ago.
32604.5.patch (7.5 KB) - added by iseulde 4 years ago.
32604.6.patch (1.1 KB) - added by iseulde 4 years ago.
32604.7.patch (1.7 KB) - added by iseulde 4 years ago.
32604.8.patch (2.9 KB) - added by iseulde 4 years ago.
32604.9.patch (5.6 KB) - added by iseulde 4 years ago.
32604.10.patch (3.2 KB) - added by iseulde 4 years ago.
32604.11.patch (3.3 KB) - added by iseulde 4 years ago.
32604.12.patch (3.1 KB) - added by iseulde 4 years ago.
32604.13.patch (3.2 KB) - added by iseulde 4 years ago.
Screen Shot 2015-06-28 at 7.30.56 PM.png (683.1 KB) - added by ryan 4 years ago.
Step 1. Click an image to reveal the inline media toolbar.
Screen Shot 2015-06-28 at 7.31.02 PM.png (687.8 KB) - added by ryan 4 years ago.
Step 2: Click X in the inline media toolbar to remove the image. The result is this. The inline link toolbar is left behind with a link to the deleted image.
Screen Shot 2015-06-28 at 11.56.28 AM.png (88.9 KB) - added by ryan 4 years ago.
It might be clutter, but I’m editing a post right now wishing I could click an icon to copy the link to the clipboard for use elsewhere in the post. Currently, I’m clicking the edit icon to raise the link modal, hitting Cmd + C to copy the automatically highlighted link, and then clicking X to dismiss the modal.
IMG_3344.PNG (202.6 KB) - added by iseulde 4 years ago.
32604.14.patch (8.5 KB) - added by iseulde 4 years ago.
32604.15.patch (9.4 KB) - added by iseulde 4 years ago.
32604.16.patch (5.9 KB) - added by iseulde 4 years ago.

Download all attachments as: .zip

Change History (76)

#1 @iseulde
4 years ago

The above image shows how it will look.

#2 @johnbillion
4 years ago

  • Keywords ux-feedback added

I can see this being pretty handy. This seems like a common feature with online editors these days.

We'd need to truncate URLs longer than a certain length, possibly by truncating them in the middle (rather than at the end). Eg. example.com/abc...uvwxyz.html.

This ticket was mentioned in Slack in #core-editor by iseulde. View the logs.


4 years ago

#4 @iseulde
4 years ago

  • Keywords ux-feedback removed

We'd need to truncate URLs longer than a certain length, possibly by truncating them in the middle (rather than at the end). Eg. example.com/abc...uvwxyz.html.

Yes! :)

#5 @iseulde
4 years ago

  • Keywords ux-feedback added

#6 @iseulde
4 years ago

We'll need to disable this for images. It already has an inline toolbar. While we could have both on desktop (top/bottom), I don't see how this could work on mobile.

First we need to rework the reposition method in the wordpress plugin. It should not overlap the target, at least not when it's text. There should also be a setting to render the toolbar above or under the target.

@iseulde
4 years ago

@iseulde
4 years ago

#7 @iseulde
4 years ago

  • Keywords has-patch added; needs-patch removed
  • Milestone changed from Future Release to 4.3

Current patch will make it so that the toolbar does not overlap the target, unless it is higher that half the visible editor area.
Also cleans ups some logic and caches DOM lookups.

TODO: Add the setting.

@iseulde
4 years ago

#8 @iseulde
4 years ago

Looks good so far.

@iseulde
4 years ago

#9 @iseulde
4 years ago

Fixed an issue with other editor instances.

@iseulde
4 years ago

#10 @iseulde
4 years ago

Simplified more, fixed an issue with the toolbar position when the statusbar or toolbars are removed with the settings.

#11 @azaozz
4 years ago

32604.5.patch looks good. It feels a bit unexpected when the image toolbar shows under the image, but can get used to it.

Was thinking we may want to get reposition() out of the menus code block. We will most likely reuse it when implementing the inline links dialog, and possibly other cases in the future.

Would probably be best to create a separate plugin for shared functions used by the other plugins. Then ensure it is always initialized first.

Last edited 4 years ago by azaozz (previous) (diff)

#12 @iseulde
4 years ago

In 32816:

TinyMCE: improve reposition method inline toolbars

  • Make sure the toolbar does not overlap the target, unless it is higher than half the visible editor area's height.
  • Allow the toolbar to have the preference to position itself above or below the target.
  • Cache DOM lookups.
  • Simplify the logic and fix various positioning issues.

See #32604.

#13 @iseulde
4 years ago

There are still a couple of other improvements we should do. When refocussing the editor, the current toolbar should show again. It's bad UX when you click edit, a modal opens, you close it, and the toolbar is gone.

@iseulde
4 years ago

@iseulde
4 years ago

#14 @iseulde
4 years ago

In 32818:

TinyMCE: show active inline toolbar after focus

This makes sure that e.g. the image toolbar shows up again after closing the media library modal.

See #32604.

@iseulde
4 years ago

#15 @iseulde
4 years ago

Above patch: Move the whole component under preinit. We don't have access to editor.dom before that and other plugins can't add a toolbar earlier anyway. It also makes sure the active toolbar shows after scrolling/resizing. Reduces the amount of callbacks.

@iseulde
4 years ago

@iseulde
4 years ago

#16 @ocean90
4 years ago

We shouldn't show the toolbar for anchor tags without a href attribute, like <a name="foo"></a>. https://cloudup.com/cJdX0TJJUGP

#17 @iseulde
4 years ago

That patch is far from done, it should also exclude linked images, include links with children, have a max-width, be mobile friendly... Probably a few other things. :)

@iseulde
4 years ago

@iseulde
4 years ago

#18 @iseulde
4 years ago

.12: With the scroll improvements, hide the toolbar if the target is out of view.

#19 @iseulde
4 years ago

Looking good here.

#20 @iseulde
4 years ago

In 32831:

TinyMCE: show inline toolbar after scroll/resize

Also:

  • Reduce the amount of callbacks.
  • Move everything under preinit (but prepend to the callback). The API shouldn't be availbale earlier, and some UI is not available yet, neither is editor.dom.
  • Hide the toolbar if the target is out of view.

See #32604.

This ticket was mentioned in Slack in #core-editor by iseulde. View the logs.


4 years ago

@iseulde
4 years ago

#22 @iseulde
4 years ago

In 32931:

TinyMCE: wplink: add inline toolbar

Now the URL can be viewed as soon as you put the cursor in an anchor tag. Clicking on it will open the page in a new tab. You also have the edit and remove button close at hand.

First run.
See #32604.

#23 @iseulde
4 years ago

In 32932:

wplink: update TinyMCE UI after updating the link

See #32604.

#24 @azaozz
4 years ago

In 32937:

TinyMCE, inline link toolbar:

  • Add max-width for all floating toolbars.
  • Ensure the inline link toolbar doesn't exceed the width on small screen devices.
  • Do not cut/concatenate the URL when it is less than 40 characters long.
  • Show more of the URL if the beginning part plus the ending part are less than 40 characters long.

See #32604.

#25 @azaozz
4 years ago

Also in [32937]: don't show the link toolbar for images wrapped in links. Show the image toolbar.

#26 @afercia
4 years ago

Wondering if there's a way to give keyboard users the ability to activate the preview link. maybe not so easy but would be a nice addition :)

Please consider to update the text for the keyboard shortcuts:

https://cldup.com/a0R3ijkjyK.png

Also, maybe would be useful to explain in the Help tab how the inline toolbars and all the keyboard features work, currently only the Alt+F10 shortcut is mentioned:

https://cldup.com/CS0ZM5v3_j.png

This ticket was mentioned in Slack in #core-flow by boren. View the logs.


4 years ago

#28 @ryan
4 years ago

  • Keywords needs-screenshots added

This ticket was mentioned in Slack in #core-editor by boren. View the logs.


4 years ago

#31 @azaozz
4 years ago

In 32956:

TinyMCE, inline link toolbar: fix styling on small screens so the displayed URL is not needlessly truncated.
See #32604.

#32 @azaozz
4 years ago

In 32958:

TinyMCE, inline link toolbar: fix z-index bug in iOS Safari.
See #32604.

#33 @azaozz
4 years ago

@ryan thanks for the vizrecs :)

The link toolbar showing over the link popup is yet another iOS Safari bug :( The z-index is set properly, only iOS disregards it...

Closing/hiding the toolbar with the [X] button: yeah, it looks similar to other close buttons and is approximately at the tight place -- up/right. Not sure if there s a better icon to use for "Remove".

#34 @azaozz
4 years ago

In 32967:

TinyMCE, inline link toolbar: tweak styling on small screens to fix wrapping in iOS.
See #32604.

#35 @azaozz
4 years ago

In 32968:

TinyMCE: prevent undefined error in toolbar.hide().
See #32604.

This ticket was mentioned in Slack in #core-flow by boren. View the logs.


4 years ago

@ryan
4 years ago

Step 1. Click an image to reveal the inline media toolbar.

@ryan
4 years ago

Step 2: Click X in the inline media toolbar to remove the image. The result is this. The inline link toolbar is left behind with a link to the deleted image.

#37 @ryan
4 years ago

The images above show how the inline link toolbar is left behind when deleting images via the inline media toolbar. Mac and Chrome with 4.3-alpha-32976.

Last edited 4 years ago by ryan (previous) (diff)

#38 @simplysaru
4 years ago

Also an image inserted creates an underline (to denote a link?) behind the image. The underline is present till the image is aligned to centre or left or right. The underline returns back if the image is set to no alignment.
Here is a screenshot https://cloudup.com/c8DnW7g7QEs
Mac and Safari with 4.3-alpha-32991.

#39 follow-up: @ryan
4 years ago

Might be cool, might be clutter: Copy icon in the link toolbar.

https://wordpress.slack.com/archives/core-editor/p1435510799000244

#40 follow-up: @daniluk4000
4 years ago

@ryan How can I get access to the archives of your Slack? I'd like to view it, or is it available only to the participants of the dialogues?

#41 in reply to: ↑ 40 @ryan
4 years ago

Replying to daniluk4000:

@ryan How can I get access to the archives of your Slack? I'd like to view it, or is it available only to the participants of the dialogues?

You can get slack access here: https://make.wordpress.org/chat/

But, I should copy that here. I'll attach and caption the image.

@ryan
4 years ago

It might be clutter, but I’m editing a post right now wishing I could click an icon to copy the link to the clipboard for use elsewhere in the post. Currently, I’m clicking the edit icon to raise the link modal, hitting Cmd + C to copy the automatically highlighted link, and then clicking X to dismiss the modal.

#42 @ryan
4 years ago

  • Keywords needs-screenshots removed

This ticket was mentioned in Slack in #core by obenland. View the logs.


4 years ago

#44 @helen
4 years ago

  • Type changed from enhancement to task (blessed)

#45 @obenland
4 years ago

  • Owner set to iseulde
  • Status changed from new to assigned

This ticket was mentioned in Slack in #core-editor by boren. View the logs.


4 years ago

#47 in reply to: ↑ 39 @ryan
4 years ago

Replying to ryan:

Might be cool, might be clutter: Copy icon in the link toolbar.

https://wordpress.slack.com/archives/core-editor/p1435510799000244

As discussed in chat, copy still requires Flash, so nevermind. :-)

#48 @azaozz
4 years ago

In 33141:

TinyMCE: when deleting an image, ensure the wrapping link (if any) is deleted too. Fixes the erroneous showing of the link toolbar after deleting an image. Also small readability fix.
See #32604.

#49 @obenland
4 years ago

@iseulde, @azaozz, anything left to do here?

@iseulde
4 years ago

#50 @iseulde
4 years ago

  • The above doesn't look good. The URL is shortened at the wrong place and the buttons should not wrap.
  • Minor: the link is not focusable.

#51 @obenland
4 years ago

  • Keywords ux-feedback removed
  • Version set to trunk

@iseulde, can we get this finished before beta4?

#52 @iseulde
4 years ago

Yes, that's the plan.

#53 @azaozz
4 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 33350:

TinyMCE, inline link toolbar: tweak styling on small screens to fix wrapping in iOS.
Fixes #32604.

#54 @azaozz
4 years ago

In 33372:

TinyMCE, inline link toolbar: add a bit more specificity to the selectors in editor.css to fix overriding in IE < 10.
See #32604.

#55 @iseulde
4 years ago

In 33416:

TinyMCE: inline toolbar: reduce size arrow

The size of the arrow box was too big. It prevented the user from moving the cursor to a place right above the arrow.

See #32604.

@iseulde
4 years ago

@iseulde
4 years ago

@iseulde
4 years ago

Note: See TracTickets for help on using tickets.