From 13bb1bdf03a62000c07a7d49a56ad09c1433fda0 Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Wed, 29 May 2024 22:56:44 +0100
Subject: [PATCH] feat: add isEditing flag to `puck` object prop

This replaces the legacy undocumented `editMode` prop.
---
 apps/demo/config/root.tsx                     |  4 ++--
 apps/docs/components/Preview/index.tsx        |  2 +-
 .../configuration/component-config.mdx        | 23 +++++++++++--------
 packages/core/components/DropZone/index.tsx   | 10 ++++++--
 .../Puck/components/Preview/index.tsx         |  4 ++--
 packages/core/components/Render/index.tsx     |  1 +
 .../core/components/ServerRender/index.tsx    |  1 +
 packages/core/types/Config.tsx                |  1 +
 8 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/apps/demo/config/root.tsx b/apps/demo/config/root.tsx
index 7a253041a9..621ab9aeb6 100644
--- a/apps/demo/config/root.tsx
+++ b/apps/demo/config/root.tsx
@@ -9,10 +9,10 @@ export type RootProps = {
   title: string;
 } & DefaultRootProps;
 
-function Root({ children, editMode }: RootProps) {
+function Root({ children, puck }: RootProps) {
   return (
     <>
-      <Header editMode={editMode} />
+      <Header editMode={puck.isEditing} />
       {children}
       <Footer>
         <Footer.List title="Section">
diff --git a/apps/docs/components/Preview/index.tsx b/apps/docs/components/Preview/index.tsx
index 03a4c5e0a0..79bbcfe67e 100644
--- a/apps/docs/components/Preview/index.tsx
+++ b/apps/docs/components/Preview/index.tsx
@@ -86,7 +86,7 @@ const ConfigPreviewInner = ({
         <div className={getClassNameConfigPreview("preview")}>
           {componentConfig.render({
             ...appState.data["content"][0].props,
-            puck: { renderDropZone: () => <div /> },
+            puck: { renderDropZone: () => <div />, isEditing: false },
           })}
         </div>
       )}
diff --git a/apps/docs/pages/docs/api-reference/configuration/component-config.mdx b/apps/docs/pages/docs/api-reference/configuration/component-config.mdx
index 774c968abd..2e5e329879 100644
--- a/apps/docs/pages/docs/api-reference/configuration/component-config.mdx
+++ b/apps/docs/pages/docs/api-reference/configuration/component-config.mdx
@@ -51,17 +51,24 @@ const config = {
 };
 ```
 
-#### Args
+#### Render props
 
-| Arg     | Example                                            | Type   |
-| ------- | -------------------------------------------------- | ------ |
-| `props` | `{ id: "id", puck: { renderDropZone: DropZone } }` | Object |
+| Arg                                          | Example       | Type     |
+| -------------------------------------------- | ------------- | -------- |
+| [`id`](#id)                                  | `button-1234` | String   |
+| [`puck.isEditing`](#puckisediting)           | `false`       | Boolean  |
+| [`puck.renderDropZone`](#puckrenderdropzone) | `() => {}`    | Function |
+| [`...props`](#props)                         | `{}`          | Object   |
 
-##### `props.id`
+##### `id`
 
 A unique ID generated by Puck for this component. You can optionally apply this, or use your own ID.
 
-##### `props.puck.renderDropZone`
+##### `puck.isEditing`
+
+A boolean describing whether or not this component is being rendered in the `<Puck>` component.
+
+##### `puck.renderDropZone`
 
 A render method that creates a [`<DropZone>`](/docs/api-reference/components/drop-zone) for creating nested components. Use this method instead of the `<DropZone>` when implementing React server components.
 
@@ -81,10 +88,6 @@ const config = {
 
 The remaining props are provided by the user-defined [fields](#fields).
 
-#### Returns
-
-Returns a ReactNode
-
 ## Optional params
 
 ### `fields`
diff --git a/packages/core/components/DropZone/index.tsx b/packages/core/components/DropZone/index.tsx
index 319bebc117..5a9327fe25 100644
--- a/packages/core/components/DropZone/index.tsx
+++ b/packages/core/components/DropZone/index.tsx
@@ -10,6 +10,7 @@ import { DropZoneProvider, dropZoneContext } from "./context";
 import { getZoneId } from "../../lib/get-zone-id";
 import { useAppContext } from "../Puck/context";
 import { DropZoneProps } from "./types";
+import { PuckContext } from "../../types/Config";
 
 const getClassName = getClassNameFactory("DropZone", styles);
 
@@ -198,11 +199,16 @@ function DropZoneEdit({ zone, allow, disallow, style }: DropZoneProps) {
               {content.map((item, i) => {
                 const componentId = item.props.id;
 
+                const puckProps: PuckContext = {
+                  renderDropZone: DropZone,
+                  isEditing: true,
+                };
+
                 const defaultedProps = {
                   ...config.components[item.type]?.defaultProps,
                   ...item.props,
-                  puck: { renderDropZone: DropZone },
-                  editMode: true,
+                  puck: puckProps,
+                  editMode: true, // DEPRECATED
                 };
 
                 const isSelected =
diff --git a/packages/core/components/Puck/components/Preview/index.tsx b/packages/core/components/Puck/components/Preview/index.tsx
index 968f2b2516..16957c9d78 100644
--- a/packages/core/components/Puck/components/Preview/index.tsx
+++ b/packages/core/components/Puck/components/Preview/index.tsx
@@ -20,8 +20,8 @@ export const Preview = ({ id = "puck-preview" }: { id?: string }) => {
         config.root?.render({
           id: "puck-root",
           ...pageProps,
-          editMode: true,
-          puck: { renderDropZone: DropZone },
+          editMode: true, // DEPRECATED
+          puck: { renderDropZone: DropZone, isEditing: true },
         })
       ) : (
         <>{pageProps.children}</>
diff --git a/packages/core/components/Render/index.tsx b/packages/core/components/Render/index.tsx
index f987a85b39..10a7fc2b39 100644
--- a/packages/core/components/Render/index.tsx
+++ b/packages/core/components/Render/index.tsx
@@ -28,6 +28,7 @@ export function Render<UserConfig extends Config = Config>({
           {...rootProps}
           puck={{
             renderDropZone: DropZone,
+            isEditing: false,
           }}
           title={title}
           editMode={false}
diff --git a/packages/core/components/ServerRender/index.tsx b/packages/core/components/ServerRender/index.tsx
index 18056bb9f7..75c3aae19f 100644
--- a/packages/core/components/ServerRender/index.tsx
+++ b/packages/core/components/ServerRender/index.tsx
@@ -79,6 +79,7 @@ export function Render<UserConfig extends Config = Config>({
           renderDropZone: ({ zone }: { zone: string }) => (
             <DropZoneRender zone={zone} data={data} config={config} />
           ),
+          isEditing: false,
         }}
         title={title}
         editMode={false}
diff --git a/packages/core/types/Config.tsx b/packages/core/types/Config.tsx
index dcf681777c..a2ff59a7bf 100644
--- a/packages/core/types/Config.tsx
+++ b/packages/core/types/Config.tsx
@@ -25,6 +25,7 @@ export type PuckComponent<Props> = (
 
 export type PuckContext = {
   renderDropZone: React.FC<DropZoneProps>;
+  isEditing: boolean;
 };
 
 export type ComponentConfig<