From 823dc887f074bcbac3f9646094a21aad9e5415b7 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Wed, 23 Nov 2022 12:09:59 +0100 Subject: [PATCH 1/2] Mobile - Fix issue on mobile and the autocomplete feature / slash inserter where the enter key would fail to create the block and instead it creates a new Paragraph block --- packages/react-native-aztec/src/AztecView.js | 1 + packages/rich-text/src/component/index.native.js | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/react-native-aztec/src/AztecView.js b/packages/react-native-aztec/src/AztecView.js index 456fde3ed8b69..f194aa67ffe99 100644 --- a/packages/react-native-aztec/src/AztecView.js +++ b/packages/react-native-aztec/src/AztecView.js @@ -284,5 +284,6 @@ class AztecView extends Component { const RCTAztecView = requireNativeComponent( 'RCTAztecView', AztecView ); AztecView.InputState = AztecInputState; +AztecView.KeyCodes = KEYCODES; export default AztecView; diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index 7fb9a25e1df63..964620580e686 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -372,6 +372,7 @@ export class RichText extends Component { this.customEditableOnKeyDown?.( { preventDefault: () => undefined, ...event, + key: RCTAztecView.KeyCodes[ event?.keyCode ], } ); this.handleDelete( event ); From 12c82ed9aba547f5730d19e7ea7be117cce2074c Mon Sep 17 00:00:00 2001 From: Gerardo Date: Wed, 23 Nov 2022 15:14:51 +0100 Subject: [PATCH 2/2] Add KeyCodes to the AztecView mock --- test/native/__mocks__/@wordpress/react-native-aztec/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/test/native/__mocks__/@wordpress/react-native-aztec/index.js b/test/native/__mocks__/@wordpress/react-native-aztec/index.js index f64e93af00295..1452aeb957c87 100644 --- a/test/native/__mocks__/@wordpress/react-native-aztec/index.js +++ b/test/native/__mocks__/@wordpress/react-native-aztec/index.js @@ -9,9 +9,11 @@ import { omit } from 'lodash'; */ import { forwardRef, useImperativeHandle, useRef } from '@wordpress/element'; -// Preserve the mock of AztecInputState to be exported with the AztecView mock. +// Preserve the mock of AztecInputState and AztecKeyCodes to be exported with the AztecView mock. const AztecInputState = jest.requireActual( '@wordpress/react-native-aztec' ) .default.InputState; +const AztecKeyCodes = jest.requireActual( '@wordpress/react-native-aztec' ) + .default.KeyCodes; const UNSUPPORTED_PROPS = [ 'style' ]; @@ -50,5 +52,6 @@ const RCTAztecView = ( { accessibilityLabel, text, ...rest }, ref ) => { const AztecView = forwardRef( RCTAztecView ); AztecView.InputState = AztecInputState; +AztecView.KeyCodes = AztecKeyCodes; export default AztecView;