Functionality for switching between editing and interactive mode

apps/demo/app/custom-ui/[...puckPath]/client.tsx

@@ -10,7 +10,7 @@ import { Drawer } from "@/core/components/Drawer";
 import { ChevronUp, ChevronDown, Globe, Lock, Unlock } from "lucide-react";
 
 const CustomHeader = ({ onPublish }: { onPublish: (data: Data) => void }) => {
-  const { appState, dispatch } = usePuck();
+  const { appState, dispatch, isInteractive, setIsInteractive } = usePuck();
 
   return (
     <header
@@ -28,7 +28,10 @@ const CustomHeader = ({ onPublish }: { onPublish: (data: Data) => void }) => {
     >
       <span style={{ fontWeight: 600 }}>Custom UI example </span>
       <div style={{ marginLeft: "auto", display: "flex", gap: 8 }}>
-        <div>
+        <div style={{ gap: 8, display: "flex" }}>
+          <Button onClick={() => setIsInteractive(!isInteractive)}>
+            Switch to {isInteractive ? "editing" : "interactive"} mode
+          </Button>
           <Button
             onClick={() => onPublish(appState.data)}
             icon={<Globe size="14" />}

packages/core/components/DraggableComponent/index.tsx

@@ -16,7 +16,6 @@ import { useAppContext } from "../Puck/context";
 import { DefaultDraggable } from "../Draggable";
 import { Loader } from "../Loader";
 import { ActionBar } from "../ActionBar";
-import { DefaultOverride } from "../DefaultOverride";
 
 const getClassName = getClassNameFactory("DraggableComponent", styles);
 
@@ -81,8 +80,15 @@ export const DraggableComponent = ({
   indicativeHover?: boolean;
   style?: CSSProperties;
 }) => {
-  const { zoomConfig, status, overrides, selectedItem, getPermissions } =
-    useAppContext();
+  const {
+    zoomConfig,
+    status,
+    overrides,
+    selectedItem,
+    getPermissions,
+    isInteractive,
+  } = useAppContext();
+
   const isModifierHeld = useModifierHeld("Alt");
 
   const El = status !== "LOADING" ? Draggable : DefaultDraggable;
@@ -128,11 +134,15 @@ export const DraggableComponent = ({
             isLocked,
             forceHover,
             indicativeHover,
+            isInteractive,
           })}
           style={{
             ...style,
             ...provided.draggableProps.style,
-            cursor: isModifierHeld || isDragDisabled ? "pointer" : "grab",
+            cursor:
+              isInteractive || isModifierHeld || isDragDisabled
+                ? "default"
+                : "grab",
           }}
           onMouseOver={onMouseOver}
           onMouseOut={onMouseOut}
@@ -178,7 +188,7 @@ export const DraggableComponent = ({
           )}
 
           <div className={getClassName("overlay")} />
-          <div className={getClassName("contents")}>{children}</div>
+          <div className={getClassName("contents")}> {children}</div>
         </div>
       )}
     </El>

packages/core/components/DraggableComponent/styles.module.css

@@ -13,6 +13,15 @@
   overflow: hidden;
 }
 
+.DraggableComponent--isInteractive > .DraggableComponent-contents {
+  pointer-events: auto !important;
+}
+
+.DraggableComponent--isInteractive > .DraggableComponent-overlay {
+  cursor: default !important;
+  background: transparent !important;
+}
+
 .DraggableComponent-contents {
   position: relative; /* Reset stacking context */
   pointer-events: none;

packages/core/components/Puck/context.tsx

@@ -72,6 +72,8 @@ export type AppContext<
   plugins: Plugin[];
   overrides: Partial<Overrides>;
   history: Partial<PuckHistory>;
+  isInteractive: boolean;
+  setIsInteractive: React.Dispatch<SetStateAction<boolean>>;
   viewports: Viewports;
   zoomConfig: ZoomConfig;
   setZoomConfig: (zoomConfig: ZoomConfig) => void;
@@ -94,6 +96,8 @@ const defaultContext: AppContext = {
   resolveData: () => {},
   plugins: [],
   overrides: {},
+  isInteractive: false,
+  setIsInteractive: () => {},
   history: {},
   viewports: defaultViewports,
   zoomConfig: {
@@ -127,12 +131,15 @@ export const AppProvider = ({
     | "componentState"
     | "setComponentState"
     | "resolveData"
+    | "setIsInteractive"
   >;
 }) => {
   const [zoomConfig, setZoomConfig] = useState(defaultContext.zoomConfig);
 
   const [status, setStatus] = useState<Status>("LOADING");
 
+  const [isInteractive, setIsInteractive] = useState(false);
+
   // App is ready when client has loaded, after initial render
   // This triggers DropZones to activate
   useEffect(() => {
@@ -222,6 +229,8 @@ export const AppProvider = ({
         componentState,
         setComponentState,
         resolveData,
+        isInteractive,
+        setIsInteractive,
       }}
     >
       {children}

packages/core/components/Puck/index.tsx

@@ -412,6 +412,7 @@ export function Puck<
           config,
           plugins: plugins || [],
           overrides: loadedOverrides,
+          isInteractive: false,
           history,
           viewports,
           iframe,

packages/core/lib/use-puck.ts

@@ -6,6 +6,8 @@ export const usePuck = <UserConfig extends Config = Config>() => {
     state: appState,
     config,
     history,
+    isInteractive,
+    setIsInteractive,
     dispatch,
     selectedItem: currentItem,
     getPermissions,
@@ -15,9 +17,11 @@ export const usePuck = <UserConfig extends Config = Config>() => {
   return {
     appState,
     config,
+    isInteractive,
     dispatch,
     getPermissions,
     refreshPermissions,
+    setIsInteractive,
     history: {
       back: history.back!,
       forward: history.forward!,