From 2694a7ab48582b5a00f52600550f5635cc968fef Mon Sep 17 00:00:00 2001 From: Steve Ruiz Date: Mon, 2 Oct 2023 16:24:43 +0100 Subject: [PATCH] [fix] Escape key exiting full screen while editing shapes (#1986) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR prevents the escape key from exiting full screen when a shape is being edited or when shapes are selected. Basically, if the select tool is going to use the escape key, then don't let it be used for its normal purpose. ### Change Type - [x] `patch` — Bug fix ### Test Plan 1. Open a firefox full screen tab. 2. Start editing a text shape. 3. Press escape. It should stop editing. 4. Press escape again. It should deselect the shape. 5. Press escape again. It should exit full screen mode. --- packages/editor/src/lib/hooks/useDocumentEvents.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/lib/hooks/useDocumentEvents.ts b/packages/editor/src/lib/hooks/useDocumentEvents.ts index 9524dfe5a..9293a0609 100644 --- a/packages/editor/src/lib/hooks/useDocumentEvents.ts +++ b/packages/editor/src/lib/hooks/useDocumentEvents.ts @@ -103,6 +103,17 @@ export function useDocumentEvents() { break } case 'Escape': { + // In certain browsers, pressing escape while in full screen mode + // will exit full screen mode. We want to allow that, but not when + // escape is being handled by the editor. When a user has an editing + // shape, escape stops editing. When a user is using a tool, escape + // returns to the select tool. When the user has selected shapes, + // escape de-selects them. Only when the user's selection is empty + // should we allow escape to do its normal thing. + if (editor.editingShape || editor.selectedShapeIds.length > 0) { + e.preventDefault() + } + if (!editor.inputs.keys.has('Escape')) { editor.inputs.keys.add('Escape') @@ -125,7 +136,7 @@ export function useDocumentEvents() { const info: TLKeyboardEventInfo = { type: 'keyboard', - name: editor.inputs.keys.has(e.code) ? 'key_repeat' : 'key_down', + name: e.repeat ? 'key_repeat' : 'key_down', key: e.key, code: e.code, shiftKey: e.shiftKey,