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.

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);
 

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();
+    },
   },
 });

app/assets/javascripts/admin/addon/components/email-styles-editor.js

@@ -50,5 +50,8 @@ export default Component.extend({
         }
       );
     },
+    save() {
+      this.attrs.save();
+    },
   },
 });

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")}}

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">

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">

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">