From a93aff1bb74019be1d42318117c869aa60ec8e40 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Thu, 11 Mar 2021 08:17:06 +0100
Subject: [PATCH] ace editor

---
 packages/web/src/datagrid/SqlDataGridCore.svelte | 6 +++++-
 packages/web/src/modals/ConfirmSqlModal.svelte   | 6 +++++-
 packages/web/src/modals/ModalBase.svelte         | 8 ++++++++
 packages/web/src/query/AceEditor.svelte          | 4 +++-
 packages/web/src/tabs/ShellTab.svelte            | 0
 5 files changed, 21 insertions(+), 3 deletions(-)
 create mode 100644 packages/web/src/tabs/ShellTab.svelte

diff --git a/packages/web/src/datagrid/SqlDataGridCore.svelte b/packages/web/src/datagrid/SqlDataGridCore.svelte
index 9d080c6f0..60cd6da1e 100644
--- a/packages/web/src/datagrid/SqlDataGridCore.svelte
+++ b/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>
 
diff --git a/packages/web/src/modals/ConfirmSqlModal.svelte b/packages/web/src/modals/ConfirmSqlModal.svelte
index 4914c8ba6..441fb20a5 100644
--- a/packages/web/src/modals/ConfirmSqlModal.svelte
+++ b/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
diff --git a/packages/web/src/modals/ModalBase.svelte b/packages/web/src/modals/ModalBase.svelte
index 259b8d414..caac593e7 100644
--- a/packages/web/src/modals/ModalBase.svelte
+++ b/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 -->
diff --git a/packages/web/src/query/AceEditor.svelte b/packages/web/src/query/AceEditor.svelte
index e02757136..be31ffdb0 100644
--- a/packages/web/src/query/AceEditor.svelte
+++ b/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;
diff --git a/packages/web/src/tabs/ShellTab.svelte b/packages/web/src/tabs/ShellTab.svelte
new file mode 100644
index 000000000..e69de29bb