feat: add isEditing flag to puck object prop

This replaces the legacy undocumented `editMode` prop.
measuredco · May 30, 2024 · 13bb1bd · 13bb1bd
1 parent 6e97a0e
commit 13bb1bd
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -25,6 +25,7 @@ export type PuckComponent<Props> = (
 
 export type PuckContext = {
   renderDropZone: React.FC<DropZoneProps>;
+  isEditing: boolean;
 };
 
 export type ComponentConfig<