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

package/dist/builder-v2/client.js

@@ -823,10 +823,16 @@ var updateJsonListAttribute = ({
     [listAttr]: JSON.stringify(list)
   });
 };
-var snapshotModel = (model) => ({
-  attributes: { ...model.getAttributes?.() || {} },
-  style: { ...model.getStyle?.() || {} }
-});
+var snapshotModel = (model, emptyListAttr) => {
+  const attributes = { ...model.getAttributes?.() || {} };
+  if (emptyListAttr && !attributes[emptyListAttr]) {
+    attributes[emptyListAttr] = "[]";
+  }
+  return {
+    attributes,
+    style: { ...model.getStyle?.() || {} }
+  };
+};
 var pushModelHistory = ({
   after,
   before,
@@ -956,10 +962,10 @@ var bindEditablePreview = (view, editor) => {
       if (!listAttr) {
         return;
       }
-      const before = snapshotModel(view.model);
+      const before = snapshotModel(view.model, listAttr);
       const runListMutation = (callback) => {
         withoutUndoTracking(editor, callback);
-        const after = snapshotModel(view.model);
+        const after = snapshotModel(view.model, listAttr);
         if (JSON.stringify(before) !== JSON.stringify(after)) {
           pushModelHistory({
             after,
@@ -2115,6 +2121,7 @@ function GrapesPageEditor({
     }
     return null;
   };
+  const isOrionBlockComponent = (component) => Boolean(component?.getAttributes?.()?.["data-orion-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 +2604,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 +2623,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 +2656,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 (JSON.stringify(before.style) === JSON.stringify(after.style) && JSON.stringify(before.attributes) === JSON.stringify(after.attributes)) {
+    if (before && after && before.component !== after.component) {
+      return;
+    }
+    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 +2714,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 +2980,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

@@ -699,10 +699,16 @@ var updateJsonListAttribute = ({
     [listAttr]: JSON.stringify(list)
   });
 };
-var snapshotModel = (model) => ({
-  attributes: { ...model.getAttributes?.() || {} },
-  style: { ...model.getStyle?.() || {} }
-});
+var snapshotModel = (model, emptyListAttr) => {
+  const attributes = { ...model.getAttributes?.() || {} };
+  if (emptyListAttr && !attributes[emptyListAttr]) {
+    attributes[emptyListAttr] = "[]";
+  }
+  return {
+    attributes,
+    style: { ...model.getStyle?.() || {} }
+  };
+};
 var pushModelHistory = ({
   after,
   before,
@@ -832,10 +838,10 @@ var bindEditablePreview = (view, editor) => {
       if (!listAttr) {
         return;
       }
-      const before = snapshotModel(view.model);
+      const before = snapshotModel(view.model, listAttr);
       const runListMutation = (callback) => {
         withoutUndoTracking(editor, callback);
-        const after = snapshotModel(view.model);
+        const after = snapshotModel(view.model, listAttr);
         if (JSON.stringify(before) !== JSON.stringify(after)) {
           pushModelHistory({
             after,
@@ -1991,6 +1997,7 @@ function GrapesPageEditor({
     }
     return null;
   };
+  const isOrionBlockComponent = (component) => Boolean(component?.getAttributes?.()?.["data-orion-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 +2480,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 +2499,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 +2532,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 (JSON.stringify(before.style) === JSON.stringify(after.style) && JSON.stringify(before.attributes) === JSON.stringify(after.attributes)) {
+    if (before && after && before.component !== after.component) {
+      return;
+    }
+    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 +2590,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 +2856,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.122",
   "description": "Base CMS, builder, and custom admin toolkit for Orion Studios websites",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",