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<