fix: apply field transforms to root fields

Author: FedericoBonel

…nents/Preview/components/editor-page.tsx …ponents/Preview/components/edit-page.tsxpackages/core/components/Puck/components/Preview/components/editor-page.tsx renamed to packages/core/components/Puck/components/Preview/components/edit-page.tsx packages/core/components/Puck/components/Preview/components/editor-page.tsx renamed to packages/core/components/Puck/components/Preview/components/edit-page.tsx

@@ -1,4 +1,4 @@
-import { memo, useMemo } from "react";
+import { useMemo } from "react";
 import { useShallow } from "zustand/react/shallow";
 
 import { useAppStore } from "../../../../../store";
@@ -10,29 +10,46 @@ import { rootDroppableId } from "../../../../../lib/root-droppable-id";
 import {
   ComponentData,
   DefaultRootRenderProps,
+  FieldTransforms,
   RootData,
 } from "../../../../../types";
 
-import { useRichtextProps } from "../../../../RichTextEditor/lib/use-richtext-props";
 import { DropZoneEditPure, DropZonePure } from "../../../../DropZone";
+import { getInlineTextTransform } from "../../../../../lib/field-transforms/default-transforms/inline-text-transform";
+import { getRichTextTransform } from "../../../../../lib/field-transforms/default-transforms/rich-text-transform";
 
 const slotFieldTransforms = getSlotTransform(DropZoneEditPure);
 
 /**
- * Renders the puck data in the editor where this component is rendered as an editable page.
+ * Renders the puck data as an editable page.
  */
-const EditorPage = memo(() => {
+const EditPage = () => {
   // All the props, slot props are defaulted to null
   const flatRootProps = useAppStore(
     useShallow((s) => s.state.indexes.nodes.root?.flatData.props)
   );
   const config = useAppStore((s) => s.config);
   const metadata = useAppStore((s) => s.metadata);
   const userFieldTransforms = useAppStore((s) => s.fieldTransforms);
+  const plugins = useAppStore((s) => s.plugins);
 
   const combinedFieldTransforms = useMemo(
-    () => ({ ...slotFieldTransforms, ...userFieldTransforms }),
-    [userFieldTransforms]
+    () => ({
+      ...slotFieldTransforms,
+      ...getInlineTextTransform(),
+      ...getRichTextTransform(),
+      ...plugins.reduce<FieldTransforms>((acc, plugin) => {
+        if (!plugin.fieldTransforms) return acc;
+
+        Object.keys(plugin.fieldTransforms).forEach((key) => {
+          acc[key as keyof typeof acc] = plugin.fieldTransforms![key];
+        });
+
+        return acc;
+      }, {}),
+      ...userFieldTransforms,
+    }),
+    [plugins, userFieldTransforms]
   );
 
   // Root as object with slots still defaulted to null
@@ -67,24 +84,14 @@ const EditorPage = memo(() => {
     };
   }, [propsWithSlots, metadata]);
 
-  // Get the richtext props for the root render.
-  const richtextProps = useRichtextProps(
-    config.root?.fields ?? {},
-    renderProps,
-    userFieldTransforms
-  );
-
   return config.root?.render ? (
     config.root?.render({
       ...renderProps,
-      ...richtextProps,
       id: "puck-root",
     })
   ) : (
     <>{renderProps.children}</>
   );
-});
-
-EditorPage.displayName = "EditorPage";
+};
 
-export default EditorPage;
+export default EditPage;

packages/core/components/Puck/components/Preview/index.tsx

@@ -7,7 +7,7 @@ import { BubbledPointerEvent } from "../../../../lib/bubble-pointer-event";
 import AutoFrame, { autoFrameContext } from "../../../AutoFrame";
 
 import InteractivePage from "./components/interactive-page";
-import EditorPage from "./components/editor-page";
+import EditPage from "./components/edit-page";
 import styles from "./styles.module.css";
 
 const getClassName = getClassNameFactory("PuckPreview", styles);
@@ -95,7 +95,7 @@ export const Preview = ({ id = "puck-preview" }: { id?: string }) => {
   useBubbleIframeEvents(ref);
   usePreviewModeAttribute(ref);
 
-  const inner = isEditMode ? <EditorPage /> : <InteractivePage />;
+  const inner = isEditMode ? <EditPage /> : <InteractivePage />;
 
   useEffect(() => {
     if (!iframe.enabled) {

packages/core/lib/data/resolve-and-replace-data.ts

@@ -4,6 +4,7 @@ import { ComponentData, ResolveDataTrigger, UiState } from "../../types";
 import { getSelectorForId } from "../get-selector-for-id";
 
 import { toComponent } from "./to-component";
+import { toRoot } from "./to-root";
 
 /**
  * Resolves the data of a component and replaces it in the appStore state.
@@ -27,6 +28,19 @@ export async function resolveAndReplaceData(
   );
   if (!resolvedResult.didChange && !writeThrough) return;
 
+  const isRoot =
+    resolvedResult.node.type === "root" ||
+    resolvedResult.node.props.id === "root";
+
+  if (isRoot) {
+    getState().dispatch({
+      type: "replaceRoot",
+      root: toRoot(resolvedResult.node),
+      ui,
+    });
+    return;
+  }
+
   const itemSelector = getSelectorForId(
     getState().state,
     resolvedResult.node.props.id

packages/core/lib/get-selector-for-id.ts

@@ -5,6 +5,12 @@ export const getSelectorForId = (state: PrivateAppState, id: string) => {
 
   if (!node) return;
 
+  const isRoot = node.data.type === "root" || id === "root";
+
+  if (isRoot) {
+    return;
+  }
+
   const zoneCompound = `${node.parentId}:${node.zone}`;
 
   const index = state.indexes.zones[zoneCompound].contentIds.indexOf(id);