UX: Allow saving with cmd+s/ctrl+s with Ace editor (#12674)

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.

diff --git a/app/assets/javascripts/admin/addon/components/ace-editor.js b/app/assets/javascripts/admin/addon/components/ace-editor.js
index 862d611..89f092a 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 ebf733e..9d2b0b7 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 6f7cf6d..e3e980e 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 5458ee1..5efbb71 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 65fa917..cc51065 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 f1ecd8b..6acb4ed 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 1fcfce5..b4e845e 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">

GitHub sha: 61ad9592

This commit appears in #12674 which was approved by davidtaylorhq. It was merged by davidtaylorhq.