@orion-studios/payload-studio 0.6.0-beta.53 → 0.6.0-beta.55

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) => {
@@ -646,6 +647,131 @@ var lockPreviewChildren = (component) => {
     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, currentSrc, callback) => {
+  const assetManager = editor?.AssetManager;
+  if (!assetManager?.open) {
+    const src = window.prompt("Image URL");
+    if (src) {
+      callback(src);
+    }
+    return;
+  }
+  if (currentSrc) {
+    assetManager.add?.({
+      name: `Current image - ${currentSrc.split("/").pop() || currentSrc}`,
+      src: currentSrc,
+      type: "image"
+    });
+  }
+  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";
+      const currentSrc = element instanceof HTMLImageElement ? element.currentSrc || element.src || "" : element.style.backgroundImage.replace(/^url\(["']?/, "").replace(/["']?\)$/, "");
+      chooseAsset(editor, currentSrc, (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) => {
@@ -689,6 +815,7 @@ var registerProjectDynamicComponents = (editor, adapter) => {
           const props = propsFromAttributes(attributes);
           this.model.components(previewForDefinition(definition, props));
           lockPreviewChildren(this.model);
+          queueMicrotask(() => bindEditablePreview(this, editor));
         }
       }
     });
@@ -739,10 +866,58 @@ var getRelationID = (value) => {
   const id = value.id;
   return typeof id === "number" || typeof id === "string" ? id : null;
 };
+var normalizeAssetSrc = (value) => {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return "";
+  }
+  if (/^(https?:)?\/\//i.test(trimmed) || trimmed.startsWith("/")) {
+    return trimmed;
+  }
+  return `/${trimmed}`;
+};
+var mediaDocImageCandidates = (doc) => {
+  const candidates = [];
+  if (doc.sizes && typeof doc.sizes === "object") {
+    Object.values(doc.sizes).forEach((size) => {
+      if (size?.url) {
+        candidates.push({ src: normalizeAssetSrc(size.url), width: size.width });
+      } else if (size?.filename) {
+        candidates.push({ src: `/api/media/file/${encodeURIComponent(size.filename)}`, width: size.width });
+      }
+    });
+  }
+  if (typeof doc.thumbnailURL === "string" && doc.thumbnailURL.length > 0) {
+    candidates.push({ src: normalizeAssetSrc(doc.thumbnailURL), width: 360 });
+  }
+  if (typeof doc.url === "string" && doc.url.length > 0) {
+    candidates.push({ src: normalizeAssetSrc(doc.url), width: doc.width });
+  }
+  if (typeof doc.filename === "string" && doc.filename.length > 0) {
+    candidates.push({ src: `/api/media/file/${encodeURIComponent(doc.filename)}`, width: doc.width });
+  }
+  return candidates.filter((candidate, index, all) => candidate.src && all.findIndex((item) => item.src === candidate.src) === index);
+};
+var pickMediaAssetSrc = (doc) => {
+  const candidates = mediaDocImageCandidates(doc);
+  if (candidates.length === 0) {
+    return "";
+  }
+  const absolute = candidates.find((candidate) => /^(https?:)?\/\//i.test(candidate.src));
+  if (absolute) {
+    return absolute.src;
+  }
+  const fullSize = candidates.find((candidate) => candidate.src === doc.url);
+  if (fullSize) {
+    return fullSize.src;
+  }
+  const widest = [...candidates].sort((left, right) => (right.width || 0) - (left.width || 0))[0];
+  return widest?.src || candidates[0]?.src || "";
+};
 var mediaDocToAsset = (doc) => {
   const id = getRelationID(doc);
   const filename = typeof doc.filename === "string" ? doc.filename : "";
-  const src = typeof doc.url === "string" && doc.url.length > 0 ? doc.url : filename ? `/api/media/file/${encodeURIComponent(filename)}` : "";
+  const src = pickMediaAssetSrc(doc);
   if (id === null || !src) {
     return null;
   }
@@ -754,6 +929,26 @@ var mediaDocToAsset = (doc) => {
     type: "image"
   };
 };
+var imageCanLoad = (src) => new Promise((resolve) => {
+  if (!src) {
+    resolve(false);
+    return;
+  }
+  const image = new Image();
+  image.onload = () => resolve(true);
+  image.onerror = () => resolve(false);
+  image.src = src;
+});
+var pruneBrokenImageAssets = async (editor) => {
+  const assetManager = editor.AssetManager;
+  const existingAssets = assetManager.getAll?.() || [];
+  for (const asset of existingAssets) {
+    const src = typeof asset.get === "function" ? String(asset.get("src") || "") : "";
+    if (src && !await imageCanLoad(src)) {
+      assetManager.remove?.(asset);
+    }
+  }
+};
 var extractUploadedMedia = (value) => {
   const candidate = value && typeof value === "object" && "doc" in value ? value.doc : value;
   if (!candidate || typeof candidate !== "object") {
@@ -768,7 +963,10 @@ var extractUploadedMedia = (value) => {
     alt: typeof typed.alt === "string" ? typed.alt : "",
     filename: typeof typed.filename === "string" ? typed.filename : "",
     id,
-    url: typeof typed.url === "string" ? typed.url : ""
+    sizes: typed.sizes && typeof typed.sizes === "object" ? typed.sizes : void 0,
+    thumbnailURL: typeof typed.thumbnailURL === "string" ? typed.thumbnailURL : "",
+    url: typeof typed.url === "string" ? typed.url : "",
+    width: typeof typed.width === "number" ? typed.width : void 0
   };
 };
 var loadPayloadMediaAssets = async (editor) => {
@@ -780,8 +978,17 @@ var loadPayloadMediaAssets = async (editor) => {
     return;
   }
   const json = await response.json();
-  const assets = (Array.isArray(json.docs) ? json.docs : []).map((doc) => mediaDocToAsset(doc)).filter((asset) => asset !== null);
-  editor.AssetManager.add(assets);
+  const candidateAssets = (Array.isArray(json.docs) ? json.docs : []).map((doc) => mediaDocToAsset(doc)).filter((asset) => asset !== null);
+  const assets = [];
+  for (const asset of candidateAssets) {
+    if (await imageCanLoad(asset.src)) {
+      assets.push(asset);
+    }
+  }
+  if (assets.length > 0) {
+    editor.AssetManager.add(assets);
+  }
+  await pruneBrokenImageAssets(editor);
 };
 var uploadPayloadMediaAssets = async (editor, files) => {
   const fileArray = Array.from(files);

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) => {
@@ -522,6 +523,131 @@ var lockPreviewChildren = (component) => {
     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, currentSrc, callback) => {
+  const assetManager = editor?.AssetManager;
+  if (!assetManager?.open) {
+    const src = window.prompt("Image URL");
+    if (src) {
+      callback(src);
+    }
+    return;
+  }
+  if (currentSrc) {
+    assetManager.add?.({
+      name: `Current image - ${currentSrc.split("/").pop() || currentSrc}`,
+      src: currentSrc,
+      type: "image"
+    });
+  }
+  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";
+      const currentSrc = element instanceof HTMLImageElement ? element.currentSrc || element.src || "" : element.style.backgroundImage.replace(/^url\(["']?/, "").replace(/["']?\)$/, "");
+      chooseAsset(editor, currentSrc, (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) => {
@@ -565,6 +691,7 @@ var registerProjectDynamicComponents = (editor, adapter) => {
           const props = propsFromAttributes(attributes);
           this.model.components(previewForDefinition(definition, props));
           lockPreviewChildren(this.model);
+          queueMicrotask(() => bindEditablePreview(this, editor));
         }
       }
     });
@@ -615,10 +742,58 @@ var getRelationID = (value) => {
   const id = value.id;
   return typeof id === "number" || typeof id === "string" ? id : null;
 };
+var normalizeAssetSrc = (value) => {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return "";
+  }
+  if (/^(https?:)?\/\//i.test(trimmed) || trimmed.startsWith("/")) {
+    return trimmed;
+  }
+  return `/${trimmed}`;
+};
+var mediaDocImageCandidates = (doc) => {
+  const candidates = [];
+  if (doc.sizes && typeof doc.sizes === "object") {
+    Object.values(doc.sizes).forEach((size) => {
+      if (size?.url) {
+        candidates.push({ src: normalizeAssetSrc(size.url), width: size.width });
+      } else if (size?.filename) {
+        candidates.push({ src: `/api/media/file/${encodeURIComponent(size.filename)}`, width: size.width });
+      }
+    });
+  }
+  if (typeof doc.thumbnailURL === "string" && doc.thumbnailURL.length > 0) {
+    candidates.push({ src: normalizeAssetSrc(doc.thumbnailURL), width: 360 });
+  }
+  if (typeof doc.url === "string" && doc.url.length > 0) {
+    candidates.push({ src: normalizeAssetSrc(doc.url), width: doc.width });
+  }
+  if (typeof doc.filename === "string" && doc.filename.length > 0) {
+    candidates.push({ src: `/api/media/file/${encodeURIComponent(doc.filename)}`, width: doc.width });
+  }
+  return candidates.filter((candidate, index, all) => candidate.src && all.findIndex((item) => item.src === candidate.src) === index);
+};
+var pickMediaAssetSrc = (doc) => {
+  const candidates = mediaDocImageCandidates(doc);
+  if (candidates.length === 0) {
+    return "";
+  }
+  const absolute = candidates.find((candidate) => /^(https?:)?\/\//i.test(candidate.src));
+  if (absolute) {
+    return absolute.src;
+  }
+  const fullSize = candidates.find((candidate) => candidate.src === doc.url);
+  if (fullSize) {
+    return fullSize.src;
+  }
+  const widest = [...candidates].sort((left, right) => (right.width || 0) - (left.width || 0))[0];
+  return widest?.src || candidates[0]?.src || "";
+};
 var mediaDocToAsset = (doc) => {
   const id = getRelationID(doc);
   const filename = typeof doc.filename === "string" ? doc.filename : "";
-  const src = typeof doc.url === "string" && doc.url.length > 0 ? doc.url : filename ? `/api/media/file/${encodeURIComponent(filename)}` : "";
+  const src = pickMediaAssetSrc(doc);
   if (id === null || !src) {
     return null;
   }
@@ -630,6 +805,26 @@ var mediaDocToAsset = (doc) => {
     type: "image"
   };
 };
+var imageCanLoad = (src) => new Promise((resolve) => {
+  if (!src) {
+    resolve(false);
+    return;
+  }
+  const image = new Image();
+  image.onload = () => resolve(true);
+  image.onerror = () => resolve(false);
+  image.src = src;
+});
+var pruneBrokenImageAssets = async (editor) => {
+  const assetManager = editor.AssetManager;
+  const existingAssets = assetManager.getAll?.() || [];
+  for (const asset of existingAssets) {
+    const src = typeof asset.get === "function" ? String(asset.get("src") || "") : "";
+    if (src && !await imageCanLoad(src)) {
+      assetManager.remove?.(asset);
+    }
+  }
+};
 var extractUploadedMedia = (value) => {
   const candidate = value && typeof value === "object" && "doc" in value ? value.doc : value;
   if (!candidate || typeof candidate !== "object") {
@@ -644,7 +839,10 @@ var extractUploadedMedia = (value) => {
     alt: typeof typed.alt === "string" ? typed.alt : "",
     filename: typeof typed.filename === "string" ? typed.filename : "",
     id,
-    url: typeof typed.url === "string" ? typed.url : ""
+    sizes: typed.sizes && typeof typed.sizes === "object" ? typed.sizes : void 0,
+    thumbnailURL: typeof typed.thumbnailURL === "string" ? typed.thumbnailURL : "",
+    url: typeof typed.url === "string" ? typed.url : "",
+    width: typeof typed.width === "number" ? typed.width : void 0
   };
 };
 var loadPayloadMediaAssets = async (editor) => {
@@ -656,8 +854,17 @@ var loadPayloadMediaAssets = async (editor) => {
     return;
   }
   const json = await response.json();
-  const assets = (Array.isArray(json.docs) ? json.docs : []).map((doc) => mediaDocToAsset(doc)).filter((asset) => asset !== null);
-  editor.AssetManager.add(assets);
+  const candidateAssets = (Array.isArray(json.docs) ? json.docs : []).map((doc) => mediaDocToAsset(doc)).filter((asset) => asset !== null);
+  const assets = [];
+  for (const asset of candidateAssets) {
+    if (await imageCanLoad(asset.src)) {
+      assets.push(asset);
+    }
+  }
+  if (assets.length > 0) {
+    editor.AssetManager.add(assets);
+  }
+  await pruneBrokenImageAssets(editor);
 };
 var uploadPayloadMediaAssets = async (editor, files) => {
   const fileArray = Array.from(files);

package/dist/index.mjs

@@ -1,9 +1,9 @@
-import {
-  admin_exports
-} from "./chunk-JC3UV74N.mjs";
 import {
   admin_app_exports
 } from "./chunk-RKTIFEUY.mjs";
+import {
+  admin_exports
+} from "./chunk-JC3UV74N.mjs";
 import "./chunk-W2UOCJDX.mjs";
 import {
   blocks_exports

package/package.json

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