Keyboard shortcuts & command menu

.bundlewatch.config.js

@@ -10,7 +10,7 @@ module.exports = {
     },
     {
       path: './build/livecodes/*(app|embed|lite|headless).*.js',
-      maxSize: '100kB',
+      maxSize: '120kB',
     },
     // {
     //   path: './build/livecodes/lang-*.js',

.vscode/settings.json

@@ -22,7 +22,8 @@
     "Import-maps",
     "Formatter",
     "Build",
-    "services"
+    "services",
+    "CommandMenu"
   ],
   "html.customData": ["./.vscode/html.html-data.json"]
 }

docs/docs/contribution/adding-languages.md

@@ -22,7 +22,7 @@ If you still have doubts if the language qualifies, [let's discuss it](https://g
 - [ ] Add language name and aliases to [models](https://github.com/live-codes/livecodes/blob/3a2617850f09487b9af92de862093f082942b8a9/src/sdk/models.ts#L129).
 - [ ] Add editor support (e.g. syntax highlighting) for [Monaco](https://github.com/live-codes/livecodes/tree/develop/src/livecodes/editor/monaco), [CodeMirror](https://github.com/live-codes/livecodes/tree/develop/src/livecodes/editor/codemirror) and [Prismjs](https://github.com/live-codes/livecodes/blob/develop/src/livecodes/editor/codejar/codejar.ts) (if not auto-loaded).
 - [ ] Add [language info](https://github.com/live-codes/livecodes/blob/develop/src/livecodes/html/language-info.html).
-- [ ] Consider adding a [starter template](https://github.com/live-codes/livecodes/tree/develop/src/livecodes/templates/starter). If you do, add it to the [list of starter templates](https://github.com/live-codes/livecodes/blob/develop/docs/src/components/TemplateList.tsx) in docs.
+- [ ] Consider adding a [starter template](https://github.com/live-codes/livecodes/tree/develop/src/livecodes/templates/starter). If you do, add it to the [list of starter templates](https://github.com/live-codes/livecodes/blob/develop/docs/src/components/TemplateList.tsx) in docs, [command menu](https://github.com/live-codes/livecodes/blob/develop/src/livecodes/UI/command-menu-actions.ts#L235) and [language info](https://github.com/live-codes/livecodes/blob/develop/src/livecodes/html/language-info.html).
 - [ ] Add [end-to-ends tests](https://github.com/live-codes/livecodes/tree/develop/e2e/specs).
 - [ ] Add language [documentation](https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages).
 - [ ] Add language to documentation website [slider](https://github.com/live-codes/livecodes/blob/develop/docs/src/components/LanguageSliders.tsx).

docs/docs/features/command-menu.md

@@ -0,0 +1,34 @@
+# Command Menu
+
+The command menu allows running a large set of commands from the UI. It is keyboard-friendly and allows for searching and selecting commands. Most of the functionality of LiveCodes can be achieved using the command menu, which can really improve productivity and DX.
+
+It can be triggered from the keyboard by pressing <kbd>Ctrl</kbd> + <kbd>K</kbd> (or <kbd>⌘</kbd> + <kbd>K</kbd> on Mac), or from the Help Menu.
+
+![Open Command Menu from UI](../../static/img/screenshots/command-menu-1.jpg)
+
+The available commands cover a wide range of functionality, like showing and hiding UI elements (e.g. different editors, the [result page](./result.md), [console](./console.md), [compiled code viewer](./compiled-code.md), and [tests](./tests.md)), changing [languages](../languages), loading [starter templates](./templates.md), opening different screens (e.g. new project, opening saved projects, [import](./import.md), [embeds](./embeds.md), [deploy](./deploy.md), [share](./share.md) and more).
+In addition many commands can be executed from the command menu, such as running code, formatting code, changing settings (e.g. autorun, autosave, [AI code assistant](./ai.md), changing [themes](./themes.md), [editor settings](./editor-settings.md), and more).
+
+![LiveCodes Command Menu](../../static/img/screenshots/command-menu-2.jpg)
+
+![LiveCodes Command Menu](../../static/img/screenshots/command-menu-3.jpg)
+
+![LiveCodes Command Menu](../../static/img/screenshots/command-menu-4.jpg)
+
+## Using the Command Menu
+
+Commands can be navigated and selected by:
+
+- The mouse: scrolling and clicking
+- The keyboard: using the up and down arrow keys to navigate, pressing <kbd>Enter</kbd> to select, <kbd>Backspace</kbd> to move to parent category and <kbd>Esc</kbd> to close the command menu.
+- Searching: typing in the search box for fuzzy search.
+
+![LiveCodes Command Menu](../../static/img/screenshots/command-menu-5.jpg)
+
+![LiveCodes Command Menu](../../static/img/screenshots/command-menu-6.jpg)
+
+## Keyboard Shortcuts
+
+If a command has a keyboard shortcut, it will be shown in the command menu. In addition, the whole list of keyboard shortcuts can be opened from the command menu (by searching for "Keyboard Shortcuts") or from the UI from the Help Menu.
+
+![Keyboard Shortcuts](../../static/img/screenshots/keyboard-shortcuts.jpg)

docs/docs/features/keyboard-shortcuts.md

@@ -1 +1,9 @@
 # Keyboard Shortcuts
+
+Many commands can be executed from the keyboard using keyboard shortcuts. The full list can be found in the keyboard shortcuts menu, accessed from the Help Menu or from the [command menu](./command-menu.md) by pressing <kbd>Ctrl</kbd> + <kbd>K</kbd> (or <kbd>⌘</kbd> + <kbd>K</kbd> on Mac) and searching for "Keyboard Shortcuts".
+
+The code editor shortcuts are the same as VS Code, which can be found [here](https://code.visualstudio.com/docs/getstarted/keybindings#_basic-editing).
+
+![Open Command Menu from UI](../../static/img/screenshots/command-menu-1.jpg)
+
+![Keyboard Shortcuts](../../static/img/screenshots/keyboard-shortcuts.jpg)

docs/sidebars.js

@@ -35,6 +35,7 @@ const sidebars = {
             'features/intellisense',
             'features/ai',
             'features/code-format',
+            'features/command-menu',
             'features/keyboard-shortcuts',
             'features/user-settings',
             'features/editor-settings',

scripts/i18n-export.js

@@ -241,7 +241,9 @@ const processHTML = async (files) => {
         desc: generateElementsNote(elements),
       };
     }
-    const value = prop.startsWith('data-') ? element.dataset[prop.slice(5)] : element[prop];
+    const value = prop.startsWith('data-')
+      ? element.dataset[prop.slice(5)]
+      : element[prop] || element.getAttribute(prop);
     return {
       value: value.trim(),
       desc: '',