feat: add disable hotkeys feature

packages/core/components/Puck/index.tsx

@@ -27,7 +27,7 @@ import type {
   Metadata,
   AsFieldProps,
   DefaultComponentProps,
-  ComponentData,
+  HotkeyState,
 } from "../../types";
 
 import { SidebarSection } from "../SidebarSection";
@@ -124,6 +124,7 @@ type PuckProps<
   };
   initialHistory?: InitialHistory;
   metadata?: Metadata;
+  hotkeys?: Partial<HotkeyState>
 };
 
 const propsContext = createContext<Partial<PuckProps>>({});
@@ -159,6 +160,7 @@ function PuckProvider<
     metadata,
     onAction,
     fieldTransforms,
+    hotkeys = { enabled: true },
   } = usePropsContext();
 
   const iframe: IframeConfig = useMemo(
@@ -330,6 +332,7 @@ function PuckProvider<
         onAction,
         metadata,
         fieldTransforms: loadedFieldTransforms,
+        hotkeys,
       };
     },
     [
@@ -342,6 +345,7 @@ function PuckProvider<
       onAction,
       metadata,
       loadedFieldTransforms,
+      hotkeys.enabled
     ]
   );
 
@@ -431,6 +435,7 @@ function PuckLayout<
   const rightSideBarVisible = useAppStore(
     (s) => s.state.ui.rightSideBarVisible
   );
+  const enabledHotkeys = useAppStore((s) => s.hotkeys.enabled);
 
   const {
     width: leftWidth,
@@ -498,11 +503,11 @@ function PuckLayout<
     if (ready && iframe.enabled) {
       const frameDoc = getFrame();
 
-      if (frameDoc) {
+      if (frameDoc && enabledHotkeys) {
         return monitorHotkeys(frameDoc);
       }
     }
-  }, [ready, iframe.enabled]);
+  }, [ready, iframe.enabled, enabledHotkeys]);
 
   usePreviewModeHotkeys();
 

packages/core/lib/use-hotkey.ts

@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import { create } from "zustand";
 import { subscribeWithSelector } from "zustand/middleware";
+import { useAppStore } from "../store";
 
 const keys = [
   "ctrl",
@@ -168,7 +169,12 @@ export const monitorHotkeys = (doc: Document) => {
 };
 
 export const useMonitorHotkeys = () => {
-  useEffect(() => monitorHotkeys(document), []);
+  const enabledHotkeys = useAppStore((s) => s.hotkeys.enabled);
+
+  useEffect(() => {
+    if (!enabledHotkeys) return;
+    return monitorHotkeys(document);
+  }, [enabledHotkeys]);
 };
 
 export const useHotkey = (combo: KeyMapStrict, cb: Function) => {

packages/core/store/index.ts

@@ -14,6 +14,7 @@ import {
   ComponentData,
   RootDataWithProps,
   ResolveDataTrigger,
+  HotkeyState,
 } from "../types";
 import { createReducer, PuckAction } from "../reducer";
 import { getItem } from "../lib/data/get-item";
@@ -87,6 +88,7 @@ export type AppStore<
   nodes: NodesSlice;
   permissions: PermissionsSlice;
   fieldTransforms: FieldTransforms;
+  hotkeys: Partial<HotkeyState>;
 };
 
 export type AppStoreApi = StoreApi<AppStore>;
@@ -113,6 +115,7 @@ export const createAppStore = (initialAppStore?: Partial<AppStore>) =>
       iframe: {},
       metadata: {},
       fieldTransforms: {},
+      hotkeys: { enabled: true },
       ...initialAppStore,
       fields: createFieldsSlice(set, get),
       history: createHistorySlice(set, get),

packages/core/types/AppState.tsx

@@ -9,6 +9,10 @@ export type ItemWithId = {
 
 export type ArrayState = { items: ItemWithId[]; openId: string };
 
+export type HotkeyState = {
+  enabled: boolean;
+}
+
 export type UiState = {
   leftSideBarVisible: boolean;
   rightSideBarVisible: boolean;