Fix keyboard shortcut conflicts with priority-based system

.gitignore

@@ -91,3 +91,4 @@ assets/test-results
 
 .claude/settings.local.json
 test-results
+assets/coverage

CHANGELOG.md

@@ -42,6 +42,10 @@ and this project adheres to
 
 ### Changed
 
+- Always keep the Diagram mounted even when the IDE is present
+  [#3981](https://github.com/OpenFn/lightning/issues/3981)
+- Dropped react-hotkeys-hook for custom priority based key handler hook
+  [#3981](https://github.com/OpenFn/lightning/issues/3981)
 - Simplified IDE by only letting users see the "Create a New Manual Run Panel"
   when an existing Run isn't already loaded. Cleaned up the Run panel.
   [#4006](https://github.com/OpenFn/lightning/issues/4006)

assets/eslint.config.js

@@ -45,7 +45,7 @@ const javascriptFiles = [
 ].map(ext => `**/*.${ext}`);
 const nodeFiles = allExtensions.map(ext => `*.${ext}`);
 const browserFiles = allExtensions.flatMap(ext =>
-  ['js', 'vendor', 'dev-server'].map(dir => `${dir}/**/*.${ext}`)
+  ['js', 'vendor', 'dev-server', 'test'].map(dir => `${dir}/**/*.${ext}`)
 );
 const reactFiles = [
   ...jsxExtensions,

assets/js/collaborative-editor/CollaborativeEditor.tsx

@@ -1,5 +1,4 @@
 import { useMemo } from 'react';
-import { HotkeysProvider } from 'react-hotkeys-hook';
 
 import { SocketProvider } from '../react/contexts/SocketProvider';
 import { useURLState } from '../react/lib/use-url-state';
@@ -22,6 +21,7 @@ import {
 import { useIsRunPanelOpen } from './hooks/useUI';
 import { useVersionSelect } from './hooks/useVersionSelect';
 import { useWorkflowState } from './hooks/useWorkflow';
+import { KeyboardProvider } from './keyboard';
 
 export interface CollaborativeEditorDataProps {
   'data-workflow-id': string;
@@ -139,19 +139,14 @@ function BreadcrumbContent({
   ]);
 
   return (
-    <>
-      {/* Only render Header for Canvas mode - IDE mode has its own Header in FullScreenIDE */}
-      {!isIDEOpen && (
-        <Header
-          key="canvas-header"
-          {...(projectId !== undefined && { projectId })}
-          workflowId={workflowId}
-          isRunPanelOpen={isRunPanelOpen}
-        >
-          {breadcrumbElements}
-        </Header>
-      )}
-    </>
+    <Header
+      key="canvas-header"
+      {...(projectId !== undefined && { projectId })}
+      workflowId={workflowId}
+      isRunPanelOpen={isRunPanelOpen}
+    >
+      {breadcrumbElements}
+    </Header>
   );
 }
 
@@ -178,9 +173,9 @@ export const CollaborativeEditor: WithActionProps<
   };
 
   return (
-    <HotkeysProvider>
+    <KeyboardProvider>
       <div
-        className="collaborative-editor h-full flex flex-col"
+        className="collaborative-editor h-full flex flex-col relative"
         data-testid="collaborative-editor"
       >
         <SocketProvider>
@@ -229,6 +224,6 @@ export const CollaborativeEditor: WithActionProps<
           </SessionProvider>
         </SocketProvider>
       </div>
-    </HotkeysProvider>
+    </KeyboardProvider>
   );
 };

assets/js/collaborative-editor/components/AdaptorSelectionModal.tsx

@@ -1,8 +1,6 @@
 import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react';
 import { useEffect, useMemo, useState } from 'react';
-import { useHotkeysContext } from 'react-hotkeys-hook';
 
-import { HOTKEY_SCOPES } from '../constants/hotkeys';
 import { useAdaptors } from '../hooks/useAdaptors';
 import type { Adaptor } from '../types/adaptor';
 import { getAdaptorDisplayName } from '../utils/adaptorUtils';
@@ -31,24 +29,6 @@ export function AdaptorSelectionModal({
   const [searchQuery, setSearchQuery] = useState('');
   const [focusedIndex, setFocusedIndex] = useState<number>(0);
 
-  // Keyboard scope management
-  const { enableScope, disableScope } = useHotkeysContext();
-
-  useEffect(() => {
-    if (isOpen) {
-      enableScope(HOTKEY_SCOPES.MODAL);
-      disableScope(HOTKEY_SCOPES.PANEL);
-      disableScope(HOTKEY_SCOPES.RUN_PANEL);
-    } else {
-      disableScope(HOTKEY_SCOPES.MODAL);
-      enableScope(HOTKEY_SCOPES.PANEL);
-    }
-
-    return () => {
-      disableScope(HOTKEY_SCOPES.MODAL);
-    };
-  }, [isOpen, enableScope, disableScope]);
-
   // Reset state when modal closes
   useEffect(() => {
     if (!isOpen) {

assets/js/collaborative-editor/components/AlertDialog.tsx

@@ -4,10 +4,6 @@ import {
   DialogPanel,
   DialogTitle,
 } from '@headlessui/react';
-import { useEffect } from 'react';
-import { useHotkeysContext } from 'react-hotkeys-hook';
-
-import { HOTKEY_SCOPES } from '#/collaborative-editor/constants/hotkeys';
 
 interface AlertDialogProps {
   isOpen: boolean;
@@ -52,24 +48,6 @@ export function AlertDialog({
       ? 'bg-red-600 hover:bg-red-500 focus-visible:outline-red-600'
       : 'bg-primary-600 hover:bg-primary-500 focus-visible:outline-primary-600';
 
-  // Use HotkeysContext to control keyboard scope precedence
-  const { enableScope, disableScope } = useHotkeysContext();
-
-  useEffect(() => {
-    if (isOpen) {
-      enableScope(HOTKEY_SCOPES.MODAL);
-      disableScope(HOTKEY_SCOPES.PANEL);
-      disableScope(HOTKEY_SCOPES.RUN_PANEL);
-    } else {
-      disableScope(HOTKEY_SCOPES.MODAL);
-      enableScope(HOTKEY_SCOPES.PANEL);
-    }
-
-    return () => {
-      disableScope(HOTKEY_SCOPES.MODAL);
-    };
-  }, [isOpen, enableScope, disableScope]);
-
   return (
     <Dialog open={isOpen} onClose={onClose} className="relative z-50">
       <DialogBackdrop

assets/js/collaborative-editor/components/CollaborativeMonaco.tsx

@@ -7,6 +7,7 @@ import type * as Y from 'yjs';
 import _logger from '#/utils/logger';
 
 import { type Monaco, MonacoEditor, setTheme } from '../../monaco';
+import { addKeyboardShortcutOverrides } from '../../monaco/keyboard-overrides';
 
 import { Cursors } from './Cursors';
 
@@ -51,35 +52,8 @@ export function CollaborativeMonaco({
       const language = getLanguageFromAdaptor(adaptor);
       monaco.editor.setModelLanguage(editor.getModel()!, language);
 
-      // Override Monaco's CMD+Enter to allow react-hotkeys-hook to handle it
-      editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
-        const event = new KeyboardEvent('keydown', {
-          key: 'Enter',
-          code: 'Enter',
-          metaKey: true,
-          ctrlKey: true,
-          bubbles: true,
-          cancelable: true,
-        });
-        document.dispatchEvent(event);
-      });
-
-      // Override Monaco's CMD+Shift+Enter to allow react-hotkeys-hook to handle it
-      editor.addCommand(
-        monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.Enter,
-        () => {
-          const event = new KeyboardEvent('keydown', {
-            key: 'Enter',
-            code: 'Enter',
-            metaKey: true,
-            ctrlKey: true,
-            shiftKey: true,
-            bubbles: true,
-            cancelable: true,
-          });
-          document.dispatchEvent(event);
-        }
-      );
+      // Override Monaco shortcuts to allow KeyboardProvider to handle them
+      addKeyboardShortcutOverrides(editor, monaco);
 
       // Create initial binding if ytext and awareness are available
       if (ytext && awareness) {

assets/js/collaborative-editor/components/ConfigureAdaptorModal.tsx

@@ -4,19 +4,17 @@ import {
   DialogPanel,
   DialogTitle,
 } from '@headlessui/react';
-import { useEffect, useMemo, useState, useRef } from 'react';
-import { useHotkeysContext } from 'react-hotkeys-hook';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
-import { HOTKEY_SCOPES } from '#/collaborative-editor/constants/hotkeys';
 import {
-  useCredentials,
   useCredentialQueries,
+  useCredentials,
 } from '#/collaborative-editor/hooks/useCredentials';
 import type { Adaptor } from '#/collaborative-editor/types/adaptor';
 import type { CredentialWithType } from '#/collaborative-editor/types/credential';
 import {
-  extractAdaptorName,
   extractAdaptorDisplayName,
+  extractAdaptorName,
   extractPackageName,
 } from '#/collaborative-editor/utils/adaptorUtils';
 
@@ -65,24 +63,6 @@ export function ConfigureAdaptorModal({
   const { projectCredentials, keychainCredentials } = useCredentials();
   const { credentialExists, getCredentialId } = useCredentialQueries();
 
-  // Keyboard scope management
-  const { enableScope, disableScope } = useHotkeysContext();
-
-  useEffect(() => {
-    if (isOpen) {
-      enableScope(HOTKEY_SCOPES.MODAL);
-      disableScope(HOTKEY_SCOPES.PANEL);
-      disableScope(HOTKEY_SCOPES.RUN_PANEL);
-    } else {
-      disableScope(HOTKEY_SCOPES.MODAL);
-      enableScope(HOTKEY_SCOPES.PANEL);
-    }
-
-    return () => {
-      disableScope(HOTKEY_SCOPES.MODAL);
-    };
-  }, [isOpen, enableScope, disableScope]);
-
   // When adaptor changes externally (from Y.Doc or adaptor picker),
   // automatically update to newest version and clear invalid credentials
   const prevAdaptorRef = useRef(currentAdaptor);

assets/js/collaborative-editor/components/Cursors.tsx

@@ -87,7 +87,7 @@ export function Cursors() {
     }
 
     return { __html: cursorStyles };
-  }, [cursorsMap.size, ...Array.from(cursorsMap.keys())]);
+  }, [cursorsMap]);
 
   // Detect when a users cursor is near the top of the editor and flip the
   // position of the label to below their position.

assets/js/collaborative-editor/components/GitHubSyncModal.tsx

@@ -5,9 +5,7 @@ import {
   DialogTitle,
 } from '@headlessui/react';
 import { useEffect, useId, useState } from 'react';
-import { useHotkeysContext } from 'react-hotkeys-hook';
 
-import { HOTKEY_SCOPES } from '../constants/hotkeys';
 import {
   useProject,
   useProjectRepoConnection,
@@ -27,7 +25,6 @@ import { GITHUB_BASE_URL } from '../utils/constants';
  * - Textarea for commit message input
  * - Save & Sync button that triggers workflow save and GitHub sync
  * - Cancel button to close without syncing
- * - Proper keyboard scope management
  *
  * @example
  * // Add to WorkflowEditor or Header component
@@ -49,24 +46,6 @@ export function GitHubSyncModal() {
   const [commitMessage, setCommitMessage] = useState('');
   const [isSaving, setIsSaving] = useState(false);
 
-  // Use HotkeysContext to control keyboard scope precedence
-  const { enableScope, disableScope } = useHotkeysContext();
-
-  useEffect(() => {
-    if (isOpen) {
-      enableScope(HOTKEY_SCOPES.MODAL);
-      disableScope(HOTKEY_SCOPES.PANEL);
-      disableScope(HOTKEY_SCOPES.RUN_PANEL);
-    } else {
-      disableScope(HOTKEY_SCOPES.MODAL);
-      enableScope(HOTKEY_SCOPES.PANEL);
-    }
-
-    return () => {
-      disableScope(HOTKEY_SCOPES.MODAL);
-    };
-  }, [isOpen, enableScope, disableScope]);
-
   // Set default commit message when modal opens
   useEffect(() => {
     if (isOpen && user) {

assets/js/collaborative-editor/components/Header.tsx

@@ -1,7 +1,6 @@
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { useCallback, useMemo } from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
 
 import { useURLState } from '../../react/lib/use-url-state';
 import { buildClassicalEditorUrl } from '../../utils/editorUrlConversion';
@@ -20,6 +19,7 @@ import {
   useWorkflowSettingsErrors,
   useWorkflowState,
 } from '../hooks/useWorkflow';
+import { useKeyboardShortcut } from '../keyboard';
 
 import { ActiveCollaborators } from './ActiveCollaborators';
 import { AIButton } from './AIButton';
@@ -244,33 +244,22 @@ export function Header({
     return <ShortcutKeys keys={['mod', 'enter']} />; // Shortcut applies
   }, [canRun, runTooltipMessage, isRunPanelOpen]);
 
-  useHotkeys(
-    'ctrl+s,meta+s',
-    event => {
-      event.preventDefault();
-      if (canSave) {
-        void saveWorkflow();
-      }
+  useKeyboardShortcut(
+    'Control+s, Meta+s',
+    () => {
+      void saveWorkflow();
     },
-    {
-      enabled: true,
-      enableOnFormTags: true,
-    },
-    [saveWorkflow, canSave]
+    0,
+    { enabled: canSave }
   );
 
-  useHotkeys(
-    'ctrl+shift+s,meta+shift+s',
-    event => {
-      event.preventDefault();
-      if (canSave && repoConnection) {
-        openGitHubSyncModal();
-      }
-    },
-    {
-      enableOnFormTags: true,
+  useKeyboardShortcut(
+    'Control+Shift+s, Meta+Shift+s',
+    () => {
+      openGitHubSyncModal();
     },
-    [openGitHubSyncModal, canSave, repoConnection]
+    0,
+    { enabled: canSave && !!repoConnection }
   );
 
   return (