@jxsuite/studio 0.23.1 → 0.24.0

package/src/editor/{convert-to-repeater.js → convert-to-repeater.ts}

@@ -1,20 +1,22 @@
+/// <reference lib="dom" />
 // ─── 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";
+import { getNodeAtPath, parentElementPath, childIndex } from "../store";
+import { activeTab } from "../workspace/workspace";
+import { transactDoc } from "../tabs/transact";
+import { showDialog } from "../ui/layers";
+import { defCategory } from "../panels/signals-panel";
+import { fetchPluginSchema } from "../services/code-services";
 
-/**
- * @typedef {{
- *   items: { $ref: string } | unknown[];
- *   filter?: { $ref: string };
- *   sort?: { $ref: string };
- *   newDef?: { name: string };
- * }} RepeaterConfig
- */
+import type { JxMutableNode } from "@jxsuite/schema/types";
+
+interface RepeaterConfig {
+  items: { $ref: string } | unknown[];
+  filter?: { $ref: string };
+  sort?: { $ref: string };
+  newDef?: { name: string };
+}
 
 /** Convert the currently selected element into a repeater template. */
 export async function convertToRepeater() {
@@ -37,13 +39,12 @@ export async function convertToRepeater() {
     }
     const pp = parentElementPath(path);
     if (!pp) return;
-    const idx = /** @type {number} */ (childIndex(path));
+    const idx = childIndex(path) as number;
     const parent = getNodeAtPath(doc, pp);
     if (!parent?.children) return;
     const element = parent.children[idx];
 
-    /** @type {Record<string, unknown>} */
-    const repeater = {
+    const repeater: Record<string, unknown> = {
       $prototype: "Array",
       items: config.items,
       map: element,
@@ -51,9 +52,9 @@ export async function convertToRepeater() {
     if (config.filter) repeater.filter = config.filter;
     if (config.sort) repeater.sort = config.sort;
 
-    /** @type {(string | JxMutableNode)[]} */ (parent.children)[idx] = {
+    (parent.children as (string | JxMutableNode)[])[idx] = {
       tagName: "div",
-      children: /** @type {any} */ (repeater),
+      children: repeater as unknown as (string | JxMutableNode)[],
     };
   });
 }
@@ -62,13 +63,32 @@ export async function convertToRepeater() {
  * @param {Record<string, unknown>} defs
  * @returns {Promise<RepeaterConfig | null>}
  */
-function promptRepeaterConfig(defs) {
+async function promptRepeaterConfig(defs: Record<string, unknown>) {
   const arrayDefs = Object.entries(defs).filter(
     ([, d]) =>
-      /** @type {any} */ (d)?.type === "array" ||
-      Array.isArray(/** @type {any} */ (d)?.default) ||
-      /** @type {any} */ (d)?.$prototype === "Array",
+      (d as Record<string, unknown> | null)?.type === "array" ||
+      Array.isArray((d as Record<string, unknown> | null)?.default) ||
+      (d as Record<string, unknown> | null)?.$prototype === "Array",
   );
+
+  const tab = activeTab.value;
+  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;
+    const schema = await fetchPluginSchema(
+      {
+        ...(def.$src != null && { $src: def.$src as string }),
+        $prototype: def.$prototype as string,
+      },
+      { ...(docPath != null && { documentPath: docPath }) },
+    );
+    if (schema?.returns?.type === "array") {
+      arrayDefs.push([name, d]);
+    }
+  }
+
   const fnDefs = Object.entries(defs).filter(([, d]) => defCategory(d) === "function");
 
   let source = arrayDefs.length > 0 ? arrayDefs[0][0] : "__new__";
@@ -77,7 +97,7 @@ function promptRepeaterConfig(defs) {
   let sortDef = "";
   let error = "";
 
-  return showDialog((done) => {
+  return showDialog<RepeaterConfig | null>((done) => {
     function confirm() {
       if (source === "__new__") {
         const name = newDefName.trim();
@@ -97,16 +117,16 @@ function promptRepeaterConfig(defs) {
           return;
         }
         done({
-          items: { $ref: `#/$defs/${name}` },
-          filter: filterDef ? { $ref: `#/$defs/${filterDef}` } : undefined,
-          sort: sortDef ? { $ref: `#/$defs/${sortDef}` } : undefined,
+          items: { $ref: `#/state/${name}` },
+          ...(filterDef && { filter: { $ref: `#/state/${filterDef}` } }),
+          ...(sortDef && { sort: { $ref: `#/state/${sortDef}` } }),
           newDef: { name },
         });
       } else {
         done({
-          items: { $ref: `#/$defs/${source}` },
-          filter: filterDef ? { $ref: `#/$defs/${filterDef}` } : undefined,
-          sort: sortDef ? { $ref: `#/$defs/${sortDef}` } : undefined,
+          items: { $ref: `#/state/${source}` },
+          ...(filterDef && { filter: { $ref: `#/state/${filterDef}` } }),
+          ...(sortDef && { sort: { $ref: `#/state/${sortDef}` } }),
         });
       }
     }
@@ -114,7 +134,7 @@ function promptRepeaterConfig(defs) {
     function rerender() {
       const layer = document.getElementById("layer-dialog");
       const slot = layer?.lastElementChild;
-      if (slot) litRender(buildTpl(), /** @type {HTMLElement} */ (slot));
+      if (slot) litRender(buildTpl(), slot as HTMLElement);
     }
 
     function buildTpl() {
@@ -137,8 +157,8 @@ function promptRepeaterConfig(defs) {
                 label="Items source"
                 size="s"
                 .value=${source}
-                @change=${(/** @type {Event} */ e) => {
-                  source = /** @type {HTMLInputElement} */ (e.target).value;
+                @change=${(e: Event) => {
+                  source = (e.target as HTMLInputElement).value;
                   error = "";
                   rerender();
                 }}
@@ -160,17 +180,17 @@ function promptRepeaterConfig(defs) {
                       placeholder="myItems"
                       .value=${newDefName}
                       ?negative=${!!error}
-                      @input=${(/** @type {Event} */ e) => {
-                        newDefName = /** @type {HTMLInputElement} */ (e.target).value || "";
+                      @input=${(e: Event) => {
+                        newDefName = (e.target as HTMLInputElement).value || "";
                         error = "";
                         rerender();
                       }}
-                      @keydown=${(/** @type {KeyboardEvent} */ e) => {
+                      @keydown=${(e: KeyboardEvent) => {
                         if (e.key === "Enter") confirm();
                       }}
                       ${ref((el) => {
                         if (el && source === "__new__")
-                          requestAnimationFrame(() => /** @type {HTMLElement} */ (el).focus());
+                          requestAnimationFrame(() => (el as HTMLElement).focus());
                       })}
                     >
                       <sp-help-text slot="negative-help-text">${error}</sp-help-text>
@@ -186,8 +206,8 @@ function promptRepeaterConfig(defs) {
                       label="Filter"
                       size="s"
                       .value=${filterDef}
-                      @change=${(/** @type {Event} */ e) => {
-                        filterDef = /** @type {HTMLInputElement} */ (e.target).value;
+                      @change=${(e: Event) => {
+                        filterDef = (e.target as HTMLInputElement).value;
                         rerender();
                       }}
                     >
@@ -203,8 +223,8 @@ function promptRepeaterConfig(defs) {
                       label="Sort"
                       size="s"
                       .value=${sortDef}
-                      @change=${(/** @type {Event} */ e) => {
-                        sortDef = /** @type {HTMLInputElement} */ (e.target).value;
+                      @change=${(e: Event) => {
+                        sortDef = (e.target as HTMLInputElement).value;
                         rerender();
                       }}
                     >

package/src/editor/{inline-edit.js → inline-edit.ts}

@@ -1,3 +1,5 @@
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
 /**
  * Inline-edit.js — Contenteditable inline editing for content mode
  *
@@ -5,23 +7,39 @@
  * text formatting, Enter for new paragraphs, and slash commands for inserting elements.
  */
 
-/**
- * @typedef {{ tag: string; label: string; icon?: string; command?: string; shortcut?: string }} InlineAction
- *
- * @typedef {{ $inlineChildren?: string[]; $inlineActions?: InlineAction[] | string }} ElementDef
- *
- * @typedef {{ label: string; tag: string; description: string }} SlashCommand
- *
- * @typedef {{ textContent?: string | null; children?: (JxMutableNode | string)[] }} JxContentResult
- */
-
 import elementsMeta from "../../data/elements-meta.json";
-import { toggleInlineFormat, normalizeInlineContent } from "./inline-format.js";
+import { toggleInlineFormat, normalizeInlineContent } from "./inline-format";
+import type { JxPath } from "../state";
+import type { JxMutableNode } from "@jxsuite/schema/types";
+export interface InlineAction {
+  tag: string;
+  label: string;
+  icon?: string;
+  command?: string;
+  shortcut?: string;
+}
+
+interface ElementDef {
+  $inlineChildren?: string[];
+  $inlineActions?: InlineAction[] | string;
+}
+
+export interface SlashCommand {
+  label: string;
+  tag: string;
+  description: string;
+}
+
+export interface JxContentResult {
+  textContent?: string | null;
+  children?: (JxMutableNode | string)[];
+}
+
 import {
   showSlashMenu as sharedShowSlashMenu,
   dismissSlashMenu as sharedDismissSlashMenu,
   isSlashMenuOpen,
-} from "./slash-menu.js";
+} from "./slash-menu";
 
 // ─── Inline tag set (tags that represent rich text formatting) ─────────────
 
@@ -71,9 +89,9 @@ const EDITABLE_BLOCKS = new Set([
  * @param {string} parentTag
  * @returns {boolean}
  */
-export function isInlineInContext(childTag, parentTag) {
+export function isInlineInContext(childTag: string, parentTag: string) {
   if (!parentTag) return INLINE_TAGS.has(childTag);
-  const parentDef = /** @type {Record<string, ElementDef>} */ (elementsMeta.$defs)[parentTag];
+  const parentDef = (elementsMeta.$defs as Record<string, ElementDef>)[parentTag];
   if (!parentDef || !parentDef.$inlineChildren) return false;
   return parentDef.$inlineChildren.includes(childTag);
 }
@@ -85,12 +103,12 @@ export function isInlineInContext(childTag, parentTag) {
  * @param {string} tag
  * @returns {InlineAction[] | null}
  */
-export function getInlineActions(tag) {
-  const def = /** @type {Record<string, ElementDef>} */ (elementsMeta.$defs)[tag];
+export function getInlineActions(tag: string) {
+  const def = (elementsMeta.$defs as Record<string, ElementDef>)[tag];
   if (!def) return null;
   let actions = def.$inlineActions;
   if (typeof actions === "string") {
-    const refDef = /** @type {Record<string, ElementDef>} */ (elementsMeta.$defs)[actions];
+    const refDef = (elementsMeta.$defs as Record<string, ElementDef>)[actions];
     actions = refDef?.$inlineActions ?? undefined;
   }
   if (!Array.isArray(actions)) return null;
@@ -99,10 +117,8 @@ export function getInlineActions(tag) {
 
 // ─── Editing state ─────────────────────────────────────────────────────────
 
-/** @type {HTMLElement | null} */
-let activeEl = null; // currently contenteditable element
-/** @type {JxPath | null} */
-let activePath = null; // JSON path to the active element
+let activeEl: HTMLElement | null = null; // currently contenteditable element
+let activePath: JxPath | null = null; // JSON path to the active element
 /**
  * @type {((
  *       path: JxPath,
@@ -111,19 +127,28 @@ let activePath = null; // JSON path to the active element
  *     ) => void)
  *   | null}
  */
-let commitFn = null; // function(path, newChildren, newTextContent) to commit changes
+let commitFn:
+  | ((
+      path: JxPath,
+      children: (JxMutableNode | string)[] | null,
+      textContent: string | null,
+    ) => void)
+  | null = null; // function(path, newChildren, newTextContent) to commit changes
 /**
  * @type {((path: JxPath, beforeChildren: JxContentResult, afterChildren: JxContentResult) => void)
  *   | null}
  */
-let splitFn = null; // function(path, beforeChildren, afterChildren) to split paragraph
+let splitFn:
+  | ((path: JxPath, beforeChildren: JxContentResult, afterChildren: JxContentResult) => void)
+  | null = null; // function(path, beforeChildren, afterChildren) to split paragraph
 /**
  * @type {((path: JxPath, elementDef: SlashCommand, commitData?: JxContentResult) => void)
  *   | null}
  */
-let insertFn = null; // function(path, elementDef, commitData?) to insert after current block
-/** @type {(() => void) | null} */
-let endFn = null; // function() called when editing stops
+let insertFn:
+  | ((path: JxPath, elementDef: SlashCommand, commitData?: JxContentResult) => void)
+  | null = null; // function(path, elementDef, commitData?) to insert after current block
+let endFn: (() => void) | null = null; // function() called when editing stops
 
 /**
  * Check if an element is a text-bearing editable block.
@@ -131,7 +156,7 @@ let endFn = null; // function() called when editing stops
  * @param {HTMLElement} el
  * @returns {boolean}
  */
-export function isEditableBlock(el) {
+export function isEditableBlock(el: HTMLElement) {
   return EDITABLE_BLOCKS.has(el.tagName.toLowerCase());
 }
 
@@ -143,7 +168,7 @@ export function isEditableBlock(el) {
  * @param {JxMutableNode} [parentNode]
  * @returns {boolean}
  */
-export function isInlineElement(node, parentNode) {
+export function isInlineElement(node: JxMutableNode, parentNode?: JxMutableNode) {
   if (!node || typeof node !== "object") return false;
   const childTag = (node.tagName ?? "div").toLowerCase();
   if (parentNode) {
@@ -173,7 +198,24 @@ export function isInlineElement(node, parentNode) {
  *   onEnd: () => void;
  * }} callbacks
  */
-export function startEditing(el, path, callbacks) {
+export function startEditing(
+  el: HTMLElement,
+  path: JxPath,
+  callbacks: {
+    onCommit: (
+      path: JxPath,
+      children: (JxMutableNode | string)[] | null,
+      textContent: string | null,
+    ) => void;
+    onSplit: (
+      path: JxPath,
+      beforeChildren: JxContentResult,
+      afterChildren: JxContentResult,
+    ) => void;
+    onInsert: (path: JxPath, elementDef: SlashCommand, commitData?: JxContentResult) => void;
+    onEnd: () => void;
+  },
+) {
   if (activeEl) stopEditing();
 
   activeEl = el;
@@ -259,7 +301,7 @@ export function getActiveElement() {
 // ─── Event handlers ────────────────────────────────────────────────────────
 
 /** @param {KeyboardEvent} e */
-function handleKeydown(e) {
+function handleKeydown(e: KeyboardEvent) {
   if (e.key === "Escape") {
     e.preventDefault();
     e.stopPropagation();
@@ -325,7 +367,7 @@ function handleInput() {
 }
 
 /** @param {FocusEvent} _e */
-function handleBlur(_e) {
+function handleBlur(_e: FocusEvent) {
   // Don't close if focus moved to slash menu
   if (isSlashMenuOpen()) return;
 
@@ -338,7 +380,7 @@ function handleBlur(_e) {
 }
 
 /** @param {ClipboardEvent} e */
-function handlePaste(e) {
+function handlePaste(e: ClipboardEvent) {
   e.preventDefault();
   // Paste as plain text to avoid foreign HTML
   const text = e.clipboardData?.getData("text/plain") ?? "";
@@ -412,7 +454,7 @@ function commitChanges() {
  * @param {{ children?: (JxMutableNode | string)[] }} node
  * @returns {JxContentResult}
  */
-export function normalizeChildren(node) {
+export function normalizeChildren(node: { children?: (JxMutableNode | string)[] }) {
   if (!Array.isArray(node.children) || node.children.length === 0) return { textContent: "" };
 
   // Step 1: Merge adjacent text nodes
@@ -430,7 +472,7 @@ export function normalizeChildren(node) {
   }
 
   // Step 2: If all children are text, fold into textContent
-  if (merged.every((/** @type {JxMutableNode | string} */ c) => typeof c === "string")) {
+  if (merged.every((c: JxMutableNode | string) => typeof c === "string")) {
     return { textContent: merged.join("") };
   }
 
@@ -444,7 +486,7 @@ export function normalizeChildren(node) {
  * @param {HTMLElement} el
  * @returns {JxContentResult}
  */
-function elementToJx(el) {
+function elementToJx(el: HTMLElement): JxContentResult {
   const nodes = el.childNodes;
 
   // If just a single text node, use textContent
@@ -454,8 +496,7 @@ function elementToJx(el) {
   }
 
   // Mixed content → children array
-  /** @type {(JxMutableNode | string)[]} */
-  const children = [];
+  const children: (JxMutableNode | string)[] = [];
   for (const child of nodes) {
     const jsx = domNodeToJx(child);
     if (jsx !== null && jsx !== undefined) children.push(jsx);
@@ -471,7 +512,7 @@ function elementToJx(el) {
  * @param {Node} node
  * @returns {JxMutableNode | string | null}
  */
-function domNodeToJx(node) {
+function domNodeToJx(node: Node) {
   if (node.nodeType === Node.TEXT_NODE) {
     const text = node.textContent;
     if (!text) return null;
@@ -480,21 +521,18 @@ function domNodeToJx(node) {
 
   if (node.nodeType !== Node.ELEMENT_NODE) return null;
 
-  const el = /** @type {HTMLElement} */ (node);
+  const el = node as HTMLElement;
   const tag = el.tagName.toLowerCase();
-  /** @type {JxMutableNode} */
-  const result = { tagName: tag };
+  const result: JxMutableNode = { tagName: tag };
 
   // Map browser execCommand output to our tag conventions
-  /** @type {Record<string, string>} */
-  const tagMap = { b: "strong", i: "em", s: "del", strike: "del" };
+  const tagMap: Record<string, string> = { b: "strong", i: "em", s: "del", strike: "del" };
   if (tagMap[tag]) result.tagName = tagMap[tag];
 
   // Attributes
-  if (tag === "a" && /** @type {HTMLAnchorElement} */ (el).href) {
+  if (tag === "a" && (el as HTMLAnchorElement).href) {
     result.attributes = { href: el.getAttribute("href") };
-    if (/** @type {HTMLAnchorElement} */ (el).title)
-      result.attributes.title = /** @type {HTMLAnchorElement} */ (el).title;
+    if ((el as HTMLAnchorElement).title) result.attributes.title = (el as HTMLAnchorElement).title;
   }
   if (tag === "code") {
     result.textContent = el.textContent;
@@ -524,15 +562,14 @@ function domNodeToJx(node) {
  * @param {DocumentFragment} frag
  * @returns {JxContentResult}
  */
-function fragmentToJx(frag) {
+function fragmentToJx(frag: DocumentFragment) {
   const nodes = frag.childNodes;
   if (nodes.length === 0) return { textContent: "" };
   if (nodes.length === 1 && nodes[0].nodeType === Node.TEXT_NODE) {
     return { textContent: nodes[0].textContent };
   }
 
-  /** @type {(JxMutableNode | string)[]} */
-  const children = [];
+  const children: (JxMutableNode | string)[] = [];
   for (const child of nodes) {
     const jsx = domNodeToJx(child);
     if (jsx) children.push(jsx);
@@ -556,9 +593,9 @@ function fragmentToJx(frag) {
  * @param {Range} range
  * @returns {string}
  */
-function getTextBeforeCursor(range) {
+function getTextBeforeCursor(range: Range) {
   const preRange = document.createRange();
-  preRange.setStart(/** @type {Node} */ (activeEl), 0);
+  preRange.setStart(activeEl!, 0);
   preRange.setEnd(range.startContainer, range.startOffset);
   return preRange.toString();
 }
@@ -602,7 +639,7 @@ function updateSlashMenu() {
 }
 
 /** @param {SlashCommand} cmd */
-function handleSlashSelect(cmd) {
+function handleSlashSelect(cmd: SlashCommand) {
   if (!activeEl || !insertFn || !activePath) return;
 
   // Remove the /command text from the element
@@ -614,11 +651,10 @@ function handleSlashSelect(cmd) {
     if (slashIdx >= 0) {
       const walker = document.createTreeWalker(activeEl, NodeFilter.SHOW_TEXT);
       let charCount = 0;
-      /** @type {Text | null} */
-      let slashNode = null;
+      let slashNode: Text | null = null;
       let slashOffset = 0;
       while (walker.nextNode()) {
-        const node = /** @type {Text} */ (walker.currentNode);
+        const node = walker.currentNode as Text;
         if (charCount + node.length > slashIdx) {
           slashNode = node;
           slashOffset = slashIdx - charCount;