Disable overwrite mode on <escape>

packages/editor/CodeMirror/utils/overwriteModeExtension.test.ts

@@ -46,6 +46,17 @@ describe('overwriteModeExtension', () => {
 		expect(editor.state.doc.toString()).toBe('Example!');
 	});
 
+	test('should be disabled by pressing <escape>', async () => {
+		const editor = await createEditor('Test!', true);
+
+		expect(overwriteModeEnabled(editor)).toBe(true);
+		pressReleaseKey(editor, { key: 'Escape', code: 'Escape' });
+		expect(overwriteModeEnabled(editor)).toBe(false);
+		// Escape should not re-enable the extension
+		pressReleaseKey(editor, { key: 'Escape', code: 'Escape' });
+		expect(overwriteModeEnabled(editor)).toBe(false);
+	});
+
 	test('<insert> should not toggle overwrite mode if other keys are pressed', async () => {
 		// On Linux, the Orca screen reader's default "do screen reader action" key is
 		// <insert>. To avoid toggling insert mode when users perform screen reader actions,

packages/editor/CodeMirror/utils/overwriteModeExtension.ts

@@ -1,4 +1,4 @@
-import { EditorView } from '@codemirror/view';
+import { EditorView, keymap } from '@codemirror/view';
 import { StateField, Facet, StateEffect } from '@codemirror/state';
 import keyUpHandlerExtension from './keyUpHandlerExtension';
 
@@ -81,6 +81,20 @@ const setOverwriteModeEnabled = (enabled: boolean, view: EditorView) => {
 
 const overwriteModeExtension = [
 	overwriteModeState,
+	keymap.of([
+		{
+			// The <escape> keyboard shortcut may be more easily discoverable for users
+			// who enter overwrite mode unintentionally.
+			key: 'Escape',
+			run: (view) => {
+				if (overwriteModeEnabled(view)) {
+					setOverwriteModeEnabled(false, view);
+					return true;
+				}
+				return false;
+			},
+		},
+	]),
 	keyUpHandlerExtension(
 		(event) => (
 			event.code === 'Insert' && !event.shiftKey && !event.altKey && !event.metaKey && !event.ctrlKey