fixed toolstrip bars for editors #861

packages/web/src/buttons/ToolStripContainer.svelte

@@ -4,9 +4,13 @@
 
   const thisInstance = get_current_component();
 
-  export const activator = createActivator('ToolStripContainer', false);
+  export const activator = createActivator('ToolStripContainer', true);
 
   $: isComponentActive = $isComponentActiveStore('ToolStripContainer', thisInstance);
+
+  export function activate() {
+    activator?.activate();
+  }
 </script>
 
 <div class="wrapper">

packages/web/src/tabs/JsonEditorTab.svelte

@@ -32,6 +32,7 @@
   export const activator = createActivator('JsonEditorTab', false);
 
   let domEditor;
+  let domToolStrip;
 
   $: if ($tabVisible && domEditor) {
     domEditor?.getEditor()?.focus();
@@ -72,13 +73,14 @@
   }
 </script>
 
-<ToolStripContainer>
+<ToolStripContainer bind:this={domToolStrip}>
   <AceEditor
     value={$editorState.value || ''}
     menu={createMenu()}
     on:input={e => setEditorData(e.detail)}
     on:focus={() => {
       activator.activate();
+      domToolStrip?.activate();
       invalidateCommands();
     }}
     bind:this={domEditor}

packages/web/src/tabs/JsonLinesEditorTab.svelte

@@ -86,6 +86,7 @@
   export const activator = createActivator('JsonLinesEditorTab', false);
 
   let domEditor;
+  let domToolStrip;
 
   $: if ($tabVisible && domEditor) {
     domEditor?.getEditor()?.focus();
@@ -172,7 +173,7 @@
   }
 </script>
 
-<ToolStripContainer>
+<ToolStripContainer bind:this={domToolStrip}>
   <VerticalSplitter isSplitter={jslid}>
     <svelte:fragment slot="1">
       <AceEditor
@@ -181,6 +182,7 @@
         on:input={e => setEditorData(e.detail)}
         on:focus={() => {
           activator.activate();
+          domToolStrip?.activate();
           invalidateCommands();
         }}
         bind:this={domEditor}

packages/web/src/tabs/QueryTab.svelte

@@ -105,6 +105,7 @@
   let resultCount;
   let errorMessages;
   let domEditor;
+  let domToolStrip;
   let intervalId;
 
   onMount(() => {
@@ -350,7 +351,7 @@
   let isInitialized = false;
 </script>
 
-<ToolStripContainer>
+<ToolStripContainer bind:this={domToolStrip}>
   <VerticalSplitter isSplitter={visibleResultTabs}>
     <svelte:fragment slot="1">
       {#if driver?.databaseEngineTypes?.includes('sql')}
@@ -370,6 +371,7 @@
           }}
           on:focus={() => {
             activator.activate();
+            domToolStrip?.activate();
             invalidateCommands();
             setTimeout(() => {
               isInitialized = true;
@@ -388,6 +390,7 @@
           on:input={e => setEditorData(e.detail)}
           on:focus={() => {
             activator.activate();
+            domToolStrip?.activate();
             invalidateCommands();
           }}
           bind:this={domEditor}

packages/web/src/tabs/ShellTab.svelte

@@ -74,6 +74,7 @@
   let executeNumber = 0;
 
   let domEditor;
+  let domToolStrip;
 
   // const status = writable({
   //   busy,
@@ -221,7 +222,7 @@
   }
 </script>
 
-<ToolStripContainer>
+<ToolStripContainer bind:this={domToolStrip}>
   <VerticalSplitter>
     <svelte:fragment slot="1">
       <AceEditor
@@ -230,6 +231,7 @@
         on:input={e => setEditorData(e.detail)}
         on:focus={() => {
           activator.activate();
+          domToolStrip?.activate();
           invalidateCommands();
         }}
         bind:this={domEditor}