Issue 331/mention support on @ keypress #2218

SergioEstevao · 2020-05-05T22:50:22Z

Fixes #331

Related PRs:

Gutenberg PR: Issue 331/mention support on @ keypress WordPress/gutenberg#22119
WP-iOS: Implement mentions in gutenberg by intercepting @ in the keyboard WordPress-iOS#14088
WP-Android: Gutenberg/improve mentions support WordPress-Android#12115

This PR changes the AztecView component to be able to intercept any keycode that is defined. It then configures uses this functionality to intercept the @ keypress and start the mention UI.

To test:

Start the demo app
Add a Paragraph block
Tap the @ on the keyboard
Check if a mention to matt is added
Check if the mention is only inserted if the @ is inserted with a space before or at the start of the paragraph.

PR submission checklist:

I have considered adding unit tests where possible.
I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

…rt_trigger_on_keypress # Conflicts: # gutenberg

…rt_trigger_on_keypress # Conflicts: # bundle/android/App.js # bundle/android/App.js.map # bundle/ios/App.js # bundle/ios/App.js.map

…ress # Conflicts: # bundle/android/App.js # bundle/android/App.js.map # bundle/ios/App.js # bundle/ios/App.js.map # gutenberg

SergioEstevao · 2020-05-21T10:59:26Z

react-native-aztec/src/AztecView.js

@@ -165,14 +181,15 @@ class AztecView extends React.Component {
          onContentSizeChange = { this._onContentSizeChange }
          onHTMLContentWithCursor = { this._onHTMLContentWithCursor }
          onSelectionChange = { this._onSelectionChange }
-          onEnter = { this.props.onEnter && this._onEnter }
+          onEnter = { this.props.onKeyDown && this._onEnter }
+          onBackspace = { this.props.onKeyDown && this._onBackspace }


After the Android Aztec lib code is updated the onEnter and onBackspace props should be removed, and all "keypress" events should go trough onKeyDown

…support_trigger_on_keypress

peril-wordpress-mobile · 2020-06-04T15:00:42Z

Wanna run full suite of Android and iOS UI tests? Click here and 'Approve' CI job!

SergioEstevao · 2020-06-10T10:14:47Z

Tested this on Android and is working great!

@iamthomasbishop do you mind review the Android version to see if the design of the mentions view UI/UX is good?

react-native-aztec/src/AztecView.js

…ress # Conflicts: # gutenberg

iamthomasbishop · 2020-06-10T21:03:55Z

@SergioEstevao Just tested a build on Android and the key press support is working as expected — nice work y’all! 👏

I noted one concern regarding the animation/transition as the height quickly adjusts, causing a gap between the text input row and the suggestions UI, but @mchowning is looking into it and it’s not necessarily a huge blocker.

iamthomasbishop · 2020-06-12T15:50:29Z

@mchowning @SergioEstevao I had another chance to test on Android in more detail. Here are some notes:

I'm not seeing the @ icon-button in the block toolbar — not sure if this was intentionally removed, but I would like to keep it
There is currently a short fadeOut animation on the text input row when tapping on a result from the suggestions list. Can we hide the text input row immediately?
There's a subtle "flash" on the keyboard when you tap a suggestion (video)
Can we add a 1px border-top to the text input row, using the same border color as the block toolbar? Think we had that at some point but it must’ve been removed while we iterated style.

I’d also I’ll Ike to cross-check on iOS to see if any of these issues exist on iOS (particularly the first one). @SergioEstevao are you able to make a new test build?

SergioEstevao · 2020-06-12T21:09:15Z

@thomasbishop The @ button was missing in the toolbar because it was hidden because of the DEV flag settings. I will remove the flag and generate another build for your to check.

…

On Fri, 12 Jun 2020 at 16:50, Thomas Bishop ***@***.***> wrote: @mchowning <https://github.com/mchowning> @SergioEstevao <https://github.com/SergioEstevao> I had another chance to test on Android in more detail. Here are some notes: - I'm not seeing the @ icon-button in the block toolbar — not sure if this was intentionally removed, but I would like to keep it - There is currently a short fadeOut animation on the text input row when tapping on a result from the suggestions list. Can we hide the text input row immediately? - There's a subtle "flash" on the keyboard when you tap a suggestion ( video <https://share.icloud.com/photos/0saxnY96Fmp1tInRurfBn1_FA>) - Can we add a 1px border-top to the text input row, using the same border color as the block toolbar? Think we had that at some point but it must’ve been removed while we iterated style. I’d also I’ll Ike to cross-check on iOS to see if any of these issues exist on iOS (particularly the first one). @SergioEstevao <https://github.com/SergioEstevao> are you able to make a new test build? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2218 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAE7CUPQFESCUJJS4DVMJLDRWJFFJANCNFSM4MZ654MA> .

…ress # Conflicts: # bundle/android/App.js # bundle/android/App.js.map # bundle/ios/App.js # bundle/ios/App.js.map # gutenberg

iamthomasbishop · 2020-06-13T00:02:54Z

@SergioEstevao Tested iOS and it is looking solid — not seeing the aforementioned issues there. 👍

mchowning · 2020-06-15T19:11:48Z

👋 @iamthomasbishop . Thanks for taking a look. 🙇 I've addressed your comments and there's a new build you can test. Care to take another look and let me know how things are looking now?

I'm not seeing the @ icon-button in the block toolbar — not sure if this was intentionally removed, but I would like to keep it

As Sergio noted, that was because we had kept the button behind a dev flag until now. That has been removed in the latest code though.

There is currently a short fadeOut animation on the text input row when tapping on a result from the suggestions list. Can we hide the text input row immediately?
...
Can we add a 1px border-top to the text input row, using the same border color as the block toolbar? Think we had that at some point but it must’ve been removed while we iterated style.

Removed the animation and added the top border back.

There's a subtle "flash" on the keyboard when you tap a suggestion (video)

Also took care of this. There is still a small keyboard flash when opening the mentions UI, but it's quite small (at least in my testing) and I think resolving that flash will probably be difficult. If this is something we have to fix before we can release this though, just let me know.

iamthomasbishop · 2020-06-15T22:04:01Z

@mchowning Most everything is looking solid, just a couple of things.

The border on the input row doesn't match the block toolbar in light mode (example of the color it should be). There shouldn't be a border in dark mode (or it can be transparent)
In dark mode, the background color should match the block toolbar background (example)
I noticed that when you start typing and the suggestions list narrows down from many to 1, the "no matching users available" label is still visible behind the UI. Try typing "matt", waiting then typing "c" — when the results narrow to 1, you'll see the label still visible behind it

I'm not seeing that "selected" flash anymore, nice fix! I'm also not seeing any strong flashing while opening the mentions UI, at least during this quick test.

mchowning · 2020-06-16T21:58:33Z

@mchowning Most everything is looking solid, just a couple of things...

Thanks @iamthomasbishop. I believe I've addressed those issues, and there's a new build available to test. Let me know what you think!

iamthomasbishop · 2020-06-19T03:20:20Z

@mchowning had a chance to take the latest build for a spin and it's looking solid. I think we are in good shape to ship it! 😁

…ress # Conflicts: # bundle/android/App.js # bundle/android/App.js.map # bundle/android/raw/i18ncache_data_ja.json # bundle/android/raw/i18ncache_data_nl.json # bundle/android/raw/i18ncache_data_sv.json # bundle/android/raw/i18ncache_data_tr.json # bundle/ios/App.js # bundle/ios/App.js.map # bundle/ios/assets/i18n-cache/data/ja.json # bundle/ios/assets/i18n-cache/data/nl.json # bundle/ios/assets/i18n-cache/data/sv.json # bundle/ios/assets/i18n-cache/data/tr.json # gutenberg

SergioEstevao · 2020-06-24T13:54:29Z

Closing this one in favor of #2424 that takes into account the new monorepo structure of the repo.
All the changes that were made in this PR were move to this PR in GB: WordPress/gutenberg#22119

SergioEstevao added 3 commits May 5, 2020 21:59

Use onKeyDown property instead of onEnter and onBackspace

40da87f

Add onKeyDown on the native side of iOS.

1b46576

Trigger mention UI using keypress for @

3b02f95

SergioEstevao added the [Type] Enhancement Improves a current area of the editor label May 5, 2020

SergioEstevao requested a review from mchowning May 5, 2020 22:50

SergioEstevao mentioned this pull request May 5, 2020

Issue 331/mention support on @ keypress WordPress/gutenberg#22119

Merged

6 tasks

Update GB

82b9b16

SergioEstevao added the [Status] Needs Android Dev label May 5, 2020

SergioEstevao added 11 commits May 6, 2020 16:17

Update GB reference.

90ecda3

Update GB reference.

783e732

Merge branch 'issue_331/mention_support' into issue_331/mention_suppo…

7e0e60b

…rt_trigger_on_keypress # Conflicts: # gutenberg

Update bundles.

dcbe955

Update GB reference

bdc4ec7

Updates bundles.

81c1e95

Update GB reference.

a71f218

Update app bundles

18da1f6

Update GB reference.

03032b9

Merge branch 'issue_331/mention_support' into issue_331/mention_suppo…

90988ba

…rt_trigger_on_keypress # Conflicts: # bundle/android/App.js # bundle/android/App.js.map # bundle/ios/App.js # bundle/ios/App.js.map

Update bundles.

e56b910

Base automatically changed from issue_331/mention_support to develop May 20, 2020 10:40

SergioEstevao added 2 commits May 20, 2020 11:52

Merge branch 'develop' into issue_331/mention_support_trigger_on_keyp…

2264d54

…ress # Conflicts: # bundle/android/App.js # bundle/android/App.js.map # bundle/ios/App.js # bundle/ios/App.js.map # gutenberg

Update bundles.

4d0ce38

SergioEstevao commented May 21, 2020

View reviewed changes

Merge remote-tracking branch 'origin/develop' into issue_331/mention_…

91c1a93

…support_trigger_on_keypress

mchowning force-pushed the issue_331/mention_support_trigger_on_keypress branch from 730566e to 91c1a93 Compare June 4, 2020 15:00

mchowning added 2 commits June 5, 2020 08:52

Remove extra whitespace

d469aec

Add Android handling of @ keycode

2b682e9

SergioEstevao commented Jun 10, 2020

View reviewed changes

react-native-aztec/src/AztecView.js Outdated Show resolved Hide resolved

SergioEstevao removed the [Status] Needs Android Dev label Jun 10, 2020

SergioEstevao added this to the 1.31 milestone Jun 10, 2020

Merge branch 'develop' into issue_331/mention_support_trigger_on_keyp…

cbf7831

…ress # Conflicts: # gutenberg

SergioEstevao added 4 commits June 12, 2020 22:17

Update GB reference.

7ee7a30

Update GB reference.

4c5ca47

Merge branch 'develop' into issue_331/mention_support_trigger_on_keyp…

5a954cc

…ress # Conflicts: # bundle/android/App.js # bundle/android/App.js.map # bundle/ios/App.js # bundle/ios/App.js.map # gutenberg

Update bundles.

1053492

mchowning modified the milestones: 1.31, 1.32 Jun 18, 2020

SergioEstevao added 4 commits June 19, 2020 10:04

Update GB reference.

733ced3

Convert magic number to constant.

d882d31

Use constant for backspace keycode.

84ded25

mchowning requested a review from marecar3 June 19, 2020 12:36

mchowning mentioned this pull request Jun 19, 2020

Gutenberg/improve mentions support wordpress-mobile/WordPress-Android#12115

Merged

3 tasks

SergioEstevao changed the base branch from develop to main June 24, 2020 11:01

SergioEstevao changed the base branch from main to issue/369_ensure_empty_drafts_are_not_published June 24, 2020 11:02

SergioEstevao changed the base branch from issue/369_ensure_empty_drafts_are_not_published to develop June 24, 2020 13:42

SergioEstevao closed this Jun 24, 2020

SergioEstevao deleted the issue_331/mention_support_trigger_on_keypress branch June 26, 2020 14:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue 331/mention support on @ keypress #2218

Issue 331/mention support on @ keypress #2218

SergioEstevao commented May 5, 2020 •

edited

Loading

SergioEstevao May 21, 2020 •

edited

Loading

peril-wordpress-mobile bot commented Jun 4, 2020 •

edited

Loading

SergioEstevao commented Jun 10, 2020

iamthomasbishop commented Jun 10, 2020

iamthomasbishop commented Jun 12, 2020

SergioEstevao commented Jun 12, 2020 via email

iamthomasbishop commented Jun 13, 2020

mchowning commented Jun 15, 2020

iamthomasbishop commented Jun 15, 2020

mchowning commented Jun 16, 2020

iamthomasbishop commented Jun 19, 2020

SergioEstevao commented Jun 24, 2020

Issue 331/mention support on @ keypress #2218

Issue 331/mention support on @ keypress #2218

Conversation

SergioEstevao commented May 5, 2020 • edited Loading

SergioEstevao May 21, 2020 • edited Loading

Choose a reason for hiding this comment

peril-wordpress-mobile bot commented Jun 4, 2020 • edited Loading

SergioEstevao commented Jun 10, 2020

iamthomasbishop commented Jun 10, 2020

iamthomasbishop commented Jun 12, 2020

SergioEstevao commented Jun 12, 2020 via email

iamthomasbishop commented Jun 13, 2020

mchowning commented Jun 15, 2020

iamthomasbishop commented Jun 15, 2020

mchowning commented Jun 16, 2020

iamthomasbishop commented Jun 19, 2020

SergioEstevao commented Jun 24, 2020

SergioEstevao commented May 5, 2020 •

edited

Loading

SergioEstevao May 21, 2020 •

edited

Loading

peril-wordpress-mobile bot commented Jun 4, 2020 •

edited

Loading