ace editor

packages/web/src/modals/ConfirmSqlModal.svelte

@@ -2,19 +2,23 @@
   import FormStyledButton from '../elements/FormStyledButton.svelte';
   import FormProvider from '../forms/FormProvider.svelte';
   import FormSubmit from '../forms/FormSubmit.svelte';
+  import SqlEditor from '../query/SqlEditor.svelte';
 
   import ModalBase from './ModalBase.svelte';
   import { closeCurrentModal } from './modalTools';
 
   export let sql;
   export let onConfirm;
+  export let engine;
 </script>
 
 <FormProvider>
   <ModalBase {...$$restProps}>
     <div slot="header">Save changes</div>
 
-    <textarea class="editor" value={sql} />
+    <div class="editor">
+      <SqlEditor {engine} value={sql} readOnly />
+    </div>
 
     <div slot="footer">
       <FormSubmit

packages/web/src/modals/ModalBase.svelte

@@ -3,6 +3,7 @@
   import { closeModal } from './modalTools';
   import clickOutside from '../utility/clickOutside';
   import keycodes from '../utility/keycodes';
+  import { onMount } from 'svelte';
 
   export let fullScreen = false;
   export let noPadding = false;
@@ -17,6 +18,13 @@
       closeModal(modalId);
     }
   }
+
+  onMount(() => {
+    const oldFocus = document.activeElement;
+    return () => {
+      if (oldFocus) oldFocus.focus();
+    };
+  });
 </script>
 
 <!-- The Modal -->