ace editor

packages/web/src/datagrid/SqlDataGridCore.svelte

@@ -92,7 +92,11 @@
   function handleSave() {
     const script = changeSetToSql(changeSetState && changeSetState.value, display.dbinfo);
     const sql = scriptToSql(display.driver, script);
-    showModal(ConfirmSqlModal, { sql, onConfirm: () => handleConfirmSql(sql) });
+    showModal(ConfirmSqlModal, {
+      sql,
+      onConfirm: () => handleConfirmSql(sql),
+      engine: display.engine,
+    });
   }
 </script>
 

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

packages/web/src/query/AceEditor.svelte

@@ -44,6 +44,7 @@
   export let theme: string = 'github'; // String
   export let options: any = {}; // Object
   export let menu;
+  export let readOnly;
 
   let editor: ace.Editor;
   let contentBackup: string = '';
@@ -106,7 +107,7 @@
   };
 
   const handleKeyDown = (data, hash, keyString, keyCode, event) => {
-    handleCommandKeyDown(event);
+    if (event) handleCommandKeyDown(event);
   };
 
   onMount(() => {
@@ -148,6 +149,7 @@
     editor.onFocus = () => dispatch('focus');
     editor.onPaste = text => dispatch('paste', text);
     editor.onSelectionChange = obj => dispatch('selectionChange', obj);
+    editor.setReadOnly(readOnly);
     editor.on('change', function () {
       const content = editor.getValue();
       value = content;