Feature Request - Cross-platform "modify" for keydown filter.

[bennadel]

I believe there is a common pattern to modify some keydown events using a different key on Mac and Windows operating systems. The one I see most commonly is using CMD+Enter on Mac and CTRL+Enter on Windows in order to submit a form while typing in a textarea.

I know that the data-action attribute on an element can take multiple actions; so, I could, in theory, achieve this as follows:

<form data-controller="demo">
    <textarea data-action="
        keydown.meta+enter->demo#submit
        keydown.ctrl+enter->demo#submit
    "></textarea>
</form>

But, considering that I'd want to use this pattern in many places, this seems verbose.

My next thought was to register a custom keydown filter - mod - as follows:

var macOsPattern = /Mac|iPod|iPhone|iPad/;

// Map the "mod" filter pattern to the OS-specific key.
defaultSchema.keyMappings[ "mod" ] = macOsPattern.test( window.navigator.platform )
	? "meta"
	: "ctrl"
;

window.Stimulus = Application.start( document.documentElement, defaultSchema );

... with the hope being that I could use something like keydown.mod+enter where it would be evaluated as meta+enter on Mac and ctrl+enter on Windows. But, unfortunately, it looks like modifier keys are handled separately from the custom key mappings.

So, my thought would be to have Stimulus add a new modifier call mod or modify that would be the cross-platform evaluation.

Anyway, just throwing that out there. I raised it on the Hotwired community forum, and I tried Googling for it, and I didn't see anyone discussing this anywhere.

[lb-]

Additional links and implementations for reference.

We could use $mod to differentiate between this and others being 'plain JS'. Similar to how Tinykeys does it. It also paves the way for other custom modifier keys in the future, prefixed with $.

This may make it harder to use that symbol for some other seperator in the future though.

Alpine.js

Interestingly, Alpine.js does not have this feature - https://alpinejs.dev/directives/on#keyboard-events

Hotkey

Not implemented, but has a PR up for this capability.
github/hotkey#66

Hotkey-js

https://github.com/jaywcjlove/hotkeys-js
Not supported, but can be added with registration it seems.
jaywcjlove/hotkeys-js#390

Mousetrap

Mousetrap 1.4 introduced a generic mod helper which lets you set cross platform shortcuts.
Mousetrap.bind('mod+s', _saveDraft);
On Mac this ends up mapping to command+s whereas on Windows and Linux it maps to ctrl+s.

https://github.com/ccampbell/mousetrap/blob/2f9a476ba6158ba69763e4fcf914966cc72ef433/mousetrap.js#L135

https://craig.is/killing/mice

Tinykeys

There is also a special $mod modifier that makes it easy to support cross platform keybindings:
Mac: $mod = Meta (⌘)
Windows/Linux: $mod = Control

https://github.com/jamiebuilds/tinykeys/blob/111955cb6604fb5b8c4f152cb75b7f2cb63da913/src/tinykeys.ts#L53-57

https://github.com/jamiebuilds/tinykeys#keybinding-syntax

[lb-]

PR up to implement this feature #715