From 15db46763d768b9f97afc64fe6e6eae66dac7391 Mon Sep 17 00:00:00 2001
From: Gerardo <gerardo.pacheco@automattic.com>
Date: Wed, 24 Aug 2022 19:38:41 +0200
Subject: [PATCH] Mobile - AztecView - Adds code values to add support to the
 recent changes on the web editor using KeyboardEvent.code since codeKey is
 now deprecated.

---
 packages/react-native-aztec/src/AztecView.js | 34 ++++++++++++++++++--
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/packages/react-native-aztec/src/AztecView.js b/packages/react-native-aztec/src/AztecView.js
index 857571ab7ecef3..dda3633c4c2e77 100644
--- a/packages/react-native-aztec/src/AztecView.js
+++ b/packages/react-native-aztec/src/AztecView.js
@@ -12,7 +12,17 @@ import {
  * WordPress dependencies
  */
 import { Component, createRef } from '@wordpress/element';
-import { ENTER, BACKSPACE } from '@wordpress/keycodes';
+import {
+	BACKSPACE,
+	DELETE,
+	DOWN,
+	ENTER,
+	ESCAPE,
+	LEFT,
+	RIGHT,
+	SPACE,
+	UP,
+} from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -21,6 +31,19 @@ import * as AztecInputState from './AztecInputState';
 
 const AztecManager = UIManager.getViewManagerConfig( 'RCTAztecView' );
 
+// Used to match KeyboardEvent.code values (from the Web API) with native keycodes.
+const KEYCODES = {
+	[ BACKSPACE ]: 'Backspace',
+	[ DELETE ]: 'Delete',
+	[ DOWN ]: 'ArrowDown',
+	[ ENTER ]: 'Enter',
+	[ ESCAPE ]: 'Escape',
+	[ LEFT ]: 'ArrowLeft',
+	[ RIGHT ]: 'ArrowRight',
+	[ SPACE ]: 'Space',
+	[ UP ]: 'ArrowUp',
+};
+
 class AztecView extends Component {
 	constructor() {
 		super( ...arguments );
@@ -75,7 +98,7 @@ class AztecView extends Component {
 
 		const { onKeyDown } = this.props;
 
-		const newEvent = { ...event, keyCode: ENTER };
+		const newEvent = { ...event, keyCode: ENTER, code: KEYCODES[ ENTER ] };
 		onKeyDown( newEvent );
 	}
 
@@ -89,6 +112,7 @@ class AztecView extends Component {
 		const newEvent = {
 			...event,
 			keyCode: BACKSPACE,
+			code: KEYCODES[ BACKSPACE ],
 			preventDefault: () => {},
 		};
 		onKeyDown( newEvent );
@@ -100,9 +124,13 @@ class AztecView extends Component {
 		}
 
 		const { onKeyDown } = this.props;
+		const { keyCode } = event.nativeEvent;
 		const newEvent = {
 			...event,
-			keyCode: event.nativeEvent.keyCode,
+			keyCode,
+			...( KEYCODES[ keyCode ] && {
+				code: KEYCODES[ keyCode ],
+			} ),
 			preventDefault: () => {},
 		};
 		onKeyDown( newEvent );