@jxsuite/studio 0.24.0 → 0.25.0

package/dist/studio.js

@@ -262456,7 +262456,7 @@ function defaultDef(tag3) {
   else if (tag3 === "input")
     def3.attributes = { type: "text", placeholder: "Enter text..." };
   else if (tag3 === "img")
-    def3.attributes = { src: "", alt: "Image" };
+    def3.attributes = { alt: "Image" };
   else if (tag3 === "iframe")
     def3.attributes = { src: "" };
   else if (tag3 === "select")
@@ -262731,6 +262731,8 @@ init_store();
 init_workspace2();
 
 // src/utils/edit-display.ts
+var mediaTags = new Set(["img", "video", "source", "iframe", "audio"]);
+var TRANSPARENT_PX = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
 function templateToEditDisplay(str) {
   return str.replace(/\$\{([^}]+)\}/g, "❪ $1 ❫");
 }
@@ -262750,9 +262752,38 @@ function prepareForEditMode(node) {
     return node.map(prepareForEditMode);
   const obj = node;
   const out = {};
+  let needsMediaPlaceholder = false;
+  const isMediaElement = mediaTags.has(obj.tagName || "");
+  if (isMediaElement) {
+    const attrs = obj.attributes;
+    const topSrc = obj.src;
+    const attrSrc = attrs?.src;
+    const topPoster = obj.poster;
+    const attrPoster = attrs?.poster;
+    const hasSrc = topSrc && topSrc !== "" || attrSrc && attrSrc !== "";
+    const hasPoster = topPoster && topPoster !== "" || attrPoster && attrPoster !== "";
+    if (!hasSrc && !hasPoster) {
+      needsMediaPlaceholder = true;
+    }
+  }
   for (const [k, v] of Object.entries(obj)) {
-    if (k === "state" || k === "$media" || k === "$props" || k === "$elements") {
+    if (k === "state" || k === "$media" || k === "$elements") {
       out[k] = v;
+    } else if (k === "$props" && v && typeof v === "object") {
+      const propsOut = {};
+      for (const [pk, pv] of Object.entries(v)) {
+        if (typeof pv === "string" && pv.includes("${")) {
+          const isUrlAttr = pk === "src" || pk === "href" || pk === "poster" || pk === "action";
+          propsOut[pk] = isUrlAttr ? "" : templateToEditDisplay(pv);
+        } else if (pv && typeof pv === "object" && pv.$ref) {
+          const ref3 = pv.$ref;
+          const label = ref3.startsWith("#/state/") ? ref3.slice(8) : ref3;
+          propsOut[pk] = `{${label}}`;
+        } else {
+          propsOut[pk] = pv;
+        }
+      }
+      out[k] = propsOut;
     } else if (k === "children") {
       if (Array.isArray(v)) {
         out.children = v.map(prepareForEditMode);
@@ -262798,6 +262829,29 @@ function prepareForEditMode(node) {
           ];
         }
       }
+    } else if (k === "attributes" && isMediaElement && v && typeof v === "object") {
+      const attrs = v;
+      const processed = {};
+      for (const [ak, av] of Object.entries(attrs)) {
+        if (ak === "src" || ak === "poster") {
+          if (typeof av === "string" && av !== "" && !av.includes("${")) {
+            processed[ak] = av;
+          } else {
+            needsMediaPlaceholder = true;
+            processed[ak] = TRANSPARENT_PX;
+          }
+        } else if (typeof av === "string" && av.includes("${")) {
+          const isUrlAttr = ak === "href" || ak === "action";
+          processed[ak] = isUrlAttr ? "" : templateToEditDisplay(av);
+        } else if (av && typeof av === "object" && av.$ref) {
+          const ref3 = av.$ref;
+          const label = ref3.startsWith("#/state/") ? ref3.slice(8) : ref3;
+          processed[ak] = `{${label}}`;
+        } else {
+          processed[ak] = av;
+        }
+      }
+      out.attributes = processed;
     } else if (k === "style") {
       if (v && typeof v === "object") {
         const s = {};
@@ -262809,14 +262863,31 @@ function prepareForEditMode(node) {
         out.style = v;
       }
     } else if (typeof v === "string" && v.includes("${")) {
-      const isUrlAttr = k === "src" || k === "href" || k === "poster" || k === "action";
-      out[k] = isUrlAttr ? "" : templateToEditDisplay(v);
+      const isMediaSrc = (k === "src" || k === "poster") && mediaTags.has(obj.tagName || "");
+      if (isMediaSrc) {
+        needsMediaPlaceholder = true;
+        out[k] = TRANSPARENT_PX;
+      } else {
+        const isUrlAttr = k === "src" || k === "href" || k === "poster" || k === "action";
+        out[k] = isUrlAttr ? "" : templateToEditDisplay(v);
+      }
     } else if (v && typeof v === "object" && v.$ref) {
       const ref3 = v.$ref;
       const label = ref3.startsWith("#/state/") ? ref3.slice(8) : ref3;
-      out[k] = `{${label}}`;
+      const isMediaSrc = (k === "src" || k === "poster") && mediaTags.has(obj.tagName || "");
+      if (isMediaSrc) {
+        needsMediaPlaceholder = true;
+        out[k] = TRANSPARENT_PX;
+      } else {
+        out[k] = `{${label}}`;
+      }
     } else {
-      out[k] = prepareForEditMode(v);
+      if ((k === "src" || k === "poster") && v === "" && mediaTags.has(obj.tagName || "")) {
+        needsMediaPlaceholder = true;
+        out[k] = TRANSPARENT_PX;
+      } else {
+        out[k] = prepareForEditMode(v);
+      }
     }
   }
   if (out.tagName && !out.textContent && !out.innerHTML) {
@@ -262883,6 +262954,12 @@ function prepareForEditMode(node) {
       }
     }
   }
+  if (needsMediaPlaceholder) {
+    const cls = out.className || "";
+    if (!cls.includes("empty-media-placeholder")) {
+      out.className = cls ? cls + " empty-media-placeholder" : "empty-media-placeholder";
+    }
+  }
   return out;
 }
 
@@ -312661,5 +312738,5 @@ effect(() => {
     scheduleAutosave();
 });
 
-//# debugId=764A387CBBA5D51564756E2164756E21
+//# debugId=8A6CA76BD8515F1464756E2164756E21
 //# sourceMappingURL=studio.js.map