ace editor

packages/web/src/query/AceEditor.svelte

@@ -5,12 +5,12 @@
   let clientHeight;
 </script>
 
-<div bind:clientWidth bind:clientHeight>
+<div bind:clientWidth bind:clientHeight class="ace-container">
   <AceEditorCore {...$$props} width={clientWidth} height={clientHeight} />
 </div>
 
 <style>
-  div {
+  .ace-container {
     position: absolute;
     left: 0;
     top: 0;

packages/web/src/query/AceEditorCore.svelte

@@ -32,12 +32,15 @@
     paste: string;
   }>();
 
-  export let height: number;
-  export let width: number;
-
+  /**
+   * translation of vue component to svelte:
+   * @link https://github.com/chairuosen/vue2-ace-editor/blob/91051422b36482eaf94271f1a263afa4b998f099/index.js
+   **/
   export let value: string = ''; // String, required
   export let mode: string = 'text'; // String
   export let theme: string = 'github'; // String
+  export let height: number;
+  export let width: number;
   export let options: any = {}; // Object
 
   let editor: ace.Editor;
@@ -89,7 +92,7 @@
       }
     });
 
-  $: if (height !== null && width !== null) {
+  $: if (height != null && width != null) {
     resizeOnNextTick();
   }
 

packages/web/src/query/SqlEditor.svelte

@@ -2,15 +2,20 @@
   const engineToMode = {
     mssql: 'sqlserver',
     mysql: 'mysql',
-    postgre: 'pgsql',
+    postgres: 'pgsql',
   };
 </script>
 
 <script lang="ts">
-  import AceEditor from './AceEditorCore.svelte';
+  import AceEditor from './AceEditor.svelte';
   export let engine;
 
-  $: console.log('engine', engine);
+  let mode;
+
+  $: {
+    const match = (engine || '').match(/^([^@]*)@/);
+    mode = engineToMode[match ? match[1] : engine] || 'sql';
+  }
 </script>
 
-<AceEditor mode={engineToMode[engine] || 'sql'} />
+<AceEditor {mode} />