Expand selection on consecutive Meta+A presses #4600

ellatrix · 2018-01-19T12:08:47Z

Description

See #4369. This PR only adds going straight to selecting all blocks, just like it does now block selection without input focus.

How Has This Been Tested?

Focus an Editable. meta+a should select all contents. Press meta+a once more to select all blocks. Try one by releasing the meta key, and once by holding it. Both ways should work.

Annoying thing here is that Editable and other input fields behave slightly different. For Editable selection happens before the keyDown event (because of TinyMCE intercepting), for the rest it happens after.

aduth · 2018-01-28T11:38:48Z

There's a failing E2E test here.

jasmussen · 2018-02-20T13:21:32Z

I like this a lot. I think we want this.

One thing that becomes slightly more apparent now that it's easier to select all, is that focus is set on the block ellipsis menu when selecting all blocks, which scrolls you all the way to the top if if selected all on a long document.

I know we have to set focus somewhere, and that particular niggle does not have to be addressed as part of this PR. Perhaps the answer to where we set focus, when multi selecting, can be found in this ticket.

Another thing related to that — when I set the cursor in a paragraph, ⌘A once, then twice, then press Escape to deselect all blocks, I still have the text selection from the paragraph before, but I can't use the arrow-keys anymore because focus is now on the canvas itself, no longer on that block. It feels like the ideal solution would be to set focus back to where it was — but probably the right solution would be to deselect that text so when you press Escape twice, everything is unselected. Would be a nice fix if easy.

One thing that seems to be a regression from master — if I don't have anything selected, ⌘A now selectes everything on the page using the browser selection model, it doesn't select blocks like it did before. Now you have to set focus inside a paragraph or editable and ⌘A twice to select all blocks using the keyboard.

ellatrix · 2018-05-15T22:10:45Z

Rebased and updated this. @jasmussen Addressed the last two points.

jasmussen

Totally love this. Approving based on experience, I can't speak to the code other than "looks good".

A future enhancement to look at, perhaps as part of the navigation mode stuff Riad has been looking at, could be to restore the caret to the block it was in, when you press escape. I.e. you're in block 3, ⌘A selects all text in block 3, ⌘A again selects all blocks, escape takes you back to block 3 with the caret.

tofumatt

The code largely looks good and I really like this functionality! 👍

I'd like a few small docs changes and some documentation/changes for the is function which I feel is a scary/not clear name.

Otherwise looks good! 😄

tofumatt · 2018-05-17T03:00:54Z

editor/components/writing-flow/index.js

@@ -201,6 +202,25 @@ class WritingFlow extends Component {
 		}

 		if ( ! isNav ) {
+			const activeElement = document.activeElement;
+
+			// Set right before the meta+a combination can be pressed.


Instead of "right before", I would write "immediately before". It's clearer and a bit easier to parse (I had to re-read this sentence to grok it.)

tofumatt · 2018-05-17T03:02:05Z

editor/components/writing-flow/index.js

+					event.preventDefault();
+				}
+
+				// Set in case the meta key doesn't get released.


I feel this comment could be expanded to say what is being set. This reads as a sentence fragment and I'm not really sure what it means.

I tried to improve it but unsure if it addressed the issue.

That totally works actually, I get it now 😄

tofumatt · 2018-05-17T03:02:27Z

utils/dom.js

@@ -395,6 +395,40 @@ export function documentHasSelection() {
 	return range && ! range.collapsed;
 }

+/**
+ * Check wether the contents of the element have been fully selected.


wether > whether

tofumatt · 2018-05-17T03:03:19Z

utils/dom.js

+ *
+ * @return {boolean} True if fully selected, false if not.
+ */
+export function isFullySelected( element ) {


I might name this "entirely" rather than "fully" unless there's a history of using "fullySelected". "entirely" just seems a bit clearer and more explicit as to what this means.

tofumatt · 2018-05-17T03:04:40Z

utils/keycodes.js

+
+export const is = mapValues( modifiers, ( getModifiers ) => {
+	return ( event, character, _isMac = isMacOS ) => {
+		const mods = getModifiers( _isMac );


Could we call this modifiers instead of mods? Explicit variable names are nice and we can afford the bytes 😉

That would conflict with modifiers higher up.

Oh, duh, sorry about that. 👍

tofumatt · 2018-05-17T03:09:03Z

utils/keycodes.js

@@ -90,3 +90,19 @@ export const displayShortcut = mapValues( modifiers, ( modifier ) => {
 		return shortcut.replace( /⌘\+([A-Z0-9])$/g, '⌘$1' );
 	};
 } );
+
+export const is = mapValues( modifiers, ( getModifiers ) => {


This is a bit of a confusing function name to me. "is" what? I get it works like is.primary( 'a' ) but that isn't explained in a comment/docblock here and that's a bit of an unexpected API to me. Maybe matchesKeycode or something? Or a doc block here to make this a bit easier to understand without gripping through the codebase for usage (which is what I needed to do).

It checks more than just the keyCode, so matchesKeycode feels a bit weird. What we want to do is check if the keydown/keyup event matches the modifiers and letter. Let me think. :)

Maybe something like matchesShortcut? Or KeyboardEventIsPrimary?

How about isKeyboardEvent.primary( event, 'a' )?

tofumatt

Awesome, thanks for the little tweaks to everything! isKeyboardEvent is perfect 😄

tofumatt · 2018-05-18T00:40:23Z

packages/dom/src/dom.js

+ *
+ * @param {Element} element The element to check.
+ *
+ * @return {boolean} True if fully selected, false if not.


Oh, I just caught this is still "fully selected"–if you wanted to change it to "entirely selected" as well that might be nice for consistency. 😅

aduth · 2018-05-23T20:22:19Z

editor/components/editor-global-keyboard-shortcuts/index.js

@@ -64,6 +64,7 @@ class EditorGlobalKeyboardShortcuts extends Component {
 		const { hasMultiSelection, clearSelectedBlock } = this.props;
 		if ( hasMultiSelection ) {
 			clearSelectedBlock();
+			window.getSelection().removeAllRanges();


Should this be a side-effect (e.g. store/effects.js) of the CLEAR_SELECTED_BLOCK action?

aduth · 2018-05-23T20:23:22Z

utils/keycodes.js

+ *
+ * @type {Object} Keyed map of functions to match events.
+ */
+export const isKeyboardEvent = mapValues( modifiers, ( getModifiers ) => {


Should have unit tests.

This is not the behavior I'd expect from a function named isKeyboardEvent. At first glance, I expected it to return a boolean reflecting whether a given Event implements KeyboardEvent.

aduth · 2018-05-23T20:26:20Z

packages/dom/src/dom.js

+ *
+ * @return {boolean} True if entirely selected, false if not.
+ */
+export function isEntirelySelected( element ) {


Should have unit tests.

ellatrix requested review from mcsf and youknowriad January 19, 2018 13:34

ellatrix force-pushed the try/select-all branch from 9f965f0 to eef5403 Compare February 6, 2018 14:10

ellatrix force-pushed the try/select-all branch 2 times, most recently from bca8e2f to 7008b57 Compare February 20, 2018 12:09

ellatrix requested a review from a team February 20, 2018 12:15

ellatrix force-pushed the try/select-all branch from 4f2b88c to a2c5559 Compare May 15, 2018 21:45

ellatrix requested a review from tofumatt May 15, 2018 22:10

jasmussen approved these changes May 16, 2018

View reviewed changes

tofumatt requested changes May 17, 2018

View reviewed changes

ellatrix added 2 commits May 17, 2018 18:23

Expand selection on consecutive Meta+A presses

c729c99

Restore global primary+a shortcut

e4f2d5f

ellatrix force-pushed the try/select-all branch from 7872fca to e4f2d5f Compare May 17, 2018 16:24

ellatrix added 2 commits May 17, 2018 18:42

Language

93092b6

is => isKeyboardEvent

2667af6

tofumatt approved these changes May 18, 2018

View reviewed changes

tofumatt reviewed May 18, 2018

View reviewed changes

Fix doc

96d70a0

mtias added this to the 3.0 milestone May 22, 2018

ellatrix merged commit 75d3c35 into master May 22, 2018

ellatrix deleted the try/select-all branch May 22, 2018 19:59

aduth reviewed May 23, 2018

View reviewed changes

afercia mentioned this pull request Jun 6, 2018

Expanding selection on consecutive Meta+A presses buggy in Firefox doesn't work on Safari #7186

Closed

aduth mentioned this pull request Jul 5, 2018

Regression: Consecutive ⌘A's don't work anymore #7711

Closed

designsimply mentioned this pull request Jul 30, 2018

Ctrl+A unexpected behaviour #8269

Closed

designsimply added the [Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... label Nov 27, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Expand selection on consecutive Meta+A presses #4600

Expand selection on consecutive Meta+A presses #4600

ellatrix commented Jan 19, 2018

aduth commented Jan 28, 2018

jasmussen commented Feb 20, 2018

ellatrix commented May 15, 2018

jasmussen left a comment

tofumatt left a comment

tofumatt May 17, 2018

tofumatt May 17, 2018

ellatrix May 17, 2018

tofumatt May 18, 2018

tofumatt May 17, 2018

tofumatt May 17, 2018

tofumatt May 17, 2018

ellatrix May 17, 2018

tofumatt May 18, 2018

tofumatt May 17, 2018

ellatrix May 17, 2018

ellatrix May 17, 2018

ellatrix May 17, 2018 •

edited

Loading

tofumatt left a comment

tofumatt May 18, 2018

aduth May 23, 2018

aduth May 23, 2018

aduth May 23, 2018

aduth May 23, 2018

Expand selection on consecutive Meta+A presses #4600

Expand selection on consecutive Meta+A presses #4600

Conversation

ellatrix commented Jan 19, 2018

Description

How Has This Been Tested?

aduth commented Jan 28, 2018

jasmussen commented Feb 20, 2018

ellatrix commented May 15, 2018

jasmussen left a comment

Choose a reason for hiding this comment

tofumatt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ellatrix May 17, 2018 • edited Loading

Choose a reason for hiding this comment

tofumatt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ellatrix May 17, 2018 •

edited

Loading