@jxsuite/studio 2.0.1 → 2.1.0

package/src/canvas/iframe-inline-edit.ts

@@ -22,8 +22,12 @@
 import {
   commitActiveBlock,
   getActiveElement,
+  handleSlashTrigger,
   isEditableBlock,
   isEditing,
+  isSlashActive,
+  openSlashMenu,
+  refreshSlashMenu,
   splitActiveBlock,
   startEditing,
   stopEditing,
@@ -452,6 +456,23 @@ export function startIframeInlineEdit(
     onSplit: () => splitActiveBlock(),
   });
 
+  /* The slash gesture, at the EDITING HOST.
+     `editor/inline-edit.ts` recognised "/" in a `keydown` listener it attached to the BLOCK, and
+     for an ordinary block the editing host is this container — so the focused element, and every
+     keydown's target, is the container and that listener never fired. Typing "/" in the canvas
+     simply inserted a slash: the menu the docs describe, and the shot the manifest quarantined,
+     had no trigger at all. It is recognised here, where the keystrokes are, and the engine still
+     owns what a slash MEANS (start of a block or after a space; anywhere else it is punctuation).
+     The matching `input` half re-filters the open menu, for the same reason: a contenteditable's
+     `input` targets its host, not the block the caret happens to be in. */
+  const onSlashKey = (e: Event) => handleSlashTrigger(e as KeyboardEvent);
+  const onSlashInput = () => {
+    if (isSlashActive()) {
+      refreshSlashMenu();
+    }
+  };
+  container.addEventListener("keydown", onSlashKey);
+  container.addEventListener("input", onSlashInput);
   doc.addEventListener("mouseup", onMouseUp, true);
   doc.addEventListener("keyup", onKeyUp, true);
   doc.addEventListener("blur", onBlurCapture, true);
@@ -461,6 +482,14 @@ export function startIframeInlineEdit(
       applyFormatIntent(msg.intent);
       return;
     }
+    if (msg.kind === "openSlash") {
+      /* Opened BY NAME, so there is no "/" in the document to anchor it — the engine gives this
+         menu its own filter field and deletes nothing when a block is chosen. `openSlashMenu`
+         refuses when no caret session is live, which is the same refusal the record's `requires`
+         sentence states. */
+      openSlashMenu({ anchored: false });
+      return;
+    }
     if (msg.kind === "flushEdits") {
       // Commit anything the idle tick has not yet written, THEN acknowledge. The commit is posted
       // First, so a parent that has seen the acknowledgement has already applied the text.
@@ -492,6 +521,8 @@ export function startIframeInlineEdit(
   });
 
   return () => {
+    container.removeEventListener("keydown", onSlashKey);
+    container.removeEventListener("input", onSlashInput);
     doc.removeEventListener("mouseup", onMouseUp, true);
     doc.removeEventListener("keyup", onKeyUp, true);
     doc.removeEventListener("blur", onBlurCapture, true);

package/src/canvas/iframe-interaction.ts

@@ -95,8 +95,10 @@ export interface InteractionDeps {
    */
   getShadowDoc: () => JxMutableNode | null;
   /**
-   * The live render's canvas mode. Insertion "+" zones are a document-editing affordance —
-   * suppressed for stylebook renders (specimens aren't insert targets). Absent = permissive.
+   * The live render's canvas mode. Editing affordances are suppressed per mode: insertion "+" zones
+   * are meaningless for stylebook renders (specimens aren't insert targets), and preview reports
+   * nothing at all beyond link intent — no hit, no hover, no zones, no Jx context menu — because a
+   * preview is the shipped page, not a document you can point at. Absent = permissive.
    */
   getMode?: () => string;
   /**
@@ -129,6 +131,31 @@ export function startInteraction(
   let lastZonesKey: string | null = null;
   let lastGen = deps?.getGen?.() ?? 0;
 
+  /**
+   * Whether this render is a preview. Preview is the fidelity view: it has no selection, no hover
+   * box, no insertion "+" and no Jx element menu, so the frame reports none of them. (The host
+   * refuses the same messages independently — the iframe bundle ships prebuilt, so neither side may
+   * rely on the other's build being current.)
+   */
+  const isPreview = () => deps?.getMode?.() === "preview";
+
+  /**
+   * Report that the person is now working in this frame's pane — every mode, every button, every
+   * target.
+   *
+   * `pointerdown` rather than `click`, and unconditional rather than mode-gated, because both of
+   * `hit`'s holes are holes in what a CLICK means here. In preview there is no `hit` by design (a
+   * click in preview is a click on the page), and in edit/design `hit` is posted only when the
+   * click lands on a `[data-jx-path]` node — so an artboard's empty margin, a right-click, and
+   * every single interaction with a Preview pane all left the keyboard in the other pane.
+   *
+   * It carries nothing, which is what makes it safe to send from preview: the parent moves pane
+   * focus and does not touch the document, so the page underneath is still just a page.
+   */
+  const onPointerDown = () => {
+    channel.post({ kind: "paneFocus" });
+  };
+
   const onClick = (e: Event) => {
     /*
      * Preview keeps anchors live, so a click would navigate this iframe and destroy the render (and
@@ -139,18 +166,29 @@ export function startInteraction(
      * Design/edit never reach this: the runtime de-links anchors onto `data-jx-href` there, so there
      * is no navigation to intercept and a click means "select this element".
      */
-    if (deps?.getMode?.() === "preview" && e.target instanceof Element) {
-      const anchor = e.target.closest("a[href]");
-      const href = anchor?.getAttribute("href");
-      if (href && !href.startsWith("#")) {
-        e.preventDefault();
-        channel.post({ href, kind: "previewNavigate" });
-        return;
+    if (isPreview()) {
+      if (e.target instanceof Element) {
+        const anchor = e.target.closest("a[href]");
+        const href = anchor?.getAttribute("href");
+        if (href && !href.startsWith("#")) {
+          e.preventDefault();
+          channel.post({ href, kind: "previewNavigate" });
+        }
       }
+      // No hit post: a click in preview is a click on the page, never a selection.
+      return;
     }
     const hit = nearestHit(e.target);
     if (hit) {
-      channel.post({ hit, kind: "hit" });
+      // Ctrl/Cmd is the accumulate gesture (§6.5). The iframe reports the modifier and nothing
+      // Else — it holds no selection state, so what a modified click MEANS is the parent's to
+      // Decide, exactly as the unmodified click already was.
+      const mouse = e as MouseEvent;
+      channel.post({
+        additive: mouse.ctrlKey === true || mouse.metaKey === true,
+        hit,
+        kind: "hit",
+      });
     }
   };
 
@@ -163,6 +201,9 @@ export function startInteraction(
    * the key was ever compared — a forced layout per mouse move, thrown away almost every time.
    */
   const reportHover = (el: HTMLElement | null) => {
+    if (isPreview()) {
+      return;
+    }
     const key = el?.dataset.jxPath ?? null;
     if (key === lastHoverKey) {
       return;
@@ -186,7 +227,7 @@ export function startInteraction(
 
   /** Resolve + post the insertion "+" zones for an iframe-viewport cursor, deduped by key. */
   const reportInsertZones = (target: EventTarget | null, cursor: { x: number; y: number }) => {
-    if (!deps || deps.getMode?.() === "stylebook") {
+    if (!deps || deps.getMode?.() === "stylebook" || isPreview()) {
       return;
     }
     syncZoneGen();
@@ -242,7 +283,7 @@ export function startInteraction(
       return;
     }
     reportHover(null);
-    if (deps && lastZonesKey !== "none") {
+    if (deps && !isPreview() && lastZonesKey !== "none") {
       lastZonesKey = "none";
       channel.post({ kind: "insertZones", zones: null });
     }
@@ -250,23 +291,41 @@ export function startInteraction(
 
   const onContextMenu = (e: Event) => {
     const me = e as MouseEvent;
+    // Preview keeps the NATIVE menu: the Jx element menu's verbs (duplicate, delete, paste, wrap)
+    // Are document edits, and preview does not edit. Copy Link Address does what it says instead.
+    if (isPreview()) {
+      return;
+    }
     // Inside the ACTIVE editable keep the NATIVE menu (spellcheck / paste) — the session owns it.
     const active = isEditing() ? getActiveElement() : null;
     if (active && e.target instanceof Node && active.contains(e.target)) {
       return;
     }
-    // Suppress the browser menu everywhere else (legacy parity — the deleted panel-events handler
-    // PreventDefaulted even with no element hit) and let the parent show the Jx element menu.
-    e.preventDefault();
     const hit = nearestHit(e.target);
+    /*
+     * NO ELEMENT UNDER THE POINTER — keep the browser's menu.
+     *
+     * This called `preventDefault()` before looking, "legacy parity" with a handler that did the
+     * same. The parent then posts `path: null`, `showContextMenu` returns early on it, and the
+     * result is a right-click that suppresses the browser menu and shows nothing in its place:
+     * plan §10's dead zone, named there as the thing to fix. The margin around the artboard is
+     * exactly where a reader reaches for View Source or Inspect.
+     */
+    if (!hit) {
+      return;
+    }
+    // An element IS under the pointer, so the Jx element menu is the right answer and the browser's
+    // Would be a worse one.
+    e.preventDefault();
     channel.post({
       kind: "contextMenu",
-      path: hit ? hit.path : null,
+      path: hit.path,
       x: me.clientX,
       y: me.clientY,
     });
   };
 
+  doc.addEventListener("pointerdown", onPointerDown, true);
   doc.addEventListener("click", onClick, true);
   doc.addEventListener("pointermove", onMove, true);
   doc.addEventListener("pointerleave", onLeave, true);
@@ -277,6 +336,7 @@ export function startInteraction(
       cancelRaf(movePending);
       movePending = 0;
     }
+    doc.removeEventListener("pointerdown", onPointerDown, true);
     doc.removeEventListener("click", onClick, true);
     doc.removeEventListener("pointermove", onMove, true);
     doc.removeEventListener("pointerleave", onLeave, true);

package/src/canvas/iframe-keys.ts

@@ -1,66 +1,121 @@
 /// <reference lib="dom" />
 /**
- * In-iframe keyboard forwarding. Studio's shortcuts are bound to the EDITOR document, so once focus
- * moves into the canvas iframe (a click selects a node there) undo/redo/save/delete/duplicate/arrow
- * navigation stop firing. This captures the global-shortcut subset inside the iframe, prevents the
- * browser default, and posts a flattened event the parent re-dispatches to its shortcut handler.
+ * In-iframe keyboard forwarding — one authority, synced from the host's keymap.
  *
- * The subset mirrors `editor/shortcuts.ts`: any Ctrl/Cmd combo, plus the bare editing/navigation
- * keys. Keystrokes while an editable element (input / contenteditable — e.g. a future inline edit)
- * is focused inside the iframe are left alone so typing still works.
+ * Studio's chords are dispatched against the EDITOR document, so once focus moves into the canvas
+ * iframe (a click selects a node there) nothing the parent binds fires. This captures the
+ * keystrokes the parent actually wants, prevents their default, and posts a flattened event the
+ * host re-dispatches into its own registry.
+ *
+ * **Which keystrokes those are is no longer written down here.** It used to be, in three
+ * hand-maintained lists — eight bare keys, four "the editor owns these" chords, three "the browser
+ * owns these" chords — kept beside a registry that already knew the answer, and they disagreed with
+ * it in both directions:
+ *
+ * - **⌘A was forwarded AND prevented.** No record binds it, so the host claimed nothing and select-
+ *   all did nothing — while the `preventDefault` had already suppressed the browser's own, so a
+ *   writer mid-sentence could not select their paragraph either. Two ways of doing nothing.
+ * - **⌘B was withheld**, on the list's stated assumption that "the editing engine implements it
+ *   itself". It does not: `editor/inline-edit.ts`'s keydown listener is attached to the BLOCK while
+ *   the editing host is the canvas container, so it never fires, and `canvas/editable-actions.ts`
+ *   rejects the browser's native `formatBold` because Jx owns its own markup. Bold in the canvas
+ *   did nothing at all, under a toolbar advertising ⌘B.
+ *
+ * So the frame is told the table instead ({@link ParentToIframe} `keymap`), and answers the
+ * question by RESOLVING: pick the scope stack the host would pick, and forward iff some scope in it
+ * claims the chord. Everything the three lists encoded falls out of that, without being encoded:
+ *
+ * - The clipboard trio is bound at `canvas` scope only (`editor/context-menu.ts`), so with a caret
+ *   session live the stack is `["caret", "global"]`, nothing claims ⌘C/⌘X/⌘V, and the browser's own
+ *   copy of the selected TEXT happens — the old `CLIPBOARD_CHORDS` contract, derived rather than
+ *   listed.
+ * - The bare editing keys (Backspace, Enter, the arrows) are `canvas`-scoped for the same reason and
+ *   behave the same way.
+ * - `format.*` is `caret`-scoped, so ⌘B forwards exactly while a caret exists and the host posts
+ *   `applyFormat` back — the path the toolbar's own buttons have always taken.
+ *
+ * The remaining local rule is a real one: a genuine `INPUT` / `TEXTAREA` / `SELECT` inside the
+ * rendered page (an author's own form) keeps every keystroke, because Backspace and Enter are
+ * canvas-bound and a resolved table would happily prevent them mid-field.
  */
 
-import type { IframeChannel } from "./iframe-channel";
-import type { IframeToParent, ParentToIframe, SerializedKey } from "./iframe-protocol";
+import { chordFromEvent } from "../commands/keymap";
 
-/** Bare (non-modifier) keys the editor's shortcut handler acts on. */
-const BARE_FORWARD_KEYS: ReadonlySet<string> = new Set([
-  "Delete",
-  "Backspace",
-  "Escape",
-  "Enter",
-  "ArrowUp",
-  "ArrowDown",
-  "ArrowLeft",
-  "ArrowRight",
-]);
+import type { KeyScope } from "../commands/levels";
+
+import type { IframeChannel } from "./iframe-channel";
+import type { IframeToParent, ParentToIframe, SerializedKey, SyncedChord } from "./iframe-protocol";
 
 /**
- * Chords the EDITOR owns even while the caret is in text. Everything else with a modifier is a
- * document-level command (save, undo, duplicate, zoom) and must reach the parent.
+ * The three scopes a canvas frame can ever be dispatching under.
+ *
+ * The host projects exactly these out of the keymap ({@link import("../commands/keymap").
+ * chordsInScopes}) — narrower than "every scope", because the grid and code engines, the focused
+ * dock and the palette are other surfaces entirely and their chords must not make a canvas swallow
+ * a keystroke.
  */
-const EDITOR_OWNED_CHORDS: ReadonlySet<string> = new Set(["b", "i", "u", "`"]);
+export const FRAME_KEY_SCOPES = ["caret", "canvas", "global"] as const;
+
+/** The scope stack a caret session is in — app chords still fire, element-level ones do not. */
+const CARET_STACK = ["caret", "global"] as const;
+/** The stack with a selection but no caret: structural verbs are live. */
+const CANVAS_STACK = ["canvas", "global"] as const;
+/** Preview draws no overlays and posts no hits, so element-level chords have nothing to aim at. */
+const GLOBAL_STACK = ["global"] as const;
+
+/** The synced table, plus the platform the chords were computed for. */
+export interface ForwardTable {
+  mac: boolean;
+  chords: readonly SyncedChord[];
+}
 
-/** Whether `el` is a text-entry target whose own keystrokes must not be hijacked. */
-function isEditableTarget(el: EventTarget | null): boolean {
+/** An empty table — what the frame knows before the host's first `keymap` message arrives. */
+export const NO_TABLE: ForwardTable = { chords: [], mac: false };
+
+/** Whether `el` is a text-entry control in the RENDERED PAGE whose keystrokes are its own. */
+function isPageTextEntry(el: EventTarget | null): boolean {
   if (!(el instanceof HTMLElement)) {
     return false;
   }
-  if (el.isContentEditable) {
-    return true;
-  }
   return el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT";
 }
 
 /**
- * Whether this keydown belongs to the global-shortcut subset the parent handles.
+ * The scope stack this keystroke would be dispatched under, host-side.
  *
- * The canvas is now a persistent `contenteditable` root, so "is the target editable" is true for
- * essentially every keystroke on the canvas — using it alone (as this once did) would mean ⌘S, ⌘Z
- * and ⌘C never reached the parent at all while the caret was in a document. The split is instead by
- * INTENT:
+ * The same ladder as `commands/context.ts`'s `keyScopeStack`, minus the branches the frame cannot
+ * be in: there is no modal and no focused dock inside the canvas, and the grid and code engines are
+ * other editors entirely. Keeping the two in step is what makes the forwarding decision and the
+ * dispatch decision the same decision.
+ */
+export function frameScopeStack(sessionLive: boolean, mode: string): readonly KeyScope[] {
+  if (sessionLive) {
+    return CARET_STACK;
+  }
+  return mode === "preview" ? GLOBAL_STACK : CANVAS_STACK;
+}
+
+/**
+ * Whether the parent's registry claims this keystroke.
  *
- * - Bare editing/navigation keys (Backspace, Enter, the arrows) belong to the caret when there is
- *   one, and to structural selection when there is not.
- * - Modifier chords are app commands and always forward, EXCEPT the inline-formatting ones the
- *   editing engine implements itself.
+ * `""` from {@link chordFromEvent} means a bare modifier — the start of every chord — and is never
+ * forwarded.
  */
-export function shouldForwardKey(e: KeyboardEvent): boolean {
-  const editable = isEditableTarget(e.target);
-  if (e.ctrlKey || e.metaKey) {
-    return !(editable && EDITOR_OWNED_CHORDS.has(e.key.toLowerCase()));
+export function shouldForwardKey(
+  e: KeyboardEvent,
+  table: ForwardTable = NO_TABLE,
+  sessionLive = false,
+  mode = "design",
+): boolean {
+  if (isPageTextEntry(e.target)) {
+    return false;
   }
-  return !editable && BARE_FORWARD_KEYS.has(e.key);
+  const chord = chordFromEvent(e, table.mac);
+  if (!chord) {
+    return false;
+  }
+  const stack = frameScopeStack(sessionLive, mode);
+  return table.chords.some((entry) => entry.chord === chord && stack.includes(entry.scope));
 }
 
 /** Flatten a KeyboardEvent to the structured-cloneable subset the bridge carries. */
@@ -76,15 +131,22 @@ export function serializeKey(e: KeyboardEvent): SerializedKey {
 }
 
 /**
- * Listen for global-shortcut keystrokes on the iframe document, prevent their default, and forward
- * them to the parent. Returns a teardown function.
+ * Listen for the parent's chords on the iframe document, prevent their default, and forward them.
+ * Returns a teardown function.
+ *
+ * All three accessors are read PER KEYSTROKE, never captured: the table is replaced whenever the
+ * author rebinds a key, the session comes and goes under the same listener, and the mode changes
+ * without one.
  */
 export function startKeyForwarding(
   channel: IframeChannel<IframeToParent, ParentToIframe>,
   doc: Document = document,
+  isSessionLive: () => boolean = () => false,
+  getTable: () => ForwardTable = () => NO_TABLE,
+  getMode: () => string = () => "design",
 ): () => void {
   const onKey = (e: KeyboardEvent) => {
-    if (!shouldForwardKey(e)) {
+    if (!shouldForwardKey(e, getTable(), isSessionLive(), getMode())) {
       return;
     }
     e.preventDefault();

package/src/canvas/iframe-overlay.ts

@@ -70,6 +70,12 @@ export interface OverlayLayer {
    * each call; pass [] to clear. Placements are overlay-local coords like setSelection's.
    */
   setPresence: (items: { placement: OverlayPlacement; color: string; label: string }[]) => void;
+  /**
+   * Draw the NON-primary members of a multi-selection (§6.5). Replaces the whole set each call;
+   * pass [] to clear, which is what a selection of one always does — one selected node draws the
+   * selection box and nothing else, exactly as it did before the selection became a list.
+   */
+  setCoSelection: (placements: OverlayPlacement[]) => void;
   /** Position the hover box (or hide it when `placement` is null). */
   setHover: (placement: OverlayPlacement | null) => void;
   /**
@@ -97,6 +103,13 @@ export interface OverlayLayer {
    * shows exactly one of them. `placement` is overlay-local like the others; null hides it.
    */
   setReplaceTarget: (placement: OverlayPlacement | null) => void;
+  /**
+   * Hide (or restore) the whole layer. Preview renders get it suppressed: the editing affordances
+   * are gated message-by-message in the host, and this is the single switch that guarantees none of
+   * them can be PAINTED over a page that is supposed to look shipped — including any box a
+   * still-in-flight reply from a pre-preview render would otherwise land.
+   */
+  setSuppressed: (suppressed: boolean) => void;
   /** The clickable "+" button, so the caller can attach click + hover (grace-timer) listeners. */
   readonly insertButton: HTMLButtonElement;
   /** The layer root element (caller appends it over the iframe). */
@@ -164,7 +177,19 @@ export function createOverlayLayer(doc: Document = document): OverlayLayer {
   const presenceGroup = doc.createElement("div");
   presenceGroup.className = "overlay-presence-group";
 
-  root.append(hoverBox, selectionBox, dropBox, replaceBox, insertButton, presenceGroup);
+  // The other members of a multi-selection, same container discipline as presence.
+  const coSelectionGroup = doc.createElement("div");
+  coSelectionGroup.className = "overlay-coselection-group";
+
+  root.append(
+    hoverBox,
+    selectionBox,
+    coSelectionGroup,
+    dropBox,
+    replaceBox,
+    insertButton,
+    presenceGroup,
+  );
 
   return {
     dispose: () => root.remove(),
@@ -174,6 +199,18 @@ export function createOverlayLayer(doc: Document = document): OverlayLayer {
     setHover: (placement) => place(hoverBox, placement),
     setInsertZone: (placement, edge = "center") => placeInsertButton(insertButton, placement, edge),
     setReplaceTarget: (placement) => place(replaceBox, placement),
+    setSuppressed: (suppressed) => {
+      root.style.display = suppressed ? "none" : "";
+    },
+    setCoSelection: (placements) => {
+      coSelectionGroup.replaceChildren();
+      for (const placement of placements) {
+        const box = doc.createElement("div");
+        box.className = "overlay-box overlay-selection overlay-coselection";
+        place(box, placement);
+        coSelectionGroup.append(box);
+      }
+    },
     setPresence: (items) => {
       presenceGroup.replaceChildren();
       for (const item of items) {