Send cancel event from toolbar 'sketch no face' state to enable ESC (#2592)

* Just cancel out of 'sketch no face' state

* add test

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* trigger ci

---------

Co-authored-by: Frank Noirot <frank@zoo.dev>
Co-authored-by: Kurt Hutten Irev-Dev <k.hutten@protonmail.ch>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

e2e/playwright/flow-tests.spec.ts

@@ -3865,6 +3865,31 @@ test.describe('Sketch tests', () => {
       page.getByRole('button', { name: 'Edit Sketch' })
     ).toBeVisible()
   })
+  test('Can exit selection of face', async ({ page }) => {
+    // Load the app with the code panes
+    await page.addInitScript(async () => {
+      localStorage.setItem('persistCode', ``)
+    })
+
+    const u = await getUtils(page)
+    await page.setViewportSize({ width: 1200, height: 500 })
+
+    await u.waitForAuthSkipAppStart()
+
+    await page.getByRole('button', { name: 'Start Sketch' }).click()
+    await expect(
+      page.getByRole('button', { name: 'Exit Sketch' })
+    ).toBeVisible()
+
+    await expect(
+      page.getByText('click plane or face to sketch on')
+    ).toBeVisible()
+
+    await page.keyboard.press('Escape')
+    await expect(
+      page.getByRole('button', { name: 'Start Sketch' })
+    ).toBeVisible()
+  })
   test.describe('Can edit segments by dragging their handles', () => {
     const doEditSegmentsByDraggingHandle = async (
       page: Page,

src/Toolbar.tsx

@@ -81,7 +81,7 @@ export function Toolbar({
   useHotkeys(
     'esc',
     () =>
-      state.matches('Sketch.SketchIdle')
+      ['Sketch no face', 'Sketch.SketchIdle'].some(state.matches)
         ? send('Cancel')
         : send('CancelSketch'),
     { enabled: !disableAllButtons, scopes: ['sketch'] }
@@ -226,7 +226,7 @@ export function Toolbar({
         )}
         {state.matches('Sketch no face') && (
           <li className="contents">
-            <div className="mx-2 text-sm">click plane to sketch on</div>
+            <div className="mx-2 text-sm">click plane or face to sketch on</div>
           </li>
         )}
         {state.matches('Sketch') && !state.matches('idle') && (