editor styling

packages/bbui/src/Typography/Body.svelte

@@ -9,12 +9,16 @@
 <p
   class:noPadding
   class="spectrum-Body spectrum-Body--size{size}"
-  class:spectrum-Body--serif={serif}
->
+  class:spectrum-Body--serif={serif}>
   <slot />
 </p>
 
 <style>
+  p {
+    margin-top: 0.75em;
+    margin-bottom: 0.75em;
+  }
+
   .noPadding {
     padding: 0;
     margin: 0;

packages/builder/src/components/integration/QueryEditor.svelte

@@ -117,7 +117,7 @@
       readOnly,
       autoCloseBrackets: true,
       autoCloseTags: true,
-      theme: $themeStore.darkMode ? THEMES.DARK : THEMES.LIGHT,
+      theme: THEMES.DARK,
     }
 
     if (!tab)
@@ -132,7 +132,7 @@
 
     if (destroyed) return
 
-    CodeMirror.commands.autocomplete = function (cm) {
+    CodeMirror.commands.autocomplete = function(cm) {
       CodeMirror.showHint(cm, CodeMirror.hint.javascript)
     }
 

packages/builder/src/pages/app/portal/_layout.svelte

@@ -89,7 +89,7 @@
         <MenuItem icon="LogOut" on:click={auth.logout}>Log out</MenuItem>
       </ActionMenu>
     </div>
-    <div>
+    <div class="content">
       <slot />
     </div>
   </div>
@@ -156,4 +156,9 @@
     text-overflow: ellipsis;
     font-weight: 500;
   }
+
+  .content {
+    height: 100vh;
+    overflow-y: auto;
+  }
 </style>

packages/builder/src/pages/app/portal/email/index.svelte

@@ -13,6 +13,7 @@
     Select,
   } from "@budibase/bbui"
   import { onMount } from "svelte"
+  import Editor from "components/integration/QueryEditor.svelte"
   import api from "builderStore/api"
 
   const ConfigTypes = {
@@ -156,7 +157,14 @@
         <Button cta on:click={saveTemplate}>Save</Button>
       </div>
       {#if selectedTemplate}
-        <TextArea bind:value={selectedTemplate.contents} />
+        {#key templateIdx}
+          <Editor
+            mode="handlebars"
+            on:change={e => {
+              selectedTemplate.contents = e.detail.value
+            }}
+            value={selectedTemplate.contents} />
+          {/key}
       {/if}
     </div>
   {/if}