@orion-studios/payload-studio 0.6.0-beta.120 → 0.6.0-beta.121

package/dist/builder-v2/client.js

@@ -2115,6 +2115,7 @@ function GrapesPageEditor({
     }
     return null;
   };
+  const isOrionBlockComponent = (component) => Object.keys(parseOrionBlockAttribute(component?.getAttributes?.()?.["data-orion-block"])).length > 0;
   const findSelectedCanvasOrionBlock = () => {
     const editor = editorRef.current;
     const wrapper = editor?.DomComponents?.getWrapper?.() || null;
@@ -2597,9 +2598,14 @@ function GrapesPageEditor({
     if (!component) {
       return null;
     }
+    const parent = component.parent?.();
+    const collection = parent?.components?.();
+    const index = typeof collection?.indexOf === "function" ? collection.indexOf(component) : void 0;
     return {
       attributes: { ...component.getAttributes?.() || {} },
       component,
+      index,
+      parent,
       style: { ...component.getStyle?.() || {} }
     };
   };
@@ -2611,12 +2617,31 @@ function GrapesPageEditor({
     return snapshot;
   };
   const getPreviousComponentSnapshot = (component) => component ? lastComponentSnapshotRef.current.get(component) || snapshotComponent(component) : null;
+  const isComponentAttached = (component) => Boolean(component.parent?.());
+  const addComponentFromSnapshot = (snapshot) => {
+    const parent = snapshot.parent;
+    if (isComponentAttached(snapshot.component) || !parent?.components) {
+      return;
+    }
+    parent.components?.().add?.(snapshot.component, { at: snapshot.index });
+  };
+  const removeComponentFromSnapshot = (snapshot) => {
+    ;
+    snapshot.component.remove?.();
+  };
   const restoreComponentSnapshot = (snapshot) => {
+    addComponentFromSnapshot(snapshot);
     const currentStyle = snapshot.component.getStyle?.() || {};
+    const currentAttributes = snapshot.component.getAttributes?.() || {};
+    const staleAttributes = Object.keys(currentAttributes).filter((key) => !(key in snapshot.attributes));
     snapshot.component.addStyle?.({
       ...Object.fromEntries(Object.keys(currentStyle).map((key) => [key, ""])),
       ...Object.fromEntries(Object.entries(snapshot.style).map(([key, value]) => [key, String(value)]))
     });
+    if (staleAttributes.length > 0) {
+      ;
+      snapshot.component.removeAttributes?.(staleAttributes);
+    }
     snapshot.component.addAttributes?.({ ...snapshot.attributes });
     selectedComponentRef.current = snapshot.component;
     lastSelectedComponentRef.current = snapshot.component;
@@ -2625,16 +2650,33 @@ function GrapesPageEditor({
     lastComponentSnapshotRef.current.set(snapshot.component, snapshot);
     refreshSelectedState(snapshot.component);
   };
+  const restoreCustomHistoryEntry = (entry, target) => {
+    const snapshot = entry[target];
+    const otherSnapshot = target === "before" ? entry.after : entry.before;
+    if (!snapshot) {
+      if (otherSnapshot) {
+        removeComponentFromSnapshot(otherSnapshot);
+      }
+      refreshSelectedState(null);
+      return;
+    }
+    restoreComponentSnapshot(snapshot);
+  };
   const pushCustomHistoryEntry = (before, after) => {
-    if (!before || !after || before.component !== after.component) {
+    if (!before && !after) {
+      return;
+    }
+    if (before && after && before.component !== after.component) {
       return;
     }
-    if (JSON.stringify(before.style) === JSON.stringify(after.style) && JSON.stringify(before.attributes) === JSON.stringify(after.attributes)) {
+    if (before && after && JSON.stringify(before.style) === JSON.stringify(after.style) && JSON.stringify(before.attributes) === JSON.stringify(after.attributes)) {
       return;
     }
     customUndoStackRef.current.push({ after, before });
     customRedoStackRef.current = [];
-    lastComponentSnapshotRef.current.set(after.component, after);
+    if (after) {
+      lastComponentSnapshotRef.current.set(after.component, after);
+    }
     if (customUndoStackRef.current.length > 100) {
       customUndoStackRef.current.shift();
     }
@@ -2666,7 +2708,7 @@ function GrapesPageEditor({
     const customEntry = action === "undo" ? customUndoStackRef.current.pop() : customRedoStackRef.current.pop();
     if (customEntry) {
       historyRestoreActiveRef.current = true;
-      restoreComponentSnapshot(action === "undo" ? customEntry.before : customEntry.after);
+      restoreCustomHistoryEntry(customEntry, action === "undo" ? "before" : "after");
       if (action === "undo") {
         customRedoStackRef.current.push(customEntry);
       } else {
@@ -2932,6 +2974,21 @@ function GrapesPageEditor({
             }
           );
         });
+        editor.on("component:add", (component) => {
+          if (historyRestoreActiveRef.current) {
+            return;
+          }
+          const typed = component;
+          if (!isOrionBlockComponent(typed)) {
+            return;
+          }
+          window.setTimeout(() => {
+            if (historyRestoreActiveRef.current) {
+              return;
+            }
+            pushCustomHistoryEntry(null, snapshotComponent(typed));
+          }, 0);
+        });
         editor.on("component:selected", (component) => {
           const typed = component;
           const target = getCurrentOrionBlockTarget(typed) || typed;

package/dist/builder-v2/client.mjs

@@ -1991,6 +1991,7 @@ function GrapesPageEditor({
     }
     return null;
   };
+  const isOrionBlockComponent = (component) => Object.keys(parseOrionBlockAttribute(component?.getAttributes?.()?.["data-orion-block"])).length > 0;
   const findSelectedCanvasOrionBlock = () => {
     const editor = editorRef.current;
     const wrapper = editor?.DomComponents?.getWrapper?.() || null;
@@ -2473,9 +2474,14 @@ function GrapesPageEditor({
     if (!component) {
       return null;
     }
+    const parent = component.parent?.();
+    const collection = parent?.components?.();
+    const index = typeof collection?.indexOf === "function" ? collection.indexOf(component) : void 0;
     return {
       attributes: { ...component.getAttributes?.() || {} },
       component,
+      index,
+      parent,
       style: { ...component.getStyle?.() || {} }
     };
   };
@@ -2487,12 +2493,31 @@ function GrapesPageEditor({
     return snapshot;
   };
   const getPreviousComponentSnapshot = (component) => component ? lastComponentSnapshotRef.current.get(component) || snapshotComponent(component) : null;
+  const isComponentAttached = (component) => Boolean(component.parent?.());
+  const addComponentFromSnapshot = (snapshot) => {
+    const parent = snapshot.parent;
+    if (isComponentAttached(snapshot.component) || !parent?.components) {
+      return;
+    }
+    parent.components?.().add?.(snapshot.component, { at: snapshot.index });
+  };
+  const removeComponentFromSnapshot = (snapshot) => {
+    ;
+    snapshot.component.remove?.();
+  };
   const restoreComponentSnapshot = (snapshot) => {
+    addComponentFromSnapshot(snapshot);
     const currentStyle = snapshot.component.getStyle?.() || {};
+    const currentAttributes = snapshot.component.getAttributes?.() || {};
+    const staleAttributes = Object.keys(currentAttributes).filter((key) => !(key in snapshot.attributes));
     snapshot.component.addStyle?.({
       ...Object.fromEntries(Object.keys(currentStyle).map((key) => [key, ""])),
       ...Object.fromEntries(Object.entries(snapshot.style).map(([key, value]) => [key, String(value)]))
     });
+    if (staleAttributes.length > 0) {
+      ;
+      snapshot.component.removeAttributes?.(staleAttributes);
+    }
     snapshot.component.addAttributes?.({ ...snapshot.attributes });
     selectedComponentRef.current = snapshot.component;
     lastSelectedComponentRef.current = snapshot.component;
@@ -2501,16 +2526,33 @@ function GrapesPageEditor({
     lastComponentSnapshotRef.current.set(snapshot.component, snapshot);
     refreshSelectedState(snapshot.component);
   };
+  const restoreCustomHistoryEntry = (entry, target) => {
+    const snapshot = entry[target];
+    const otherSnapshot = target === "before" ? entry.after : entry.before;
+    if (!snapshot) {
+      if (otherSnapshot) {
+        removeComponentFromSnapshot(otherSnapshot);
+      }
+      refreshSelectedState(null);
+      return;
+    }
+    restoreComponentSnapshot(snapshot);
+  };
   const pushCustomHistoryEntry = (before, after) => {
-    if (!before || !after || before.component !== after.component) {
+    if (!before && !after) {
+      return;
+    }
+    if (before && after && before.component !== after.component) {
       return;
     }
-    if (JSON.stringify(before.style) === JSON.stringify(after.style) && JSON.stringify(before.attributes) === JSON.stringify(after.attributes)) {
+    if (before && after && JSON.stringify(before.style) === JSON.stringify(after.style) && JSON.stringify(before.attributes) === JSON.stringify(after.attributes)) {
       return;
     }
     customUndoStackRef.current.push({ after, before });
     customRedoStackRef.current = [];
-    lastComponentSnapshotRef.current.set(after.component, after);
+    if (after) {
+      lastComponentSnapshotRef.current.set(after.component, after);
+    }
     if (customUndoStackRef.current.length > 100) {
       customUndoStackRef.current.shift();
     }
@@ -2542,7 +2584,7 @@ function GrapesPageEditor({
     const customEntry = action === "undo" ? customUndoStackRef.current.pop() : customRedoStackRef.current.pop();
     if (customEntry) {
       historyRestoreActiveRef.current = true;
-      restoreComponentSnapshot(action === "undo" ? customEntry.before : customEntry.after);
+      restoreCustomHistoryEntry(customEntry, action === "undo" ? "before" : "after");
       if (action === "undo") {
         customRedoStackRef.current.push(customEntry);
       } else {
@@ -2808,6 +2850,21 @@ function GrapesPageEditor({
             }
           );
         });
+        editor.on("component:add", (component) => {
+          if (historyRestoreActiveRef.current) {
+            return;
+          }
+          const typed = component;
+          if (!isOrionBlockComponent(typed)) {
+            return;
+          }
+          window.setTimeout(() => {
+            if (historyRestoreActiveRef.current) {
+              return;
+            }
+            pushCustomHistoryEntry(null, snapshotComponent(typed));
+          }, 0);
+        });
         editor.on("component:selected", (component) => {
           const typed = component;
           const target = getCurrentOrionBlockTarget(typed) || typed;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.6.0-beta.120",
+  "version": "0.6.0-beta.121",
   "description": "Base CMS, builder, and custom admin toolkit for Orion Studios websites",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",