Fix for issue #4090: cmd.js line 20-26 replaced with OS-specific keyboard shortcut mappings with localization.

[StillAbeginnerr]

Description of Code Change
The proposed change enhances keyboard shortcut mappings to dynamically adapt based on the operating system.

Original Code

The replacements object statically maps symbols (e.g., ⌘, ⇧) to generic labels (e.g., Ctrl, Shift), with no differentiation for macOS.

This shows CTRL + Shift + C on German language.

---

Proposed Change :

OS Detection
Introduces a mac variable to determine if the operating system is macOS (detected.os === 'mac').

Dynamic Mapping
For macOS:
Uses macOS-specific symbols and labels (e.g., ⌘ Cmd, ⇧ Shift).
Prepends symbols to enhance clarity.

For Others:
Defaults to generic labels like Ctrl, Alt, and Shift.

Localization:
Integrates t() to fetch OS-specific, human-readable labels, supporting multiple languages.

This newly proposed shows STRG + Umschalt + C on German language.

[1ec5]

This is essentially the same as what c22fa60 did in uiCmd.display down below to fix the Keyboard Shortcuts screen. I suspect c22fa60 didn’t touch this function because it’s also being used in places where raw key identifiers are needed rather than human-readable labels. For example, the following code uses the return value to register the actual keyboard shortcut:

iD/modules/ui/full_screen.js

Lines 72 to 73 in 3025d4f

	var keys = (detected.os === 'mac' ? [uiCmd('⌃⌘F'), 'f11'] : ['f11']);
	context.keybinding().on(keys, fullScreen);

iD/modules/ui/zoom.js

Lines 102 to 110 in 3025d4f

	utilKeybinding.plusKeys.forEach(function(key) {
	context.keybinding().on([key], zoomIn);
	context.keybinding().on([uiCmd('⌥' + key)], zoomInFurther);
	});
	utilKeybinding.minusKeys.forEach(function(key) {
	context.keybinding().on([key], zoomOut);
	context.keybinding().on([uiCmd('⌥' + key)], zoomOutFurther);
	});

If you run this branch on macOS, or on Windows with the German localization, will the shortcuts function correctly when you press them? If not, then maybe we need to revert this function to what it was previously. If we look back at the code I pointed to earlier, notice how it’s only being used to create the tooltip – so it’s probably only for display purposes:

iD/modules/ui/sections/data_layers.js

Line 404 in b5d45e3

.keys([uiCmd('⌘⇧' + t('info_panels.history.key'))])

If that’s the case, then changing that code to call uiCmd.display instead might fix the issue for that particular tooltip. So instead of implementing anything new, you’d be reviewing each of the calls to uiCmd, deciding whether it should be replaced with a call to uiCmd.display.

[StillAbeginnerr]

Thank very much for the detailed explanation, it's very helpful and I now understood with more clarity, gotta read more about this codebase, and I've marked the calls where uiCmd been called and now checking how useful, the uiCmd.display would be for a particular tooltip...will submit a pull request again after high detailed review of each call.

[StillAbeginnerr]

@1ec5

While working, I found these 2 issues/bug

1. Issue with Key Functionality.

It seems that the keyboard shortcut for ? isn’t functioning as expected. Based on testing, it appears the shortcut should be labeled as Shift + ? instead of just ?, as pressing ? alone triggers the black overlay below the inspect button in the top-left corner.

Image 1 :

In Image 2, The Keyboard Shortcut should also be labeled as Shift + ?.

Image 2 :

---

2. Interaction Limitation with Quality Assurance Tab
   When the Quality Assurance tab is open in the Help section, the Keyboard Shortcuts option becomes unclickable. Interestingly, this behavior is not observed with other tabs, which allow seamless access to the keyboard shortcuts.

Image 1 : For example, the Keyboard Shortcuts options is clickable in case of points tab.

Image 2 : When the Quality Assurance tab is open in the Help section, the Keyboard Shortcuts option becomes unclickable.

---

Checked with latest changes on both local host and online deployment.

[StillAbeginnerr]

Help/Keyboard Shortcuts.

I’ve resolved the labeling issue mentioned in the previous comment (Issue 1, Image 2) by replacing ? with Shift + ? in the relevant file for "Show Keyboard Shortcuts". Should I create a separate issue and raise a PR for this fix, or is it okay to include it as part of this current work?

[1ec5]

It seems that the keyboard shortcut for ? isn’t functioning as expected. Based on testing, it appears the shortcut should be labeled as Shift + ? instead of just ?, as pressing ? alone triggers the black overlay below the inspect button in the top-left corner.

I think spelling it as just “?” is a standard convention, at least on macOS. If you’re using an English keyboard layout, pressing that key alone would be /, not ?. A user-selectable keyboard layout could conceivably have ? as the primary function of a key, or it could require a modifier key other than Shift. All that matters to a Web application like iD is whether the user has pressed the some key combination that would input “?” into a text field.

[StillAbeginnerr]

I use macOS 15.1.1 to test how things work on Windows and Linux by spoofing the user agent string. When I need to double-check or confirm any issues or assumptions, I rely on a real Windows 10 PC of my friend.

[1ec5]

The Keyboard Shortcuts pane has already been using uiCmd.display; is it also showing macOS key names on Windows or Linux?

[StillAbeginnerr]

Checked throughly, there are no signs of macOS key names on Windows and Linux.

But since, the keyboard shortcuts pane been using uiCmd.display and there's no problems with it,

---

I see, it could be just a unique case for undo_redo.js because German localization is not happening on this part,

As we can see there's CTRL + Z on Linux System(I used Parallels Desktop to set up Debian OS) on Firefox Browser which should have been STRG + Z.

console.log('Detected OS:', mac ? 'mac' : 'not mac'); // Works Correctly
console.log('Detected OS:', utilDetect().os); // Works Correctly
console.log('Current Language:', detected.language);
console.log('Translated CTRL:', t('shortcuts.key.ctrl')); // Works Correctly
console.log('uiCmd: ⌘Z is', uiCmd('⌘Z')); // Works Correctly except Translation.
console.log('uiCmd.display: ⌘Z is', uiCmd.display('⌘Z')); // not working properly because of code.length issues otherwise would have displayed STRG + Z in German localization.

In Cmd.js

So I think that this line if (code.length !== 1) return code; returns the non-translated value because for ('⌘Z') length is 2 and replacement doesn't take place in uiCmd.display in cmd.js

But If I change it to like if (code.length !== 2) return code;
[the stack calls exceed](init.js:501 RangeError: Maximum call stack size exceeded) and crashes the webpage.

---

It uses the uiCmd Function right now in undo_redo.js, but if I want to localise it using uiCmd.display, For Mac/Windows/Linux, ⌘Z appears.

My LocalHost :

[StillAbeginnerr]

So I concluded that,

I encountered a problem caused by if (code.length !== 1) return code; being inefficient for Shortcut key translation of Toolbars like Undo, redo if we're to replace uiCmd by uiCmd.Display for translation since uiCmd don't support t() as some function don't have to require t() and uiCmd.display is not good for these as they don't return length in 1.

These toolbars like undo, redo and else which show Mac commands in Windows/Linux have to be hardcoded like
if (detected.os === 'win') { if (code === '⌘Z') return t('Ctrl') + 'Z'; } in uiCmd function otherwise, I believe as per my experience, a lot of structural changes are to be done.

@1ec5

[StillAbeginnerr]

I thought something like this little change may help but yeah didn't.