diff --git a/packages/super-editor/src/components/slash-menu/SlashMenu.vue b/packages/super-editor/src/components/slash-menu/SlashMenu.vue
index 6bc80349d..d0a4dc995 100644
--- a/packages/super-editor/src/components/slash-menu/SlashMenu.vue
+++ b/packages/super-editor/src/components/slash-menu/SlashMenu.vue
@@ -25,94 +25,52 @@ const props = defineProps({
   },
 });
 
-const searchInput = ref(null);
-const searchQuery = ref('');
 const isOpen = ref(false);
 const menuPosition = ref({ left: '0px', top: '0px' });
 const menuRef = ref(null);
 const sections = ref([]);
 const selectedId = ref(null);
-const currentContext = ref(null); // Store context for action execution
+const searchQuery = ref('');
+const currentContext = ref(null);
 
-// Helper to close menu if editor becomes read-only
-const handleEditorUpdate = () => {
-  if (!props.editor?.isEditable && isOpen.value) {
-    closeMenu({ restoreCursor: false });
-  }
-};
+// --- Filtering ---
 
-// Flatten sections into items for navigation and filtering
 const flattenedItems = computed(() => {
-  const items = [];
-  sections.value.forEach((section) => {
-    section.items.forEach((item) => {
-      items.push(item);
-    });
-  });
-  return items;
+  return sections.value.flatMap((section) => section.items);
 });
 
-// Filter items based on search query
-const filteredItems = computed(() => {
-  if (!searchQuery.value) {
-    return flattenedItems.value;
-  }
-
-  return flattenedItems.value.filter((item) => item.label?.toLowerCase().includes(searchQuery.value.toLowerCase()));
-});
-
-// Get sections with filtered items for rendering
 const filteredSections = computed(() => {
-  if (!searchQuery.value) {
-    return sections.value;
-  }
+  const q = searchQuery.value.toLowerCase().trim();
+  if (!q) return sections.value;
+
+  return sections.value
+    .map((section) => ({
+      ...section,
+      items: section.items.filter((item) => item.label.toLowerCase().includes(q)),
+    }))
+    .filter((section) => section.items.length > 0);
+});
 
-  // If searching, return a single section with filtered items
-  return [
-    {
-      id: 'search-results',
-      items: filteredItems.value,
-    },
-  ];
+const filteredItems = computed(() => {
+  return filteredSections.value.flatMap((section) => section.items);
 });
 
-/**
- * Watch for menu open/close state changes and manage search input focus.
- *
- * When the menu opens, automatically focuses the hidden search input to enable
- * immediate keyboard interaction (search filtering and navigation). Uses the
- * preventScroll option to avoid unwanted scrolling behavior.
- *
- * The preventScroll option is critical because:
- * - The search input is positioned off-screen (opacity: 0, height: 0)
- * - Without preventScroll, browsers may scroll parent containers to bring the
- *   focused element into view, causing jarring page jumps
- * - This ensures the menu appears at the cursor position without disrupting
- *   the user's viewport
- *
- * @param {boolean} open - The new value of isOpen (true when menu opens, false when closed)
- * @returns {void}
- */
-watch(isOpen, (open) => {
-  if (open) {
-    nextTick(() => {
-      if (searchInput.value) {
-        // Use preventScroll to avoid scrolling the page when focusing the search input.
-        // Without this, the browser may scroll parent containers to bring the input into view,
-        // which causes unwanted page jumps when opening the context menu.
-        searchInput.value.focus({ preventScroll: true });
-      }
-    });
+// Keep selectedId in sync with filtered results
+watch(filteredItems, (items) => {
+  if (items.length > 0 && !items.find((i) => i.id === selectedId.value)) {
+    selectedId.value = items[0].id;
   }
 });
 
-watch(flattenedItems, (newItems) => {
-  if (newItems.length > 0) {
-    selectedId.value = newItems[0].id;
+// Auto-close when search yields no results (only after sections have loaded)
+watch(filteredItems, (items) => {
+  if (isOpen.value && searchQuery.value && items.length === 0 && sections.value.length > 0) {
+    closeMenu();
   }
 });
 
-// Handle custom item rendering
+// --- Custom item rendering ---
+
 const customItemRefs = new Map();
 
 const setCustomItemRef = (el, item) => {
@@ -125,7 +83,6 @@ const setCustomItemRef = (el, item) => {
 };
 
 const defaultRender = (context) => {
-  // Access item from the refData or context
   const item = context.item || context.currentItem;
   const container = document.createElement('div');
   container.className = 'slash-menu-default-content';
@@ -155,10 +112,7 @@ const renderCustomItem = async (itemId) => {
       currentContext.value = await getEditorContext(props.editor);
     }
 
-    // Create context with item info for render functions
     const contextWithItem = { ...currentContext.value, currentItem: item };
-
-    // Use custom render function or fall back to default
     const renderFunction = item.render || defaultRender;
     const customElement = renderFunction(contextWithItem);
 
@@ -169,7 +123,6 @@ const renderCustomItem = async (itemId) => {
     }
   } catch (error) {
     console.warn(`[SlashMenu] Error rendering custom item ${itemId}:`, error);
-    // Fallback to default rendering
     const fallbackElement = defaultRender({ ...(currentContext.value || {}), currentItem: item });
     element.innerHTML = '';
     element.appendChild(fallbackElement);
@@ -177,7 +130,6 @@ const renderCustomItem = async (itemId) => {
   }
 };
 
-// Clean up custom item refs when menu closes
 const cleanupCustomItems = () => {
   customItemRefs.forEach((refData) => {
     if (refData.element) {
@@ -187,117 +139,77 @@ const cleanupCustomItems = () => {
   customItemRefs.clear();
 };
 
-const handleGlobalKeyDown = (event) => {
-  // ESCAPE: always close popover or menu
-  if (event.key === 'Escape' && isOpen.value) {
-    event.preventDefault();
-    event.stopPropagation();
-    closeMenu();
-    props.editor?.focus?.();
-    return;
-  }
+// --- Keyboard navigation ---
+// The PM plugin emits 'slashMenu:navigate' events for ArrowDown/Up/Enter.
+// This avoids relying on DOM event bubbling which is fragile in presentation mode.
 
-  // Only handle navigation/selection if menu is open and input is focused
-  if (isOpen.value && (event.target === searchInput.value || (menuRef.value && menuRef.value.contains(event.target)))) {
-    const currentItems = filteredItems.value;
-    const currentIndex = currentItems.findIndex((item) => item.id === selectedId.value);
-    switch (event.key) {
-      case 'ArrowDown': {
-        event.preventDefault();
-        if (currentIndex < currentItems.length - 1) {
-          selectedId.value = currentItems[currentIndex + 1].id;
-        }
-        break;
-      }
-      case 'ArrowUp': {
-        event.preventDefault();
-        if (currentIndex > 0) {
-          selectedId.value = currentItems[currentIndex - 1].id;
-        }
-        break;
-      }
-      case 'Enter': {
-        event.preventDefault();
-        const selectedItem = currentItems.find((item) => item.id === selectedId.value);
-        if (selectedItem) {
-          executeCommand(selectedItem);
-        }
-        break;
+const handleNavigate = ({ key }) => {
+  if (!isOpen.value) return;
+
+  const currentItems = filteredItems.value;
+  const currentIndex = currentItems.findIndex((item) => item.id === selectedId.value);
+
+  switch (key) {
+    case 'ArrowDown': {
+      if (currentItems.length === 0) break;
+      const nextIndex = currentIndex < currentItems.length - 1 ? currentIndex + 1 : 0;
+      selectedId.value = currentItems[nextIndex].id;
+      break;
+    }
+    case 'ArrowUp': {
+      if (currentItems.length === 0) break;
+      const prevIndex = currentIndex > 0 ? currentIndex - 1 : currentItems.length - 1;
+      selectedId.value = currentItems[prevIndex].id;
+      break;
+    }
+    case 'Enter': {
+      const selectedItem = currentItems.find((item) => item.id === selectedId.value);
+      if (selectedItem) {
+        executeCommand(selectedItem);
       }
+      break;
     }
   }
 };
 
-/**
- * Handle clicks outside the menu to close it.
- * Uses pointerdown instead of mousedown because PresentationEditor's pointer handlers
- * call event.preventDefault() which suppresses mousedown events.
- * @param {PointerEvent|MouseEvent} event - The pointer or mouse event
- * @returns {void}
- */
+// --- Click outside ---
+
 const handleGlobalOutsideClick = (event) => {
   if (isOpen.value && menuRef.value && !menuRef.value.contains(event.target)) {
-    // Only move cursor for left-clicks (button === 0).
-    // For right-clicks (button === 2), preserve the current selection/cursor
-    // because the contextmenu handler will open a new menu at the click position.
-    // Also skip Ctrl+Click on Mac, which triggers contextmenu but reports button=0.
     const isCtrlClickOnMac = event.ctrlKey && isMacOS();
     const isLeftClick = event.button === 0 && !isCtrlClickOnMac;
 
     if (isLeftClick) {
       moveCursorToMouseEvent(event, props.editor);
     }
-    closeMenu({ restoreCursor: false });
+    closeMenu();
   }
 };
 
-/**
- * Determines whether the SlashMenu should handle a context menu event.
- * Checks if the editor is editable, context menu is enabled, and the event
- * should not be bypassed (e.g., modifier keys are not pressed).
- *
- * @param {MouseEvent} event - The context menu event to validate
- * @returns {boolean} true if the SlashMenu should handle the event, false otherwise
- */
+// --- Context menu (right-click) ---
+
 const shouldHandleContextMenu = (event) => {
   const readOnly = !props.editor?.isEditable;
   const contextMenuDisabled = props.editor?.options?.disableContextMenu;
   const bypass = shouldBypassContextMenu(event);
-
   return !readOnly && !contextMenuDisabled && !bypass;
 };
 
-/**
- * Capture phase handler for context menu events that marks the event as handled by SlashMenu.
- * This flag is used by PresentationInputBridge to skip forwarding the event to the hidden editor,
- * preventing duplicate context menu handling.
- *
- * The capture phase ensures this runs before PresentationInputBridge's bubble phase handler,
- * allowing us to set the flag before the event reaches other handlers.
- *
- * @param {MouseEvent} event - The context menu event in capture phase
- */
 const handleRightClickCapture = (event) => {
   try {
     if (shouldHandleContextMenu(event)) {
       event[SLASH_MENU_HANDLED_FLAG] = true;
     }
   } catch (error) {
-    // Prevent handler crashes from breaking the event flow
-    // Log warning but don't throw to allow other handlers to run
     console.warn('[SlashMenu] Error in capture phase context menu handler:', error);
   }
 };
 
 const handleRightClick = async (event) => {
-  if (!shouldHandleContextMenu(event)) {
-    return;
-  }
+  if (!shouldHandleContextMenu(event)) return;
 
   event.preventDefault();
 
-  // Update cursor position to the right-click location before opening context menu,
-  // unless the click lands inside an active selection (keep selection intact).
   const editorState = props.editor?.state;
   const hasRangeSelection = editorState?.selection?.from !== editorState?.selection?.to;
   let isClickInsideSelection = false;
@@ -319,7 +231,6 @@ const handleRightClick = async (event) => {
     currentContext.value = context;
     sections.value = getItems({ ...context, trigger: 'click' });
     selectedId.value = flattenedItems.value[0]?.id || null;
-    searchQuery.value = '';
 
     const currentState = props.editor.state;
     if (!currentState) return;
@@ -330,6 +241,7 @@ const handleRightClick = async (event) => {
         pos: context?.pos ?? currentState.selection.from,
         clientX: event.clientX,
         clientY: event.clientY,
+        trigger: 'click',
       }),
     );
   } catch (error) {
@@ -337,143 +249,193 @@ const handleRightClick = async (event) => {
   }
 };
 
+// --- Commands ---
+
 const executeCommand = async (item) => {
-  if (props.editor) {
-    // First call the action if needed on the item
-    item.action ? await item.action(props.editor, currentContext.value) : null;
-
-    if (item.component) {
-      const menuElement = menuRef.value;
-      const componentProps = getPropsByItemId(item.id, props);
-
-      // Convert viewport-relative coordinates (used by fixed-position SlashMenu)
-      // to container-relative coordinates (used by absolute-position GenericPopover)
-      let popoverPosition = { left: menuPosition.value.left, top: menuPosition.value.top };
-      if (menuElement) {
-        const menuRect = menuElement.getBoundingClientRect();
-        const container = menuElement.closest('.super-editor');
-        if (container) {
-          const containerRect = container.getBoundingClientRect();
-          popoverPosition = {
-            left: `${menuRect.left - containerRect.left}px`,
-            top: `${menuRect.top - containerRect.top}px`,
-          };
-        }
-      }
+  if (!props.editor) return;
 
-      props.openPopover(markRaw(item.component), componentProps, popoverPosition);
-      closeMenu({ restoreCursor: false });
-    } else {
-      // For paste operations, don't restore cursor
-      const shouldRestoreCursor = item.id !== 'paste';
-      closeMenu({ restoreCursor: shouldRestoreCursor });
+  // Capture references before closing
+  const context = currentContext.value;
+  const menuElement = menuRef.value;
+  const state = props.editor.state;
+  const pluginState = SlashMenuPluginKey.getState(state);
+
+  // For slash-triggered menu, delete the /query text from the document
+  if (pluginState?.trigger === 'slash' && pluginState.anchorPos !== null) {
+    const cursorPos = state.selection.from;
+    const tr = state.tr;
+    if (cursorPos > pluginState.anchorPos) {
+      tr.delete(pluginState.anchorPos, cursorPos);
+    }
+    tr.setMeta(SlashMenuPluginKey, { type: 'close' });
+    props.editor.dispatch(tr);
+  } else {
+    props.editor.dispatch(state.tr.setMeta(SlashMenuPluginKey, { type: 'close' }));
+  }
+
+  // Execute the action
+  if (item.action) await item.action(props.editor, context);
+
+  // Open sub-component popover if needed
+  if (item.component) {
+    let popoverPosition = { left: menuPosition.value.left, top: menuPosition.value.top };
+    if (menuElement) {
+      const menuRect = menuElement.getBoundingClientRect();
+      const container = menuElement.closest('.super-editor');
+      if (container) {
+        const containerRect = container.getBoundingClientRect();
+        popoverPosition = {
+          left: `${menuRect.left - containerRect.left}px`,
+          top: `${menuRect.top - containerRect.top}px`,
+        };
+      }
     }
+    props.openPopover(markRaw(item.component), getPropsByItemId(item.id, props), popoverPosition);
   }
+
+  // Reset local state
+  resetMenuState();
 };
 
-const closeMenu = (options = { restoreCursor: true }) => {
+const closeMenu = () => {
   if (!props.editor) return;
   const state = props.editor.state;
   if (!state) return;
-  // Get plugin state to access anchorPos
-  const pluginState = SlashMenuPluginKey.getState(state);
-  const anchorPos = pluginState?.anchorPos;
 
-  // Update prosemirror state to close menu
-  props.editor.dispatch(state.tr.setMeta(SlashMenuPluginKey, { type: 'close' }));
-
-  // Restore cursor position and focus only if requested
-  if (options.restoreCursor && anchorPos !== null && anchorPos !== undefined) {
-    const tr = props.editor.state.tr.setSelection(
-      props.editor.state.selection.constructor.near(props.editor.state.doc.resolve(anchorPos)),
-    );
-    props.editor.dispatch(tr);
-    props.editor.focus?.();
+  const pluginState = SlashMenuPluginKey.getState(state);
+  if (pluginState?.open) {
+    props.editor.dispatch(state.tr.setMeta(SlashMenuPluginKey, { type: 'close' }));
   }
 
-  cleanupCustomItems();
-  currentContext.value = null;
+  resetMenuState();
+};
 
-  // Update local state
+const resetMenuState = () => {
   isOpen.value = false;
   searchQuery.value = '';
   sections.value = [];
+  cleanupCustomItems();
+  currentContext.value = null;
 };
 
-/**
- * Lifecycle hooks on mount and onBeforeUnmount
- */
+// --- Transaction listener: sync search query from document state ---
+
+const handleTransaction = () => {
+  if (!isOpen.value) return;
+
+  const state = props.editor?.state;
+  if (!state) return;
+
+  const pluginState = SlashMenuPluginKey.getState(state);
+
+  // Plugin closed the menu (auto-close when cursor left /query range)
+  if (!pluginState?.open) {
+    resetMenuState();
+    return;
+  }
+
+  // Compute search query from document content after the '/'
+  // Use robust extraction: get full text from anchor to cursor, strip leading '/'
+  // This handles position shifts from appendTransactions (e.g. wrapTextInRunsPlugin)
+  if (pluginState.trigger === 'slash' && pluginState.anchorPos !== null) {
+    const cursorPos = state.selection.from;
+    if (cursorPos > pluginState.anchorPos) {
+      const fullText = state.doc.textBetween(pluginState.anchorPos, cursorPos);
+      searchQuery.value = fullText.startsWith('/') ? fullText.slice(1) : '';
+    } else {
+      searchQuery.value = '';
+    }
+  }
+};
+
+// --- Lifecycle ---
+
 let contextMenuTarget = null;
 let slashMenuOpenHandler = null;
 let slashMenuCloseHandler = null;
+let slashMenuNavigateHandler = null;
+let updateHandler = null;
 
 onMounted(() => {
   if (!props.editor) return;
 
-  // Add global event listeners
-  // Use pointerdown instead of mousedown because PresentationEditor's pointer handlers
-  // call event.preventDefault() which suppresses mousedown events
-  document.addEventListener('keydown', handleGlobalKeyDown);
   document.addEventListener('pointerdown', handleGlobalOutsideClick);
 
-  // Close menu if the editor becomes read-only while it's open
-  props.editor.on('update', handleEditorUpdate);
+  // Close menu if editor becomes read-only
+  updateHandler = () => {
+    if (!props.editor?.isEditable && isOpen.value) {
+      closeMenu();
+    }
+  };
+  props.editor.on('update', updateHandler);
+
+  // Sync search query on every transaction
+  props.editor.on('transaction', handleTransaction);
 
-  // Listen for the slash menu to open
+  // Handle menu open events (carries menuPosition from plugin)
   slashMenuOpenHandler = async (event) => {
-    // Prevent opening the menu in read-only mode
     const readOnly = !props.editor?.isEditable;
     if (readOnly) return;
+
     isOpen.value = true;
     menuPosition.value = event.menuPosition;
     searchQuery.value = '';
-    // Set sections and selectedId when menu opens
+
+    // Load context and menu items if not already set (right-click sets them before dispatch)
     if (!currentContext.value) {
       const context = await getEditorContext(props.editor);
-      currentContext.value = context; // Store context for later use
-      sections.value = getItems({ ...context, trigger: 'slash' });
+      currentContext.value = context;
+      const pluginState = SlashMenuPluginKey.getState(props.editor.state);
+      const trigger = pluginState?.trigger === 'click' ? 'click' : 'slash';
+      sections.value = getItems({ ...context, trigger });
       selectedId.value = flattenedItems.value[0]?.id || null;
     } else if (sections.value.length === 0) {
-      const trigger = currentContext.value.event?.type === 'contextmenu' ? 'click' : 'slash';
+      const pluginState = SlashMenuPluginKey.getState(props.editor.state);
+      const trigger = pluginState?.trigger === 'click' ? 'click' : 'slash';
       sections.value = getItems({ ...currentContext.value, trigger });
       selectedId.value = flattenedItems.value[0]?.id || null;
     }
   };
   props.editor.on('slashMenu:open', slashMenuOpenHandler);
 
-  // Attach context menu to the active surface (flow view.dom or presentation host)
+  // Handle menu close events
+  slashMenuCloseHandler = () => {
+    resetMenuState();
+  };
+  props.editor.on('slashMenu:close', slashMenuCloseHandler);
+
+  // Handle navigation events from PM plugin (ArrowDown/Up/Enter)
+  slashMenuNavigateHandler = handleNavigate;
+  props.editor.on('slashMenu:navigate', slashMenuNavigateHandler);
+
+  // Attach context menu to the active surface
   contextMenuTarget = getEditorSurfaceElement(props.editor);
   if (contextMenuTarget) {
     contextMenuTarget.addEventListener('contextmenu', handleRightClickCapture, true);
     contextMenuTarget.addEventListener('contextmenu', handleRightClick);
   }
-
-  slashMenuCloseHandler = () => {
-    cleanupCustomItems();
-    isOpen.value = false;
-    searchQuery.value = '';
-    currentContext.value = null;
-  };
-  props.editor.on('slashMenu:close', slashMenuCloseHandler);
 });
 
-// Cleanup function for event listeners
 onBeforeUnmount(() => {
-  document.removeEventListener('keydown', handleGlobalKeyDown);
   document.removeEventListener('pointerdown', handleGlobalOutsideClick);
 
   cleanupCustomItems();
 
   if (props.editor) {
     try {
-      // Remove specific handlers to avoid removing other components' listeners
       if (slashMenuOpenHandler) {
         props.editor.off('slashMenu:open', slashMenuOpenHandler);
       }
       if (slashMenuCloseHandler) {
         props.editor.off('slashMenu:close', slashMenuCloseHandler);
       }
-      props.editor.off('update', handleEditorUpdate);
+      if (slashMenuNavigateHandler) {
+        props.editor.off('slashMenu:navigate', slashMenuNavigateHandler);
+      }
+      if (updateHandler) {
+        props.editor.off('update', updateHandler);
+      }
+      props.editor.off('transaction', handleTransaction);
       contextMenuTarget?.removeEventListener('contextmenu', handleRightClickCapture, true);
       contextMenuTarget?.removeEventListener('contextmenu', handleRightClick);
     } catch (error) {
@@ -485,35 +447,36 @@ onBeforeUnmount(() => {
 
 <template>
   <div v-if="isOpen" ref="menuRef" class="slash-menu" :style="menuPosition" @pointerdown.stop>
-    <!-- Hide the input visually but keep it focused for typing -->
-    <input
-      ref="searchInput"
-      v-model="searchQuery"
-      type="text"
-      class="slash-menu-hidden-input"
-      @keydown="handleGlobalKeyDown"
-      @keydown.stop
-    />
+    <!-- Filter header -->
+    <div v-if="searchQuery" class="slash-menu-header">Filtered results</div>
 
     <div class="slash-menu-items">
-      <template v-for="(section, sectionIndex) in filteredSections" :key="section.id">
-        <!-- Render divider before section (except for first section) -->
-        <div v-if="sectionIndex > 0 && section.items.length > 0" class="slash-menu-divider" tabindex="0"></div>
-
-        <!-- Render section items -->
-        <template v-for="item in section.items" :key="item.id">
-          <div class="slash-menu-item" :class="{ 'is-selected': item.id === selectedId }" @click="executeCommand(item)">
-            <!-- Custom rendered content or default rendering -->
-            <div :ref="(el) => setCustomItemRef(el, item)" class="slash-menu-custom-item">
-              <!-- Fallback content for items without custom render (will be replaced by defaultRender) -->
-              <template v-if="!item.render">
-                <span v-if="item.icon" class="slash-menu-item-icon" v-html="item.icon"></span>
-                <span>{{ item.label }}</span>
-              </template>
+      <template v-if="filteredItems.length > 0">
+        <template v-for="(section, sectionIndex) in filteredSections" :key="section.id">
+          <div v-if="sectionIndex > 0 && section.items.length > 0" class="slash-menu-divider"></div>
+          <template v-for="item in section.items" :key="item.id">
+            <div
+              class="slash-menu-item"
+              :class="{ 'is-selected': item.id === selectedId }"
+              @click="executeCommand(item)"
+            >
+              <div :ref="(el) => setCustomItemRef(el, item)" class="slash-menu-custom-item">
+                <template v-if="!item.render">
+                  <span v-if="item.icon" class="slash-menu-item-icon" v-html="item.icon"></span>
+                  <span class="slash-menu-item-label">{{ item.label }}</span>
+                </template>
+              </div>
             </div>
-          </div>
+          </template>
         </template>
       </template>
+      <div v-else class="slash-menu-no-results">No results</div>
+    </div>
+
+    <!-- Footer -->
+    <div class="slash-menu-footer">
+      <span>Close menu</span>
+      <kbd>esc</kbd>
     </div>
   </div>
 </template>
@@ -522,82 +485,104 @@ onBeforeUnmount(() => {
 .slash-menu {
   position: fixed;
   z-index: 50;
-  width: 180px;
-  color: #47484a;
+  width: 220px;
+  color: #37352f;
   background: white;
+  border-radius: 6px;
   box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.05),
-    0px 10px 20px rgba(0, 0, 0, 0.1);
-  margin-top: 0.5rem;
-  font-size: 12px;
+    0 0 0 1px rgba(15, 15, 15, 0.05),
+    0 3px 6px rgba(15, 15, 15, 0.1),
+    0 9px 24px rgba(15, 15, 15, 0.2);
+  margin-top: 0.25rem;
+  font-size: 14px;
+  overflow: hidden;
 }
 
-/* Hide the input but keep it functional */
-.slash-menu-hidden-input {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-  height: 0;
-  width: 0;
-  padding: 0;
-  margin: 0;
-  border: none;
+.slash-menu-header {
+  padding: 6px 14px 2px;
+  font-size: 11px;
+  font-weight: 500;
+  color: rgba(55, 53, 47, 0.65);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
 }
 
 .slash-menu-items {
   max-height: 300px;
   overflow-y: auto;
-}
-
-.slash-menu-search {
-  padding: 0.5rem;
-  border-bottom: 1px solid #eee;
-}
-
-.slash-menu-search input {
-  width: 100%;
-  padding: 0.25rem 0.5rem;
-  border: 1px solid #ddd;
-  outline: none;
-}
-
-.slash-menu-search input:focus {
-  border-color: #0096fd;
-}
-
-/* Remove unused group styles */
-.slash-menu-group-label {
-  display: none;
+  padding: 4px 0;
 }
 
 .slash-menu-item {
-  padding: 0.25rem 0.5rem;
+  padding: 4px 14px;
   cursor: pointer;
   user-select: none;
-  transition: background-color 0.15s ease;
   display: flex;
   align-items: center;
+  min-height: 28px;
+  transition: background 80ms ease-in;
 }
 
 .slash-menu-item:hover {
-  background: #f5f5f5;
+  background: rgba(55, 53, 47, 0.08);
 }
 
 .slash-menu-item.is-selected {
-  background: #edf6ff;
-  color: #0096fd;
-  fill: #0096fd;
+  background: rgba(35, 131, 226, 0.14);
 }
 
 .slash-menu-item-icon {
   display: flex;
   align-items: center;
-  margin-right: 10px;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  margin-right: 8px;
+  color: rgba(55, 53, 47, 0.85);
 }
 
 .slash-menu .slash-menu-item-icon svg {
-  height: 12px;
-  width: 12px;
+  height: 14px;
+  width: 14px;
+}
+
+.slash-menu-item-label {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.slash-menu-no-results {
+  padding: 8px 14px;
+  color: rgba(55, 53, 47, 0.5);
+  font-size: 12px;
+}
+
+.slash-menu-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 14px;
+  border-top: 1px solid rgba(55, 53, 47, 0.09);
+  font-size: 12px;
+  color: rgba(55, 53, 47, 0.5);
+}
+
+.slash-menu-footer kbd {
+  font-family: inherit;
+  font-size: 11px;
+  padding: 1px 5px;
+  border: 1px solid rgba(55, 53, 47, 0.16);
+  border-radius: 3px;
+  background: rgba(55, 53, 47, 0.04);
+  color: rgba(55, 53, 47, 0.5);
+}
+
+.slash-menu-divider {
+  height: 1px;
+  background: rgba(55, 53, 47, 0.09);
+  margin: 4px 0;
 }
 
 .slash-menu-custom-item {
@@ -620,10 +605,4 @@ onBeforeUnmount(() => {
     0px 10px 20px rgba(0, 0, 0, 0.1);
   z-index: 100;
 }
-
-.slash-menu-divider {
-  height: 1px;
-  background: #eee;
-  margin: 4px 0;
-}
 </style>
diff --git a/packages/super-editor/src/components/slash-menu/tests/SlashMenu.test.js b/packages/super-editor/src/components/slash-menu/tests/SlashMenu.test.js
index 10d098c33..f92eecee5 100644
--- a/packages/super-editor/src/components/slash-menu/tests/SlashMenu.test.js
+++ b/packages/super-editor/src/components/slash-menu/tests/SlashMenu.test.js
@@ -13,10 +13,12 @@ import {
   assertEventListenersCleanup,
 } from './testHelpers.js';
 
-vi.mock('@extensions/slash-menu', () => ({
+vi.mock('@extensions/slash-menu/slash-menu', () => ({
   SlashMenuPluginKey: {
     getState: vi.fn(() => ({ anchorPos: 100 })),
   },
+  SlashMenu: {},
+  findContainingBlockAncestor: vi.fn(),
 }));
 
 vi.mock('../utils.js', () => ({
@@ -55,6 +57,11 @@ describe('SlashMenu.vue', () => {
   beforeEach(async () => {
     commonMocks = setupCommonMocks();
 
+    // Reset the SlashMenuPluginKey mock to prevent state leaking between tests
+    const { SlashMenuPluginKey } = await import('@extensions/slash-menu/slash-menu');
+    SlashMenuPluginKey.getState.mockReset();
+    SlashMenuPluginKey.getState.mockReturnValue({ anchorPos: 100 });
+
     mockEditor = createMockEditor({
       isEditable: true,
       view: {
@@ -447,6 +454,8 @@ describe('SlashMenu.vue', () => {
     });
 
     it('should filter items based on search query', async () => {
+      const { SlashMenuPluginKey } = await import('@extensions/slash-menu/slash-menu');
+
       const wrapper = mount(SlashMenu, { props: mockProps });
 
       const onSlashMenuOpen = mockEditor.on.mock.calls.find((call) => call[0] === 'slashMenu:open')[1];
@@ -455,8 +464,17 @@ describe('SlashMenu.vue', () => {
 
       expect(wrapper.findAll('.slash-menu-item')).toHaveLength(3);
 
-      const searchInput = wrapper.find('.slash-menu-hidden-input');
-      await searchInput.setValue('table');
+      // Simulate typing "table" after "/" — the transaction handler reads doc state
+      // textBetween returns full text from anchorPos to cursor, including the "/"
+      SlashMenuPluginKey.getState.mockReturnValue({ open: true, anchorPos: 1, trigger: 'slash' });
+      mockEditor.state = {
+        ...mockEditor.state,
+        selection: { from: 7 },
+        doc: { textBetween: () => '/table' },
+      };
+
+      const onTransaction = mockEditor.on.mock.calls.find((call) => call[0] === 'transaction')[1];
+      onTransaction();
       await nextTick();
 
       expect(wrapper.findAll('.slash-menu-item')).toHaveLength(1);
@@ -464,14 +482,23 @@ describe('SlashMenu.vue', () => {
     });
 
     it('should be case insensitive', async () => {
+      const { SlashMenuPluginKey } = await import('@extensions/slash-menu/slash-menu');
+
       const wrapper = mount(SlashMenu, { props: mockProps });
 
       const onSlashMenuOpen = mockEditor.on.mock.calls.find((call) => call[0] === 'slashMenu:open')[1];
       await onSlashMenuOpen({ menuPosition: { left: '100px', top: '200px' } });
       await nextTick();
 
-      const searchInput = wrapper.find('.slash-menu-hidden-input');
-      await searchInput.setValue('TABLE');
+      SlashMenuPluginKey.getState.mockReturnValue({ open: true, anchorPos: 1, trigger: 'slash' });
+      mockEditor.state = {
+        ...mockEditor.state,
+        selection: { from: 7 },
+        doc: { textBetween: () => '/TABLE' },
+      };
+
+      const onTransaction = mockEditor.on.mock.calls.find((call) => call[0] === 'transaction')[1];
+      onTransaction();
       await nextTick();
 
       expect(wrapper.findAll('.slash-menu-item')).toHaveLength(1);
@@ -507,15 +534,15 @@ describe('SlashMenu.vue', () => {
       await onSlashMenuOpen({ menuPosition: { left: '100px', top: '200px' } });
       await nextTick();
 
-      const searchInput = wrapper.find('.slash-menu-hidden-input');
-
-      await searchInput.trigger('keydown', { key: 'ArrowDown' });
+      // PM plugin emits slashMenu:navigate events for arrow keys
+      const onNavigate = mockEditor.on.mock.calls.find((call) => call[0] === 'slashMenu:navigate')[1];
+      onNavigate({ key: 'ArrowDown' });
       await nextTick();
 
       const selectedItems = wrapper.findAll('.slash-menu-item.is-selected');
       expect(selectedItems).toHaveLength(1);
 
-      await searchInput.trigger('keydown', { key: 'ArrowUp' });
+      onNavigate({ key: 'ArrowUp' });
       await nextTick();
 
       expect(wrapper.findAll('.slash-menu-item.is-selected')).toHaveLength(1);
@@ -543,10 +570,11 @@ describe('SlashMenu.vue', () => {
       await onSlashMenuOpen({ menuPosition: { left: '100px', top: '200px' } });
       await nextTick();
 
-      const searchInput = wrapper.find('.slash-menu-hidden-input');
-      await searchInput.trigger('keydown', { key: 'Enter' });
+      // PM plugin emits slashMenu:navigate for Enter
+      const onNavigate = mockEditor.on.mock.calls.find((call) => call[0] === 'slashMenu:navigate')[1];
+      onNavigate({ key: 'Enter' });
+      await nextTick();
 
-      // editor and context
       expect(mockAction).toHaveBeenCalledWith(
         mockEditor,
         expect.objectContaining({
@@ -557,7 +585,7 @@ describe('SlashMenu.vue', () => {
       );
     });
 
-    it('should close menu on Escape', async () => {
+    it('should close menu on Escape via PM plugin (not hidden input)', async () => {
       const wrapper = mount(SlashMenu, { props: mockProps });
 
       const onSlashMenuOpen = mockEditor.on.mock.calls.find((call) => call[0] === 'slashMenu:open')[1];
@@ -566,11 +594,12 @@ describe('SlashMenu.vue', () => {
 
       expect(wrapper.find('.slash-menu').exists()).toBe(true);
 
-      const searchInput = wrapper.find('.slash-menu-hidden-input');
-      await searchInput.trigger('keydown', { key: 'Escape' });
+      // Escape is handled by the PM plugin, which dispatches close meta and emits slashMenu:close
+      const onSlashMenuClose = mockEditor.on.mock.calls.find((call) => call[0] === 'slashMenu:close')[1];
+      onSlashMenuClose();
       await nextTick();
 
-      expect(mockEditor.view.dispatch).toHaveBeenCalled();
+      expect(wrapper.find('.slash-menu').exists()).toBe(false);
     });
   });
 
@@ -986,33 +1015,25 @@ describe('SlashMenu.vue', () => {
     });
   });
 
-  describe('focus behavior with preventScroll', () => {
-    it('should focus search input with preventScroll option when menu opens', async () => {
+  describe('menu open/close lifecycle', () => {
+    it('should render menu when opened', async () => {
       const wrapper = mount(SlashMenu, { props: mockProps });
 
       const onSlashMenuOpen = mockEditor.on.mock.calls.find((call) => call[0] === 'slashMenu:open')[1];
       await onSlashMenuOpen({ menuPosition: { left: '100px', top: '200px' } });
-
-      // Need to wait for both the open state to update and the watcher to execute
       await nextTick();
       await nextTick();
 
-      // Find the actual search input element in the DOM
-      const searchInputElement = wrapper.find('.slash-menu-hidden-input');
-      expect(searchInputElement.exists()).toBe(true);
-
-      // We can't easily mock focus() on a real DOM element in jsdom,
-      // but we can verify the input exists and is in the DOM when the menu is open
-      // The preventScroll option is verified through the code review and manual testing
       expect(wrapper.find('.slash-menu').exists()).toBe(true);
+      // Footer with close hint should be visible
+      expect(wrapper.find('.slash-menu-footer').exists()).toBe(true);
     });
 
-    it('should not throw error if searchInput ref is null', async () => {
-      const wrapper = mount(SlashMenu, { props: mockProps });
+    it('should not throw error on open', async () => {
+      mount(SlashMenu, { props: mockProps });
 
       const onSlashMenuOpen = mockEditor.on.mock.calls.find((call) => call[0] === 'slashMenu:open')[1];
 
-      // Should not throw an error - the watcher has a guard
       await expect(
         onSlashMenuOpen({ menuPosition: { left: '100px', top: '200px' } }).then(async () => {
           await nextTick();
@@ -1021,34 +1042,31 @@ describe('SlashMenu.vue', () => {
       ).resolves.not.toThrow();
     });
 
-    it('should attempt to focus search input each time menu opens', async () => {
+    it('should reopen menu after close', async () => {
       const wrapper = mount(SlashMenu, { props: mockProps });
 
       const onSlashMenuOpen = mockEditor.on.mock.calls.find((call) => call[0] === 'slashMenu:open')[1];
       const onSlashMenuClose = mockEditor.on.mock.calls.find((call) => call[0] === 'slashMenu:close')[1];
 
-      // Open menu first time
+      // Open first time
       await onSlashMenuOpen({ menuPosition: { left: '100px', top: '200px' } });
       await nextTick();
       await nextTick();
 
       expect(wrapper.find('.slash-menu').exists()).toBe(true);
-      expect(wrapper.find('.slash-menu-hidden-input').exists()).toBe(true);
 
-      // Close menu
+      // Close
       onSlashMenuClose();
       await nextTick();
 
       expect(wrapper.find('.slash-menu').exists()).toBe(false);
 
-      // Open menu second time
+      // Open second time
       await onSlashMenuOpen({ menuPosition: { left: '150px', top: '250px' } });
       await nextTick();
       await nextTick();
 
-      // Menu and input should exist again
       expect(wrapper.find('.slash-menu').exists()).toBe(true);
-      expect(wrapper.find('.slash-menu-hidden-input').exists()).toBe(true);
     });
   });
 });
diff --git a/packages/super-editor/src/components/slash-menu/tests/testHelpers.js b/packages/super-editor/src/components/slash-menu/tests/testHelpers.js
index 34afa5c48..34a9b7540 100644
--- a/packages/super-editor/src/components/slash-menu/tests/testHelpers.js
+++ b/packages/super-editor/src/components/slash-menu/tests/testHelpers.js
@@ -88,6 +88,9 @@ export function createMockState(options = {}) {
       setSelection: vi.fn(function () {
         return this;
       }),
+      delete: vi.fn(function () {
+        return this;
+      }),
     },
   };
 }
@@ -401,13 +404,13 @@ export function assertEventListenersSetup(editor, documentSpies) {
   // Check document listeners
   // Uses pointerdown instead of mousedown because PresentationEditor's pointer handlers
   // call event.preventDefault() which suppresses mousedown events
-  expect(docAddEventListener).toHaveBeenCalledWith('keydown', expect.any(Function));
   expect(docAddEventListener).toHaveBeenCalledWith('pointerdown', expect.any(Function));
 
   // Check editor listeners
   expect(editor.on).toHaveBeenCalledWith('update', expect.any(Function));
   expect(editor.on).toHaveBeenCalledWith('slashMenu:open', expect.any(Function));
   expect(editor.on).toHaveBeenCalledWith('slashMenu:close', expect.any(Function));
+  expect(editor.on).toHaveBeenCalledWith('slashMenu:navigate', expect.any(Function));
 
   // Check DOM listeners
   const domTarget = editor.presentationEditor?.element || editor.view.dom;
@@ -423,12 +426,12 @@ export function assertEventListenersCleanup(editor, documentSpies) {
   // Check document listeners cleanup
   // Uses pointerdown instead of mousedown because PresentationEditor's pointer handlers
   // call event.preventDefault() which suppresses mousedown events
-  expect(docRemoveEventListener).toHaveBeenCalledWith('keydown', expect.any(Function));
   expect(docRemoveEventListener).toHaveBeenCalledWith('pointerdown', expect.any(Function));
 
   // Check editor listeners cleanup (now with specific handlers to prevent leaks)
   expect(editor.off).toHaveBeenCalledWith('slashMenu:open', expect.any(Function));
   expect(editor.off).toHaveBeenCalledWith('slashMenu:close', expect.any(Function));
+  expect(editor.off).toHaveBeenCalledWith('slashMenu:navigate', expect.any(Function));
   expect(editor.off).toHaveBeenCalledWith('update', expect.any(Function));
 
   // Check DOM listeners cleanup
diff --git a/packages/super-editor/src/extensions/slash-menu/slash-menu.js b/packages/super-editor/src/extensions/slash-menu/slash-menu.js
index 6062013ed..959ebde3b 100644
--- a/packages/super-editor/src/extensions/slash-menu/slash-menu.js
+++ b/packages/super-editor/src/extensions/slash-menu/slash-menu.js
@@ -83,7 +83,6 @@ export function findContainingBlockAncestor(element) {
  * Configuration options for SlashMenu
  * @typedef {Object} SlashMenuOptions
  * @property {boolean} [disabled] - Disable the slash menu entirely (inherited from editor.options.disableContextMenu)
- * @property {number} [cooldownMs=5000] - Cooldown duration in milliseconds to prevent rapid re-opening
  * @category Options
  */
 
@@ -116,7 +115,6 @@ const MENU_OFFSET_X = 0; // Horizontal offset for slash menu (aligned with curso
 const MENU_OFFSET_Y = 28; // Vertical offset for slash menu
 const CONTEXT_MENU_OFFSET_X = 10; // Small offset for right-click
 const CONTEXT_MENU_OFFSET_Y = 10; // Small offset for right-click
-const SLASH_COOLDOWN_MS = 5000; // Cooldown period to prevent rapid re-opening
 
 /**
  * @module SlashMenu
@@ -143,10 +141,6 @@ export const SlashMenu = Extension.create({
       return [];
     }
 
-    // Cooldown flag and timeout for slash menu
-    let slashCooldown = false;
-    let slashCooldownTimeout = null;
-
     /**
      * Check if the context menu is disabled via editor options
      * @returns {boolean} True if menu is disabled
@@ -163,6 +157,7 @@ export const SlashMenu = Extension.create({
       selected: null,
       anchorPos: null,
       menuPosition: null,
+      trigger: null, // 'slash' (types into doc, filters) or 'click' (context menu)
       disabled: isMenuDisabled(),
       ...value,
     });
@@ -197,6 +192,50 @@ export const SlashMenu = Extension.create({
           }
 
           if (!meta) {
+            // Auto-close slash menu when cursor leaves the /query range
+            if (value.open && value.trigger === 'slash' && value.anchorPos !== null) {
+              const mappedAnchor = tr.mapping.map(value.anchorPos);
+              const $cursor = tr.selection?.$cursor ?? null;
+
+              // Close if no cursor or cursor at/before the / character
+              if (!$cursor || $cursor.pos <= mappedAnchor) {
+                editor.emit('slashMenu:close');
+                return ensureStateShape({ open: false, anchorPos: null, trigger: null });
+              }
+
+              // Close if cursor moved to a different block (paragraph/heading)
+              try {
+                const $anchor = tr.doc.resolve(mappedAnchor);
+                // Find the nearest block ancestor for each position (handles run wrappers)
+                let anchorBlock = null;
+                for (let d = $anchor.depth; d > 0; d--) {
+                  if ($anchor.node(d).isBlock) {
+                    anchorBlock = $anchor.node(d);
+                    break;
+                  }
+                }
+                let cursorBlock = null;
+                for (let d = $cursor.depth; d > 0; d--) {
+                  if ($cursor.node(d).isBlock) {
+                    cursorBlock = $cursor.node(d);
+                    break;
+                  }
+                }
+                if (anchorBlock !== cursorBlock) {
+                  editor.emit('slashMenu:close');
+                  return ensureStateShape({ open: false, anchorPos: null, trigger: null });
+                }
+              } catch {
+                editor.emit('slashMenu:close');
+                return ensureStateShape({ open: false, anchorPos: null, trigger: null });
+              }
+
+              // Update mapped anchor if it changed
+              if (mappedAnchor !== value.anchorPos) {
+                return ensureStateShape({ ...value, anchorPos: mappedAnchor, disabled });
+              }
+            }
+
             if (value.disabled !== disabled) {
               return ensureStateShape({ ...value, disabled });
             }
@@ -309,6 +348,7 @@ export const SlashMenu = Extension.create({
                 ...value,
                 open: true,
                 anchorPos: meta.pos,
+                trigger: meta.trigger ?? 'slash',
                 menuPosition,
               };
 
@@ -324,7 +364,7 @@ export const SlashMenu = Extension.create({
 
             case 'close': {
               editor.emit('slashMenu:close');
-              return ensureStateShape({ ...value, open: false, anchorPos: null });
+              return ensureStateShape({ ...value, open: false, anchorPos: null, trigger: null });
             }
 
             default:
@@ -362,11 +402,6 @@ export const SlashMenu = Extension.create({
           destroy() {
             window.removeEventListener('scroll', updatePosition, true);
             window.removeEventListener('resize', updatePosition);
-            // Clear cooldown timeout if exists
-            if (slashCooldownTimeout) {
-              clearTimeout(slashCooldownTimeout);
-              slashCooldownTimeout = null;
-            }
           },
         };
       },
@@ -387,12 +422,8 @@ export const SlashMenu = Extension.create({
           }
           const pluginState = this.getState(view.state);
 
-          // If cooldown is active and slash is pressed, allow default behavior
-          if (event.key === '/' && slashCooldown) {
-            return false; // Let browser handle it
-          }
-
-          if (event.key === '/' && !pluginState.open) {
+          // --- Open slash menu: insert '/' into document + open ---
+          if (event.key === '/' && !pluginState.open && !event.ctrlKey && !event.metaKey && !event.altKey) {
             const { $cursor } = view.state.selection;
             if (!$cursor) return false;
 
@@ -405,44 +436,53 @@ export const SlashMenu = Extension.create({
 
             event.preventDefault();
 
-            // Set cooldown
-            slashCooldown = true;
-            if (slashCooldownTimeout) clearTimeout(slashCooldownTimeout);
-            slashCooldownTimeout = setTimeout(() => {
-              slashCooldown = false;
-              slashCooldownTimeout = null;
-            }, SLASH_COOLDOWN_MS);
-
-            // Only dispatch state update - event will be emitted in apply()
-            view.dispatch(
-              view.state.tr.setMeta(SlashMenuPluginKey, {
-                type: 'open',
-                pos: $cursor.pos,
-              }),
-            );
+            // Insert '/' into the document and open the menu in one transaction.
+            // The '/' stays visible — subsequent typing filters the menu.
+            const { from, to } = view.state.selection;
+            const tr = view.state.tr.insertText('/', from, to);
+            tr.setMeta(SlashMenuPluginKey, { type: 'open', pos: from, trigger: 'slash' });
+            view.dispatch(tr);
             return true;
           }
 
-          if (pluginState.open && (event.key === 'Escape' || event.key === 'ArrowLeft')) {
-            // Store current state before closing
-            const { anchorPos } = pluginState;
+          // --- Menu is open ---
+          if (pluginState.open) {
+            // Navigation keys: consumed by PM so cursor doesn't move.
+            // Emit editor event for SlashMenu.vue to handle navigation.
+            if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter') {
+              event.preventDefault();
+              editor.emit('slashMenu:navigate', { key: event.key });
+              return true;
+            }
 
-            // Close menu
-            view.dispatch(
-              view.state.tr.setMeta(SlashMenuPluginKey, {
-                type: 'close',
-              }),
-            );
+            if (pluginState.trigger === 'slash') {
+              // Escape: delete /query text and close
+              if (event.key === 'Escape') {
+                event.preventDefault();
+                const { anchorPos } = pluginState;
+                const cursorPos = view.state.selection.from;
+                const tr = view.state.tr;
+                if (anchorPos !== null && cursorPos > anchorPos) {
+                  tr.delete(anchorPos, cursorPos);
+                }
+                tr.setMeta(SlashMenuPluginKey, { type: 'close' });
+                view.dispatch(tr);
+                view.focus();
+                return true;
+              }
+              // All other keys pass through to PM (chars go into the document).
+              // apply() auto-closes if cursor leaves the /query range.
+              return false;
+            }
 
-            // Restore cursor position and focus
-            if (anchorPos !== null) {
-              const tr = view.state.tr.setSelection(
-                view.state.selection.constructor.near(view.state.doc.resolve(anchorPos)),
-              );
-              view.dispatch(tr);
+            // Context-menu trigger: close on any non-navigation key
+            if (event.key === 'Escape' || event.key === 'ArrowLeft') {
+              view.dispatch(view.state.tr.setMeta(SlashMenuPluginKey, { type: 'close' }));
               view.focus();
+              return true;
             }
-            return true;
+            view.dispatch(view.state.tr.setMeta(SlashMenuPluginKey, { type: 'close' }));
+            return false;
           }
 
           return false;
diff --git a/packages/super-editor/src/extensions/slash-menu/slash-menu.test.js b/packages/super-editor/src/extensions/slash-menu/slash-menu.test.js
index f687495a5..c0222b794 100644
--- a/packages/super-editor/src/extensions/slash-menu/slash-menu.test.js
+++ b/packages/super-editor/src/extensions/slash-menu/slash-menu.test.js
@@ -81,11 +81,16 @@ describe('SlashMenu extension', () => {
     const pluginState = SlashMenuPluginKey.getState(view.state);
     expect(pluginState.open).toBe(true);
     expect(pluginState.anchorPos).toBe(1);
+    expect(pluginState.trigger).toBe('slash');
     expect(pluginState.menuPosition).toEqual({ left: '20px', top: '58px' });
     expect(editor.emit).toHaveBeenCalledWith('slashMenu:open', {
       menuPosition: { left: '20px', top: '58px' },
     });
 
+    // '/' was inserted into the document
+    expect(view.state.doc.textContent).toBe('/');
+
+    // Escape deletes the /query text and closes
     const closeEvent = { key: 'Escape', preventDefault: vi.fn() };
     const closed = plugin.props.handleKeyDown.call(plugin, view, closeEvent);
     expect(closed).toBe(true);
@@ -94,6 +99,9 @@ describe('SlashMenu extension', () => {
     expect(editor.emit).toHaveBeenCalledWith('slashMenu:close');
     expect(view.focus).toHaveBeenCalled();
 
+    // '/' text was deleted
+    expect(view.state.doc.textContent).toBe('');
+
     viewLifecycle?.destroy?.();
   });
 
@@ -179,8 +187,8 @@ describe('SlashMenu extension', () => {
     expect(editor.emit).toHaveBeenCalledWith('slashMenu:close');
   });
 
-  describe('cooldown mechanism', () => {
-    it('prevents reopening menu during cooldown period', () => {
+  describe('immediate reopen', () => {
+    it('allows reopening menu immediately after closing', () => {
       const baseDoc = doc(p());
       const initialSelection = TextSelection.create(baseDoc, 1);
       let state = EditorState.create({ schema, doc: baseDoc, selection: initialSelection });
@@ -209,117 +217,26 @@ describe('SlashMenu extension', () => {
 
       editor.view = view;
 
-      // Open menu first time
+      // Open menu first time (inserts '/' into doc)
       const openEvent1 = { key: '/', preventDefault: vi.fn() };
       const opened1 = plugin.props.handleKeyDown.call(plugin, view, openEvent1);
       expect(opened1).toBe(true);
       expect(SlashMenuPluginKey.getState(view.state).open).toBe(true);
+      expect(view.state.doc.textContent).toBe('/');
 
-      // Close menu
+      // Close menu (Escape deletes the '/')
       const closeEvent = { key: 'Escape', preventDefault: vi.fn() };
       plugin.props.handleKeyDown.call(plugin, view, closeEvent);
       expect(SlashMenuPluginKey.getState(view.state).open).toBe(false);
+      expect(view.state.doc.textContent).toBe('');
 
-      // Try to open menu again immediately (should be blocked by cooldown)
+      // Reopen immediately — no cooldown blocking (inserts '/' again)
       const openEvent2 = { key: '/', preventDefault: vi.fn() };
       const opened2 = plugin.props.handleKeyDown.call(plugin, view, openEvent2);
-      expect(opened2).toBe(false); // Should return false during cooldown
-      expect(openEvent2.preventDefault).not.toHaveBeenCalled();
-      expect(SlashMenuPluginKey.getState(view.state).open).toBe(false); // Should remain closed
-    });
-
-    it('allows reopening menu after cooldown expires', async () => {
-      vi.useFakeTimers();
-
-      const baseDoc = doc(p());
-      const initialSelection = TextSelection.create(baseDoc, 1);
-      let state = EditorState.create({ schema, doc: baseDoc, selection: initialSelection });
-
-      const editor = {
-        options: {},
-        emit: vi.fn(),
-        view: null,
-      };
-
-      const [plugin] = SlashMenu.config.addPmPlugins.call({ editor });
-      state = EditorState.create({ schema, doc: baseDoc, selection: initialSelection, plugins: [plugin] });
-
-      const view = {
-        state,
-        dispatch: vi.fn((tr) => {
-          state = state.apply(tr);
-          view.state = state;
-        }),
-        focus: vi.fn(),
-        dom: {
-          getBoundingClientRect: () => ({ left: 0, top: 0 }),
-        },
-        coordsAtPos: () => ({ left: 20, top: 30 }),
-      };
-
-      editor.view = view;
-
-      // Open and close menu
-      plugin.props.handleKeyDown.call(plugin, view, { key: '/', preventDefault: vi.fn() });
-      plugin.props.handleKeyDown.call(plugin, view, { key: 'Escape', preventDefault: vi.fn() });
-
-      // Fast forward past cooldown period (5000ms)
-      vi.advanceTimersByTime(5000);
-
-      // Should be able to open again after cooldown
-      const openEvent = { key: '/', preventDefault: vi.fn() };
-      const opened = plugin.props.handleKeyDown.call(plugin, view, openEvent);
-      expect(opened).toBe(true);
-      expect(openEvent.preventDefault).toHaveBeenCalled();
+      expect(opened2).toBe(true);
+      expect(openEvent2.preventDefault).toHaveBeenCalled();
       expect(SlashMenuPluginKey.getState(view.state).open).toBe(true);
-
-      vi.useRealTimers();
-    });
-
-    it('clears cooldown timeout on plugin destroy', () => {
-      vi.useFakeTimers();
-
-      const baseDoc = doc(p());
-      const initialSelection = TextSelection.create(baseDoc, 1);
-      let state = EditorState.create({ schema, doc: baseDoc, selection: initialSelection });
-
-      const editor = {
-        options: {},
-        emit: vi.fn(),
-        view: null,
-      };
-
-      const [plugin] = SlashMenu.config.addPmPlugins.call({ editor });
-      state = EditorState.create({ schema, doc: baseDoc, selection: initialSelection, plugins: [plugin] });
-
-      const view = {
-        state,
-        dispatch: vi.fn((tr) => {
-          state = state.apply(tr);
-          view.state = state;
-        }),
-        focus: vi.fn(),
-        dom: {
-          getBoundingClientRect: () => ({ left: 0, top: 0 }),
-        },
-        coordsAtPos: () => ({ left: 20, top: 30 }),
-      };
-
-      editor.view = view;
-      const viewLifecycle = plugin.spec.view?.(view);
-
-      // Open and close to trigger cooldown
-      plugin.props.handleKeyDown.call(plugin, view, { key: '/', preventDefault: vi.fn() });
-      plugin.props.handleKeyDown.call(plugin, view, { key: 'Escape', preventDefault: vi.fn() });
-
-      // Destroy should clear the timeout
-      viewLifecycle?.destroy?.();
-
-      // This test mainly ensures no memory leaks - we can't easily verify the timeout is cleared
-      // but the destroy() call should not throw
-      expect(true).toBe(true);
-
-      vi.useRealTimers();
+      expect(view.state.doc.textContent).toBe('/');
     });
   });
 
@@ -778,7 +695,7 @@ describe('SlashMenu extension', () => {
   });
 
   describe('keyboard shortcuts', () => {
-    it('closes menu with ArrowLeft', () => {
+    it('passes ArrowLeft through for slash-triggered menu (auto-close handles it)', () => {
       const baseDoc = doc(p());
       const initialSelection = TextSelection.create(baseDoc, 1);
       let state = EditorState.create({ schema, doc: baseDoc, selection: initialSelection });
@@ -807,18 +724,64 @@ describe('SlashMenu extension', () => {
 
       editor.view = view;
 
-      // Open menu
+      // Open menu via slash (inserts '/' into doc)
       plugin.props.handleKeyDown.call(plugin, view, { key: '/', preventDefault: vi.fn() });
       expect(SlashMenuPluginKey.getState(view.state).open).toBe(true);
+      expect(SlashMenuPluginKey.getState(view.state).trigger).toBe('slash');
+
+      // ArrowLeft is NOT consumed for slash trigger — passes through to PM
+      const arrowEvent = { key: 'ArrowLeft', preventDefault: vi.fn() };
+      const handled = plugin.props.handleKeyDown.call(plugin, view, arrowEvent);
+      expect(handled).toBe(false);
+      // Menu stays open (auto-close in apply() handles it when cursor moves before anchor)
+    });
+
+    it('closes context-menu trigger with ArrowLeft', () => {
+      const baseDoc = doc(p());
+      const initialSelection = TextSelection.create(baseDoc, 1);
+      let state = EditorState.create({ schema, doc: baseDoc, selection: initialSelection });
+
+      const editor = {
+        options: {},
+        emit: vi.fn(),
+        view: null,
+      };
+
+      const [plugin] = SlashMenu.config.addPmPlugins.call({ editor });
+      state = EditorState.create({ schema, doc: baseDoc, selection: initialSelection, plugins: [plugin] });
+
+      const view = {
+        state,
+        dispatch: vi.fn((tr) => {
+          state = state.apply(tr);
+          view.state = state;
+        }),
+        focus: vi.fn(),
+        dom: {
+          getBoundingClientRect: () => ({ left: 0, top: 0 }),
+        },
+      };
+
+      editor.view = view;
+
+      // Open via context menu (no '/' inserted)
+      view.dispatch(
+        view.state.tr.setMeta(SlashMenuPluginKey, {
+          type: 'open',
+          clientX: 100,
+          clientY: 100,
+          pos: 1,
+          trigger: 'click',
+        }),
+      );
+      expect(SlashMenuPluginKey.getState(view.state).open).toBe(true);
+      expect(SlashMenuPluginKey.getState(view.state).trigger).toBe('click');
 
-      // Close with ArrowLeft
+      // ArrowLeft closes context-menu trigger
       const closeEvent = { key: 'ArrowLeft', preventDefault: vi.fn() };
       const closed = plugin.props.handleKeyDown.call(plugin, view, closeEvent);
       expect(closed).toBe(true);
-
-      const pluginState = SlashMenuPluginKey.getState(view.state);
-      expect(pluginState.open).toBe(false);
-      expect(editor.emit).toHaveBeenCalledWith('slashMenu:close');
+      expect(SlashMenuPluginKey.getState(view.state).open).toBe(false);
       expect(view.focus).toHaveBeenCalled();
     });
   });