Merge pull request #3777 from 3scale/fix_codemirror_save

Fix codemirror save shortcut
3scale · May 8, 2024 · 03b08a9 · 03b08a9
2 parents 86bb6fe + da03df2
commit 03b08a9
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/app/javascript/packs/codemirror.ts b/app/javascript/packs/codemirror.ts
@@ -1,8 +1,20 @@
-import CodeMirror from 'codemirror'
+import CodeMirror, { commands } from 'codemirror'
 import 'codemirror/addon/mode/overlay'// Seems to solve https://github.com/3scale/porta/blob/25fa9bc53bdd3eeb8f2a9c8e882f771c85c3c3cb/app/views/provider/admin/cms/_codemirror.html.erb#L34
 import 'codemirror/mode/css/css' // Formats and styles for CSS; Used in CMS
 import 'codemirror/mode/htmlmixed/htmlmixed' // Formats and syles for HTML and Liquid; Used in CMS
 import 'codemirror/mode/javascript/javascript' // Formats and syles for JSON; Used in ActiveDocs and in CMS
 import 'codemirror/mode/xml/xml' // Formats and syles for XML
 
+/**
+* Adds a shortcut to "save" the codemirror editor. When Ctrl-S or Cmd-S is pressed, click Save
+* button. More info at https://codemirror.net/5/doc/manual.html#commands
+* TODO: the save button should really be disabled unless Codemirror has unsaved changes.
+*/
+// @ts-expect-error -- Add a custom callback to "save" command.
+commands.save = () => {
+  document
+    .querySelector<HTMLInputElement>('#edit_cms_template #codemirror_save_button')
+    ?.click()
+}
+
 window.CodeMirror = CodeMirror
diff --git a/app/views/provider/admin/cms/_save_buttons.html.erb b/app/views/provider/admin/cms/_save_buttons.html.erb
@@ -13,6 +13,7 @@
   <%= f.actions class: 'button-group dropdown-buttons' do %>
     <%= f.action :submit, label: 'Save', button_html: { title: 'Save the draft',
                                                         class: 'important-button update',
+                                                        id: 'codemirror_save_button'
                                                         value: 'Save',
                                                         name: 'commit',
                                                         disable_with: 'Save' } %>

diff --git a/app/views/provider/admin/cms/email_templates/_buttons.html.erb b/app/views/provider/admin/cms/email_templates/_buttons.html.erb
@@ -1,6 +1,6 @@
 <div class="button-bar">
   <%= f.actions  :style => 'position:absolute' do %>
     <%= disable_sending_button %>
-    <%= f.commit_button "#{@page.new_record? ? 'Create Email Template' : 'Save'}" %>
+    <%= f.commit_button "#{@page.new_record? ? 'Create Email Template' : 'Save'}", button_html: { id: 'codemirror_save_button' } %>
   <% end %>
 </div>