@orion-studios/payload-studio 0.6.0-beta.113 → 0.6.0-beta.114

package/dist/builder-v2/client.js

@@ -695,6 +695,51 @@ var syncModelBackgroundToBlock = (model) => {
     })
   });
 };
+var spacingLonghands = [
+  "margin-top",
+  "margin-bottom",
+  "margin-left",
+  "margin-right",
+  "padding-top",
+  "padding-bottom",
+  "padding-left",
+  "padding-right"
+];
+var hasSpacingStyle = (style, property) => Boolean(style[property] || style[property.replace(/-([a-z])/g, (_, char) => char.toUpperCase())]);
+var hoistPreviewSpacingToModel = (view) => {
+  const element = view.el;
+  const preview = element?.querySelector?.(".xo-builder-preview");
+  if (!preview) {
+    return;
+  }
+  const model = view.model;
+  const style = model.getStyle?.() || {};
+  const computed = window.getComputedStyle(preview);
+  const nextStyle = {};
+  spacingLonghands.forEach((property) => {
+    const isPadding = property.startsWith("padding-");
+    if (hasSpacingStyle(style, property) || hasSpacingStyle(style, isPadding ? "padding" : "margin")) {
+      return;
+    }
+    const value = computed.getPropertyValue(property).trim();
+    if (value && (isPadding || value !== "0px")) {
+      nextStyle[property] = value;
+    }
+  });
+  if (Object.keys(nextStyle).length > 0) {
+    model.addStyle?.(nextStyle);
+  }
+  preview.style.margin = "0";
+  preview.style.marginTop = "0";
+  preview.style.marginRight = "0";
+  preview.style.marginBottom = "0";
+  preview.style.marginLeft = "0";
+  preview.style.padding = "0";
+  preview.style.paddingTop = "0";
+  preview.style.paddingRight = "0";
+  preview.style.paddingBottom = "0";
+  preview.style.paddingLeft = "0";
+};
 var previewForDefinition = (definition, props) => definition.editorPreview?.(props) || `<div class="orion-builder-v2-dynamic-placeholder"><strong>${definition.label}</strong></div>`;
 var blockPreviewForDefinition = (type) => {
   const normalizedType = type.replace(/[^a-z0-9-]/gi, "-");
@@ -1032,6 +1077,7 @@ var registerProjectDynamicComponents = (editor, adapter) => {
             this.model.addAttributes?.({ "data-orion-background-color": backgroundColor });
           }
           this.model.components(previewForDefinition(definition, props));
+          hoistPreviewSpacingToModel(this);
           lockPreviewChildren(this.model);
           queueMicrotask(() => bindEditablePreview(this, editor));
         }
@@ -1540,7 +1586,7 @@ var spacingProperties = [
 ];
 var spacingTargetForComponent = (component) => {
   const element = component?.getEl?.();
-  return element?.querySelector?.(".xo-builder-preview") || element || null;
+  return element || null;
 };
 var hasExplicitHorizontalAlign = (block) => {
   const settings = readNestedRecord(block, "settings");

package/dist/builder-v2/client.mjs

@@ -571,6 +571,51 @@ var syncModelBackgroundToBlock = (model) => {
     })
   });
 };
+var spacingLonghands = [
+  "margin-top",
+  "margin-bottom",
+  "margin-left",
+  "margin-right",
+  "padding-top",
+  "padding-bottom",
+  "padding-left",
+  "padding-right"
+];
+var hasSpacingStyle = (style, property) => Boolean(style[property] || style[property.replace(/-([a-z])/g, (_, char) => char.toUpperCase())]);
+var hoistPreviewSpacingToModel = (view) => {
+  const element = view.el;
+  const preview = element?.querySelector?.(".xo-builder-preview");
+  if (!preview) {
+    return;
+  }
+  const model = view.model;
+  const style = model.getStyle?.() || {};
+  const computed = window.getComputedStyle(preview);
+  const nextStyle = {};
+  spacingLonghands.forEach((property) => {
+    const isPadding = property.startsWith("padding-");
+    if (hasSpacingStyle(style, property) || hasSpacingStyle(style, isPadding ? "padding" : "margin")) {
+      return;
+    }
+    const value = computed.getPropertyValue(property).trim();
+    if (value && (isPadding || value !== "0px")) {
+      nextStyle[property] = value;
+    }
+  });
+  if (Object.keys(nextStyle).length > 0) {
+    model.addStyle?.(nextStyle);
+  }
+  preview.style.margin = "0";
+  preview.style.marginTop = "0";
+  preview.style.marginRight = "0";
+  preview.style.marginBottom = "0";
+  preview.style.marginLeft = "0";
+  preview.style.padding = "0";
+  preview.style.paddingTop = "0";
+  preview.style.paddingRight = "0";
+  preview.style.paddingBottom = "0";
+  preview.style.paddingLeft = "0";
+};
 var previewForDefinition = (definition, props) => definition.editorPreview?.(props) || `<div class="orion-builder-v2-dynamic-placeholder"><strong>${definition.label}</strong></div>`;
 var blockPreviewForDefinition = (type) => {
   const normalizedType = type.replace(/[^a-z0-9-]/gi, "-");
@@ -908,6 +953,7 @@ var registerProjectDynamicComponents = (editor, adapter) => {
             this.model.addAttributes?.({ "data-orion-background-color": backgroundColor });
           }
           this.model.components(previewForDefinition(definition, props));
+          hoistPreviewSpacingToModel(this);
           lockPreviewChildren(this.model);
           queueMicrotask(() => bindEditablePreview(this, editor));
         }
@@ -1416,7 +1462,7 @@ var spacingProperties = [
 ];
 var spacingTargetForComponent = (component) => {
   const element = component?.getEl?.();
-  return element?.querySelector?.(".xo-builder-preview") || element || null;
+  return element || null;
 };
 var hasExplicitHorizontalAlign = (block) => {
   const settings = readNestedRecord(block, "settings");

package/package.json

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