@jxsuite/studio 0.19.0 → 0.21.0

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

@@ -1,6 +1,10 @@
 /**
  * Content inline edit bridge — extracted from studio.js (Phase 4k). Rich-text editing entry point
  * for edit/content mode. Bridges startEditing() with Jx document state mutations.
+ *
+ * @typedef {import("./inline-edit.js").JxContentResult} JxContentResult
+ *
+ * @typedef {import("./inline-edit.js").SlashCommand} SlashCommand
  */
 
 import {
@@ -22,8 +26,8 @@ import { findCanvasElement, getActivePanel } from "../canvas/canvas-helpers.js";
 /**
  * Enter rich-text inline editing on a canvas element (edit/content mode).
  *
- * @param {any} el
- * @param {any} path
+ * @param {HTMLElement} el
+ * @param {JxPath} path
  */
 export function enterInlineEdit(el, path) {
   // Restore raw template expressions before editing.
@@ -39,9 +43,9 @@ export function enterInlineEdit(el, path) {
 
   startEditing(el, path, {
     onCommit(
-      /** @type {any} */ commitPath,
-      /** @type {any} */ children,
-      /** @type {any} */ textContent,
+      /** @type {JxPath} */ commitPath,
+      /** @type {(JxMutableNode | string)[] | null} */ children,
+      /** @type {string | null} */ textContent,
     ) {
       const node = getNodeAtPath(activeTab.value?.doc.document, commitPath);
       if (children) {
@@ -59,13 +63,17 @@ export function enterInlineEdit(el, path) {
       }
     },
 
-    onSplit(/** @type {any} */ splitPath, /** @type {any} */ before, /** @type {any} */ after) {
+    onSplit(
+      /** @type {JxPath} */ splitPath,
+      /** @type {JxContentResult} */ before,
+      /** @type {JxContentResult} */ after,
+    ) {
       const tag = "p";
 
       // Insert new element after with "after" content
-      const parentPath = /** @type {any} */ (parentElementPath(splitPath));
+      const parentPath = /** @type {JxPath} */ (parentElementPath(splitPath));
       const idx = /** @type {number} */ (childIndex(splitPath));
-      /** @type {any} */
+      /** @type {JxMutableNode} */
       const newNode = { tagName: tag };
       if (after.textContent != null) {
         newNode.textContent = after.textContent;
@@ -108,7 +116,11 @@ export function enterInlineEdit(el, path) {
       });
     },
 
-    onInsert(/** @type {any} */ afterPath, /** @type {any} */ cmd, /** @type {any} */ commitData) {
+    onInsert(
+      /** @type {JxPath} */ afterPath,
+      /** @type {SlashCommand} */ cmd,
+      /** @type {JxContentResult | undefined} */ commitData,
+    ) {
       const isEmpty =
         !commitData ||
         (commitData.textContent != null && commitData.textContent.trim() === "") ||
@@ -148,7 +160,7 @@ export function enterInlineEdit(el, path) {
       }
 
       const elementDef = defaultDef(cmd.tag);
-      const parentPath = /** @type {any} */ (parentElementPath(afterPath));
+      const parentPath = /** @type {JxPath} */ (parentElementPath(afterPath));
       const idx = /** @type {number} */ (childIndex(afterPath));
       const newPath = [...parentPath, "children", idx + 1];
 

package/src/editor/context-menu.js

@@ -1,5 +1,6 @@
 // ─── Clipboard & Context Menu ─────────────────────────────────────────────────
 import { html } from "lit-html";
+import { ref } from "lit-html/directives/ref.js";
 import { getNodeAtPath, parentElementPath, childIndex } from "../store.js";
 import { activeTab, workspace } from "../workspace/workspace.js";
 import {
@@ -12,6 +13,7 @@ import {
 } from "../tabs/transact.js";
 import { statusMessage } from "../panels/statusbar.js";
 import { convertToComponent } from "./convert-to-component.js";
+import { convertToRepeater } from "./convert-to-repeater.js";
 import { componentRegistry } from "../files/components.js";
 import { renderPopover } from "../ui/layers.js";
 import { startLayerTitleEdit } from "../panels/layers-panel.js";
@@ -21,7 +23,7 @@ import { startLayerTitleEdit } from "../panels/layers-panel.js";
  *
  * @typedef {import("../state.js").JxPath} JxPath
  *
- * @typedef {import("../state.js").JxNode} JxNode
+ * @typedef {JxMutableNode} JxNode
  */
 
 // ─── Clipboard ────────────────────────────────────────────────────────────────
@@ -169,6 +171,15 @@ export function showContextMenu(e, path, opts = {}) {
       label: "Wrap in Div",
       action: () => transactDoc(activeTab.value, (t) => mutateWrapNode(t, path)),
     });
+    // 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")
+    ) {
+      items.push({
+        label: "Repeat...",
+        action: () => convertToRepeater(),
+      });
+    }
     items.push({
       label: "Set Title",
       action: () => {
@@ -231,7 +242,22 @@ export function showContextMenu(e, path, opts = {}) {
     y = e.clientY;
 
   _ctxHandle = renderPopover(
-    html`<sp-popover open style="position:fixed;z-index:10000;left:${x}px;top:${y}px">
+    html`<sp-popover
+      open
+      style="position:fixed;z-index:10000;left:${x}px;top:${y}px"
+      ${ref((el) => {
+        if (!el) return;
+        requestAnimationFrame(() => {
+          const popover = /** @type {HTMLElement} */ (el);
+          const menuRect = popover.getBoundingClientRect();
+          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`;
+        });
+      })}
+    >
       <sp-menu>
         ${items.map((item) =>
           item.label === "—"
@@ -254,16 +280,4 @@ export function showContextMenu(e, path, opts = {}) {
       },
     },
   );
-
-  requestAnimationFrame(() => {
-    const popover = /** @type {HTMLElement | null} */ (
-      _ctxHandle?.host.querySelector("sp-popover")
-    );
-    if (!popover) return;
-    const menuRect = popover.getBoundingClientRect();
-    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`;
-  });
 }

package/src/editor/convert-targets.js

@@ -0,0 +1,60 @@
+import elementsMeta from "../../data/elements-meta.json";
+
+/** @typedef {{ label: string; tag: string; description: string }} SlashCommand */
+
+const TAG_LABELS = /** @type {Record<string, string>} */ ({
+  p: "Paragraph",
+  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",
+  nav: "Nav",
+  search: "Search",
+  ul: "Bulleted List",
+  ol: "Numbered List",
+});
+
+const groups = /** @type {Record<string, string[]>} */ (elementsMeta.$convertGroups || {});
+
+/**
+ * Get the list of tags the current element can be converted to.
+ *
+ * @param {string} currentTag
+ * @param {boolean} isEmpty
+ * @returns {SlashCommand[]}
+ */
+export function getConvertTargets(currentTag, isEmpty) {
+  const def = /** @type {Record<string, unknown> | undefined} */ (
+    /** @type {Record<string, Record<string, unknown>>} */ (elementsMeta.$defs)?.[currentTag]
+  );
+  if (!def?.$convertTo) return [];
+
+  const groupNames =
+    isEmpty && def.$convertToWhenEmpty
+      ? /** @type {string[]} */ (def.$convertToWhenEmpty)
+      : [/** @type {string} */ (def.$convertTo)];
+
+  /** @type {Set<string>} */
+  const tags = new Set();
+  for (const name of groupNames) {
+    for (const tag of groups[name] || []) {
+      if (tag !== currentTag) tags.add(tag);
+    }
+  }
+
+  return [...tags].map((tag) => ({
+    label: TAG_LABELS[tag] || tag.charAt(0).toUpperCase() + tag.slice(1),
+    tag,
+    description: "",
+  }));
+}

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

@@ -1,5 +1,6 @@
 // ─── Convert to Component ─────────────────────────────────────────────────────
 import { html, render as litRender } from "lit-html";
+import { ref } from "lit-html/directives/ref.js";
 import { getNodeAtPath, parentElementPath, childIndex } from "../store.js";
 import { activeTab } from "../workspace/workspace.js";
 import { transact } from "../tabs/transact.js";
@@ -39,15 +40,17 @@ export async function convertToComponent() {
   transact(tab, (doc) => {
     // Navigate to parent's children array and replace the node
     const pp = parentElementPath(selectionPath) ?? [];
-    const idx = childIndex(selectionPath);
+    const idx = /** @type {number} */ (childIndex(selectionPath));
     let parent = doc;
     for (const seg of pp) parent = parent[seg];
+    if (!parent.children) parent.children = [];
     parent.children[idx] = { tagName: name };
 
     // Ensure $elements exists and add the $ref
     if (!doc.$elements) doc.$elements = [];
     const alreadyReferenced = doc.$elements.some(
-      (/** @type {any} */ el) => el && el.$ref === refPath,
+      (/** @type {JxMutableNode | string | { $ref: string }} */ el) =>
+        el && typeof el === "object" && "$ref" in el && el.$ref === refPath,
     );
     if (!alreadyReferenced) {
       doc.$elements.push({ $ref: refPath });
@@ -60,15 +63,15 @@ export async function convertToComponent() {
     await platform.writeFile(componentFile, JSON.stringify(componentDef, null, 2));
     await loadComponentRegistry();
     statusMessage(`Converted to <${name}>`);
-  } catch (/** @type {any} */ err) {
-    statusMessage(`Error saving component: ${err.message}`);
+  } catch (/** @type {unknown} */ err) {
+    statusMessage(`Error saving component: ${/** @type {Error} */ (err).message}`);
   }
 }
 
 /**
  * Derive a default tag name from a node.
  *
- * @param {any} node
+ * @param {JxMutableNode} node
  * @returns {string}
  */
 function deriveDefaultName(node) {
@@ -80,8 +83,8 @@ function deriveDefaultName(node) {
 /**
  * Deep clone a node and strip page-specific keys.
  *
- * @param {any} node
- * @returns {any}
+ * @param {JxMutableNode} node
+ * @returns {JxMutableNode}
  */
 function extractComponentDef(node) {
   const clone = structuredClone(node);
@@ -105,7 +108,7 @@ function validateName(val) {
   if (!VALID_NAME.test(val)) {
     return { valid: false, error: "Lowercase letters, digits, and hyphens only" };
   }
-  const exists = componentRegistry.some((/** @type {any} */ c) => c.tagName === val);
+  const exists = componentRegistry.some((/** @type {JxMutableNode} */ c) => c.tagName === val);
   if (exists) {
     return { valid: false, error: `Component <${val}> already exists` };
   }
@@ -134,7 +137,7 @@ function promptComponentName(defaultName) {
     }
 
     function onInput(/** @type {Event} */ e) {
-      value = /** @type {any} */ (e.target).value || "";
+      value = /** @type {HTMLInputElement} */ (e.target).value || "";
       const result = validateName(value);
       error = result.valid ? "" : result.error;
       rerender();
@@ -170,6 +173,14 @@ function promptComponentName(defaultName) {
             ?negative=${!!error}
             @input=${onInput}
             @keydown=${onKeydown}
+            ${ref((el) => {
+              if (el)
+                requestAnimationFrame(() => {
+                  /** @type {HTMLElement} */ (el).focus();
+                  const input = /** @type {HTMLElement} */ (el).shadowRoot?.querySelector("input");
+                  if (input) input.select();
+                });
+            })}
           >
             <sp-help-text slot="negative-help-text">${error}</sp-help-text>
           </sp-textfield>
@@ -177,16 +188,6 @@ function promptComponentName(defaultName) {
       `;
     }
 
-    requestAnimationFrame(() => {
-      const layer = document.getElementById("layer-dialog");
-      const tf = /** @type {any} */ (layer?.querySelector("sp-textfield"));
-      if (tf) {
-        tf.focus();
-        const input = tf.shadowRoot?.querySelector("input");
-        if (input) input.select();
-      }
-    });
-
     return buildTpl();
   });
 }

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

@@ -0,0 +1,226 @@
+// ─── 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.js";
+import { activeTab } from "../workspace/workspace.js";
+import { transactDoc } from "../tabs/transact.js";
+import { showDialog } from "../ui/layers.js";
+import { defCategory } from "../panels/signals-panel.js";
+
+/**
+ * @typedef {{
+ *   items: { $ref: string } | unknown[];
+ *   filter?: { $ref: string };
+ *   sort?: { $ref: string };
+ *   newDef?: { name: string };
+ * }} 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;
+
+  const path = tab.session.selection;
+  const node = getNodeAtPath(tab.doc.document, path);
+  if (!node) return;
+
+  const defs = tab.doc.document.state || {};
+  const config = await promptRepeaterConfig(defs);
+  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: [] };
+    }
+    const pp = parentElementPath(path);
+    if (!pp) return;
+    const idx = /** @type {number} */ (childIndex(path));
+    const parent = getNodeAtPath(doc, pp);
+    if (!parent?.children) return;
+    const element = parent.children[idx];
+
+    /** @type {Record<string, unknown>} */
+    const repeater = {
+      $prototype: "Array",
+      items: config.items,
+      map: element,
+    };
+    if (config.filter) repeater.filter = config.filter;
+    if (config.sort) repeater.sort = config.sort;
+
+    /** @type {(string | JxMutableNode)[]} */ (parent.children)[idx] = {
+      tagName: "div",
+      children: /** @type {any} */ (repeater),
+    };
+  });
+}
+
+/**
+ * @param {Record<string, unknown>} defs
+ * @returns {Promise<RepeaterConfig | null>}
+ */
+function promptRepeaterConfig(defs) {
+  const arrayDefs = Object.entries(defs).filter(
+    ([, d]) =>
+      /** @type {any} */ (d)?.type === "array" ||
+      Array.isArray(/** @type {any} */ (d)?.default) ||
+      /** @type {any} */ (d)?.$prototype === "Array",
+  );
+  const fnDefs = Object.entries(defs).filter(([, d]) => defCategory(d) === "function");
+
+  let source = arrayDefs.length > 0 ? arrayDefs[0][0] : "__new__";
+  let newDefName = "";
+  let filterDef = "";
+  let sortDef = "";
+  let error = "";
+
+  return showDialog((done) => {
+    function confirm() {
+      if (source === "__new__") {
+        const name = newDefName.trim();
+        if (!name) {
+          error = "Enter a name for the new state definition.";
+          rerender();
+          return;
+        }
+        if (defs[name]) {
+          error = `"${name}" already exists.`;
+          rerender();
+          return;
+        }
+        if (!/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(name)) {
+          error = "Invalid identifier name.";
+          rerender();
+          return;
+        }
+        done({
+          items: { $ref: `#/$defs/${name}` },
+          filter: filterDef ? { $ref: `#/$defs/${filterDef}` } : undefined,
+          sort: sortDef ? { $ref: `#/$defs/${sortDef}` } : undefined,
+          newDef: { name },
+        });
+      } else {
+        done({
+          items: { $ref: `#/$defs/${source}` },
+          filter: filterDef ? { $ref: `#/$defs/${filterDef}` } : undefined,
+          sort: sortDef ? { $ref: `#/$defs/${sortDef}` } : undefined,
+        });
+      }
+    }
+
+    function rerender() {
+      const layer = document.getElementById("layer-dialog");
+      const slot = layer?.lastElementChild;
+      if (slot) litRender(buildTpl(), /** @type {HTMLElement} */ (slot));
+    }
+
+    function buildTpl() {
+      return html`
+        <sp-dialog-wrapper
+          open
+          underlay
+          headline="Repeat..."
+          confirm-label="Create Repeater"
+          cancel-label="Cancel"
+          size="s"
+          @confirm=${confirm}
+          @cancel=${() => done(null)}
+          @close=${() => done(null)}
+        >
+          <div style="display:flex;flex-direction:column;gap:12px">
+            <label>
+              <sp-field-label size="s">Items source</sp-field-label>
+              <sp-picker
+                label="Items source"
+                size="s"
+                .value=${source}
+                @change=${(/** @type {Event} */ e) => {
+                  source = /** @type {HTMLInputElement} */ (e.target).value;
+                  error = "";
+                  rerender();
+                }}
+              >
+                ${arrayDefs.map(
+                  ([name]) => html`<sp-menu-item value=${name}>${name}</sp-menu-item>`,
+                )}
+                <sp-menu-divider></sp-menu-divider>
+                <sp-menu-item value="__new__">Create new...</sp-menu-item>
+              </sp-picker>
+            </label>
+
+            ${source === "__new__"
+              ? html`
+                  <label>
+                    <sp-field-label size="s">New definition name</sp-field-label>
+                    <sp-textfield
+                      size="s"
+                      placeholder="myItems"
+                      .value=${newDefName}
+                      ?negative=${!!error}
+                      @input=${(/** @type {Event} */ e) => {
+                        newDefName = /** @type {HTMLInputElement} */ (e.target).value || "";
+                        error = "";
+                        rerender();
+                      }}
+                      @keydown=${(/** @type {KeyboardEvent} */ e) => {
+                        if (e.key === "Enter") confirm();
+                      }}
+                      ${ref((el) => {
+                        if (el && source === "__new__")
+                          requestAnimationFrame(() => /** @type {HTMLElement} */ (el).focus());
+                      })}
+                    >
+                      <sp-help-text slot="negative-help-text">${error}</sp-help-text>
+                    </sp-textfield>
+                  </label>
+                `
+              : nothing}
+            ${fnDefs.length > 0
+              ? html`
+                  <label>
+                    <sp-field-label size="s">Filter (optional)</sp-field-label>
+                    <sp-picker
+                      label="Filter"
+                      size="s"
+                      .value=${filterDef}
+                      @change=${(/** @type {Event} */ e) => {
+                        filterDef = /** @type {HTMLInputElement} */ (e.target).value;
+                        rerender();
+                      }}
+                    >
+                      <sp-menu-item value="">None</sp-menu-item>
+                      ${fnDefs.map(
+                        ([name]) => html`<sp-menu-item value=${name}>${name}</sp-menu-item>`,
+                      )}
+                    </sp-picker>
+                  </label>
+                  <label>
+                    <sp-field-label size="s">Sort (optional)</sp-field-label>
+                    <sp-picker
+                      label="Sort"
+                      size="s"
+                      .value=${sortDef}
+                      @change=${(/** @type {Event} */ e) => {
+                        sortDef = /** @type {HTMLInputElement} */ (e.target).value;
+                        rerender();
+                      }}
+                    >
+                      <sp-menu-item value="">None</sp-menu-item>
+                      ${fnDefs.map(
+                        ([name]) => html`<sp-menu-item value=${name}>${name}</sp-menu-item>`,
+                      )}
+                    </sp-picker>
+                  </label>
+                `
+              : nothing}
+          </div>
+        </sp-dialog-wrapper>
+      `;
+    }
+
+    return buildTpl();
+  });
+}