ace editor

packages/web/public/global.css

@@ -40,6 +40,9 @@ body {
 .bold {
   font-weight: bold;
 }
+.flex1 {
+  flex: 1;
+}
 
 .col-9 {
   flex-basis: 75%;

packages/web/src/main.ts

@@ -3,18 +3,6 @@ import './utility/connectionsPinger';
 import './utility/changeCurrentDbByTab';
 import './commands/stdCommands';
 
-import 'ace-builds/src-noconflict/mode-sql';
-import 'ace-builds/src-noconflict/mode-mysql';
-import 'ace-builds/src-noconflict/mode-pgsql';
-import 'ace-builds/src-noconflict/mode-sqlserver';
-import 'ace-builds/src-noconflict/mode-json';
-import 'ace-builds/src-noconflict/mode-javascript';
-import 'ace-builds/src-noconflict/mode-markdown';
-import 'ace-builds/src-noconflict/theme-github';
-import 'ace-builds/src-noconflict/theme-twilight';
-import 'ace-builds/src-noconflict/ext-searchbox';
-import 'ace-builds/src-noconflict/ext-language_tools';
-
 const app = new App({
   target: document.body,
   props: {},

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

packages/web/src/tabs/QueryTab.svelte

@@ -7,12 +7,11 @@
   export let conid;
   export let database;
 
-  // $: connection = useConnectionInfo({ conid });
+  $: connection = useConnectionInfo({ conid });
-  // engine={$connection && $connection.engine} 
 </script>
 
 <VerticalSplitter>
   <svelte:fragment slot="1">
-    <SqlEditor />
+    <SqlEditor engine={$connection && $connection.engine} />
   </svelte:fragment>
 </VerticalSplitter>