execute query

packages/web/src/commands/CommandListener.svelte

@@ -13,7 +13,14 @@
 
     const commandsValue = get(commands);
     const command: any = Object.values(commandsValue).find(
-      (x: any) => x.enabled && x.keyText && x.keyText.toLowerCase() == keyText.toLowerCase()
+      (x: any) =>
+        x.enabled &&
+        x.keyText &&
+        x.keyText
+          .toLowerCase()
+          .split('|')
+          .map(x => x.trim())
+          .includes(keyText.toLowerCase())
     );
 
     if (command) {

packages/web/src/query/AceEditor.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <div bind:clientWidth bind:clientHeight class="ace-container">
-  <AceEditorCore {...$$props} width={clientWidth} height={clientHeight} on:input/>
+  <AceEditorCore {...$$props} width={clientWidth} height={clientHeight} on:input on:focus on:blur />
 </div>
 
 <style>

packages/web/src/query/SqlEditor.svelte

@@ -9,6 +9,7 @@
 <script lang="ts">
   import AceEditor from './AceEditor.svelte';
   export let engine;
+  let domEditor;
 
   let mode;
 
@@ -16,6 +17,10 @@
     const match = (engine || '').match(/^([^@]*)@/);
     mode = engineToMode[match ? match[1] : engine] || 'sql';
   }
+
+  export function getSelectedText() {
+    return domEditor.getSelectedText()
+  }
 </script>
 
-<AceEditor {mode} {...$$props} on:input />
+<AceEditor {mode} {...$$props} on:input on:focus on:blur bind:this={domEditor}/>

packages/web/src/tabs/QueryTab.svelte

@@ -1,4 +1,24 @@
+<script lang="ts" context="module">
+  const currentQuery = writable(null);
+
+  registerCommand({
+    id: 'query.execute',
+    category: 'Query',
+    name: 'Execute',
+    icon: 'icon run',
+    toolbar: true,
+    keyText: 'F5 | Ctrl+Enter',
+    enabledStore: derived(currentQuery, query => query != null),
+    onClick: () => get(currentQuery).execute(),
+  });
+</script>
+
 <script lang="ts">
+  import { get_current_component } from 'svelte/internal';
+
+  import { writable, derived, get } from 'svelte/store';
+  import registerCommand from '../commands/registerCommand';
+
   import VerticalSplitter from '../elements/VerticalSplitter.svelte';
   import SqlEditor from '../query/SqlEditor.svelte';
   import useEditorData from '../query/useEditorData';
@@ -11,6 +31,8 @@
   export let database;
   export let initialArgs;
 
+  const instance = get_current_component();
+
   $: connection = useConnectionInfo({ conid });
 
   const { editorState, setEditorData } = useEditorData({
@@ -28,6 +50,7 @@
       engine={$connection && $connection.engine}
       value={$editorState.value || ''}
       on:input={e => setEditorData(e.detail)}
+      on:focus={() => currentQuery.set(instance)}
     />
   </svelte:fragment>
 </VerticalSplitter>