use new createBatchUpdate for batched updates

apps/designer/app/designer/features/style-panel/lib/use-style-data.ts

@@ -21,6 +21,11 @@ export type SetProperty = (
   property: StyleProperty
 ) => (value: string, options?: StyleUpdateOptions) => void;
 
+export type CreateBatchUpdate = () => {
+  setProperty: SetProperty;
+  publish: () => void;
+};
+
 export const useStyleData = ({
   selectedInstanceData,
   publish,
@@ -86,13 +91,18 @@ export const useStyleData = ({
     });
   };
 
+  const toStyleValue = (property: StyleProperty, value: string) => {
+    if (currentStyle === undefined) return;
+    const currentValue = currentStyle[property];
+    const defaultUnit =
+      currentValue?.type === "unit" ? currentValue?.unit : undefined;
+    return parseCssValue(property, value, defaultUnit);
+  };
+
   const setProperty: SetProperty = (property) => {
     return (input, options = { isEphemeral: false }) => {
-      if (currentStyle === undefined) return;
-      const currentValue = currentStyle[property];
-      const defaultUnit =
-        currentValue?.type === "unit" ? currentValue?.unit : undefined;
-      const nextValue = parseCssValue(property, input, defaultUnit);
+      const nextValue = toStyleValue(property, input);
+      if (nextValue === undefined) return;
       if (nextValue.type !== "invalid") {
         const updates = [{ property, value: nextValue }];
         const type = options.isEphemeral ? "preview" : "update";
@@ -104,5 +114,37 @@ export const useStyleData = ({
     };
   };
 
-  return { currentStyle, inheritedStyle, setProperty };
+  const createBatchUpdate = () => {
+    const updates: StyleUpdates["updates"] = [];
+
+    const setProperty = (property: StyleProperty) => {
+      const setValue = (input: string) => {
+        const value = toStyleValue(property, input);
+        if (value === undefined || value.type === "invalid") {
+          return;
+        }
+        updates.push({ property, value });
+      };
+      return setValue;
+    };
+
+    const publish = () => {
+      publishUpdates("update", updates);
+      const nextStyle = updates.reduce(
+        (currentStyle, { property, value }) => {
+          currentStyle[property] = value;
+          return currentStyle;
+        },
+        { ...currentStyle }
+      );
+      setCurrentStyle(nextStyle);
+    };
+
+    return {
+      setProperty,
+      publish,
+    };
+  };
+
+  return { currentStyle, inheritedStyle, setProperty, createBatchUpdate };
 };

apps/designer/app/designer/features/style-panel/style-panel.tsx

@@ -21,10 +21,11 @@ export const StylePanel = ({
   selectedInstanceData,
   publish,
 }: StylePanelProps) => {
-  const { currentStyle, inheritedStyle, setProperty } = useStyleData({
-    selectedInstanceData,
-    publish,
-  });
+  const { currentStyle, inheritedStyle, setProperty, createBatchUpdate } =
+    useStyleData({
+      selectedInstanceData,
+      publish,
+    });
   const [breakpoint] = useSelectedBreakpoint();
   const [canvasWidth] = useCanvasWidth();
   const [search, setSearch] = useState("");
@@ -70,6 +71,7 @@ export const StylePanel = ({
           currentStyle={currentStyle}
           inheritedStyle={inheritedStyle}
           setProperty={setProperty}
+          createBatchUpdate={createBatchUpdate}
         />
       </Box>
     </>

apps/designer/app/designer/features/style-panel/style-section.tsx

@@ -24,7 +24,7 @@ import {
   type StyleValue,
   type CSS,
 } from "@webstudio-is/react-sdk";
-import type { SetProperty } from "./lib/use-style-data";
+import type { SetProperty, CreateBatchUpdate } from "./lib/use-style-data";
 import type { InheritedStyle } from "./lib/get-inherited-style";
 import { ColorPicker } from "./lib/color-picker";
 import {
@@ -389,10 +389,12 @@ const GridControl = ({
   css,
   currentStyle,
   setProperty,
+  createBatchUpdate,
 }: {
   css: CSS;
   currentStyle: Style;
   setProperty: SetProperty;
+  createBatchUpdate: CreateBatchUpdate;
 }) => {
   const flexDirection = currentStyle.flexDirection?.value as string;
   const justifyContent = currentStyle.justifyContent?.value as string;
@@ -416,8 +418,9 @@ const GridControl = ({
     { normal: 0, start: 0, center: 1, end: 2 } as Record<string, number>
   )[justifyContent];
   const position = row * 3 + column;
-  const setAlignItems = setProperty("alignItems");
-  const setJustifyContent = setProperty("justifyContent");
+  const batch = createBatchUpdate();
+  const setAlignItems = batch.setProperty("alignItems");
+  const setJustifyContent = batch.setProperty("justifyContent");
 
   return (
     <Grid
@@ -470,6 +473,7 @@ const GridControl = ({
               // @todo: these two should be set in one instead of two seperate updates
               setAlignItems(alignItems);
               setJustifyContent(justifyContent);
+              batch.publish();
             }}
           >
             <icons.DotFilledIcon></icons.DotFilledIcon>
@@ -546,6 +550,7 @@ const ShowMore = ({ styleConfigs }: { styleConfigs: Array<JSX.Element> }) => {
 
 type RenderPropertyProps = {
   setProperty: SetProperty;
+  createBatchUpdate: CreateBatchUpdate;
   currentStyle: Style;
   inheritedStyle: InheritedStyle;
   styleConfig: StyleConfig;
@@ -556,6 +561,7 @@ export const renderProperty = ({
   currentStyle,
   inheritedStyle,
   setProperty,
+  createBatchUpdate,
   styleConfig,
   category,
 }: RenderPropertyProps) => {
@@ -581,6 +587,7 @@ export const renderProperty = ({
 
 type RenderCategoryProps = {
   setProperty: SetProperty;
+  createBatchUpdate: CreateBatchUpdate;
   currentStyle: Style;
   category: Category;
   styleConfigsByCategory: JSX.Element[];
@@ -590,6 +597,7 @@ type RenderCategoryProps = {
 // the new designs, refactor ColorControl, SpacingControl if needed.
 export const renderCategory = ({
   setProperty,
+  createBatchUpdate,
   currentStyle,
   category,
   styleConfigsByCategory,
@@ -642,6 +650,7 @@ export const renderCategory = ({
                   css={{ gridArea: "grid" }}
                   currentStyle={currentStyle}
                   setProperty={setProperty}
+                  createBatchUpdate={createBatchUpdate}
                 />
               </Grid>
               <ShowMore styleConfigs={moreStyleConfigsByCategory} />

apps/designer/app/designer/features/style-panel/style-settings.tsx

@@ -11,7 +11,7 @@ import { CollapsibleSection } from "~/designer/shared/inspector";
 import { renderProperty, renderCategory } from "./style-section";
 import { dependencies } from "./lib/dependencies";
 import { type InheritedStyle } from "./lib/get-inherited-style";
-import { type SetProperty } from "./lib/use-style-data";
+import { type SetProperty, type CreateBatchUpdate } from "./lib/use-style-data";
 import { type SelectedInstanceData } from "~/shared/canvas-components";
 
 // Finds a property/value by using any available form: property, label, value
@@ -69,12 +69,14 @@ type StyleSettingsProps = {
   inheritedStyle: InheritedStyle;
   cssRule?: CssRule;
   setProperty: SetProperty;
+  createBatchUpdate: CreateBatchUpdate;
   selectedInstanceData: SelectedInstanceData;
   search: string;
 };
 
 export const StyleSettings = ({
   setProperty,
+  createBatchUpdate,
   currentStyle,
   search,
   ...rest
@@ -104,6 +106,7 @@ export const StyleSettings = ({
         const element = renderProperty({
           ...rest,
           setProperty,
+          createBatchUpdate,
           currentStyle,
           styleConfig,
           category,
@@ -135,6 +138,7 @@ export const StyleSettings = ({
         <>
           {renderCategory({
             setProperty,
+            createBatchUpdate,
             currentStyle,
             category,
             styleConfigsByCategory,