Save drawer shortcut

packages/builder/src/components/common/CodeEditor/CodeEditor.svelte

@@ -128,8 +128,20 @@
     },
   }
 
+  const drawerCommands = [
+    {
+      key: "Mod-Enter",
+      preventDefault: true,
+      run: view => {
+        dispatch("saveCodeEditor", view)
+        return true
+      },
+    },
+  ]
+
   const buildKeymap = () => {
     const baseMap = [
+      ...drawerCommands,
       ...closeBracketsKeymap,
       ...defaultKeymap,
       ...historyKeymap,

packages/builder/src/components/common/bindings/BindingPanel.svelte

@@ -189,6 +189,7 @@
                 <CodeEditor
                   value={hbsValue}
                   on:change={onChangeHBSValue}
+                  on:saveCodeEditor
                   bind:getCaretPosition
                   bind:insertAtPos
                   completions={[

packages/builder/src/components/common/bindings/ClientBindingPanel.svelte

@@ -23,6 +23,7 @@
 
 <BindingPanel
   bind:valid
+  on:saveCodeEditor
   bindings={enrichedBindings}
   {value}
   {allowJS}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte

@@ -13,6 +13,7 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/dataBinding"
+  import { KeyboardShortcut } from "@budibase/frontend-core"
 
   export let componentInstance
 
@@ -56,14 +57,28 @@
     <svelte:fragment slot="description">
       Custom CSS overrides all other component styles.
     </svelte:fragment>
-    <Button cta slot="buttons" on:click={save}>Save</Button>
+    <Button cta slot="buttons" on:click={save}>
+      <div class="button-with-keys">
+        Save
+        <KeyboardShortcut action={true} keybind="Ctrl+Enter" />
+      </div>
+    </Button>
     <svelte:component
       this={ClientBindingPanel}
       slot="body"
       value={tempValue}
       on:change={event => (tempValue = event.detail)}
+      on:saveCodeEditor={save}
       allowJS
       {bindings}
     />
   </Drawer>
 {/key}
+
+<style>
+  .button-with-keys {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+  }
+</style>

packages/frontend-core/src/components/grid/index.js

@@ -1 +1,2 @@
 export { default as Grid } from "./layout/Grid.svelte"
+export { default as KeyboardShortcut } from "./layout/KeyboardShortcut.svelte"

packages/frontend-core/src/components/grid/layout/KeyboardShortcut.svelte

@@ -2,6 +2,7 @@
   export let keybind
   export let padded = false
   export let overlay = false
+  export let action = false
 
   $: parsedKeys = parseKeys(keybind)
 
@@ -19,7 +20,7 @@
 
 <div class="keys" class:padded class:overlay>
   {#each parsedKeys as key}
-    <div class="key">
+    <div class={action ? "action-key" : "key"}>
       {key}
     </div>
   {/each}
@@ -34,6 +35,18 @@
   .keys.padded {
     padding: var(--cell-padding);
   }
+  .action-key {
+    padding: 2px 6px;
+    font-size: 12px;
+    font-weight: 600;
+    background-color: var(--spectrum-global-color-gray-900);
+    color: var(--spectrum-global-color-blue-600);
+    border-radius: 4px;
+    text-align: center;
+    display: grid;
+    place-items: center;
+    text-transform: uppercase;
+  }
   .key {
     padding: 2px 6px;
     font-size: 12px;

packages/frontend-core/src/components/index.js

@@ -3,4 +3,4 @@ export { default as TestimonialPage } from "./TestimonialPage.svelte"
 export { default as Testimonial } from "./Testimonial.svelte"
 export { default as UserAvatar } from "./UserAvatar.svelte"
 export { default as UserAvatars } from "./UserAvatars.svelte"
-export { Grid } from "./grid"
+export { Grid, KeyboardShortcut } from "./grid"