feat: track focused field in app state

measuredco · Nov 14, 2024 · 91bc97a · 91bc97a
1 parent 229cbdd
commit 91bc97a
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 12 deletions.
diff --git a/apps/docs/pages/docs/api-reference/app-state.mdx b/apps/docs/pages/docs/api-reference/app-state.mdx
@@ -16,6 +16,7 @@ The current state of the Puck editor interface.
 | ----------------------------------------------- | ----------------------------------------------------- | ------- |
 | [`arrayState`](#uiarraystate)                   | `{}`                                                  | Object  |
 | [`componentList`](#uicomponentlist)             | `{ typography: { components: [ "HeadingBlock" ] } }`  | Object  |
+| [`field.focus`](#fieldfocus)                    | `"title"`                                             | String  |
 | [`isDragging`](#isdragging)                     | `false`                                               | Boolean |
 | [`itemSelector`](#uiitemselector)               | `{ index: 0, zone: "my-content" }`                    | Object  |
 | [`leftSideBarVisible`](#uileftsidebarvisible)   | `false`                                               | Boolean |
@@ -52,6 +53,12 @@ Whether or not the category is expanded in the side bar
 
 ---
 
+### `ui.field.focus`
+
+The name of the currently focused field.
+
+---
+
 ### `ui.isDragging`
 
 A boolean stating whether or not the user is currently dragging a component.

diff --git a/packages/core/components/AutoField/index.tsx b/packages/core/components/AutoField/index.tsx
@@ -27,6 +27,7 @@ import { useAppContext } from "../Puck/context";
 import { useSafeId } from "../../lib/use-safe-id";
 
 const getClassName = getClassNameFactory("Input", styles);
+const getClassNameWrapper = getClassNameFactory("InputWrapper", styles);
 
 export const FieldLabel = ({
   children,
@@ -127,7 +128,7 @@ function AutoFieldInternal<
     Label?: React.FC<FieldLabelPropsInternal>;
   }
 ) {
-  const { overrides } = useAppContext();
+  const { dispatch, overrides } = useAppContext();
 
   const { id, Label = FieldLabelInternal } = props;
 
@@ -168,6 +169,33 @@ function AutoFieldInternal<
     id: resolvedId,
   };
 
+  const onFocus = useCallback(
+    (e: React.FocusEvent) => {
+      if (mergedProps.name && e.target.nodeName === "INPUT") {
+        e.stopPropagation();
+
+        dispatch({
+          type: "setUi",
+          ui: {
+            field: { focus: mergedProps.name },
+          },
+        });
+      }
+    },
+    [mergedProps.name]
+  );
+
+  const onBlur = useCallback((e: React.FocusEvent) => {
+    if ("name" in e.target) {
+      dispatch({
+        type: "setUi",
+        ui: {
+          field: { focus: null },
+        },
+      });
+    }
+  }, []);
+
   if (field.type === "custom") {
     if (!field.render) {
       return null;
@@ -176,8 +204,10 @@ function AutoFieldInternal<
     const CustomField = field.render as any;
 
     return (
-      <div className={getClassName()}>
-        <CustomField {...mergedProps} />
+      <div className={getClassNameWrapper()} onFocus={onFocus} onBlur={onBlur}>
+        <div className={getClassName()}>
+          <CustomField {...mergedProps} />
+        </div>
       </div>
     );
   }
@@ -186,7 +216,11 @@ function AutoFieldInternal<
 
   const Render = render[field.type] as (props: FieldProps) => ReactElement;
 
-  return <Render {...mergedProps}>{children}</Render>;
+  return (
+    <div className={getClassNameWrapper()} onFocus={onFocus} onBlur={onBlur}>
+      <Render {...mergedProps}>{children}</Render>
+    </div>
+  );
 }
 
 // Don't let external value changes update this if it's changed manually in the last X ms

diff --git a/packages/core/components/AutoField/styles.module.css b/packages/core/components/AutoField/styles.module.css
@@ -1,24 +1,24 @@
-.Input {
+.InputWrapper {
   color: var(--puck-color-grey-04);
   padding: 16px;
   padding-bottom: 12px;
   display: block;
 }
 
-.Input .Input {
+.InputWrapper + .InputWrapper {
+  border-top: 1px solid var(--puck-color-grey-09);
+  margin-top: 8px;
+}
+
+.Input .InputWrapper {
   padding: 0px;
 }
 
 .Input * {
   box-sizing: border-box;
 }
 
-.Input + .Input {
-  border-top: 1px solid var(--puck-color-grey-09);
-  margin-top: 8px;
-}
-
-.Input .Input + .Input {
+.Input .InputWrapper + .InputWrapper {
   border-top: 0px;
   margin-top: 12px;
 }

diff --git a/packages/core/components/Puck/context.tsx b/packages/core/components/Puck/context.tsx
@@ -46,6 +46,7 @@ export const defaultAppState: AppState = {
       options: [],
       controlsVisible: true,
     },
+    field: { focus: null },
   },
 };
 

diff --git a/packages/core/lib/__tests__/use-resolved-data.spec.tsx b/packages/core/lib/__tests__/use-resolved-data.spec.tsx
@@ -143,6 +143,9 @@ describe("use-resolved-data", () => {
           "ui": {
             "arrayState": {},
             "componentList": {},
+            "field": {
+              "focus": null,
+            },
             "isDragging": false,
             "itemSelector": null,
             "leftSideBarVisible": true,

diff --git a/packages/core/types/AppState.tsx b/packages/core/types/AppState.tsx
@@ -32,6 +32,7 @@ export type UiState = {
     controlsVisible: boolean;
     options: Viewport[];
   };
+  field: { focus?: string | null };
 };
 
 export type AppState<UserData extends Data = Data> = {
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,6 +46,7 @@ export const defaultAppState: AppState = { @@
           options: [],
           controlsVisible: true,
         },
+        field: { focus: null },
       },
     };
@@ Expand Down @@