zetterise crossword input

guardian/frontend#20733, always in our hearts
guardian · Nov 22, 2024 · 5a2d677 · 5a2d677
1 parent a49e9d0
commit 5a2d677
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/libs/@guardian/react-crossword/src/components/Cell.stories.tsx b/libs/@guardian/react-crossword/src/components/Cell.stories.tsx
@@ -129,6 +129,17 @@ export const Progress: Story = {
 	},
 };
 
+export const DiacriticProgress: Story = {
+	args: {
+		data: {
+			x: 0,
+			y: 0,
+			group: ['1-across'],
+		},
+		guess: 'Å',
+	},
+};
+
 export const ProgressWithNumber: Story = {
 	args: {
 		data: {

diff --git a/libs/@guardian/react-crossword/src/components/Crossword.tsx b/libs/@guardian/react-crossword/src/components/Crossword.tsx
@@ -15,6 +15,9 @@ import { Clues } from './Clues';
 import { Controls } from './Controls';
 import { Grid } from './Grid';
 
+// define and cache the regex for valid keydown events
+const keyDownRegex = /^[A-Za-zÀ-ÿ0-9]$/;
+
 export type CrosswordProps = {
 	data: CAPICrossword;
 	theme?: Partial<Theme>;
@@ -159,7 +162,7 @@ export const Crossword = ({
 				}
 				default: {
 					const upperCaseKey = key.toUpperCase();
-					if (/^[A-Z]$/.test(upperCaseKey) && currentEntryId) {
+					if (keyDownRegex.test(upperCaseKey) && currentEntryId) {
 						setCellProgress({ ...currentCell, value: upperCaseKey });
 						if (direction === 'across') {
 							moveFocus({ delta: { x: 1, y: 0 }, isTyping: true });