feat(rich-md-editor): let focused editors claim shortcuts from the global command registry

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/providers/global-commands-provider.test.tsx

@@ -0,0 +1,89 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { mockIsMac } = vi.hoisted(() => ({ mockIsMac: vi.fn(() => false) }))
+vi.mock('@/lib/core/utils/platform', () => ({ isMacPlatform: mockIsMac }))
+vi.mock('next/navigation', () => ({ useRouter: () => ({ push: vi.fn() }) }))
+
+import {
+  GlobalCommandsProvider,
+  useRegisterGlobalCommands,
+} from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
+
+function RegisterModK({ handler }: { handler: () => void }) {
+  useRegisterGlobalCommands([{ id: 'search', shortcut: 'Mod+K', handler }])
+  return null
+}
+
+let container: HTMLDivElement
+let root: Root
+
+function mount(ui: ReactNode) {
+  act(() => {
+    root.render(ui)
+  })
+}
+
+/** Non-mac (mocked): `Mod` resolves to Ctrl, so Ctrl+K matches a `Mod+K` shortcut. */
+function pressModK() {
+  window.dispatchEvent(
+    new KeyboardEvent('keydown', { key: 'k', ctrlKey: true, bubbles: true, cancelable: true })
+  )
+}
+
+beforeEach(() => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  container.remove()
+  vi.clearAllMocks()
+})
+
+describe('GlobalCommandsProvider owned-shortcut yielding', () => {
+  it('fires a global command when nothing owns the shortcut', () => {
+    const handler = vi.fn()
+    mount(
+      <GlobalCommandsProvider>
+        <RegisterModK handler={handler} />
+      </GlobalCommandsProvider>
+    )
+    pressModK()
+    expect(handler).toHaveBeenCalledTimes(1)
+  })
+
+  it('yields the shortcut to a focused element that declares it owns it', () => {
+    const handler = vi.fn()
+    mount(
+      <GlobalCommandsProvider>
+        <RegisterModK handler={handler} />
+        {/* biome-ignore lint/a11y/noNoninteractiveTabindex: focusable stand-in for the editor */}
+        <div data-owned-shortcuts='Mod+K' tabIndex={0} />
+      </GlobalCommandsProvider>
+    )
+    ;(container.querySelector('[data-owned-shortcuts]') as HTMLElement).focus()
+    pressModK()
+    expect(handler).not.toHaveBeenCalled()
+  })
+
+  it('still fires when the focused element owns only a different shortcut', () => {
+    const handler = vi.fn()
+    mount(
+      <GlobalCommandsProvider>
+        <RegisterModK handler={handler} />
+        {/* biome-ignore lint/a11y/noNoninteractiveTabindex: focusable stand-in for the editor */}
+        <div data-owned-shortcuts='Mod+B' tabIndex={0} />
+      </GlobalCommandsProvider>
+    )
+    ;(container.querySelector('[data-owned-shortcuts]') as HTMLElement).focus()
+    pressModK()
+    expect(handler).toHaveBeenCalledTimes(1)
+  })
+})

apps/sim/app/workspace/[workspaceId]/providers/global-commands-provider.tsx

@@ -86,6 +86,30 @@ function matchesShortcut(e: KeyboardEvent, parsed: ParsedShortcut): boolean {
   )
 }
 
+/** Platform-resolved signature of a shortcut, so `Mod+K`, `Cmd+K`, and `Meta+K` compare equal on mac. */
+function shortcutSignature(parsed: ParsedShortcut, isMac: boolean): string {
+  const ctrl = parsed.ctrl || (parsed.mod ? !isMac : false)
+  const meta = parsed.meta || (parsed.mod ? isMac : false)
+  return `${parsed.key}|${+ctrl}|${+meta}|${+!!parsed.shift}|${+!!parsed.alt}`
+}
+
+/**
+ * Whether the focused element (or an ancestor) declares it owns `parsed` via a comma-separated
+ * `data-owned-shortcuts` attribute (e.g. a rich-text editor that binds `Mod+K` to links). Such a
+ * shortcut is left for that element to handle instead of firing the global command.
+ */
+function focusedElementOwnsShortcut(parsed: ParsedShortcut, isMac: boolean): boolean {
+  const active = document.activeElement
+  const owner = active instanceof HTMLElement ? active.closest('[data-owned-shortcuts]') : null
+  if (!owner) return false
+  const target = shortcutSignature(parsed, isMac)
+  return (owner.getAttribute('data-owned-shortcuts') ?? '')
+    .split(',')
+    .map((entry) => entry.trim())
+    .filter(Boolean)
+    .some((entry) => shortcutSignature(parseShortcut(entry), isMac) === target)
+}
+
 export function GlobalCommandsProvider({ children }: { children: ReactNode }) {
   const registryRef = useRef<Map<string, RegistryCommand>>(new Map())
   const isMac = useMemo(() => isMacPlatform(), [])
@@ -127,6 +151,8 @@ export function GlobalCommandsProvider({ children }: { children: ReactNode }) {
         }
 
         if (matchesShortcut(e, cmd.parsed)) {
+          // A focused rich editor that owns this shortcut (e.g. Mod+K for links) handles it itself.
+          if (focusedElementOwnsShortcut(cmd.parsed, isMac)) continue
           e.preventDefault()
           e.stopPropagation()
           try {