Fixes "done" key on iOS

hooks/useCanvasEvents.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { MutableRefObject, useCallback } from 'react'
+import { MutableRefObject, useCallback, useEffect } from 'react'
 import state from 'state'
 import {
   fastBrushSelect,
@@ -74,6 +74,19 @@ export default function useCanvasEvents(
     // }
   }, [])
 
+  // Send event on iOS when a user presses the "Done" key while editing a text element
+  useEffect(() => {
+    function handleFocusOut() {
+      state.send('BLURRED_EDITING_SHAPE')
+    }
+
+    document.addEventListener('focusout', handleFocusOut)
+
+    return () => {
+      document.removeEventListener('focusout', handleFocusOut)
+    }
+  }, [])
+
   return {
     onPointerDown: handlePointerDown,
     onPointerMove: handlePointerMove,

state/state.ts

@@ -679,8 +679,8 @@ const state = createState({
               },
             ],
             BLURRED_EDITING_SHAPE: [
-              { unless: 'isEditingShape' },
               {
+                unless: 'isEditingShape',
                 get: 'editingShape',
                 if: 'shouldDeleteShape',
                 do: ['cancelSession', 'deleteSelection'],
@@ -688,8 +688,8 @@ const state = createState({
               { to: 'selecting' },
             ],
             POINTED_CANVAS: [
-              { unless: 'isEditingShape' },
               {
+                unless: 'isEditingShape',
                 get: 'editingShape',
                 if: 'shouldDeleteShape',
                 do: ['cancelSession', 'deleteSelection'],
@@ -697,8 +697,8 @@ const state = createState({
               { to: 'selecting' },
             ],
             CANCELLED: [
-              { unless: 'isEditingShape' },
               {
+                unless: 'isEditingShape',
                 get: 'editingShape',
                 if: 'shouldDeleteShape',
                 do: ['cancelSession', 'deleteSelection'],