Yoopta-Editor
Yoopta-Editor copied to clipboard
Fix: Slash command action list not triggering on android
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 codeevent.which === 191- Legacy browser supportevent.keyCode === 229- IME composition events (mobile)event.code === 'Slash'- Modern physical key detection- Multiple
event.keychecks for redundancy
@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.