Add remaining editable shortcuts by ellatrix · Pull Request #4411 · WordPress/gutenberg

ellatrix · 2018-01-11T17:40:23Z

Description

See #71.

This PR adds the remaining shortcuts for editable:

access+d for strikethrough (<del> tag).
access+c for code.
access+a and meta+k to add a link.
access+s to remove a link.

access means ctrl+alt on Mac and shift+alt on Windows.
meta means cmd on Mac and ctrl on Windows.

How Has This Been Tested?

Press access+d and the text should be struck through. Press it again and the formatting should be removed.
Press access+x and the text should be code. Press it again and the formatting should be removed.
Press access+a and the pop up to add a link should appear focussed.
Press meta+k and the pop up to add a link should appear focussed.
Press access+s after putting the caret on a link. The link should be removed.

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows has proper inline documentation.

ellatrix · 2018-01-11T18:04:13Z

Oh, these could actually use something in the tooltip!

ellatrix · 2018-01-11T21:36:29Z

I don't know if that lost commit makes sense. Can always remove it, or @jasmussen, feel free to edit. :)

jorgefilipecosta · 2018-01-11T21:46:56Z

blocks/editable/format-toolbar/index.js

 	{
 		icon: 'editor-bold',
-		title: __( 'Bold' ),
+		title: __( 'Bold — ⌘B' ),


Should we use ${ __( 'Bold') } — ⌘B instead? As we are not expecting keyboard shortcuts to be changed during translation, this way translations for 'Bold' get reused.

Good point, though I'm not sure dash and order should not be translatable. Maybe we can just omit the shortcut itself from the translation.

Should we use ${ __( 'Bold') } — ⌘B instead?

Alas, this wouldn't work for RTL languages like Hebrew and Arabic.

I think it would be safe to use something like ${ __( 'Bold' ) } ${ __( '-' ) } ⌘B. This way translations are reused and we address the point raised by @iseulde.
Regarding the RTL point, It's a nice question, honestly, I don't know if in RTL normally the shortcuts appear inverted, but in LTR, if the shortcuts appeared like "⌘B — Bold" it would be ok so maybe in RTL both ways are also "ok". To be safe be on the safe side we can use the original version, I don't have a strong opinion here.

jasmussen · 2018-01-12T08:35:29Z

This is working really well for me. Except for access+c for code, I can't get that to work for some reason. Mac/chrome.

I love that you added the keyboard shortcuts to the tooltips, starting work on #2980:

However can we make it look like this instead?

If not, then we should replace the — with a couple of spaces (like   or a CSS margin — and ideally a slightly tweaked color as well). Regarding color, I understand we need sufficient contrast, but I'd rather we use our darkest gray for the tooltip background, fully opaque, white text for label, and the darkest gray we can within AAA ranges for the tooltip.

Is this doable? If not, then probably good to keep the shortcuts still, then we can look at improving the look in a separate PR.

ellatrix · 2018-01-15T09:45:48Z

@jasmussen Updating the PR, but now wondering what colour you have in mind? :)

jasmussen · 2018-01-15T09:55:29Z

How about this:

fully opaque $dark-gray-900 for tooltip background
$white text, 13px system font
$dark-gray-200 text for keyboard shortcuts

Those all pass AA contrasts. Mockup:

ellatrix · 2018-01-15T09:58:04Z

@jasmussen I added it as a separate attribute on the toolbar/iconbutton/tooltip, so it can be styled all the same. Let me know if this is what you have in mind, and feel free to change to styles of course. :) Thank you!

ellatrix · 2018-01-15T09:58:42Z

Ah, I missed your comment now, I'm so slow.

ellatrix · 2018-01-15T10:01:12Z

Updated. :)

ellatrix · 2018-01-15T10:03:44Z

Except for access+c for code, I can't get that to work for some reason. Mac/chrome.

I can't reproduce. Are you sure it's the right combination? I also found myself trying cmd+x before, which is cut. :D

jasmussen · 2018-01-15T10:07:40Z

This looks amazing to me. @jorgefilipecosta does this particular layout fix issues with RTL?

I can't reproduce. Are you sure it's the right combination? I also found myself trying cmd+x before, which is cut. :D

I think the reason it's not working is that I have that keyboard shortcut assigned to the magnifier in OSX. If it works for another Mac user then 👍 👍 from me :D

ellatrix · 2018-04-02T16:36:21Z

Rebased. What's left here?

jasmussen · 2018-04-03T08:07:15Z

What's left here?

Took it for a quick spin. Experience wise, this feels solid to me. I don't know if we need any more code reviewing.

I would be happy to get this merged in sooner rather than later. If it needs a code review, @youknowriad can you take a look? Looks good to me.

mcsf · 2018-04-03T13:14:06Z

blocks/rich-text/format-toolbar/index.js

 	{
 		icon: 'editor-bold',
 		title: __( 'Bold' ),
+		shortcut: '⌘B',


I'm concerned about the hard-coding of the modifier key as ⌘, which is meaningless to non-macOS users. IMO, this is a blocker.

There's precedent of cross-platform handling:

gutenberg/edit-post/keyboard-shortcuts.js

Lines 1 to 2 in ca593c5

const isMac = window.navigator.platform.toUpperCase().indexOf( 'MAC' ) >= 0;

const mod = isMac ? '⌘' : 'Ctrl';

ellatrix · 2018-05-02T22:24:08Z

blocks/rich-text/format-toolbar/index.js

 /**
 * Internal dependencies
 */
+import { primaryShortcut, primaryAltShortcut } from 'utils/keycodes';


What's primaryAlt? So primary but not really? So secondary? 🤔

Oops, it should totally be secondary.

ellatrix · 2018-05-02T22:26:23Z

utils/keycodes.js

+ *
+ * @return {string}          The keyboard shortcut.
+ */
+export function metaShortcut( character, _isMacOS = isMacOS ) {


What will this be used for?

If we want keyboard shortcuts using Ctrl+Q on Mac, though admittedly I don't see any yet. It'd be Windows+Q on Windows… should I just remove it?

Yeah, I think across the whole application, we should only ever implement two combinations: primary and access.

ellatrix · 2018-05-02T22:27:54Z

utils/keycodes.js

+ *
+ * @return {string}          The keyboard shortcut.
+ */
+export function primaryAccessShortcut( character, _isMacOS = isMacOS ) {


Could we drop this combination in favour of the standard access combination that is now called accessShortcut ?

That'll change an existing keyboard shortcut: https://github.com/WordPress/gutenberg/blob/add/editable-shortcuts/edit-post/keyboard-shortcuts.js#L8

Which I presume has many modifiers as it isn't common. But we could call it tertiary. I am now realising I made a terrible API by surfacing its underlying implementation.

I think we should change it be an access shortcut. It was just a random combination that didn't clash with anything.

See #3755 (comment) for history on that.

No particular reason for that combination, it should be revised.

I just tried Control + Alt + M on Mac and it outputs a unicode character in Gutenberg:

But Shift + Alt works on MacOS. I guess it would be confusing to name this "access" when its rules are different… but I think just using Shift on both platforms would work. It worked in MacOS:

Would be nice to have a combo that is the same on all OS though. :)

Ancient history: https://core.trac.wordpress.org/ticket/29558

Oddly enough the Mu doesn't appear outside of Gutenberg. If I type Ctrl+Alt+M into this text field it seems like an invisible unicode character is inserted instead.

Looks like Cmd+Alt on Mac will work, though Cmd+Alt+M is also the shortcut to enable responsive design mode in Firefox so that's a bit annoying. 😆

Maybe this needs to stay a three-character combo, just to be safe?

If there's one clash in that namespace, there's likely to be more. Would be nice to find a maximum two-modifier namespace that can be used in WordPress.

I wonder if we can adopt one of https://en.wikipedia.org/wiki/Access_key...

Curiously enough it list Ctrl+Alt as reserved on Firefox on Mac for accesskey, so I wonder why it decided to use that.

I'm fine with just picking one non primary combination in this PR and revise it later.

Also if we change it at all, we can't use access in TinyMCE: https://github.com/tinymce/tinymce/blob/90a829b4ed7655d91f07df15056a805fa43d49f9/src/plugins/help/main/ts/data/KeyboardShortcuts.ts#L14

ellatrix · 2018-05-02T22:30:44Z

blocks/rich-text/format-toolbar/index.js

 	{
 		icon: 'editor-strikethrough',
 		title: __( 'Strikethrough' ),
+		shortcut: primaryAltShortcut( 'D' ),


This should be accessShortcut, right? https://github.com/WordPress/gutenberg/pull/4411/files#diff-766381e792acf9d4c2505f3aeddcca7eR181

Arg, yes, thanks, I think all these code names have confused my brain. Sorry! 😓

Yeah, that's why I think two is enough for now. :) #4411 (comment)

tofumatt · 2018-05-03T23:51:51Z

I kept the codes as they were before but added the keycode/shortcut text functions that work across platforms.

I tested the key combos here and they worked in Windows/Mac/Linux, Edge/Firefox/Chrome/Safari.

It would be nice to simplify the shortcuts but I don't think there are simpler ones we can use that won't cause an error somewhere. 😢

So I think this is ready to go 😄

ellatrix · 2018-05-04T18:42:37Z

utils/keycodes.js

+	const isMac = _isMacOS();
+
+	const alt = isMac ? '⌥' : 'Alt';
+	const meta = isMac ? '⌃' : '⊞';


Just to note: I know this is a common way to display shortcuts on the Mac, but my built-in keyboard doesn't have any of these symbols, so this always confuses me. 🙈

Huh, good point! Mine too; the only symbol is for Command, and this is a US keyboard:

I just checked and it's not even standard on the Apple keyboards anymore. These symbols are cute and idiomatic for Mac users but they're not that helpful if you're new. Shall we just move them to strings instead?

I don't mind keeping the command symbol since it's still on the keyboard (and I know that one), the rest I'm not so sure. I don't know how people make sense of the shortcuts shown on the Mac menus... :)

When I see ⌥ or ⌃ I just make a guess until I get what I want hahaha.

So... it's up to you. I just wanted to make a note here it may not make sense to some people.

Not sure if someone will try to press the caret key. :D

Yeah I was about to file an issue and ask people what they think, but I say we eschew Mac conventions here for usability. I'll keep the command glyph but change the rest to text. 👍

ellatrix · 2018-05-04T18:43:43Z

utils/keycodes.js

+
+export const ALT = 'alt';
+export const CTRL = 'ctrl';
+export const PRIMARY = 'mod';


Minor: should this become 'primary'? Not that it matters. :)

So I noticed "mod" was actually used as the key code in https://github.com/WordPress/gutenberg/pull/4411/files#diff-cb4a97a77964e94dc29c6d9caf74f9ccL6... I figured it was good to internally keep it as "mod".

ellatrix · 2018-05-04T18:58:09Z

@tofumatt I can't approve my own PR (Github doesn't let me), but it looks good to me!

tofumatt · 2018-05-04T21:34:28Z

Fixed up @mcsf's issue and since @iseulde reviewed my additions I'd say we are good to go.

jasmussen · 2018-05-05T04:35:39Z

💥💥💥💥💥

youknowriad · 2018-05-15T14:35:19Z

blocks/rich-text/format-toolbar/index.js

 		}
+
+		this.setState( {
+			isAddingLink: !! nextProps.formats.link && nextProps.formats.link.isAdding,


This change is causing issues to the format toolbar. When the modal is renrendered (it can happen when you move the mouse over a block), it disappears if you just clicked the link button.

That's because isAddingLink is a state value controlled from within this component without changing the formats on the RichText component.

aduth · 2018-10-17T14:55:12Z

utils/keycodes.js


 export const F10 = 121;
+
+export const ALT = 'alt';


Every other key exported in this module is its key code, yet for this and other modifiers we export a string? Even though Alt has a code (18)?

I think this comes from @tofumatt.

I believe it's used to pass to mousetrap and tinymce which wouldn't accept the codes?

Oops, I should have at least left a comment. I honestly forget at this point; it could have just been terrible newbie-ness. 😅

These are a public API of @wordpress/keycodes, which describes exports as:

Contains keycodes constants for keyboard keys like DOWN, UP, ENTER, etc.

https://www.npmjs.com/package/@wordpress/keycodes

Yet...

import * as keycodes from '@wordpress/keycodes'; keycodes.DOWN // 40 ✅ keycodes.UP // 38 ✅ keycodes.ENTER // 13 ✅ keycodes.ALT // 'alt' 😱

jcklpe · 2018-12-06T21:01:24Z

I'm having trouble finding documentation on what all the new keycodes are for Gutenberg. I know how to add a code tag, but how do I actually make a code block? I can make a heading just by using markdown. Same with bolding stuff or making an ul or ol but not sure how to get the code block?

aduth · 2018-12-06T21:27:33Z

@jcklpe A Code block can be added either using the inserter, or by key sequence using three tick (`) characters, then Enter. Inline code fragments can be made by typing "`", the code fragment, then a closing "`".

My understanding is that a user guide should become available shortly in the Gutenberg Handbook.

https://wordpress.org/gutenberg/handbook/

jcklpe · 2018-12-06T22:47:41Z

@aduth Awesome! I tried doing ``` like on github but duh, should have tried just one. Thanks!

ellatrix · 2018-12-07T00:34:03Z

You should be able to insert a code block by typing ``` followed by pressing enter. Does this not work?

ellatrix added [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable [Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... labels Jan 11, 2018

ellatrix requested review from jasmussen, mcsf and youknowriad January 11, 2018 17:40

jasmussen mentioned this pull request Jan 11, 2018

Keyboard shortcuts support #71

Closed

35 tasks

jorgefilipecosta reviewed Jan 11, 2018

View reviewed changes

ellatrix mentioned this pull request Jan 16, 2018

Add block-level keyboard shortcuts #4436

Closed

3 tasks

afercia mentioned this pull request Mar 5, 2018

User guide and keyboard shortcuts documentation #5420

Closed

afercia added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Mar 5, 2018

ellatrix and others added 4 commits April 2, 2018 18:26

Add remaining editable shortcuts

e256682

Add shortcuts to formatting control tooltips

1d8a2d1

Move shortcut text in tooltips

54d3a9a

Adjust tooltip styles

ca593c5

ellatrix force-pushed the add/editable-shortcuts branch from 6fff91c to ca593c5 Compare April 2, 2018 16:35

mcsf requested changes Apr 3, 2018

View reviewed changes

tofumatt self-assigned this May 1, 2018

Merge branch 'master' into add/editable-shortcuts

326bbac

tofumatt added 2 commits May 2, 2018 23:17

chore: Cut down on useless shortcuts

b99f986

chore: More fixes, I messed up the keys

53254ae

ellatrix commented May 2, 2018

View reviewed changes

tofumatt added 3 commits May 3, 2018 00:56

chore: Simplify and unify access code for Mac/Win

55cf9fc

Use the tertiary keycode for now

e00604e

Do not export keyboardShortcut

e6e1e7b

tofumatt force-pushed the add/editable-shortcuts branch from 11fbe65 to e6e1e7b Compare May 3, 2018 23:30

chore: Better name

c62cd5f

tofumatt force-pushed the add/editable-shortcuts branch from e5a48d1 to c62cd5f Compare May 3, 2018 23:48

ellatrix commented May 4, 2018

View reviewed changes

chore: Improve Mac keycodes by using names instead of just glyphs

5b0b00b

tofumatt merged commit c37a222 into master May 4, 2018

tofumatt deleted the add/editable-shortcuts branch May 4, 2018 21:34

youknowriad reviewed May 15, 2018

View reviewed changes

youknowriad mentioned this pull request May 16, 2018

Fix the link modal from hiding on rerender #6779

Merged

mtias added this to the 2.9 milestone May 18, 2018

tofumatt mentioned this pull request Aug 21, 2018

Change keyboard shortcut for remove block to Cmd+Shift+X / Ctrl+Shift+X #9190

Merged

4 tasks

aduth reviewed Oct 17, 2018

View reviewed changes

	const isMac = window.navigator.platform.toUpperCase().indexOf( 'MAC' ) >= 0;
	const mod = isMac ? '⌘' : 'Ctrl';

Conversation

ellatrix commented Jan 11, 2018

Description

How Has This Been Tested?

Checklist:

Uh oh!

ellatrix commented Jan 11, 2018

Uh oh!

ellatrix commented Jan 11, 2018

Uh oh!

jorgefilipecosta Jan 11, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jasmussen commented Jan 12, 2018

Uh oh!

ellatrix commented Jan 15, 2018

Uh oh!

jasmussen commented Jan 15, 2018

Uh oh!

ellatrix commented Jan 15, 2018

Uh oh!

ellatrix commented Jan 15, 2018

Uh oh!

ellatrix commented Jan 15, 2018

Uh oh!

ellatrix commented Jan 15, 2018

Uh oh!

jasmussen commented Jan 15, 2018

Uh oh!

ellatrix commented Apr 2, 2018

Uh oh!

jasmussen commented Apr 3, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ellatrix May 2, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ellatrix May 2, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tofumatt May 3, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jorgefilipecosta Jan 11, 2018 •

edited

Loading

ellatrix May 2, 2018 •

edited

Loading

ellatrix May 2, 2018 •

edited

Loading

tofumatt May 3, 2018 •

edited

Loading

tofumatt May 4, 2018 •

edited

Loading

aduth Oct 17, 2018 •

edited

Loading