@jxsuite/studio 0.33.0 → 0.34.0

package/src/canvas/path-mapping.ts

@@ -0,0 +1,86 @@
+/// <reference lib="dom" />
+/**
+ * Render-path mapping — pure logic shared by the legacy in-realm path mapper (which stores paths in
+ * the `elToPath` WeakMap) and the iframe host (which stamps them as `data-jx-path` attributes).
+ *
+ * The runtime fires `onNodeCreated(el, renderPath, def, state)` for every node. The render path is
+ * not always the document path: layout-wrapped pages shift page content under a layout prefix, and
+ * `prepareForEditMode` renders mapped arrays (`$prototype: Array`) as a `repeater-perimeter` whose
+ * single child hop must be collapsed back to a `map` segment. {@link classifyRenderNode} resolves a
+ * render path to either a document path or a "layout" marker; {@link serializeJxPath} encodes the
+ * result for the `data-jx-path` attribute.
+ */
+
+import type { JxPath } from "../state";
+
+/** Context the mapper needs, computed once per render by whoever prepared the document. */
+export interface PathMapCtx {
+  canvasMode: string;
+  layoutWrapped: boolean;
+  pageContentPrefix: JxPath | null;
+  pageContentOffset: number | null;
+  arrayPaths: Set<string>;
+}
+
+/** A render node either belongs to the layout chrome (no document path) or maps to a document path. */
+export type RenderNodeClass = { kind: "layout" } | { kind: "path"; path: JxPath };
+
+/**
+ * Resolve a runtime render path to a document path (or flag it as layout-originated). Pure — the
+ * caller decides whether to record the result in a WeakMap or a `data-jx-path` attribute.
+ */
+export function classifyRenderNode(path: JxPath, def: unknown, ctx: PathMapCtx): RenderNodeClass {
+  // Layout-originated nodes have no page-document path; the caller marks them (data-jx-layout).
+  if (ctx.layoutWrapped && typeof def === "object" && (def as { $__layout?: unknown })?.$__layout) {
+    return { kind: "layout" };
+  }
+
+  let mappedPath = path;
+
+  // Strip the layout prefix so paths are relative to the original page document.
+  // Page children render at indices [offset, offset+1, …] when the layout places siblings before
+  // The <slot>, so subtract the offset to recover the page's 0-based child indices.
+  if (ctx.layoutWrapped && ctx.pageContentPrefix) {
+    const pfx = ctx.pageContentPrefix;
+    if (path.length >= pfx.length && pfx.every((seg, i) => path[i] === seg)) {
+      const rest = path.slice(pfx.length);
+      const [containerIdx] = rest;
+      mappedPath =
+        typeof containerIdx === "number"
+          ? ["children", containerIdx - (ctx.pageContentOffset ?? 0), ...rest.slice(1)]
+          : ["children", ...rest];
+    }
+  }
+
+  // Collapse repeater-perimeter template hops: for an array document path P, a render path of
+  // `[...P, "children", 0, ...rest]` maps to `[...P, "map", ...rest]`. Loop for nested repeaters.
+  if ((ctx.canvasMode === "design" || ctx.canvasMode === "edit") && ctx.arrayPaths.size > 0) {
+    let changed = true;
+    while (changed) {
+      changed = false;
+      for (let i = 1; i < mappedPath.length - 1; i++) {
+        if (
+          mappedPath[i] === "children" &&
+          mappedPath[i + 1] === 0 &&
+          ctx.arrayPaths.has(mappedPath.slice(0, i).join("/"))
+        ) {
+          mappedPath = [...mappedPath.slice(0, i), "map", ...mappedPath.slice(i + 2)];
+          changed = true;
+          break;
+        }
+      }
+    }
+  }
+
+  return { kind: "path", path: mappedPath };
+}
+
+/** Encode a document path for the `data-jx-path` attribute (preserves string-vs-number segments). */
+export function serializeJxPath(path: JxPath): string {
+  return JSON.stringify(path);
+}
+
+/** Decode a `data-jx-path` attribute back into a document path. */
+export function parseJxPath(serialized: string): JxPath {
+  return JSON.parse(serialized) as JxPath;
+}

package/src/canvas/serialize-scope.ts

@@ -0,0 +1,65 @@
+/**
+ * Serialize the iframe's resolved `$defs` scope (buildScope's output) into a structured-clone-safe
+ * plain object the iframe can postMessage to the parent editor. The data-explorer panel reads this
+ * from `S.canvas.scope` to show each data source's live value; the iframe (not the parent) resolves
+ * the scope since the iframe canvas migration moved buildScope into the iframe realm.
+ *
+ * The input is the resolved `$defs` — typically a Vue reactive proxy. Reading `defs[key]`
+ * auto-unwraps a top-level `ref`/`computed` to its current value; a JSON round-trip then reads
+ * THROUGH any nested reactive proxies and drops non-cloneable residue (nested functions, symbols,
+ * proxy artifacts) so the result crosses postMessage without a DataCloneError.
+ *
+ * Pure and DOM-free — no reactivity/runtime imports — so it stays trivially unit-testable.
+ */
+
+/**
+ * Per-value size cap (in JSON-string chars). A single large content collection can be tens of KB;
+ * past this cap we store a small placeholder so one big data source can't bloat every render's
+ * postMessage. Generous on purpose — most scope values are far smaller.
+ */
+const MAX_VALUE_CHARS = 256_000;
+
+/** The placeholder stored in place of a value whose JSON string exceeds {@link MAX_VALUE_CHARS}. */
+const LARGE_VALUE_PLACEHOLDER = "[large value omitted]";
+
+/**
+ * Produce a structured-clone-safe snapshot of `defs` for the data-explorer.
+ *
+ * For each own enumerable key: - functions (`typeof v === "function"`) are SKIPPED entirely
+ * (handlers/server fns aren't data); - other values are JSON deep-cloned
+ * (`JSON.parse(JSON.stringify(v))`) inside try/catch — a throw (e.g. a computed getter that throws)
+ * or a circular/unserializable value maps the key to `null`; - a value whose JSON string exceeds
+ * the size cap is replaced with a short placeholder string.
+ *
+ * @param defs The resolved `$defs` scope (may be a Vue reactive proxy).
+ * @returns A plain object safe to `postMessage` (every value is JSON-round-trippable).
+ */
+export function serializeDataScope(defs: Record<string, unknown>): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  for (const key of Object.keys(defs)) {
+    try {
+      // Reading through the reactive proxy auto-unwraps a top-level ref/computed to its value, and
+      // Can THROW (a computed getter that throws) — done inside the try so that maps the key to null
+      // Rather than aborting the whole snapshot.
+      const value = defs[key];
+      if (typeof value === "function") {
+        continue; // Data sources only — a resolved server/handler fn isn't a "value".
+      }
+      const json = JSON.stringify(value);
+      if (json === undefined) {
+        // JSON.stringify returns undefined for a bare function/symbol/undefined at the top level.
+        out[key] = null;
+        continue;
+      }
+      if (json.length > MAX_VALUE_CHARS) {
+        out[key] = LARGE_VALUE_PLACEHOLDER;
+        continue;
+      }
+      out[key] = JSON.parse(json) as unknown;
+    } catch {
+      // A circular structure or a throwing getter → the key exists but carries no serializable value.
+      out[key] = null;
+    }
+  }
+  return out;
+}

package/src/editor/canvas-context-menu.ts

@@ -0,0 +1,40 @@
+/// <reference lib="dom" />
+/**
+ * Parent-realm adapter for canvas right-clicks: the iframe suppresses the browser menu and posts
+ * `contextMenu` with the nearest element path + iframe-viewport coords; the host converts to
+ * parent-viewport coords and calls this handler, which shows the Jx element context menu (copy /
+ * paste / insert before/after / convert / delete…). Replaces the legacy panel-events canvas
+ * contextmenu handler that died with the in-parent <div> canvas.
+ */
+
+import { dismissContextMenu, showContextMenu } from "./context-menu";
+import { bubbleInlinePath } from "../canvas/canvas-helpers";
+import { activeTab } from "../workspace/workspace";
+import type { CanvasContextMenuHandler } from "../canvas/iframe-host";
+import type { JxPath } from "../state";
+
+/**
+ * Build the handler with its studio-owned dependency (component navigation), mirroring the other
+ * host DI factories.
+ */
+export function makeCanvasContextMenuHandler(deps: {
+  navigateToComponent: (path: string) => void | Promise<void>;
+}): CanvasContextMenuHandler {
+  return {
+    dismiss: () => dismissContextMenu(),
+    show: ({ path, clientX, clientY }) => {
+      if (!path) {
+        return;
+      }
+      // Lift inline-element paths (a <strong> inside a <p>) to their block parent — right-clicking
+      // Formatted text should act on the block, matching the legacy handler.
+      const bubbled = bubbleInlinePath(activeTab.value?.doc.document, path as JxPath);
+      // ShowContextMenu reads only preventDefault/clientX/clientY from the event, so a synthetic
+      // MouseEvent carries the converted coords safely.
+      const evt = new MouseEvent("contextmenu", { clientX, clientY });
+      showContextMenu(evt, bubbled, {
+        onEditComponent: (p) => void deps.navigateToComponent(p),
+      });
+    },
+  };
+}

package/src/editor/canvas-slash-bridge.ts

@@ -0,0 +1,21 @@
+/// <reference lib="dom" />
+/**
+ * Parent-realm adapter between the canvas iframe's slash-menu bridge and the real lit/Spectrum
+ * menu. The iframe engine detects "/", its {@link file://../canvas/iframe-slash.ts} controller posts
+ * `slashShow`/`slashNav`/`slashDismiss`, the host converts coordinates and calls this handler;
+ * select/dismiss flow back over the same channel as `slashSelect`/`slashDismissed`. Registered via
+ * {@link setCanvasSlashHandler} in studio.ts (DI keeps the host module free of the menu's lit
+ * dependencies).
+ */
+
+import { dismissSlashMenu, handleSlashMenuKey, showSlashMenuAtRect } from "./slash-menu";
+import type { CanvasSlashHandler } from "../canvas/iframe-host";
+
+export const canvasSlashHandler: CanvasSlashHandler = {
+  dismiss: () => dismissSlashMenu(),
+  nav: (key) => handleSlashMenuKey(key),
+  // No filter input: the author keeps typing in the iframe contenteditable and the engine re-posts
+  // SlashShow with the updated filter.
+  show: ({ rect, filter, onSelect, onDismiss }) =>
+    showSlashMenuAtRect(rect, filter, { onDismiss, onSelect }),
+};

package/src/editor/context-menu.ts

@@ -19,6 +19,7 @@ import { convertToComponent } from "./convert-to-component";
 import { convertToRepeater } from "./convert-to-repeater";
 import { componentRegistry } from "../files/components";
 import { renderPopover } from "../ui/layers";
+import { rectOf } from "../utils/geometry";
 
 import type { JxPath } from "../state";
 import type { JxMutableNode } from "@jxsuite/schema/types";
@@ -445,7 +446,7 @@ export function showContextMenu(
         }
         requestAnimationFrame(() => {
           const popover = el as HTMLElement;
-          const menuRect = popover.getBoundingClientRect();
+          const menuRect = rectOf(popover);
           if (x + menuRect.width > window.innerWidth) {
             x = window.innerWidth - menuRect.width - 4;
           }

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

@@ -0,0 +1,183 @@
+/// <reference lib="dom" />
+/**
+ * Inline-edit apply logic — turns the serializable result of a contenteditable session (committed
+ * children/text, a split, or a slash-insert) into `transactDoc` mutations. The inline editing
+ * session lives inside the canvas iframe, which posts these plain-JSON results across the bridge
+ * for this apply. Every input here is plain JSON — no DOM, no Range — so it crosses the frame
+ * boundary.
+ */
+
+import { childIndex, getNodeAtPath, parentElementPath } from "../store";
+import { isTabActive } from "../workspace/workspace";
+import { mutateInsertNode, mutateUpdateProperty, transactDoc } from "../tabs/transact";
+import { defaultDef } from "../panels/shared";
+
+import type { JxContentResult, SlashCommand } from "./inline-edit";
+import type { JxPath } from "../state";
+import type { Tab } from "../tabs/tab";
+import type { JxMutableNode } from "@jxsuite/schema/types";
+
+/**
+ * Whether a committed inline-edit result is effectively empty (blank text / lone whitespace /
+ * `<br>`).
+ */
+export function isEmptyContent(commitData?: JxContentResult): boolean {
+  if (!commitData) {
+    return true;
+  }
+  if (commitData.textContent != null && commitData.textContent.trim() === "") {
+    return true;
+  }
+  const kids = commitData.children;
+  if (!kids) {
+    return false;
+  }
+  if (kids.length === 0) {
+    return true;
+  }
+  if (kids.length === 1 && typeof kids[0] === "string" && kids[0].trim() === "") {
+    return true;
+  }
+  return kids.length === 1 && typeof kids[0] === "object" && kids[0]?.tagName === "br";
+}
+
+/**
+ * Commit edited content to the node at `path` of `tab`'s document (children when rich, else
+ * textContent). No-op if unchanged or the originating tab is gone. `tab` is the tab the edit
+ * session belonged to (resolved host-side from the posting iframe) — NEVER the active tab at
+ * message time, which may have changed while the commit was in flight.
+ */
+export function applyInlineCommit(
+  tab: Tab | null,
+  path: JxPath,
+  children: (JxMutableNode | string)[] | null,
+  textContent: string | null,
+): void {
+  if (!tab) {
+    return;
+  }
+  const node = getNodeAtPath(tab.doc.document, path);
+  // Only clear the counterpart key when it actually exists: deleting an absent key is a semantic
+  // No-op, but the recorded op isn't — a spurious `set-prop children` turns a cheap in-place text
+  // Patch into a subtree re-render (and, pre-relaxation, forced a full render inside components).
+  if (children) {
+    if (node && JSON.stringify(node.children) === JSON.stringify(children)) {
+      return;
+    }
+    transactDoc(tab, (t) => {
+      if (node?.textContent != null) {
+        mutateUpdateProperty(t, path, "textContent");
+      }
+      mutateUpdateProperty(t, path, "children", children);
+    });
+  } else if (textContent != null) {
+    if (node && node.textContent === textContent && !node.children) {
+      return;
+    }
+    transactDoc(tab, (t) => {
+      if (node?.children) {
+        mutateUpdateProperty(t, path, "children");
+      }
+      mutateUpdateProperty(t, path, "textContent", textContent);
+    });
+  }
+}
+
+/**
+ * Apply a paragraph split to `tab`'s document: keep `before` in the node, insert a new `<p>` with
+ * `after`. Returns its path (unchanged when `tab` is gone — the caller may still use it for
+ * bookkeeping, but nothing is mutated).
+ */
+export function applyInlineSplit(
+  tab: Tab | null,
+  path: JxPath,
+  before: JxContentResult,
+  after: JxContentResult,
+): JxPath {
+  const parentPath = parentElementPath(path) as JxPath;
+  const idx = childIndex(path) as number;
+  const newPath = [...parentPath, "children", idx + 1];
+  if (!tab) {
+    return newPath;
+  }
+  const newNode: JxMutableNode = { tagName: "p" };
+  if (after.textContent != null) {
+    newNode.textContent = after.textContent;
+  } else if (after.children) {
+    newNode.children = after.children;
+  } else {
+    newNode.textContent = "";
+  }
+
+  transactDoc(tab, (t) => {
+    if (before.textContent != null) {
+      mutateUpdateProperty(t, path, "children");
+      mutateUpdateProperty(t, path, "textContent", before.textContent);
+    } else if (before.children) {
+      mutateUpdateProperty(t, path, "textContent");
+      mutateUpdateProperty(t, path, "children", before.children);
+    }
+    mutateInsertNode(t, parentPath, idx + 1, newNode);
+    // 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;
+    }
+  });
+  return newPath;
+}
+
+/**
+ * Apply a slash-insert at `path` of `tab`'s document: swap the (empty) node's tag in place, or
+ * commit pending content and insert a new element after it. Returns the path to edit next (the
+ * swapped node or the new one); nothing is mutated when `tab` is gone.
+ */
+export function applyInlineInsert(
+  tab: Tab | null,
+  path: JxPath,
+  cmd: SlashCommand,
+  commitData: JxContentResult | undefined,
+): JxPath {
+  if (isEmptyContent(commitData)) {
+    if (!tab) {
+      return path;
+    }
+    transactDoc(tab, (t) => {
+      mutateUpdateProperty(t, path, "tagName", cmd.tag);
+      mutateUpdateProperty(t, path, "children");
+      const def = defaultDef(cmd.tag);
+      if (def.textContent && def.textContent !== "Paragraph text") {
+        mutateUpdateProperty(t, path, "textContent", def.textContent);
+      } else {
+        mutateUpdateProperty(t, path, "textContent");
+      }
+      if (isTabActive(tab)) {
+        t.session.selection = path;
+      }
+    });
+    return path;
+  }
+
+  const parentPath = parentElementPath(path) as JxPath;
+  const idx = childIndex(path) as number;
+  const newPath = [...parentPath, "children", idx + 1];
+  if (!tab) {
+    return newPath;
+  }
+  const elementDef = defaultDef(cmd.tag);
+
+  transactDoc(tab, (t) => {
+    if (commitData?.children) {
+      mutateUpdateProperty(t, path, "textContent");
+      mutateUpdateProperty(t, path, "children", commitData.children);
+    } else if (commitData?.textContent != null) {
+      mutateUpdateProperty(t, path, "children");
+      mutateUpdateProperty(t, path, "textContent", commitData.textContent);
+    }
+    mutateInsertNode(t, parentPath, idx + 1, structuredClone(elementDef));
+    if (isTabActive(tab)) {
+      t.session.selection = newPath;
+    }
+  });
+  return newPath;
+}

package/src/editor/inline-edit.ts

@@ -12,11 +12,37 @@ import { normalizeInlineContent, toggleInlineFormat } from "./inline-format";
 import type { JxPath } from "../state";
 import type { JxMutableNode } from "@jxsuite/schema/types";
 
-import {
-  showSlashMenu as sharedShowSlashMenu,
-  dismissSlashMenu as sharedDismissSlashMenu,
-  isSlashMenuOpen,
-} from "./slash-menu";
+/**
+ * The slash-menu surface inline editing drives. Injected (rather than imported) so this module
+ * stays free of the menu's heavy `lit-html` / `ui/layers` dependencies — the editor realm wires the
+ * real menu, the canvas iframe supplies its own (or a no-op) without bloating the slim iframe
+ * bundle.
+ */
+export interface SlashController {
+  show: (
+    anchorEl: HTMLElement,
+    filter: string,
+    cbs: { onSelect: (cmd: SlashCommand) => void; showFilter?: boolean; commands?: SlashCommand[] },
+  ) => void;
+  dismiss: () => void;
+  isOpen: () => boolean;
+}
+
+const noopSlash: SlashController = {
+  dismiss: () => {
+    // No slash controller wired in this realm.
+  },
+  isOpen: () => false,
+  show: () => {
+    // No slash controller wired in this realm.
+  },
+};
+let slash: SlashController = noopSlash;
+
+/** Inject the slash-menu controller inline editing should drive (call once at realm init). */
+export function setSlashController(controller: SlashController): void {
+  slash = controller;
+}
 
 export interface InlineAction {
   tag: string;
@@ -159,6 +185,24 @@ let insertFn:
   | null = null; // Function(path, elementDef, commitData?) to insert after current block
 let endFn: (() => void) | null = null; // Function() called when editing stops
 
+/**
+ * When a parent toolbar (or its link popover) may take focus during a live session, the iframe sets
+ * this so {@link handleBlur} does NOT schedule a `stopEditing()` (the BLOCKER focus-loss race fix —
+ * a parent-toolbar click blurs the iframe editable, which must NOT tear the session down). Only an
+ * explicit commit (Escape/Enter/click-away-in-iframe) ends the session while suspended.
+ */
+let _blurCloseSuspended = false;
+
+/** Suspend blur-driven `stopEditing` (call while the parent toolbar/popover may steal focus). */
+export function suspendBlurClose() {
+  _blurCloseSuspended = true;
+}
+
+/** Resume blur-driven `stopEditing` (call on real editEnd/teardown). */
+export function resumeBlurClose() {
+  _blurCloseSuspended = false;
+}
+
 /**
  * Check if an element is a text-bearing editable block.
  *
@@ -228,7 +272,9 @@ export function startEditing(
   },
 ) {
   if (activeEl) {
-    stopEditing();
+    // Re-enter (e.g. after a split/insert re-render): tear the old session down WITHOUT firing the
+    // User-visible `onEnd` — a re-enter must not reset the parent toolbar via a stray `editEnd`.
+    stopEditing(true);
   }
 
   activeEl = el;
@@ -262,14 +308,19 @@ export function startEditing(
   el.addEventListener("paste", handlePaste);
 }
 
-/** Stop editing and commit changes. */
-export function stopEditing() {
+/**
+ * Stop editing and commit changes. Pass `silent` to skip the `onEnd` callback (used by the re-enter
+ * path so a stop→start sequence doesn't post a user-visible `editEnd`).
+ *
+ * @param {boolean} [silent]
+ */
+export function stopEditing(silent = false) {
   if (!activeEl) {
     return;
   }
 
   commitChanges();
-  sharedDismissSlashMenu();
+  slash.dismiss();
 
   activeEl.contentEditable = "false";
   activeEl.style.pointerEvents = "";
@@ -288,7 +339,9 @@ export function stopEditing() {
   splitFn = null;
   insertFn = null;
 
-  if (endFn) {
+  if (silent) {
+    endFn = null;
+  } else if (endFn) {
     const fn = endFn;
     endFn = null;
     fn();
@@ -313,6 +366,25 @@ export function getActiveElement() {
   return activeEl;
 }
 
+/**
+ * Get the document path of the currently editing element (null when no session is live).
+ *
+ * @returns {JxPath | null}
+ */
+export function getActivePath() {
+  return activePath;
+}
+
+/**
+ * Whether the DI'd slash menu reports itself open — session-lifecycle guards must not commit-and-
+ * end on a pointerdown that is really a slash-menu interaction.
+ *
+ * @returns {boolean}
+ */
+export function isSlashActive() {
+  return slash.isOpen();
+}
+
 // ─── Event handlers ────────────────────────────────────────────────────────
 
 /** @param {KeyboardEvent} e */
@@ -325,7 +397,7 @@ function handleKeydown(e: KeyboardEvent) {
   }
 
   if (e.key === "Enter" && !e.shiftKey) {
-    if (isSlashMenuOpen()) {
+    if (slash.isOpen()) {
       return;
     } // Shared slash menu captures Enter
     e.preventDefault();
@@ -374,17 +446,14 @@ function handleKeydown(e: KeyboardEvent) {
   }
 
   // Dismiss slash menu on non-matching keys
-  if (
-    isSlashMenuOpen() &&
-    !["ArrowUp", "ArrowDown", "Enter", "Backspace", "Delete"].includes(e.key)
-  ) {
+  if (slash.isOpen() && !["ArrowUp", "ArrowDown", "Enter", "Backspace", "Delete"].includes(e.key)) {
     // Let the input handler deal with filtering
   }
 }
 
 function handleInput() {
   // Check if slash menu should update or dismiss
-  if (isSlashMenuOpen()) {
+  if (slash.isOpen()) {
     updateSlashMenu();
   }
 }
@@ -392,12 +461,21 @@ function handleInput() {
 /** @param {FocusEvent} _e */
 function handleBlur(_e: FocusEvent) {
   // Don't close if focus moved to slash menu
-  if (isSlashMenuOpen()) {
+  if (slash.isOpen()) {
+    return;
+  }
+
+  // The parent format toolbar/link popover may have taken focus across the bridge — blur must NOT
+  // Tear the session down (Phase 4b-2 focus-loss BLOCKER). Only an explicit commit ends it.
+  if (_blurCloseSuspended) {
     return;
   }
 
   // Delay to allow click events to fire
   setTimeout(() => {
+    if (_blurCloseSuspended) {
+      return;
+    }
     if (activeEl && document.activeElement !== activeEl) {
       stopEditing();
     }
@@ -669,7 +747,7 @@ function openSlashMenu() {
   const range = sel.getRangeAt(0);
   _slashFilterStart = getTextBeforeCursor(range).length;
 
-  sharedShowSlashMenu(activeEl, "", { onSelect: handleSlashSelect });
+  slash.show(activeEl, "", { onSelect: handleSlashSelect });
 }
 
 function updateSlashMenu() {
@@ -679,7 +757,7 @@ function updateSlashMenu() {
 
   const sel = window.getSelection();
   if (!sel || !sel.rangeCount) {
-    sharedDismissSlashMenu();
+    slash.dismiss();
     return;
   }
 
@@ -688,12 +766,12 @@ function updateSlashMenu() {
   const slashIdx = fullText.lastIndexOf("/");
 
   if (slashIdx === -1 || fullText.length < _slashFilterStart - 1) {
-    sharedDismissSlashMenu();
+    slash.dismiss();
     return;
   }
 
   const filter = fullText.slice(slashIdx + 1).toLowerCase();
-  sharedShowSlashMenu(activeEl, filter, { onSelect: handleSlashSelect });
+  slash.show(activeEl, filter, { onSelect: handleSlashSelect });
 }
 
 /** @param {SlashCommand} cmd */