Web IDE 'File -> Save'/etc menu items suggest the wrong keybindings on macOS

[0xdevalias]

Describe the bug

Was just checking out the web IDE again after the following landed:

• Allow web IDE to save and/or show warning before navigating away from page (eg. refresh) #78
  • feat: save and restore workspaces, add menu bar #79

And noticed that the 'File' menu says to use Ctrl+S to save (and other similar menu items):

But this doesn't work on macOS, as the keybinding is actually Cmd+S:

• Ctrl + S doesn't trigger 'download the code' in web IDE as per the docs #81
  • 5e66a11#diff-68af5958cdab96c0e0d14bc33af127c4ed7e75fc1664c19b370025c43f8a6633R104

Expected Behaviour

It would be good if the suggested key bindings in the menu were able to update themselves based on the platform's bindings.

Code

N/A

Logs

N/A

See Also

• Web IDE 'File -> Open Recent' menu item should show a chevron/other indication that it's a sub-menu #91
• Web IDE 'File -> Open Recent' doesn't actually seem to restore the chosen item #92

[0xdevalias]

Seems the keybindings are hardcoded in the MenuButton components' shortcut prop here:

webcrack/apps/playground/src/components/menu/Menu.tsx

Lines 39 to 64 in f6df5f2

	<MenuHeader
	title="File"
	open={openedMenu() === 'file'}
	onOpen={() => setOpenedMenu('file')}
	>
	<MenuButton
	shortcut={['Ctrl', 'O']}
	onClick={() => openFile(props.onFileOpen)}
	>
	Open File…
	</MenuButton>
	<MenuDropdown title="Open Recent">
	<For each={workspaces()} fallback={<li>No recent files</li>}>
	{(workspace) => (
	<MenuButton class="whitespace-nowrap">
	{new Date(workspace.timestamp).toLocaleString()} -
	<code class="overflow-x-clip overflow-ellipsis max-w-36">
	{workspace.models[0].value.slice(0, 50)}
	</code>
	</MenuButton>
	)}
	</For>
	</MenuDropdown>
	<MenuButton shortcut={['Ctrl', 'S']} onClick={props.onSave}>
	Save
	</MenuButton>

It might be cool if they were able to read from the same constant as the keybindings themselves, to ensure they remain in sync?

webcrack/apps/playground/src/components/MonacoEditor.tsx

Lines 109 to 127 in f6df5f2

	const openAction = editor.addAction({
	id: 'editor.action.open',
	label: 'File: Open',
	keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyO],
	run() {
	openFile(props.onFileOpen);
	},
	});
	const saveAction = editor.addAction({
	id: 'editor.action.save',
	label: 'File: Save',
	keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS],
	run() {
	const model = editor.getModel();
	if (model) {
	downloadFile(model);
	}
	},

Skimming the related docs:

• https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneCodeEditor.html#addAction.addAction-1
• https://microsoft.github.io/monaco-editor/typedoc/interfaces/IDisposable.html

It looks like you may not be able to read the keybindings 'back' from the return value of editor.addAction; so you would probably need to separate them into their own const/etc, assuming there isn't another Monaco API that allows you to read them back later.

[j4k0xb]

Doing it the same as vscode/monaco now: https://github.com/microsoft/vscode/blob/d40dff9ef9aacb8e5226bcf3938c71f4b9543120/src/vs/base/common/platform.ts#L109-L110

[0xdevalias]

Looks good, thanks! :)