@jxsuite/studio 2.0.0 → 2.1.0

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

@@ -1,15 +1,17 @@
 /// <reference lib="dom" />
 // ─── Convert to Component ─────────────────────────────────────────────────────
 import { html, render as litRender } from "lit-html";
+import { displayTagName } from "@jxsuite/schema/guards";
 import { errorMessage } from "@jxsuite/schema/parse";
 import { ref } from "lit-html/directives/ref.js";
 import { childIndex, getNodeAtPath, parentElementPath } from "../store";
+import { primarySelection } from "../tabs/selection";
 import { activeTab } from "../workspace/workspace";
 import { transact } from "../tabs/transact";
 import { componentRegistry, computeRelativePath, loadComponentRegistry } from "../files/components";
 import { getPlatform } from "../platform";
 import { jsonClone } from "../utils/studio-utils";
-import { statusMessage } from "../panels/statusbar";
+import { notify } from "../services/notify";
 import { showDialog } from "../ui/layers";
 import { validateComponentSlots } from "../services/cem-export";
 
@@ -20,11 +22,12 @@ 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) {
+  const selected = primarySelection(tab?.session.selection);
+  if (!tab || !selected || selected.length < 2) {
     return;
   }
 
-  const node = getNodeAtPath(tab.doc.document, tab.session.selection);
+  const node = getNodeAtPath(tab.doc.document, selected);
   if (!node || !node.tagName) {
     return;
   }
@@ -44,8 +47,8 @@ export async function convertToComponent() {
   const refPath = computeRelativePath(tab.documentPath, componentFile);
 
   // Single atomic mutation: replace node + add $elements ref
-  const selectionPath = tab.session.selection;
-  transact(tab, (doc) => {
+  const selectionPath = selected;
+  const converted = transact(tab, (doc) => {
     // Navigate to parent's children array and replace the node
     const pp = parentElementPath(selectionPath) ?? [];
     const idx = childIndex(selectionPath) as number;
@@ -71,6 +74,15 @@ export async function convertToComponent() {
       doc.$elements.push({ $ref: refPath });
     }
   });
+  /* THE FILE IS WRITTEN ONLY IF THE DOCUMENT TOOK THE REFERENCE.
+     `transact` consults the collab gate, which pauses structural editing while source is canonical.
+     A refusal used to be invisible here: the extraction still wrote `components/<name>.json` to
+     disk and still said "Converted to <name>" — leaving a component file nothing references, in a
+     document the author was told had been changed. The gate raises its own toast saying why the
+     edit is paused; the honest thing to add to it is nothing at all. */
+  if (!converted) {
+    return;
+  }
 
   // Write component file and refresh registry
   try {
@@ -78,13 +90,22 @@ export async function convertToComponent() {
     await platform.writeFile(componentFile, JSON.stringify(componentDef, null, 2));
     await loadComponentRegistry();
     const warning = validateComponentSlots(componentDef);
+    notify.success(`Converted to <${name}>`);
     if (warning) {
-      statusMessage(`Converted to <${name}> — Warning: ${warning}`, 6000);
-    } else {
-      statusMessage(`Converted to <${name}>`);
+      // A slot warning is a thing to FIX, not a thing to read once: the component is written and
+      // Usable, and the defect stays listed until somebody edits it.
+      notify.warn(`<${name}> has a slot problem: ${warning}`, {
+        path: componentFile,
+        source: "Components",
+        tier: "problem",
+      });
     }
   } catch (error) {
-    statusMessage(`Error saving component: ${errorMessage(error)}`);
+    notify.error(`Could not save the <${name}> component.`, {
+      detail: errorMessage(error),
+      path: componentFile,
+      source: "Components",
+    });
   }
 }
 
@@ -98,7 +119,7 @@ function deriveDefaultName(node: JxMutableNode) {
   if (node.$id && node.$id.includes("-")) {
     return node.$id.toLowerCase();
   }
-  const tag = (node.tagName ?? "div").toLowerCase();
+  const tag = (displayTagName(node.tagName) || "div").toLowerCase();
   return tag.includes("-") ? tag : `jx-${tag}`;
 }
 

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

@@ -3,6 +3,7 @@
 import { html, render as litRender, nothing } from "lit-html";
 import { ref } from "lit-html/directives/ref.js";
 import { childIndex, childList, getNodeAtPath, parentElementPath } from "../store";
+import { primarySelection } from "../tabs/selection";
 import { activeTab } from "../workspace/workspace";
 import { transactDoc } from "../tabs/transact";
 import { showDialog } from "../ui/layers";
@@ -21,11 +22,11 @@ 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) {
+  const path = primarySelection(tab?.session.selection);
+  if (!tab || !path || path.length < 2) {
     return;
   }
 
-  const path = tab.session.selection;
   const node = getNodeAtPath(tab.doc.document, path);
   if (!node) {
     return;

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

@@ -182,7 +182,7 @@ export function applyBlockMerge(
     // Linger as invisible structure that still occupies layout and shows up in the layers panel.
     pruneEmptyAncestors(t, parentElementPath(fromPath) as JxPath);
     if (isTabActive(tab)) {
-      t.session.selection = intoPath;
+      t.session.selection = [intoPath];
     }
   });
 
@@ -248,7 +248,7 @@ export function applyInlineSplit(
     // A background tab's selection stays exactly as the user left it — only the visible tab's
     // Selection follows the split.
     if (isTabActive(tab)) {
-      t.session.selection = newPath;
+      t.session.selection = [newPath];
     }
   });
   return newPath;
@@ -279,7 +279,7 @@ export function applyInlineInsert(
         mutateUpdateProperty(t, path, "textContent");
       }
       if (isTabActive(tab)) {
-        t.session.selection = path;
+        t.session.selection = [path];
       }
     });
     return path;
@@ -303,7 +303,7 @@ export function applyInlineInsert(
     }
     mutateInsertNode(t, parentPath, idx + 1, structuredClone(elementDef));
     if (isTabActive(tab)) {
-      t.session.selection = newPath;
+      t.session.selection = [newPath];
     }
   });
   return newPath;
@@ -364,7 +364,7 @@ export function applyRangeReplace(
       }
     }
     if (isTabActive(tab)) {
-      t.session.selection = from.path;
+      t.session.selection = [from.path];
     }
   });
 

package/src/editor/inline-edit.ts

@@ -8,7 +8,8 @@
  */
 
 import elementsMeta from "../../data/elements-meta.json";
-import { normalizeInlineContent, toggleInlineFormat } from "./inline-format";
+import { displayTagName } from "@jxsuite/schema/guards";
+import { normalizeInlineContent } from "./inline-format";
 import { isEditableTag } from "./editable-tags";
 import type { EditableVerdicts } from "./editable-tags";
 import type { JxPath } from "../state";
@@ -51,6 +52,14 @@ export interface InlineAction {
   label: string;
   icon?: string;
   command?: string;
+  /**
+   * REMOVED from the data, and the field stays only so an older `elements-meta.json` still parses.
+   *
+   * It held `"Cmd+B"` — a mac spelling, printed verbatim into every tooltip on every platform,
+   * which is the hardcoded-chord defect plan §5.3 exists to kill. The chord now lives on the
+   * `format.*` record (`panels/block-action-bar.ts`) and is formatted by the keymap's one
+   * formatter. Nothing reads this.
+   */
   shortcut?: string;
 }
 
@@ -213,9 +222,9 @@ export function isInlineElement(node: JxMutableNode, parentNode?: JxMutableNode)
   if (!node || typeof node !== "object") {
     return false;
   }
-  const childTag = (node.tagName ?? "div").toLowerCase();
+  const childTag = (displayTagName(node.tagName) || "div").toLowerCase();
   if (parentNode) {
-    const parentTag = (parentNode.tagName ?? "div").toLowerCase();
+    const parentTag = (displayTagName(parentNode.tagName) || "div").toLowerCase();
     return isInlineInContext(childTag, parentTag);
   }
   return INLINE_TAGS.has(childTag);
@@ -423,57 +432,25 @@ function handleKeydown(e: KeyboardEvent) {
     if ((e.ctrlKey || e.metaKey) && ["b", "i", "u", "`"].includes(e.key)) {
       e.preventDefault();
     }
-    return;
   }
 
   // Escape and Enter are NOT handled here. Enter arrives as a `beforeinput` (`insertParagraph`),
   // Which is the one place structural intent is classified; Escape belongs to the editing host,
   // Which owns dismissing the caret. See {@link file://../canvas/iframe-editable-root.ts}.
-
-  // Slash command trigger
-  if (e.key === "/" && !e.ctrlKey && !e.metaKey) {
-    // Check if at start of empty block or after a space/newline
-    const sel = window.getSelection();
-    if (sel && sel.rangeCount > 0) {
-      const range = sel.getRangeAt(0);
-      const textBefore = getTextBeforeCursor(range);
-      if (textBefore === "" || textBefore.endsWith(" ") || textBefore.endsWith("\n")) {
-        // Let the / character be typed, then show menu on next input
-        requestAnimationFrame(() => openSlashMenu());
-        return;
-      }
-    }
-  }
-
-  // Rich text shortcuts
-  if (e.ctrlKey || e.metaKey) {
-    switch (e.key) {
-      case "b": {
-        e.preventDefault();
-        toggleInlineFormat("strong", activeEl);
-        break;
-      }
-      case "i": {
-        e.preventDefault();
-        toggleInlineFormat("em", activeEl);
-        break;
-      }
-      case "`": {
-        e.preventDefault();
-        toggleInlineFormat("code", activeEl);
-        break;
-      }
-      default: {
-        break;
-      }
-    }
-  }
+  //
+  // Neither is the "/" gesture, and neither are the format chords. Both used to be here, and
+  // Both were DEAD: this listener is attached to the BLOCK, and for an ordinary block the editing
+  // Host is the canvas container (see {@link startEditing}), so the focused element — and every
+  // Keydown's target — is the container, never a descendant of it. The "/" trigger is
+  // {@link handleSlashTrigger}, driven from the host; the format chords are `format.*` records
+  // Whose chords the frame forwards (`canvas/iframe-keys.ts`). A revived copy here would have
+  // Toggled bold twice per press.
 }
 
 function handleInput() {
   // Check if slash menu should update or dismiss
   if (slash.isOpen()) {
-    updateSlashMenu();
+    refreshSlashMenu();
   }
 }
 
@@ -773,7 +750,28 @@ function getTextBeforeCursor(range: Range) {
 /** Track the character offset where "/" was typed so we can detect backspace-past-slash */
 let _slashFilterStart = 0;
 
-function openSlashMenu() {
+/**
+ * Whether a literal "/" in the block anchors the open menu.
+ *
+ * False when the menu was opened BY NAME — `insert.openSlashMenu`, the palette, the automation
+ * runner — where there is no slash in the text at all. Two behaviours hang off it, and both are
+ * wrong without it: the filter would be re-derived from the text before the caret and dismiss the
+ * menu on the very next keystroke, and selecting a block would delete everything from the previous
+ * slash in the line ("and/or…") back to the caret. A command-opened menu filters in its own field
+ * and deletes nothing.
+ */
+let _slashAnchored = true;
+
+/**
+ * Open the slash menu at the caret.
+ *
+ * Exported because the block-level `keydown` listener that used to call it never fires: for an
+ * ordinary block the editing host is the canvas container, so the "/" gesture is recognised at the
+ * host ({@link handleSlashTrigger}) and a command opens it from the other realm entirely.
+ *
+ * @param opts.anchored Whether a literal "/" precedes the caret. See {@link _slashAnchored}.
+ */
+export function openSlashMenu(opts?: { anchored?: boolean }): void {
   if (!activeEl || !insertFn || !activePath) {
     return;
   }
@@ -783,13 +781,48 @@ function openSlashMenu() {
     return;
   }
   const range = sel.getRangeAt(0);
+  _slashAnchored = opts?.anchored !== false;
   _slashFilterStart = getTextBeforeCursor(range).length;
 
-  slash.show(activeEl, "", { onSelect: handleSlashSelect });
+  // An unanchored menu carries its own filter field: there is no "/…" run in the document for the
+  // Author to type into, so without one the list could only ever be filtered by scrolling it.
+  slash.show(activeEl, "", {
+    onSelect: handleSlashSelect,
+    ...(_slashAnchored ? {} : { showFilter: true }),
+  });
 }
 
-function updateSlashMenu() {
-  if (!activeEl) {
+/**
+ * The "/" gesture, driven from the EDITING HOST.
+ *
+ * A slash opens the menu at the start of a block or after a space — anywhere else it is punctuation
+ * ("and/or"), and a menu there would be an ambush. The character is allowed to land first, so the
+ * document holds what the author typed whether or not they pick anything from the list.
+ */
+export function handleSlashTrigger(e: KeyboardEvent): void {
+  if (e.key !== "/" || e.ctrlKey || e.metaKey || !activeEl) {
+    return;
+  }
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) {
+    return;
+  }
+  const textBefore = getTextBeforeCursor(sel.getRangeAt(0));
+  if (textBefore === "" || textBefore.endsWith(" ") || textBefore.endsWith("\n")) {
+    requestAnimationFrame(() => openSlashMenu());
+  }
+}
+
+/**
+ * Re-filter an open menu from the text the author has typed after the "/".
+ *
+ * Exported for the same reason {@link openSlashMenu} is: the `input` listener that called it is on
+ * the block, and a contenteditable's `input` targets the editing HOST.
+ */
+export function refreshSlashMenu(): void {
+  if (!activeEl || !_slashAnchored) {
+    // The menu owns its own filter field; the document has no "/…" run to derive one from, and
+    // Deriving one would dismiss the menu on the first character.
     return;
   }
 
@@ -818,8 +851,11 @@ function handleSlashSelect(cmd: SlashCommand) {
     return;
   }
 
-  // Remove the /command text from the element
-  const sel = window.getSelection();
+  /* Remove the "/command" run the author typed — but ONLY when a "/" is what opened the menu.
+     An unanchored menu (opened by name, from the palette or `insert.openSlashMenu`) has no such
+     run, and this walk would delete from the last slash ANYWHERE earlier in the block back to the
+     caret: type "and/or" and pick Heading, and "or" goes with it. */
+  const sel = _slashAnchored ? window.getSelection() : null;
   if (sel && sel.rangeCount) {
     const range = sel.getRangeAt(0);
     const fullText = getTextBeforeCursor(range);

package/src/editor/insert-zone-action.ts

@@ -27,7 +27,7 @@ export function runInsertZoneAction(btn: HTMLElement, zone: InsertZone): void {
       const newPath = [...insertPath, "children", idx];
       transactDoc(activeTab.value, (t) => {
         mutateInsertNode(t, insertPath, idx, def);
-        t.session.selection = newPath;
+        t.session.selection = [newPath];
       });
     },
     showFilter: true,