@jxsuite/studio 0.28.2 → 0.28.4

package/src/editor/convert-targets.ts

@@ -7,25 +7,25 @@ export interface SlashCommand {
 }
 
 const TAG_LABELS = {
-  p: "Paragraph",
+  article: "Article",
+  aside: "Aside",
+  blockquote: "Blockquote",
+  div: "Div",
+  footer: "Footer",
   h1: "Heading 1",
   h2: "Heading 2",
   h3: "Heading 3",
   h4: "Heading 4",
   h5: "Heading 5",
   h6: "Heading 6",
-  blockquote: "Blockquote",
-  div: "Div",
-  section: "Section",
-  article: "Article",
-  aside: "Aside",
-  main: "Main",
   header: "Header",
-  footer: "Footer",
+  main: "Main",
   nav: "Nav",
+  ol: "Numbered List",
+  p: "Paragraph",
   search: "Search",
+  section: "Section",
   ul: "Bulleted List",
-  ol: "Numbered List",
 } as Record<string, string>;
 
 const groups = (elementsMeta.$convertGroups || {}) as Record<string, string[]>;
@@ -41,23 +41,27 @@ export function getConvertTargets(currentTag: string, isEmpty: boolean) {
   const def = (elementsMeta.$defs as Record<string, Record<string, unknown>>)?.[currentTag] as
     | Record<string, unknown>
     | undefined;
-  if (!def?.$convertTo) return [];
+  if (!def?.$convertTo) {
+    return [];
+  }
 
   const groupNames =
     isEmpty && def.$convertToWhenEmpty
       ? (def.$convertToWhenEmpty as string[])
       : [def.$convertTo as string];
 
-  const tags: Set<string> = new Set();
+  const tags = new Set<string>();
   for (const name of groupNames) {
     for (const tag of groups[name] || []) {
-      if (tag !== currentTag) tags.add(tag);
+      if (tag !== currentTag) {
+        tags.add(tag);
+      }
     }
   }
 
   return [...tags].map((tag) => ({
+    description: "",
     label: TAG_LABELS[tag] || tag.charAt(0).toUpperCase() + tag.slice(1),
     tag,
-    description: "",
   }));
 }

package/src/editor/convert-to-component.ts

@@ -1,11 +1,12 @@
 /// <reference lib="dom" />
 // ─── Convert to Component ─────────────────────────────────────────────────────
 import { html, render as litRender } from "lit-html";
+import { errorMessage } from "@jxsuite/schema/parse";
 import { ref } from "lit-html/directives/ref.js";
-import { getNodeAtPath, parentElementPath, childIndex } from "../store";
+import { childIndex, getNodeAtPath, parentElementPath } from "../store";
 import { activeTab } from "../workspace/workspace";
 import { transact } from "../tabs/transact";
-import { computeRelativePath, loadComponentRegistry, componentRegistry } from "../files/components";
+import { componentRegistry, computeRelativePath, loadComponentRegistry } from "../files/components";
 import { getPlatform } from "../platform";
 import { statusMessage } from "../panels/statusbar";
 import { showDialog } from "../ui/layers";
@@ -17,21 +18,27 @@ const VALID_NAME = /^[a-z][a-z0-9]*(-[a-z0-9]+)+$/;
 /** Convert the currently selected element into a reusable component. */
 export async function convertToComponent() {
   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 node = getNodeAtPath(tab.doc.document, tab.session.selection);
-  if (!node || !node.tagName) return;
+  if (!node || !node.tagName) {
+    return;
+  }
 
   const defaultName = deriveDefaultName(node);
   const name = await promptComponentName(defaultName);
-  if (!name) return;
+  if (!name) {
+    return;
+  }
 
   // Extract component definition
   const componentDef = extractComponentDef(node);
   componentDef.tagName = name;
 
   // Compute paths
-  const componentFile = "components/" + name + ".json";
+  const componentFile = `components/${name}.json`;
   const refPath = computeRelativePath(tab.documentPath, componentFile);
 
   // Single atomic mutation: replace node + add $elements ref
@@ -41,12 +48,19 @@ export async function convertToComponent() {
     const pp = parentElementPath(selectionPath) ?? [];
     const idx = childIndex(selectionPath) as number;
     let parent = doc;
-    for (const seg of pp) parent = parent[seg];
-    if (!parent.children) parent.children = [];
+    // Paths address nodes by construction (same contract as getNodeAtPath).
+    for (const seg of pp) {
+      parent = parent[seg] as JxMutableNode;
+    }
+    if (!Array.isArray(parent.children)) {
+      parent.children = [];
+    }
     parent.children[idx] = { tagName: name };
 
     // Ensure $elements exists and add the $ref
-    if (!doc.$elements) doc.$elements = [];
+    if (!doc.$elements) {
+      doc.$elements = [];
+    }
     const alreadyReferenced = doc.$elements.some(
       (/** @type {JxMutableNode | string | { $ref: string }} */ el) =>
         el && typeof el === "object" && "$ref" in el && el.$ref === refPath,
@@ -62,8 +76,8 @@ export async function convertToComponent() {
     await platform.writeFile(componentFile, JSON.stringify(componentDef, null, 2));
     await loadComponentRegistry();
     statusMessage(`Converted to <${name}>`);
-  } catch (err) {
-    statusMessage(`Error saving component: ${(err as Error).message}`);
+  } catch (error) {
+    statusMessage(`Error saving component: ${errorMessage(error)}`);
   }
 }
 
@@ -74,9 +88,11 @@ export async function convertToComponent() {
  * @returns {string}
  */
 function deriveDefaultName(node: JxMutableNode) {
-  if (node.$id && node.$id.includes("-")) return node.$id.toLowerCase();
+  if (node.$id && node.$id.includes("-")) {
+    return node.$id.toLowerCase();
+  }
   const tag = (node.tagName ?? "div").toLowerCase();
-  return tag.includes("-") ? tag : "jx-" + tag;
+  return tag.includes("-") ? tag : `jx-${tag}`;
 }
 
 /**
@@ -100,24 +116,24 @@ function extractComponentDef(node: JxMutableNode) {
  * @returns {{ valid: boolean; error: string }}
  */
 function validateName(val: string) {
-  val = val.trim().toLowerCase();
-  if (!val.includes("-")) {
+  const name = val.trim().toLowerCase();
+  if (!name.includes("-")) {
     return {
-      valid: false,
       error: "Name must contain a hyphen (e.g. my-component)",
+      valid: false,
     };
   }
-  if (!VALID_NAME.test(val)) {
+  if (!VALID_NAME.test(name)) {
     return {
-      valid: false,
       error: "Lowercase letters, digits, and hyphens only",
+      valid: false,
     };
   }
-  const exists = componentRegistry.some((c: JxMutableNode) => c.tagName === val);
+  const exists = componentRegistry.some((c) => c.tagName === name);
   if (exists) {
-    return { valid: false, error: `Component <${val}> already exists` };
+    return { error: `Component <${name}> already exists`, valid: false };
   }
-  return { valid: true, error: "" };
+  return { error: "", valid: true };
 }
 
 /**
@@ -134,7 +150,7 @@ function promptComponentName(defaultName: string) {
     function confirm() {
       const result = validateName(value);
       if (!result.valid) {
-        error = result.error;
+        ({ error } = result);
         rerender();
         return;
       }
@@ -149,13 +165,17 @@ function promptComponentName(defaultName: string) {
     }
 
     function onKeydown(e: KeyboardEvent) {
-      if (e.key === "Enter") confirm();
+      if (e.key === "Enter") {
+        confirm();
+      }
     }
 
     function rerender() {
-      const layer = document.getElementById("layer-dialog");
+      const layer = document.querySelector("#layer-dialog");
       const slot = layer?.lastElementChild;
-      if (slot) litRender(buildTpl(), slot as HTMLElement);
+      if (slot) {
+        litRender(buildTpl(), slot as HTMLElement);
+      }
     }
 
     function buildTpl() {
@@ -175,16 +195,19 @@ function promptComponentName(defaultName: string) {
           <sp-textfield
             placeholder="my-component"
             value=${value}
-            ?negative=${!!error}
+            ?negative=${Boolean(error)}
             @input=${onInput}
             @keydown=${onKeydown}
             ${ref((el) => {
-              if (el)
+              if (el) {
                 requestAnimationFrame(() => {
                   (el as HTMLElement).focus();
                   const input = (el as HTMLElement).shadowRoot?.querySelector("input");
-                  if (input) input.select();
+                  if (input) {
+                    input.select();
+                  }
                 });
+              }
             })}
           >
             <sp-help-text slot="negative-help-text">${error}</sp-help-text>

package/src/editor/convert-to-repeater.ts

@@ -2,7 +2,7 @@
 // ─── Convert to Repeater ──────────────────────────────────────────────────────
 import { html, render as litRender, nothing } from "lit-html";
 import { ref } from "lit-html/directives/ref.js";
-import { getNodeAtPath, parentElementPath, childIndex } from "../store";
+import { childIndex, childList, getNodeAtPath, parentElementPath } from "../store";
 import { activeTab } from "../workspace/workspace";
 import { transactDoc } from "../tabs/transact";
 import { showDialog } from "../ui/layers";
@@ -21,40 +21,56 @@ interface RepeaterConfig {
 /** Convert the currently selected element into a repeater template. */
 export async function convertToRepeater() {
   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 path = tab.session.selection;
   const node = getNodeAtPath(tab.doc.document, path);
-  if (!node) return;
+  if (!node) {
+    return;
+  }
 
   const defs = tab.doc.document.state || {};
   const config = await promptRepeaterConfig(defs);
-  if (!config) return;
+  if (!config) {
+    return;
+  }
 
   transactDoc(tab, (t) => {
     const doc = t.doc.document;
     if (config.newDef) {
-      if (!doc.state) doc.state = {};
-      doc.state[config.newDef.name] = { type: "array", default: [] };
+      if (!doc.state) {
+        doc.state = {};
+      }
+      doc.state[config.newDef.name] = { default: [], type: "array" };
     }
     const pp = parentElementPath(path);
-    if (!pp) return;
+    if (!pp) {
+      return;
+    }
     const idx = childIndex(path) as number;
     const parent = getNodeAtPath(doc, pp);
-    if (!parent?.children) return;
-    const element = parent.children[idx];
+    if (!parent?.children) {
+      return;
+    }
+    const element = childList(parent)[idx];
 
     const repeater: Record<string, unknown> = {
       $prototype: "Array",
       items: config.items,
       map: element,
     };
-    if (config.filter) repeater.filter = config.filter;
-    if (config.sort) repeater.sort = config.sort;
+    if (config.filter) {
+      repeater.filter = config.filter;
+    }
+    if (config.sort) {
+      repeater.sort = config.sort;
+    }
 
     (parent.children as (string | JxMutableNode)[])[idx] = {
-      tagName: "div",
       children: repeater as unknown as (string | JxMutableNode)[],
+      tagName: "div",
     };
   });
 }
@@ -75,8 +91,12 @@ async function promptRepeaterConfig(defs: Record<string, unknown>) {
   const docPath = tab?.documentPath;
   for (const [name, d] of Object.entries(defs)) {
     const def = d as Record<string, unknown> | null;
-    if (!def?.$prototype || def.$prototype === "Function" || def.$prototype === "Array") continue;
-    if (arrayDefs.some(([n]) => n === name)) continue;
+    if (!def?.$prototype || def.$prototype === "Function" || def.$prototype === "Array") {
+      continue;
+    }
+    if (arrayDefs.some(([n]) => n === name)) {
+      continue;
+    }
     const schema = await fetchPluginSchema(
       {
         ...(def.$src != null && { $src: def.$src as string }),
@@ -132,9 +152,11 @@ async function promptRepeaterConfig(defs: Record<string, unknown>) {
     }
 
     function rerender() {
-      const layer = document.getElementById("layer-dialog");
+      const layer = document.querySelector("#layer-dialog");
       const slot = layer?.lastElementChild;
-      if (slot) litRender(buildTpl(), slot as HTMLElement);
+      if (slot) {
+        litRender(buildTpl(), slot as HTMLElement);
+      }
     }
 
     function buildTpl() {
@@ -179,18 +201,21 @@ async function promptRepeaterConfig(defs: Record<string, unknown>) {
                       size="s"
                       placeholder="myItems"
                       .value=${newDefName}
-                      ?negative=${!!error}
+                      ?negative=${Boolean(error)}
                       @input=${(e: Event) => {
                         newDefName = (e.target as HTMLInputElement).value || "";
                         error = "";
                         rerender();
                       }}
                       @keydown=${(e: KeyboardEvent) => {
-                        if (e.key === "Enter") confirm();
+                        if (e.key === "Enter") {
+                          confirm();
+                        }
                       }}
                       ${ref((el) => {
-                        if (el && source === "__new__")
+                        if (el && source === "__new__") {
                           requestAnimationFrame(() => (el as HTMLElement).focus());
+                        }
                       })}
                     >
                       <sp-help-text slot="negative-help-text">${error}</sp-help-text>