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?: HotkeyState
 };
 
 const propsContext = createContext<Partial<PuckProps>>({});
@@ -159,6 +160,7 @@ function PuckProvider<
     metadata,
     onAction,
     fieldTransforms,
+    hotkeys,
   } = usePropsContext();
 
   const iframe: IframeConfig = useMemo(
@@ -242,6 +244,7 @@ function PuckProvider<
 
     const newAppState = {
       ...defaultAppState,
+      hotkeys,
       data: {
         ...initialData,
         root: { ...initialData?.root, props: root.props },
@@ -431,6 +434,7 @@ function PuckLayout<
   const rightSideBarVisible = useAppStore(
     (s) => s.state.ui.rightSideBarVisible
   );
+  const enabledHotkeys = useAppStore((s) => s.state.hotkeys.enabled);
 
   const {
     width: leftWidth,
@@ -498,11 +502,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.state.hotkeys.enabled)
+
+  useEffect(() => {
+    if (!enabledHotkeys) return;
+    return monitorHotkeys(document);
+  }, [enabledHotkeys]);
 };
 
 export const useHotkey = (combo: KeyMapStrict, cb: Function) => {

packages/core/store/default-app-state.ts

@@ -2,6 +2,7 @@ import { defaultViewports } from "../components/ViewportControls/default-viewpor
 import { PrivateAppState } from "../types/Internal";
 
 export const defaultAppState: PrivateAppState = {
+  hotkeys: { enabled: true },
   data: { content: [], root: {}, zones: {} },
   ui: {
     leftSideBarVisible: true,

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;
@@ -39,6 +43,7 @@ export type UiState = {
 };
 
 export type AppState<UserData extends Data = Data> = {
+  hotkeys: HotkeyState;
   data: UserData;
   ui: UiState;
 };