Inline link toolbar

[iseulde]

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.

[iseulde]

The above image shows how it will look.

[johnbillion]

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.

[iseulde]

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! :)

[iseulde]

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]

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]

Looks good so far.

[iseulde]

Fixed an issue with other editor instances.

[iseulde]

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

[azaozz]

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.

[iseulde]

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.

[iseulde]

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]

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]

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.

[ocean90]

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

[iseulde]

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]

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

[iseulde]

Looking good here.

[iseulde]

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.

[iseulde]

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.

[iseulde]

In 32932:

wplink: update TinyMCE UI after updating the link

See #32604.

[azaozz]

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.

[azaozz]

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

[afercia]

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:

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:

[ryan]

​https://make.wordpress.org/flow/2015/06/26/inline-link-toolbar-mac-and-chrome-iphone-6/

[azaozz]

In 32956:

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

[azaozz]

In 32958:

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

[azaozz]

@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".

[azaozz]

In 32967:

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

[azaozz]

In 32968:

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

[ryan]

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

[ryan]

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.

[ryan]

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.

[simplysaru]

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.

[ryan]

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

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

[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?

[ryan]

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]

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.

[ryan]

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. :-)

[azaozz]

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.

[obenland]

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

[iseulde]

• 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.

[obenland]

@iseulde, can we get this finished before beta4?

[iseulde]

Yes, that's the plan.

[azaozz]

In 33350:

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

[azaozz]

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.

[iseulde]

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.