@jxsuite/studio 0.24.0 → 0.25.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.24.0",
+  "version": "0.25.1",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -32,9 +32,9 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
-    "@jxsuite/parser": "^0.24.0",
-    "@jxsuite/runtime": "^0.24.0",
-    "@jxsuite/schema": "^0.24.0",
+    "@jxsuite/parser": "^0.25.1",
+    "@jxsuite/runtime": "^0.25.1",
+    "@jxsuite/schema": "^0.25.1",
     "@spectrum-web-components/accordion": "^1.12.1",
     "@spectrum-web-components/action-bar": "1.12.1",
     "@spectrum-web-components/action-button": "^1.12.1",

package/src/panels/shared.ts

@@ -66,7 +66,7 @@ export function defaultDef(tag: string) {
   else if (tag === "blockquote") def.textContent = "Quote";
   else if (tag === "pre") def.textContent = "Preformatted text";
   else if (tag === "input") def.attributes = { type: "text", placeholder: "Enter text..." };
-  else if (tag === "img") def.attributes = { src: "", alt: "Image" };
+  else if (tag === "img") def.attributes = { alt: "Image" };
   else if (tag === "iframe") def.attributes = { src: "" };
   else if (tag === "select") def.children = [{ tagName: "option", textContent: "Option 1" }];
   else if (tag === "ul" || tag === "ol") def.children = [{ tagName: "li", textContent: "Item" }];

package/src/utils/edit-display.ts

@@ -7,6 +7,10 @@
 
 import type { JxMutableNode } from "@jxsuite/schema/types";
 
+const mediaTags = new Set(["img", "video", "source", "iframe", "audio"]);
+const TRANSPARENT_PX =
+  "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+
 /**
  * Convert a template string to a displayable expression for edit mode. Replaces ${expr} with ❮ expr
  * ❯ so the runtime renders it as literal text.
@@ -48,9 +52,42 @@ export function prepareForEditMode(node: JxMutableNode): JxMutableNode {
   const /** @type {Record<string, unknown>} */ obj = node as Record<string, unknown>;
 
   const out: Record<string, unknown> = {};
+  let needsMediaPlaceholder = false;
+  const isMediaElement = mediaTags.has((obj.tagName as string) || "");
+
+  // Check if this media element lacks a resolvable src (top-level or in attributes)
+  if (isMediaElement) {
+    const attrs = obj.attributes as Record<string, unknown> | undefined;
+    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; // preserve as-is for runtime resolution
+    } else if (k === "$props" && v && typeof v === "object") {
+      // Process $props values: convert template strings to display format
+      const propsOut: Record<string, unknown> = {};
+      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 as Record<string, unknown>).$ref) {
+          const ref = (pv as Record<string, unknown>).$ref as string;
+          const label = ref.startsWith("#/state/") ? ref.slice(8) : ref;
+          propsOut[pk] = `{${label}}`;
+        } else {
+          propsOut[pk] = pv;
+        }
+      }
+      out[k] = propsOut;
     } else if (k === "children") {
       if (Array.isArray(v)) {
         out.children = v.map(prepareForEditMode);
@@ -106,6 +143,30 @@ export function prepareForEditMode(node: JxMutableNode): JxMutableNode {
           ];
         }
       }
+    } else if (k === "attributes" && isMediaElement && v && typeof v === "object") {
+      // Process attributes for media elements: replace src/poster with transparent pixel
+      const attrs = v as Record<string, unknown>;
+      const processed: Record<string, unknown> = {};
+      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 as Record<string, unknown>).$ref) {
+          const ref = (av as Record<string, unknown>).$ref as string;
+          const label = ref.startsWith("#/state/") ? ref.slice(8) : ref;
+          processed[ak] = `{${label}}`;
+        } else {
+          processed[ak] = av;
+        }
+      }
+      out.attributes = processed;
     } else if (k === "style") {
       // Replace template strings in style values with empty strings
       if (v && typeof v === "object") {
@@ -119,16 +180,39 @@ export function prepareForEditMode(node: JxMutableNode): JxMutableNode {
       }
     } else if (typeof v === "string" && v.includes("${")) {
       // Template string in a display property → show raw expression
-      // For URL-bearing attributes, use empty string to avoid triggering network requests
-      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 as string) || "");
+      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 as Record<string, unknown>).$ref) {
       // $ref binding → show ref path as literal text
       const ref = (v as Record<string, unknown>).$ref as string;
       const label = ref.startsWith("#/state/") ? ref.slice(8) : ref;
-      out[k] = `{${label}}`;
+      const isMediaSrc =
+        (k === "src" || k === "poster") && mediaTags.has((obj.tagName as string) || "");
+      if (isMediaSrc) {
+        needsMediaPlaceholder = true;
+        out[k] = TRANSPARENT_PX;
+      } else {
+        out[k] = `{${label}}`;
+      }
     } else {
-      out[k] = prepareForEditMode(v as JxMutableNode);
+      // Empty src/poster on media elements → use transparent pixel placeholder
+      if (
+        (k === "src" || k === "poster") &&
+        v === "" &&
+        mediaTags.has((obj.tagName as string) || "")
+      ) {
+        needsMediaPlaceholder = true;
+        out[k] = TRANSPARENT_PX;
+      } else {
+        out[k] = prepareForEditMode(v as JxMutableNode);
+      }
     }
   }
 
@@ -202,5 +286,13 @@ export function prepareForEditMode(node: JxMutableNode): JxMutableNode {
     }
   }
 
+  // Media elements with missing/dynamic src get a placeholder class
+  if (needsMediaPlaceholder) {
+    const cls = (out.className as string) || "";
+    if (!cls.includes("empty-media-placeholder")) {
+      out.className = cls ? cls + " empty-media-placeholder" : "empty-media-placeholder";
+    }
+  }
+
   return out;
 }