Merge branch 'main' into fixRootProps

yext · Feb 18, 2025 · 48c4f41 · 48c4f41
2 parents 8fe6c3f + 41fac97
commit 48c4f41
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 2 deletions.
diff --git a/packages/visual-editor/src/internal/components/InternalThemeEditor.tsx b/packages/visual-editor/src/internal/components/InternalThemeEditor.tsx
@@ -98,10 +98,13 @@ export const InternalThemeEditor = ({
 
     const newHistory = {
       histories: [
-        ...themeHistoriesRef.current.histories,
+        ...themeHistoriesRef.current.histories.slice(
+          0,
+          themeHistoriesRef.current.index + 1
+        ),
         { id: uuidv4(), data: newThemeValues },
       ] as ThemeHistory[],
-      index: themeHistoriesRef.current.histories.length,
+      index: themeHistoriesRef.current.index + 1,
     };
 
     if (localDev) {

diff --git a/packages/visual-editor/src/internal/puck/components/ThemeHeader.tsx b/packages/visual-editor/src/internal/puck/components/ThemeHeader.tsx
@@ -9,6 +9,7 @@ import { UIButtonsToggle } from "../ui/UIButtonsToggle.tsx";
 import { ClearLocalChangesButton } from "../ui/ClearLocalChangesButton.tsx";
 import { InitialHistory, usePuck } from "@measured/puck";
 import { ThemeData, ThemeHistories } from "../../types/themeData.ts";
+import { RotateCcw, RotateCw } from "lucide-react";
 
 type ThemeHeaderProps = {
   onPublishTheme: () => Promise<void>;
@@ -59,6 +60,40 @@ export const ThemeHeader = (props: ThemeHeaderProps) => {
     }
   }, []);
 
+  const canUndo = (): boolean => {
+    if (!themeHistories) {
+      return false;
+    }
+    return themeHistories.index > 0;
+  };
+
+  const undo = () => {
+    if (!themeHistories) {
+      return;
+    }
+    setThemeHistories({
+      histories: themeHistories.histories,
+      index: themeHistories.index - 1,
+    });
+  };
+
+  const canRedo = (): boolean => {
+    if (!themeHistories) {
+      return false;
+    }
+    return themeHistories.index < themeHistories.histories.length - 1;
+  };
+
+  const redo = () => {
+    if (!themeHistories) {
+      return;
+    }
+    setThemeHistories({
+      histories: themeHistories.histories,
+      index: themeHistories.index + 1,
+    });
+  };
+
   return (
     <header className="puck-header">
       <div className="header-left">
@@ -67,6 +102,25 @@ export const ThemeHeader = (props: ThemeHeaderProps) => {
       </div>
       <div className="header-center"></div>
       <div className="actions">
+        <Button
+          variant="ghost"
+          size="icon"
+          disabled={!canUndo()}
+          onClick={undo}
+          aria-label="Undo"
+        >
+          <RotateCcw className="sm-icon" />
+        </Button>
+
+        <Button
+          variant="ghost"
+          size="icon"
+          disabled={!canRedo()}
+          onClick={redo}
+          aria-label="Redo"
+        >
+          <RotateCw className="sm-icon" />
+        </Button>
         <ClearLocalChangesButton
           modalOpen={clearLocalChangesModalOpen}
           setModalOpen={setClearLocalChangesModalOpen}