Keyboard shortcuts/Keymaps not working

You were right, it wasn't React or GrapesJS. Event propagation was being stopped by the rc-drawer component I was using. @artf thanks for your help, this has been an issue from day one.

Hey @Joshmamroud we have this code that propagates keydown keyup keypress events to the parent document, this allows keymaps to work, ensure to not contain any code/component which prevents the propagation of those events.

Hey @artf, I believe it may be blocked by React. Any suggestions on how to re-bind these event listeners? Not even sure if that is the right solution or path.

Thanks for reporting this, @Joshmamroud.

The issue with Keyboard shortcuts/Keymaps not working appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating an inconsistent state.

What to try:

1. Add a setTimeout wrapper to ensure the DOM has settled:

setTimeout(() => {
  // your operation here
}, 0);

2. Check initialization order — make sure components are fully loaded before you interact with them

3. Use the editor's event system — listen to completion events:

editor.on('component:mount', (component) => {
  // safe to interact with component here
});

Recommended next steps:

• Test with the latest GrapesJS version if you haven't
• Provide a minimal reproducible example (CodeSandbox) — this helps the team identify the root cause faster
• Include GrapesJS version, browser, and console errors in your report