Yoopta-Editor icon indicating copy to clipboard operation
Yoopta-Editor copied to clipboard

Fix: Slash command action list not triggering on android

Open Hyd3r1 opened this issue 4 months ago • 1 comments

Problem

The / key wasn't opening the action list in the editor, particularly on mobile devices.

Investigation

Used event listener debugging to identify the root cause:

document.addEventListener('keydown', function(event) {
    console.log('Key pressed:', event.key);
    console.log('Key code:', event.keyCode);
});

Findings:

  • The slash key events were being captured but not properly handled
  • Mobile browsers handle keyboard events differently than desktop
  • Event propagation was being prevented before reaching the action list trigger

Solution

Enhanced the onKeyDown handler to properly detect and handle slash commands across all browsers and input methods:

if ((event.key === '/' ||
     event.keyCode === 191 ||
     event.which === 191 ||
     event.keyCode === 229 ||
     // [TODO] - event.code Slash works for both '/' and '?' keys
     event.code === 'Slash' ||
     event.key==='/') && !event.defaultPrevented) {
  const slate = findSlateBySelectionPath(editor, { at: editor.path.current });
  
  if (slate?.selection) {
    event.preventDefault();
    editor.showActionList();
    return;
  }
}

Key changes:

  • event.keyCode === 191 - Standard slash key code
  • event.which === 191 - Legacy browser support
  • event.keyCode === 229 - IME composition events (mobile)
  • event.code === 'Slash' - Modern physical key detection
  • Multiple event.key checks for redundancy

Hyd3r1 avatar Jul 23 '25 12:07 Hyd3r1

@Hyd3r1 is attempting to deploy a commit to the dargo's projects Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] avatar Jul 23 '25 12:07 vercel[bot]