Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[RMmobile] Add Enter.key detection to the Title block #13500

Merged
merged 3 commits into from
Jan 26, 2019

Conversation

daniloercoli
Copy link
Contributor

This PR adds Enter.key handling to Title block, and gives the ability to add a new block after it.

This PR set multiline=false, and detect the Enter.key with the default onSubmitEditing prop given by the underlying RN component. It adds a new default empty block after the current. (Default logic on the web).

onSubmitEditing is a very reliable way of detecting Enter.key on TextInput with multiline = false, and works on both HW and SW keyboard without the necessity of implementing hacks with TextWatchers and keyListeners - https://facebook.github.io/react-native/docs/textinput#onsubmitediting

Note: onSubmitEditing does hide the keyboard at the moment, it's a default behavior (at least) on Android. We may need to migrate the Title to RichText if there is no way to circumnavigate this problem.

Note 2: At the moment there is not split in place for the title filed. If you tap enter on the middle of the field there is no split yet.

Previous PR here: #13480

@daniloercoli daniloercoli added the Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) label Jan 25, 2019
Copy link
Contributor

@diegoreymendez diegoreymendez left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is working fine, but I believe it would be to our advantage to try and use more of the web code where possible.

As mentioned in the comment I tested copying some of the web code, and it works great.

@@ -42,6 +48,14 @@ class PostTitle extends Component {
this.props.onUpdate( title );
}

onEnter( ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could remove this method entirely and instead copy (and call) this method from the web .js sources.

I've tried it locally and it works and it works.

The advantage of using the same code as the web .js file is that it should make it easier for us to maintain this sourcefile if there are changes, or eventually unify it completely.

multiline
numberOfLines={ 0 }
multiline={ false }
onSubmitEditing={ this.onEnter }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the comment above to work, this would become onSubmitEditing={ this.props.onEnterPress }

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice find @diegoreymendez!

Tested here as well, and worked without problems 👍 I've updated this PR and main PR gb-mobile side.

@diegoreymendez
Copy link
Contributor

Nice work @daniloercoli !

…rnmobile/372-enter-key-detection-to-title

* 'master' of https://github.com/WordPress/gutenberg: (29 commits)
  Update for RangeControl documentation (#12564)
  Plugin: Deprecate gutenberg_load_list_reusable_blocks (#13456)
  Update the columns attribute in onSelectImages so that if images are removed via the media modal, the columns can't be higher than the new number of images (#13488)
  Replace the fullscreen "exit" icon with a back arrow (#13403)
  Include :visited links in button color (#12183)
  Amazon Kindle block (#13510)
  Plugin: Deprecate gutenberg_prepare_blocks_for_js (#13457)
  Add watcher on Linux: change fs to node-watch (#13448)
  Plugin: Deprecate `gutenberg` theme support (#13458)
  Datepicker: Add inValidDay support (#12962)
  Block Switcher: Render disabled button even if multi-selection (#13431)
  Plugin: Deprecate gutenberg_register_post_types (#13468)
  Plugin: Deprecate register_tinymce_scripts (#13466)
  Set minimum of words for RSS excerpt (#13502)
  Plugin: Deprecate gutenberg_get_block_categories (#13454)
  Plugin: Deprecate gutenberg_content_block_version (#13469)
  API Fetch: Expose nonce on created middleware function (#13451)
  Plugin: Remove list screens integrations (#13459)
  Plugin: Remove core-defined block detection functions (#13467)
  Spec Parser: Move generated spec parser to package (#13493)
  ...
@daniloercoli daniloercoli merged commit acb42fa into master Jan 26, 2019
@daniloercoli daniloercoli deleted the rnmobile/372-enter-key-detection-to-title branch January 26, 2019 11:14
youknowriad pushed a commit that referenced this pull request Mar 6, 2019
* Intercept Enter.key and give the ability to add a new block after

* Remove the custom mobile code, and use the default web implementation
youknowriad pushed a commit that referenced this pull request Mar 6, 2019
* Intercept Enter.key and give the ability to add a new block after

* Remove the custom mobile code, and use the default web implementation
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants