From 61ad959212afaeeb44b7bf4227611a5216a20313 Mon Sep 17 00:00:00 2001
From: Grayden <38144548+graydenshand@users.noreply.github.com>
Date: Tue, 4 May 2021 07:56:10 -0400
Subject: [PATCH] UX: Allow saving with cmd+s/ctrl+s with Ace editor (#12674)

When editing the files for a theme in the admin dashboard, typing "cmd+s" (a common key-binding to save in most text editors) used to engage the browser's default "save page" dialogue.

This commit adds a key-binding to the ace editor that saves the file.

Now, the "cmd+s" (and "ctrl+s" for windows) key-binding does the same action as the save button.
---
 .../javascripts/admin/addon/components/ace-editor.js     | 9 +++++++++
 .../admin/addon/components/admin-theme-editor.js         | 4 ++++
 .../admin/addon/components/email-styles-editor.js        | 3 +++
 .../addon/templates/components/admin-theme-editor.hbs    | 2 +-
 .../addon/templates/components/email-styles-editor.hbs   | 2 +-
 .../admin/addon/templates/customize-email-style-edit.hbs | 2 +-
 .../admin/addon/templates/customize-themes-edit.hbs      | 1 +
 7 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/components/ace-editor.js b/app/assets/javascripts/admin/addon/components/ace-editor.js
index 862d6111884..89f092a8ed9 100644
--- a/app/assets/javascripts/admin/addon/components/ace-editor.js
+++ b/app/assets/javascripts/admin/addon/components/ace-editor.js
@@ -105,6 +105,15 @@ export default Component.extend({
           this.set("content", editor.getSession().getValue());
           this._skipContentChangeEvent = false;
         });
+        if (this.attrs.save) {
+          editor.commands.addCommand({
+            name: "save",
+            exec: () => {
+              this.attrs.save();
+            },
+            bindKey: { mac: "cmd-s", win: "ctrl-s" },
+          });
+        }
         editor.$blockScrolling = Infinity;
         editor.renderer.setScrollMargin(10, 10);
 
diff --git a/app/assets/javascripts/admin/addon/components/admin-theme-editor.js b/app/assets/javascripts/admin/addon/components/admin-theme-editor.js
index ebf733e749b..9d2b0b70c94 100644
--- a/app/assets/javascripts/admin/addon/components/admin-theme-editor.js
+++ b/app/assets/javascripts/admin/addon/components/admin-theme-editor.js
@@ -120,5 +120,9 @@ export default Component.extend({
     onlyOverriddenChanged(value) {
       this.onlyOverriddenChanged(value);
     },
+
+    save() {
+      this.attrs.save();
+    },
   },
 });
diff --git a/app/assets/javascripts/admin/addon/components/email-styles-editor.js b/app/assets/javascripts/admin/addon/components/email-styles-editor.js
index 6f7cf6d0210..e3e980e6329 100644
--- a/app/assets/javascripts/admin/addon/components/email-styles-editor.js
+++ b/app/assets/javascripts/admin/addon/components/email-styles-editor.js
@@ -50,5 +50,8 @@ export default Component.extend({
         }
       );
     },
+    save() {
+      this.attrs.save();
+    },
   },
 });
diff --git a/app/assets/javascripts/admin/addon/templates/components/admin-theme-editor.hbs b/app/assets/javascripts/admin/addon/templates/components/admin-theme-editor.hbs
index 5458ee10d8b..5efbb71db14 100644
--- a/app/assets/javascripts/admin/addon/templates/components/admin-theme-editor.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/admin-theme-editor.hbs
@@ -87,4 +87,4 @@
   <pre class="field-error">{{error}}</pre>
 {{/if}}
 
-{{ace-editor content=activeSection editorId=editorId mode=activeSectionMode autofocus="true" placeholder=placeholder htmlPlaceholder=true}}
+{{ace-editor content=activeSection editorId=editorId mode=activeSectionMode autofocus="true" placeholder=placeholder htmlPlaceholder=true save=(action "save")}}
diff --git a/app/assets/javascripts/admin/addon/templates/components/email-styles-editor.hbs b/app/assets/javascripts/admin/addon/templates/components/email-styles-editor.hbs
index 65fa9174fcf..cc510651d03 100644
--- a/app/assets/javascripts/admin/addon/templates/components/email-styles-editor.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/email-styles-editor.hbs
@@ -9,7 +9,7 @@
   </div>
 </div>
 
-{{ace-editor content=editorContents mode=currentEditorMode editorId=editorId}}
+{{ace-editor content=editorContents mode=currentEditorMode editorId=editorId save=(action "save")}}
 
 <div class="admin-footer">
   <div class="buttons">
diff --git a/app/assets/javascripts/admin/addon/templates/customize-email-style-edit.hbs b/app/assets/javascripts/admin/addon/templates/customize-email-style-edit.hbs
index f1ecd8bd1b3..6acb4ed37b8 100644
--- a/app/assets/javascripts/admin/addon/templates/customize-email-style-edit.hbs
+++ b/app/assets/javascripts/admin/addon/templates/customize-email-style-edit.hbs
@@ -1,4 +1,4 @@
-{{email-styles-editor styles=model fieldName=fieldName}}
+{{email-styles-editor styles=model fieldName=fieldName save=(action "save")}}
 
 <div class="admin-footer">
   <div class="buttons">
diff --git a/app/assets/javascripts/admin/addon/templates/customize-themes-edit.hbs b/app/assets/javascripts/admin/addon/templates/customize-themes-edit.hbs
index 1fcfce5a3bd..b4e845e4169 100644
--- a/app/assets/javascripts/admin/addon/templates/customize-themes-edit.hbs
+++ b/app/assets/javascripts/admin/addon/templates/customize-themes-edit.hbs
@@ -25,6 +25,7 @@
       fieldAdded=(action "fieldAdded")
       maximized=maximized
       onlyOverriddenChanged=(action "onlyOverriddenChanged")
+      save=(action "save")
     }}
 
     <div class="admin-footer">