Add keyboard shortcut to save automation/scene/script (#7207)

src/mixins/keyboard-shortcut-mixin.ts

@@ -0,0 +1,26 @@
+import { LitElement } from "lit-element";
+import { Constructor } from "../types";
+
+export const KeyboardShortcutMixin = <T extends Constructor<LitElement>>(
+  superClass: T
+) =>
+  class extends superClass {
+    private _keydownEvent = (event: KeyboardEvent) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === "s") {
+        event.preventDefault();
+        this.handleKeyboardSave();
+      }
+    };
+
+    public connectedCallback() {
+      super.connectedCallback();
+      this.addEventListener("keydown", this._keydownEvent);
+    }
+
+    public disconnectedCallback() {
+      this.removeEventListener("keydown", this._keydownEvent);
+      super.disconnectedCallback();
+    }
+
+    protected handleKeyboardSave() {}
+  };

src/panels/config/automation/ha-automation-editor.ts

@@ -37,6 +37,7 @@ import {
 } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/ha-app-layout";
 import "../../../layouts/hass-tabs-subpage";
+import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
@@ -59,7 +60,7 @@ declare global {
   }
 }
 
-export class HaAutomationEditor extends LitElement {
+export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public automationId!: string;
@@ -561,6 +562,10 @@ export class HaAutomationEditor extends LitElement {
     );
   }
 
+  protected handleKeyboardSave() {
+    this._saveAutomation();
+  }
+
   static get styles(): CSSResult[] {
     return [
       haStyle,

src/panels/config/scene/ha-scene-editor.ts

@@ -58,6 +58,7 @@ import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
 import "../../../components/ha-svg-icon";
 import { mdiContentSave } from "@mdi/js";
+import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 
 interface DeviceEntities {
   id: string;
@@ -70,7 +71,9 @@ interface DeviceEntitiesLookup {
 }
 
 @customElement("ha-scene-editor")
-export class HaSceneEditor extends SubscribeMixin(LitElement) {
+export class HaSceneEditor extends SubscribeMixin(
+  KeyboardShortcutMixin(LitElement)
+) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public narrow!: boolean;
@@ -716,6 +719,10 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
     }
   }
 
+  protected handleKeyboardSave() {
+    this._saveScene();
+  }
+
   static get styles(): CSSResult[] {
     return [
       haStyle,

src/panels/config/script/ha-script-editor.ts

@@ -34,6 +34,7 @@ import {
 } from "../../../data/script";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/ha-app-layout";
+import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
@@ -43,7 +44,7 @@ import { HaDeviceAction } from "../automation/action/types/ha-automation-action-
 import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
 
-export class HaScriptEditor extends LitElement {
+export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public scriptEntityId!: string;
@@ -456,6 +457,10 @@ export class HaScriptEditor extends LitElement {
     );
   }
 
+  protected handleKeyboardSave() {
+    this._saveScript();
+  }
+
   static get styles(): CSSResult[] {
     return [
       haStyle,