@orion-studios/payload-studio 0.6.0-beta.52 → 0.6.0-beta.54

package/dist/admin/index.mjs

@@ -7,14 +7,14 @@ import {
   socialMediaConnectionsField,
   themePreferenceField,
   withTooltips
-} from "../chunk-JC3UV74N.mjs";
-import "../chunk-W2UOCJDX.mjs";
+} from "../chunk-KHK6RTGC.mjs";
 import {
   SOCIAL_MEDIA_DEFAULT_ICON_BY_PLATFORM,
   SOCIAL_MEDIA_ICON_OPTIONS,
   SOCIAL_MEDIA_PLATFORMS,
   SOCIAL_MEDIA_PLATFORM_LABELS
 } from "../chunk-ZTXJG4K5.mjs";
+import "../chunk-W2UOCJDX.mjs";
 import "../chunk-6BWS3CLP.mjs";
 export {
   SOCIAL_MEDIA_DEFAULT_ICON_BY_PLATFORM,

package/dist/builder-v2/client.js

@@ -604,6 +604,7 @@ var decodeHtmlAttribute2 = (value) => {
   return decoded;
 };
 var attrToPropName = (name) => name.replace(/^data-orion-/, "").replace(/^data-/, "").replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+var propToAttrName = (name) => `data-orion-${name.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`)}`;
 var propsFromAttributes = (attributes = {}) => {
   const props = {};
   Object.keys(attributes).forEach((name) => {
@@ -627,6 +628,142 @@ var propsFromAttributes = (attributes = {}) => {
   return props;
 };
 var previewForDefinition = (definition, props) => definition.editorPreview?.(props) || `<div class="orion-builder-v2-dynamic-placeholder"><strong>${definition.label}</strong></div>`;
+var lockPreviewChildren = (component) => {
+  const children = typeof component.components === "function" ? component.components() : null;
+  const childList = children && typeof children === "object" && "forEach" in children ? children : null;
+  childList?.forEach((child) => {
+    if (typeof child.set === "function") {
+      child.set({
+        copyable: false,
+        draggable: false,
+        droppable: false,
+        editable: false,
+        highlightable: false,
+        hoverable: false,
+        removable: false,
+        selectable: false
+      });
+    }
+    lockPreviewChildren(child);
+  });
+};
+var parseJsonArray = (value) => {
+  const decoded = decodeHtmlAttribute2(value);
+  if (!decoded) {
+    return [];
+  }
+  try {
+    const parsed = JSON.parse(decoded);
+    return Array.isArray(parsed) ? parsed.filter((item) => Boolean(item && typeof item === "object" && !Array.isArray(item))) : [];
+  } catch {
+    return [];
+  }
+};
+var updateJsonListAttribute = ({
+  field,
+  index,
+  listAttr,
+  model,
+  value
+}) => {
+  const attrs = model.getAttributes?.() || {};
+  const list = parseJsonArray(attrs[listAttr]);
+  if (!list[index]) {
+    return;
+  }
+  list[index] = {
+    ...list[index],
+    [field]: value
+  };
+  model.addAttributes?.({
+    [listAttr]: JSON.stringify(list)
+  });
+};
+var chooseAsset = (editor, callback) => {
+  const assetManager = editor?.AssetManager;
+  if (!assetManager?.open) {
+    const src = window.prompt("Image URL");
+    if (src) {
+      callback(src);
+    }
+    return;
+  }
+  assetManager.open({
+    select(asset) {
+      const src = typeof asset === "string" ? asset : asset && typeof asset === "object" && "get" in asset && typeof asset.get === "function" ? String(asset.get("src") || "") : asset && typeof asset === "object" && "src" in asset ? String(asset.src || "") : "";
+      if (src) {
+        callback(src);
+      }
+      assetManager.close?.();
+    }
+  });
+};
+var bindEditablePreview = (view, editor) => {
+  const root = view.el;
+  if (!root) {
+    return;
+  }
+  root.querySelectorAll("[data-orion-edit-field]").forEach((element) => {
+    const field = element.dataset.orionEditField || "";
+    const listName = element.dataset.orionEditList || "";
+    const listIndex = Number(element.dataset.orionEditIndex);
+    const attrName = listName ? propToAttrName(listName) : propToAttrName(field);
+    const isImage = element.dataset.orionEditKind === "image" || element instanceof HTMLImageElement;
+    element.setAttribute("title", isImage ? "Click to replace image" : "Click and type to edit");
+    element.style.cursor = "text";
+    element.addEventListener("click", (event) => {
+      event.stopPropagation();
+      editor.select?.(view.model);
+      if (!isImage) {
+        return;
+      }
+      element.style.cursor = "pointer";
+      chooseAsset(editor, (src) => {
+        if (listName && Number.isInteger(listIndex)) {
+          updateJsonListAttribute({
+            field,
+            index: listIndex,
+            listAttr: attrName,
+            model: view.model,
+            value: src
+          });
+          return;
+        }
+        view.model.addAttributes?.({
+          [attrName]: src
+        });
+      });
+    });
+    if (isImage) {
+      return;
+    }
+    element.setAttribute("contenteditable", "true");
+    element.setAttribute("spellcheck", "true");
+    const commit = () => {
+      const value = element.innerText.trim();
+      if (listName && Number.isInteger(listIndex)) {
+        updateJsonListAttribute({
+          field,
+          index: listIndex,
+          listAttr: attrName,
+          model: view.model,
+          value
+        });
+        return;
+      }
+      view.model.addAttributes?.({
+        [attrName]: value
+      });
+    };
+    element.addEventListener("blur", commit);
+    element.addEventListener("keydown", (event) => {
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        element.blur();
+      }
+    });
+  });
+};
 var registerProjectDynamicComponents = (editor, adapter) => {
   const components = adapter?.components || {};
   Object.keys(components).forEach((type) => {
@@ -669,6 +806,8 @@ var registerProjectDynamicComponents = (editor, adapter) => {
           const attributes = this.model.getAttributes?.() || {};
           const props = propsFromAttributes(attributes);
           this.model.components(previewForDefinition(definition, props));
+          lockPreviewChildren(this.model);
+          queueMicrotask(() => bindEditablePreview(this, editor));
         }
       }
     });

package/dist/builder-v2/client.mjs

@@ -480,6 +480,7 @@ var decodeHtmlAttribute2 = (value) => {
   return decoded;
 };
 var attrToPropName = (name) => name.replace(/^data-orion-/, "").replace(/^data-/, "").replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+var propToAttrName = (name) => `data-orion-${name.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`)}`;
 var propsFromAttributes = (attributes = {}) => {
   const props = {};
   Object.keys(attributes).forEach((name) => {
@@ -503,6 +504,142 @@ var propsFromAttributes = (attributes = {}) => {
   return props;
 };
 var previewForDefinition = (definition, props) => definition.editorPreview?.(props) || `<div class="orion-builder-v2-dynamic-placeholder"><strong>${definition.label}</strong></div>`;
+var lockPreviewChildren = (component) => {
+  const children = typeof component.components === "function" ? component.components() : null;
+  const childList = children && typeof children === "object" && "forEach" in children ? children : null;
+  childList?.forEach((child) => {
+    if (typeof child.set === "function") {
+      child.set({
+        copyable: false,
+        draggable: false,
+        droppable: false,
+        editable: false,
+        highlightable: false,
+        hoverable: false,
+        removable: false,
+        selectable: false
+      });
+    }
+    lockPreviewChildren(child);
+  });
+};
+var parseJsonArray = (value) => {
+  const decoded = decodeHtmlAttribute2(value);
+  if (!decoded) {
+    return [];
+  }
+  try {
+    const parsed = JSON.parse(decoded);
+    return Array.isArray(parsed) ? parsed.filter((item) => Boolean(item && typeof item === "object" && !Array.isArray(item))) : [];
+  } catch {
+    return [];
+  }
+};
+var updateJsonListAttribute = ({
+  field,
+  index,
+  listAttr,
+  model,
+  value
+}) => {
+  const attrs = model.getAttributes?.() || {};
+  const list = parseJsonArray(attrs[listAttr]);
+  if (!list[index]) {
+    return;
+  }
+  list[index] = {
+    ...list[index],
+    [field]: value
+  };
+  model.addAttributes?.({
+    [listAttr]: JSON.stringify(list)
+  });
+};
+var chooseAsset = (editor, callback) => {
+  const assetManager = editor?.AssetManager;
+  if (!assetManager?.open) {
+    const src = window.prompt("Image URL");
+    if (src) {
+      callback(src);
+    }
+    return;
+  }
+  assetManager.open({
+    select(asset) {
+      const src = typeof asset === "string" ? asset : asset && typeof asset === "object" && "get" in asset && typeof asset.get === "function" ? String(asset.get("src") || "") : asset && typeof asset === "object" && "src" in asset ? String(asset.src || "") : "";
+      if (src) {
+        callback(src);
+      }
+      assetManager.close?.();
+    }
+  });
+};
+var bindEditablePreview = (view, editor) => {
+  const root = view.el;
+  if (!root) {
+    return;
+  }
+  root.querySelectorAll("[data-orion-edit-field]").forEach((element) => {
+    const field = element.dataset.orionEditField || "";
+    const listName = element.dataset.orionEditList || "";
+    const listIndex = Number(element.dataset.orionEditIndex);
+    const attrName = listName ? propToAttrName(listName) : propToAttrName(field);
+    const isImage = element.dataset.orionEditKind === "image" || element instanceof HTMLImageElement;
+    element.setAttribute("title", isImage ? "Click to replace image" : "Click and type to edit");
+    element.style.cursor = "text";
+    element.addEventListener("click", (event) => {
+      event.stopPropagation();
+      editor.select?.(view.model);
+      if (!isImage) {
+        return;
+      }
+      element.style.cursor = "pointer";
+      chooseAsset(editor, (src) => {
+        if (listName && Number.isInteger(listIndex)) {
+          updateJsonListAttribute({
+            field,
+            index: listIndex,
+            listAttr: attrName,
+            model: view.model,
+            value: src
+          });
+          return;
+        }
+        view.model.addAttributes?.({
+          [attrName]: src
+        });
+      });
+    });
+    if (isImage) {
+      return;
+    }
+    element.setAttribute("contenteditable", "true");
+    element.setAttribute("spellcheck", "true");
+    const commit = () => {
+      const value = element.innerText.trim();
+      if (listName && Number.isInteger(listIndex)) {
+        updateJsonListAttribute({
+          field,
+          index: listIndex,
+          listAttr: attrName,
+          model: view.model,
+          value
+        });
+        return;
+      }
+      view.model.addAttributes?.({
+        [attrName]: value
+      });
+    };
+    element.addEventListener("blur", commit);
+    element.addEventListener("keydown", (event) => {
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        element.blur();
+      }
+    });
+  });
+};
 var registerProjectDynamicComponents = (editor, adapter) => {
   const components = adapter?.components || {};
   Object.keys(components).forEach((type) => {
@@ -545,6 +682,8 @@ var registerProjectDynamicComponents = (editor, adapter) => {
           const attributes = this.model.getAttributes?.() || {};
           const props = propsFromAttributes(attributes);
           this.model.components(previewForDefinition(definition, props));
+          lockPreviewChildren(this.model);
+          queueMicrotask(() => bindEditablePreview(this, editor));
         }
       }
     });

package/dist/index.mjs

@@ -1,25 +1,25 @@
 import {
   admin_exports
-} from "./chunk-JC3UV74N.mjs";
-import {
-  admin_app_exports
-} from "./chunk-RKTIFEUY.mjs";
-import "./chunk-W2UOCJDX.mjs";
-import {
-  blocks_exports
-} from "./chunk-JQAHXYAM.mjs";
+} from "./chunk-KHK6RTGC.mjs";
 import {
   nextjs_exports
 } from "./chunk-ZADL33R6.mjs";
 import "./chunk-ZTXJG4K5.mjs";
 import {
   studio_pages_exports
-} from "./chunk-NGLIA2OE.mjs";
-import "./chunk-OQSEJXC4.mjs";
+} from "./chunk-7HME6R2V.mjs";
 import "./chunk-7ZMXZRBP.mjs";
 import {
   studio_exports
 } from "./chunk-ADIIWIYL.mjs";
+import {
+  blocks_exports
+} from "./chunk-JQAHXYAM.mjs";
+import "./chunk-OQSEJXC4.mjs";
+import {
+  admin_app_exports
+} from "./chunk-RKTIFEUY.mjs";
+import "./chunk-W2UOCJDX.mjs";
 import "./chunk-6BWS3CLP.mjs";
 export {
   admin_exports as admin,

package/dist/studio-pages/index.mjs

@@ -7,8 +7,7 @@ import {
   pageStudioModuleManifest,
   resolveBuilderThemeTokens,
   toEditorInitialDoc
-} from "../chunk-NGLIA2OE.mjs";
-import "../chunk-OQSEJXC4.mjs";
+} from "../chunk-7HME6R2V.mjs";
 import {
   createDefaultStudioDocument,
   defaultBuilderThemeTokens,
@@ -16,6 +15,7 @@ import {
   studioDocumentToLayout
 } from "../chunk-7ZMXZRBP.mjs";
 import "../chunk-ADIIWIYL.mjs";
+import "../chunk-OQSEJXC4.mjs";
 import "../chunk-6BWS3CLP.mjs";
 export {
   createDefaultStudioDocument,

package/package.json

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

package/dist/{chunk-NGLIA2OE.mjs → chunk-7HME6R2V.mjs}

@@ -1,6 +1,3 @@
-import {
-  sectionStyleDefaults
-} from "./chunk-OQSEJXC4.mjs";
 import {
   createDefaultStudioDocument,
   defaultBuilderThemeTokens,
@@ -14,6 +11,9 @@ import {
   createEmptyStudioDocument,
   validateStudioDocument
 } from "./chunk-ADIIWIYL.mjs";
+import {
+  sectionStyleDefaults
+} from "./chunk-OQSEJXC4.mjs";
 import {
   __export
 } from "./chunk-6BWS3CLP.mjs";

package/dist/{chunk-JC3UV74N.mjs → chunk-KHK6RTGC.mjs}

@@ -1,12 +1,12 @@
-import {
-  adminNavIcons
-} from "./chunk-W2UOCJDX.mjs";
 import {
   SOCIAL_MEDIA_DEFAULT_ICON_BY_PLATFORM,
   SOCIAL_MEDIA_ICON_OPTIONS,
   SOCIAL_MEDIA_PLATFORMS,
   SOCIAL_MEDIA_PLATFORM_LABELS
 } from "./chunk-ZTXJG4K5.mjs";
+import {
+  adminNavIcons
+} from "./chunk-W2UOCJDX.mjs";
 import {
   __export,
   __require