From 09c468d0d55be5e54c00c002f916e7be0a4b539d Mon Sep 17 00:00:00 2001 From: Chris Villa Date: Sat, 7 Sep 2024 12:12:08 +0100 Subject: [PATCH] fix: always record history on component insert This will result in duplicate history entries if the item has a resolveData method. This is difficult to prevent without a deferredDispatch method, similar to that being explored in #598. --- apps/docs/pages/docs/integrating-puck/dynamic-props.mdx | 2 ++ packages/core/lib/insert-component.ts | 6 +++++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/apps/docs/pages/docs/integrating-puck/dynamic-props.mdx b/apps/docs/pages/docs/integrating-puck/dynamic-props.mdx index c933ed009..2e102cb76 100644 --- a/apps/docs/pages/docs/integrating-puck/dynamic-props.mdx +++ b/apps/docs/pages/docs/integrating-puck/dynamic-props.mdx @@ -63,6 +63,8 @@ const config = { }} /> +> When inserting components with `resolveData`, the Puck state will update twice - once for the initial insert, and once more when the method resolves, if it changes the data. This will be reflected in the undo/redo history. + ### Setting fields as read-only [`resolveData`](/docs/api-reference/configuration/component-config#resolvedatadata-params) also allows us to mark fields as read-only using the [`readOnly` parameter](/docs/api-reference/configuration/component-config#datareadonly-1). diff --git a/packages/core/lib/insert-component.ts b/packages/core/lib/insert-component.ts index 0f54553d5..ac92eb35e 100644 --- a/packages/core/lib/insert-component.ts +++ b/packages/core/lib/insert-component.ts @@ -35,7 +35,11 @@ export const insertComponent = ( // Dispatch the insert, immediately dispatch({ ...insertActionData, // Dispatch insert rather set, as user's may rely on this via onAction - recordHistory: false, + + // We must always record history here so the insert is added to user history + // If the user has defined a resolveData method, they will end up with 2 history + // entries on insert - one for the initial insert, and one when the data resolves + recordHistory: true, }); const itemSelector = {