added shortcut service

src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts

@@ -55,6 +55,7 @@ import './search';
 import './templating';
 import './shared';
 import { UmbLitElement } from '@umbraco-cms/element';
+import UmbShortcutService from 'src/core/shortcuts/shortcut.service';
 
 @defineElement('umb-backoffice')
 export class UmbBackofficeElement extends UmbLitElement {
@@ -107,6 +108,7 @@ export class UmbBackofficeElement extends UmbLitElement {
 		new UmbTemplateTreeStore(this);
 		new UmbTemplateDetailStore(this);
 		new UmbLanguageStore(this);
+		new UmbShortcutService();
 
 		this.provideContext(UMB_BACKOFFICE_CONTEXT_TOKEN, new UmbBackofficeContext());
 		this.provideContext(UMB_CURRENT_USER_HISTORY_STORE_CONTEXT_TOKEN, new UmbCurrentUserHistoryStore());

src/Umbraco.Web.UI.Client/src/core/shortcuts/shortcut.service.ts

@@ -0,0 +1,44 @@
+export type Shortcut = {
+	key: string;
+	altKey?: boolean;
+	ctrlKey?: boolean;
+	shiftKey?: boolean;
+	metaKey?: boolean;
+	callback(): void;
+};
+
+export class UmbShortcutService {
+	#shortcuts: Array<Shortcut> = [
+		{
+			key: 'k',
+			metaKey: true,
+			callback: () => console.log('Open search'),
+		},
+	];
+
+	constructor() {
+		addEventListener('keydown', (event: KeyboardEvent) => {
+			if (!event.altKey && !event.ctrlKey && !event.shiftKey && !event.metaKey) return;
+			if (event.key === 'Shift' || event.key === 'Control' || event.key === 'Alt' || event.key === 'Meta') return;
+
+			const shortcut = this.#shortcuts.find((x) => {
+				if (x.key !== event.key) return false;
+				if ((x.altKey ? true : false) !== event.altKey) return false;
+				if ((x.ctrlKey ? true : false) !== event.ctrlKey) return false;
+				if ((x.shiftKey ? true : false) !== event.shiftKey) return false;
+				if ((x.metaKey ? true : false) !== event.metaKey) return false;
+				return true;
+			});
+
+			shortcut?.callback();
+		});
+	}
+}
+
+export default UmbShortcutService;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-shortcut': UmbShortcutService;
+	}
+}