@jxsuite/studio 0.28.2 → 0.28.4

package/src/editor/content-inline-edit.ts

@@ -1,16 +1,15 @@
 /// <reference lib="dom" />
-import { renderOnly, getNodeAtPath, parentElementPath, childIndex, canvasPanels } from "../store";
+import { canvasPanels, childIndex, getNodeAtPath, parentElementPath, renderOnly } from "../store";
 import { activeTab } from "../workspace/workspace";
-import { transactDoc, mutateInsertNode, mutateUpdateProperty } from "../tabs/transact";
+import { mutateInsertNode, mutateUpdateProperty, transactDoc } from "../tabs/transact";
 import { view } from "../view";
-import { startEditing, isEditableBlock } from "./inline-edit";
+import { isEditableBlock, startEditing } from "./inline-edit";
 import { restoreTemplateExpressions } from "../utils/edit-display";
 import { renderBlockActionBar } from "../panels/block-action-bar";
 import { defaultDef } from "../panels/shared";
 import { findCanvasElement, getActivePanel } from "../canvas/canvas-helpers";
 
-import type { JxContentResult } from "./inline-edit";
-import type { SlashCommand } from "./inline-edit";
+import type { JxContentResult, SlashCommand } from "./inline-edit";
 import type { JxPath } from "../state";
 import type { JxMutableNode } from "@jxsuite/schema/types";
 
@@ -22,8 +21,8 @@ import type { JxMutableNode } from "@jxsuite/schema/types";
  */
 export function enterInlineEdit(el: HTMLElement, path: JxPath) {
   // Restore raw template expressions before editing.
-  // prepareForEditMode renders ${expr} as ❪ expr ❫ for display;
-  // revert so the user edits the real syntax and commits it back intact.
+  // PrepareForEditMode renders ${expr} as ❪ expr ❫ for display;
+  // Revert so the user edits the real syntax and commits it back intact.
   restoreTemplateExpressions(el);
 
   // Hide overlays while editing
@@ -40,66 +39,34 @@ export function enterInlineEdit(el: HTMLElement, path: JxPath) {
     ) {
       const node = getNodeAtPath(activeTab.value!.doc.document, commitPath);
       if (children) {
-        if (node && JSON.stringify(node.children) === JSON.stringify(children)) return;
+        if (node && JSON.stringify(node.children) === JSON.stringify(children)) {
+          return;
+        }
         transactDoc(activeTab.value, (t) => {
-          mutateUpdateProperty(t, commitPath, "textContent", undefined);
+          mutateUpdateProperty(t, commitPath, "textContent");
           mutateUpdateProperty(t, commitPath, "children", children);
         });
       } else if (textContent != null) {
-        if (node && node.textContent === textContent && !node.children) return;
+        if (node && node.textContent === textContent && !node.children) {
+          return;
+        }
         transactDoc(activeTab.value, (t) => {
-          mutateUpdateProperty(t, commitPath, "children", undefined);
+          mutateUpdateProperty(t, commitPath, "children");
           mutateUpdateProperty(t, commitPath, "textContent", textContent);
         });
       }
     },
 
-    onSplit(splitPath: JxPath, before: JxContentResult, after: JxContentResult) {
-      const tag = "p";
-
-      // Insert new element after with "after" content
-      const parentPath = parentElementPath(splitPath) as JxPath;
-      const idx = childIndex(splitPath) as number;
-      const newNode: JxMutableNode = { tagName: tag };
-      if (after.textContent != null) {
-        newNode.textContent = after.textContent;
-      } else if (after.children) {
-        newNode.children = after.children;
-      } else {
-        newNode.textContent = "";
+    onEnd() {
+      if (view.inlineEditCleanup) {
+        view.inlineEditCleanup();
+        view.inlineEditCleanup = null;
       }
-
-      const newPath = [...parentPath, "children", idx + 1];
-
-      transactDoc(activeTab.value, (t) => {
-        if (before.textContent != null) {
-          mutateUpdateProperty(t, splitPath, "children", undefined);
-          mutateUpdateProperty(t, splitPath, "textContent", before.textContent);
-        } else if (before.children) {
-          mutateUpdateProperty(t, splitPath, "textContent", undefined);
-          mutateUpdateProperty(t, splitPath, "children", before.children);
-        }
-        mutateInsertNode(t, parentPath, idx + 1, newNode);
-        t.session.selection = newPath;
-      });
-
-      // Re-enter editing on the new element after render
-      requestAnimationFrame(() => {
-        const activePanel = getActivePanel();
-        if (activePanel) {
-          const newEl = findCanvasElement(newPath, activePanel.canvas);
-          if (newEl && isEditableBlock(newEl)) {
-            enterInlineEdit(newEl, newPath);
-            // Place cursor at start of new element
-            const sel = window.getSelection();
-            const range = document.createRange();
-            range.selectNodeContents(newEl);
-            range.collapse(true);
-            sel?.removeAllRanges();
-            sel?.addRange(range);
-          }
-        }
-      });
+      for (const p of canvasPanels) {
+        p.overlay.style.display = "";
+        p.overlayClk.style.pointerEvents = "";
+      }
+      renderOnly("overlays");
     },
 
     onInsert(afterPath: JxPath, cmd: SlashCommand, commitData: JxContentResult | undefined) {
@@ -119,12 +86,12 @@ export function enterInlineEdit(el: HTMLElement, path: JxPath) {
       if (isEmpty) {
         transactDoc(activeTab.value, (t) => {
           mutateUpdateProperty(t, afterPath, "tagName", cmd.tag);
-          mutateUpdateProperty(t, afterPath, "children", undefined);
+          mutateUpdateProperty(t, afterPath, "children");
           const def = defaultDef(cmd.tag);
           if (def.textContent && def.textContent !== "Paragraph text") {
             mutateUpdateProperty(t, afterPath, "textContent", def.textContent);
           } else {
-            mutateUpdateProperty(t, afterPath, "textContent", undefined);
+            mutateUpdateProperty(t, afterPath, "textContent");
           }
           t.session.selection = afterPath;
         });
@@ -132,9 +99,9 @@ export function enterInlineEdit(el: HTMLElement, path: JxPath) {
         requestAnimationFrame(() => {
           const activePanel = getActivePanel();
           if (activePanel) {
-            const el = findCanvasElement(afterPath, activePanel.canvas);
-            if (el && isEditableBlock(el)) {
-              enterInlineEdit(el, afterPath);
+            const nextEl = findCanvasElement(afterPath, activePanel.canvas);
+            if (nextEl && isEditableBlock(nextEl)) {
+              enterInlineEdit(nextEl, afterPath);
             }
           }
         });
@@ -150,10 +117,10 @@ export function enterInlineEdit(el: HTMLElement, path: JxPath) {
       transactDoc(activeTab.value, (t) => {
         if (commitData) {
           if (commitData.children) {
-            mutateUpdateProperty(t, afterPath, "textContent", undefined);
+            mutateUpdateProperty(t, afterPath, "textContent");
             mutateUpdateProperty(t, afterPath, "children", commitData.children);
           } else if (commitData.textContent != null) {
-            mutateUpdateProperty(t, afterPath, "children", undefined);
+            mutateUpdateProperty(t, afterPath, "children");
             mutateUpdateProperty(t, afterPath, "textContent", commitData.textContent);
           }
         }
@@ -173,16 +140,52 @@ export function enterInlineEdit(el: HTMLElement, path: JxPath) {
       });
     },
 
-    onEnd() {
-      if (view.inlineEditCleanup) {
-        view.inlineEditCleanup();
-        view.inlineEditCleanup = null;
-      }
-      for (const p of canvasPanels) {
-        p.overlay.style.display = "";
-        p.overlayClk.style.pointerEvents = "";
+    onSplit(splitPath: JxPath, before: JxContentResult, after: JxContentResult) {
+      const tag = "p";
+
+      // Insert new element after with "after" content
+      const parentPath = parentElementPath(splitPath) as JxPath;
+      const idx = childIndex(splitPath) as number;
+      const newNode: JxMutableNode = { tagName: tag };
+      if (after.textContent != null) {
+        newNode.textContent = after.textContent;
+      } else if (after.children) {
+        newNode.children = after.children;
+      } else {
+        newNode.textContent = "";
       }
-      renderOnly("overlays");
+
+      const newPath = [...parentPath, "children", idx + 1];
+
+      transactDoc(activeTab.value, (t) => {
+        if (before.textContent != null) {
+          mutateUpdateProperty(t, splitPath, "children");
+          mutateUpdateProperty(t, splitPath, "textContent", before.textContent);
+        } else if (before.children) {
+          mutateUpdateProperty(t, splitPath, "textContent");
+          mutateUpdateProperty(t, splitPath, "children", before.children);
+        }
+        mutateInsertNode(t, parentPath, idx + 1, newNode);
+        t.session.selection = newPath;
+      });
+
+      // Re-enter editing on the new element after render
+      requestAnimationFrame(() => {
+        const activePanel = getActivePanel();
+        if (activePanel) {
+          const newEl = findCanvasElement(newPath, activePanel.canvas);
+          if (newEl && isEditableBlock(newEl)) {
+            enterInlineEdit(newEl, newPath);
+            // Place cursor at start of new element
+            const sel = window.getSelection();
+            const range = document.createRange();
+            range.selectNodeContents(newEl);
+            range.collapse(true);
+            sel?.removeAllRanges();
+            sel?.addRange(range);
+          }
+        }
+      });
     },
   });
 

package/src/editor/context-menu.ts

@@ -1,24 +1,24 @@
 /// <reference lib="dom" />
 // ─── Clipboard & Context Menu ─────────────────────────────────────────────────
 import { html } from "lit-html";
+import { jsonClone } from "../utils/studio-utils";
 import { ref } from "lit-html/directives/ref.js";
 import { htmlToJx } from "@jxsuite/parser/html-to-jx";
-import { getNodeAtPath, parentElementPath, childIndex } from "../store";
+import { childIndex, getNodeAtPath, parentElementPath } from "../store";
 import { activeTab, workspace } from "../workspace/workspace";
 import {
-  transactDoc,
+  mutateDuplicateNode,
   mutateInsertNode,
   mutateRemoveNode,
-  mutateDuplicateNode,
-  mutateWrapNode,
   mutateReplaceStyle,
+  mutateWrapNode,
+  transactDoc,
 } from "../tabs/transact";
 import { statusMessage } from "../panels/statusbar";
 import { convertToComponent } from "./convert-to-component";
 import { convertToRepeater } from "./convert-to-repeater";
 import { componentRegistry } from "../files/components";
 import { renderPopover } from "../ui/layers";
-import { startLayerTitleEdit } from "../panels/layers-panel";
 
 import type { JxPath } from "../state";
 import type { JxMutableNode } from "@jxsuite/schema/types";
@@ -30,25 +30,33 @@ type JxNode = JxMutableNode;
 const JX_MIME = "web application/jx+json";
 
 /** @param {JxNode | string} node */
-function nodeToHtml(node: JxNode | string) {
-  if (typeof node === "string") return node;
+function nodeToHtml(node: JxNode | string): string {
+  if (typeof node === "string") {
+    return node;
+  }
   const tag = node.tagName || "div";
   let attrs = "";
   if (node.attributes) {
     for (const [k, v] of Object.entries(node.attributes)) {
-      attrs += v === "" ? ` ${k}` : ` ${k}="${v.replace(/"/g, "&quot;")}"`;
+      // Bound ($ref) attribute values have no static HTML representation — skip.
+      if (typeof v === "object") {
+        continue;
+      }
+      attrs += v === "" ? ` ${k}` : ` ${k}="${String(v).replaceAll('"', "&quot;")}"`;
     }
   }
   if (node.style) {
     const css = Object.entries(node.style)
       .map(([k, v]) => `${k}:${v}`)
       .join(";");
-    if (css) attrs += ` style="${css.replace(/"/g, "&quot;")}"`;
+    if (css) {
+      attrs += ` style="${css.replaceAll('"', "&quot;")}"`;
+    }
   }
   let inner = "";
-  if (node.textContent) {
+  if (typeof node.textContent === "string") {
     inner = node.textContent;
-  } else if (node.children) {
+  } else if (Array.isArray(node.children)) {
     inner = node.children.map((c) => nodeToHtml(c)).join("");
   }
   return `<${tag}${attrs}>${inner}</${tag}>`;
@@ -73,7 +81,7 @@ async function writeToClipboard(json: Record<string, unknown>) {
     try {
       await navigator.clipboard.writeText(JSON.stringify(json));
     } catch {
-      // clipboard API unavailable — workspace.clipboard is the fallback
+      // Clipboard API unavailable — workspace.clipboard is the fallback
     }
   }
 }
@@ -99,7 +107,9 @@ async function readFromClipboard() {
         const jxNodes = nodes.map((n) =>
           typeof n === "string" ? { tagName: "p", textContent: n } : n,
         ) as JxNode[];
-        if (jxNodes.length > 0) return jxNodes;
+        if (jxNodes.length > 0) {
+          return jxNodes;
+        }
       }
       if (item.types.includes("text/plain")) {
         const blob = await item.getType("text/plain");
@@ -107,17 +117,21 @@ async function readFromClipboard() {
         // Try parsing as Jx JSON
         try {
           const parsed = JSON.parse(text);
-          if (parsed && parsed.tagName) return [parsed];
+          if (parsed && parsed.tagName) {
+            return [parsed];
+          }
         } catch {
-          // plain text → paragraph node
+          // Plain text → paragraph node
+        }
+        if (text.trim()) {
+          return [{ tagName: "p", textContent: text.trim() }];
         }
-        if (text.trim()) return [{ tagName: "p", textContent: text.trim() }];
       }
     }
   } catch {
-    // clipboard API unavailable — use workspace fallback
+    // Clipboard API unavailable — use workspace fallback
     if (workspace.clipboard) {
-      return [JSON.parse(JSON.stringify(workspace.clipboard))];
+      return [jsonClone(workspace.clipboard)];
     }
   }
   return null;
@@ -127,21 +141,29 @@ async function readFromClipboard() {
 
 export async function copyNode() {
   const tab = activeTab.value;
-  if (!tab?.session.selection) return;
+  if (!tab?.session.selection) {
+    return;
+  }
   const node = getNodeAtPath(tab.doc.document, tab.session.selection);
-  if (!node) return;
-  const json = JSON.parse(JSON.stringify(node));
+  if (!node) {
+    return;
+  }
+  const json = jsonClone(node);
   await writeToClipboard(json);
   statusMessage("Copied");
 }
 
 export async function cutNode() {
   const tab = activeTab.value;
-  if (!tab?.session.selection || tab.session.selection.length < 2) return;
+  if (!tab?.session.selection || tab.session.selection.length < 2) {
+    return;
+  }
   const sel = tab.session.selection;
   const node = getNodeAtPath(tab.doc.document, sel);
-  if (!node) return;
-  const json = JSON.parse(JSON.stringify(node));
+  if (!node) {
+    return;
+  }
+  const json = jsonClone(node);
   await writeToClipboard(json);
   transactDoc(tab, (t) => mutateRemoveNode(t, sel));
   statusMessage("Cut");
@@ -149,14 +171,20 @@ export async function cutNode() {
 
 export async function pasteNode() {
   const tab = activeTab.value;
-  if (!tab) return;
+  if (!tab) {
+    return;
+  }
 
   const nodes = await readFromClipboard();
-  if (!nodes || nodes.length === 0) return;
+  if (!nodes || nodes.length === 0) {
+    return;
+  }
 
   const pPath = tab.session.selection || [];
   const parent = getNodeAtPath(tab.doc.document, pPath);
-  if (!parent) return;
+  if (!parent) {
+    return;
+  }
 
   if (tab.session.selection && tab.session.selection.length >= 2) {
     const pp = parentElementPath(tab.session.selection) as JxPath;
@@ -167,7 +195,7 @@ export async function pasteNode() {
       }
     });
   } else {
-    const idx = parent.children ? parent.children.length : 0;
+    const idx = Array.isArray(parent.children) ? parent.children.length : 0;
     transactDoc(tab, (t) => {
       for (let i = 0; i < nodes.length; i++) {
         mutateInsertNode(t, pPath, idx + i, nodes[i]);
@@ -179,18 +207,26 @@ export async function pasteNode() {
 
 export function copyStyles() {
   const tab = activeTab.value;
-  if (!tab?.session.selection) return;
+  if (!tab?.session.selection) {
+    return;
+  }
   const node = getNodeAtPath(tab.doc.document, tab.session.selection);
-  if (!node?.style) return;
-  workspace.styleClipboard = JSON.parse(JSON.stringify(node.style));
+  if (!node?.style) {
+    return;
+  }
+  workspace.styleClipboard = jsonClone(node.style);
   statusMessage("Styles copied");
 }
 
 export function pasteStyles() {
-  if (!workspace.styleClipboard) return;
+  if (!workspace.styleClipboard) {
+    return;
+  }
   const tab = activeTab.value;
-  if (!tab?.session.selection) return;
-  const style = JSON.parse(JSON.stringify(workspace.styleClipboard));
+  if (!tab?.session.selection) {
+    return;
+  }
+  const style = jsonClone(workspace.styleClipboard);
   const sel = tab.session.selection as JxPath;
   transactDoc(tab, (t) => mutateReplaceStyle(t, sel, style));
   statusMessage("Styles pasted");
@@ -225,82 +261,91 @@ export function showContextMenu(
   dismissContextMenu();
 
   const tab = activeTab.value;
-  if (!tab) return;
+  if (!tab) {
+    return;
+  }
   const node = getNodeAtPath(tab.doc.document, path);
-  if (!node) return;
+  if (!node) {
+    return;
+  }
 
   // Select the node
   tab.session.selection = path;
 
-  /** @type {{ label: string; action?: () => void; danger?: boolean }[]} */
-  const items = [];
+  const items: { label: string; action?: () => void | Promise<void>; danger?: boolean }[] = [
+    { action: () => copyNode(), label: "Copy" },
+  ];
 
-  items.push({ label: "Copy", action: () => copyNode() });
   if (path.length >= 2) {
-    items.push({ label: "Cut", action: () => cutNode() });
+    items.push({ action: () => cutNode(), label: "Cut" });
     items.push({
-      label: "Duplicate",
       action: () => transactDoc(activeTab.value, (t) => mutateDuplicateNode(t, path)),
+      label: "Duplicate",
     });
     if (node.style) {
+      const nodeStyle = node.style;
       items.push({
-        label: "Copy styles",
         action: () => {
-          workspace.styleClipboard = JSON.parse(JSON.stringify(node.style));
+          workspace.styleClipboard = jsonClone(nodeStyle);
           statusMessage("Styles copied");
         },
+        label: "Copy styles",
       });
     }
     if (workspace.styleClipboard) {
       items.push({
-        label: "Paste styles",
         action: () => {
-          if (!workspace.styleClipboard) return;
-          const style = JSON.parse(JSON.stringify(workspace.styleClipboard));
+          if (!workspace.styleClipboard) {
+            return;
+          }
+          const style = jsonClone(workspace.styleClipboard);
           transactDoc(activeTab.value, (t) => mutateReplaceStyle(t, path, style));
           statusMessage("Styles pasted");
         },
+        label: "Paste styles",
       });
     }
-    items.push({ label: "—" }); // separator
+    items.push({ label: "—" }); // Separator
     items.push({
-      label: "Insert before",
       action: () => {
         const pp = parentElementPath(path) as JxPath;
         const idx = childIndex(path) as number;
         transactDoc(activeTab.value, (t) =>
-          mutateInsertNode(t, pp, idx, { tagName: "p", children: [] }),
+          mutateInsertNode(t, pp, idx, { children: [], tagName: "p" }),
         );
       },
+      label: "Insert before",
     });
     items.push({
-      label: "Insert after",
       action: () => {
         const pp = parentElementPath(path) as JxPath;
         const idx = childIndex(path) as number;
         transactDoc(activeTab.value, (t) =>
-          mutateInsertNode(t, pp, idx + 1, { tagName: "p", children: [] }),
+          mutateInsertNode(t, pp, idx + 1, { children: [], tagName: "p" }),
         );
       },
+      label: "Insert after",
     });
     items.push({
-      label: "Wrap in Div",
       action: () => transactDoc(activeTab.value, (t) => mutateWrapNode(t, path)),
+      label: "Wrap in Div",
     });
     // Don't show Repeat if already inside a repeater (path ends with "children", "map")
-    if (
-      !(path.length >= 2 && path[path.length - 2] === "children" && path[path.length - 1] === "map")
-    ) {
+    if (!(path.length >= 2 && path.at(-2) === "children" && path.at(-1) === "map")) {
       items.push({
-        label: "Repeat...",
         action: () => convertToRepeater(),
+        label: "Repeat...",
       });
     }
     items.push({
-      label: "Set Title",
-      action: () => {
-        if (opts.rerender) startLayerTitleEdit(path, opts.rerender);
+      action: async () => {
+        if (opts.rerender) {
+          // Lazy import breaks the context-menu ↔ layers-panel module cycle
+          const { startLayerTitleEdit } = await import("../panels/layers-panel");
+          startLayerTitleEdit(path, opts.rerender);
+        }
       },
+      label: "Set Title",
     });
     if (node.tagName) {
       const isComponent =
@@ -313,31 +358,32 @@ export function showContextMenu(
           (/** @type {{ tagName: string; path: string }} */ c) => c.tagName === node.tagName,
         );
         items.push({
-          label: "Edit Component",
           action: () => opts.onEditComponent?.(comp?.path as string),
+          label: "Edit Component",
         });
       } else if (!isComponent) {
         items.push({
-          label: "Convert to Component",
           action: () => convertToComponent(),
+          label: "Convert to Component",
         });
       }
     }
-    items.push({ label: "—" }); // separator
+    items.push({ label: "—" }); // Separator
     items.push({
-      label: "Delete",
       action: () => transactDoc(activeTab.value, (t) => mutateRemoveNode(t, path)),
       danger: true,
+      label: "Delete",
     });
   }
   if (path.length >= 2) {
     items.push({ label: "—" });
     items.push({
-      label: "Paste inside",
       action: async () => {
         const nodes = await readFromClipboard();
-        if (!nodes || nodes.length === 0) return;
-        const idx = node.children ? node.children.length : 0;
+        if (!nodes || nodes.length === 0) {
+          return;
+        }
+        const idx = Array.isArray(node.children) ? node.children.length : 0;
         transactDoc(activeTab.value, (t) => {
           for (let i = 0; i < nodes.length; i++) {
             mutateInsertNode(t, path, idx + i, nodes[i]);
@@ -345,12 +391,14 @@ export function showContextMenu(
         });
         statusMessage("Pasted");
       },
+      label: "Paste inside",
     });
     items.push({
-      label: "Paste after",
       action: async () => {
         const nodes = await readFromClipboard();
-        if (!nodes || nodes.length === 0) return;
+        if (!nodes || nodes.length === 0) {
+          return;
+        }
         const pp = parentElementPath(path) as JxPath;
         const idx = childIndex(path) as number;
         transactDoc(activeTab.value, (t) => {
@@ -360,6 +408,7 @@ export function showContextMenu(
         });
         statusMessage("Pasted");
       },
+      label: "Paste after",
     });
   }
 
@@ -371,13 +420,18 @@ export function showContextMenu(
       open
       style="position:fixed;z-index:10000;left:${x}px;top:${y}px"
       ${ref((el) => {
-        if (!el) return;
+        if (!el) {
+          return;
+        }
         requestAnimationFrame(() => {
           const popover = el as HTMLElement;
           const menuRect = popover.getBoundingClientRect();
-          if (x + menuRect.width > window.innerWidth) x = window.innerWidth - menuRect.width - 4;
-          if (y + menuRect.height > window.innerHeight)
+          if (x + menuRect.width > window.innerWidth) {
+            x = window.innerWidth - menuRect.width - 4;
+          }
+          if (y + menuRect.height > window.innerHeight) {
             y = window.innerHeight - menuRect.height - 4;
+          }
           popover.style.left = `${x}px`;
           popover.style.top = `${y}px`;
         });