feat: add slash command menu to article editor (#14035)

app/javascript/dashboard/composables/useKeyboardNavigableList.js

@@ -12,11 +12,14 @@ import { useKeyboardEvents } from './useKeyboardEvents';
 
 /**
  * Wrap the action in a function that calls the action and prevents the default event behavior.
+ * Only prevents default when items are available to navigate.
  * @param {Function} action - The action to be called.
+ * @param {import('vue').Ref<Array>} items - A ref to the array of selectable items.
  * @returns {{action: Function, allowOnFocusedInput: boolean}} An object containing the action and a flag to allow the event on focused input.
  */
-const createAction = action => ({
+const createAction = (action, items) => ({
   action: e => {
+    if (!items.value?.length) return;
     action();
     e.preventDefault();
   },
@@ -38,15 +41,14 @@ const createKeyboardEvents = (
   items
 ) => {
   const events = {
-    ArrowUp: createAction(moveSelectionUp),
-    'Control+KeyP': createAction(moveSelectionUp),
-    ArrowDown: createAction(moveSelectionDown),
-    'Control+KeyN': createAction(moveSelectionDown),
+    ArrowUp: createAction(moveSelectionUp, items),
+    'Control+KeyP': createAction(moveSelectionUp, items),
+    ArrowDown: createAction(moveSelectionDown, items),
+    'Control+KeyN': createAction(moveSelectionDown, items),
   };
 
-  // Adds an event handler for the Enter key if the onSelect function is provided.
   if (typeof onSelect === 'function') {
-    events.Enter = createAction(() => items.value?.length > 0 && onSelect());
+    events.Enter = createAction(onSelect, items);
   }
 
   return events;