fix: keep focus on the editor after clicking a message action button

josdejong · Jun 8, 2023 · aeb5d8f · aeb5d8f
1 parent 78771cd
commit aeb5d8f
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 1 deletion.
diff --git a/src/lib/components/controls/Message.svelte b/src/lib/components/controls/Message.svelte
@@ -4,12 +4,18 @@
   import Icon from 'svelte-awesome'
   import type { MessageAction } from '$lib/types'
   import type { IconDefinition } from '@fortawesome/free-solid-svg-icons'
+  import { onDestroy } from 'svelte'
 
   export let type: 'success' | 'error' = 'success' // 'success' or 'error'
   export let icon: IconDefinition | undefined = undefined
   export let message: string | undefined = undefined
   export let actions: MessageAction[] = []
   export let onClick: (() => void) | undefined = undefined
+  export let onClose: (() => void) | undefined = undefined
+
+  if (onClose) {
+    onDestroy(onClose)
+  }
 
   function handleClick() {
     if (onClick) {

diff --git a/src/lib/components/modes/tablemode/TableMode.svelte b/src/lib/components/modes/tablemode/TableMode.svelte
@@ -1837,6 +1837,10 @@
               onClick: handleClearPastedJson
             }
           ]}
+          onClose={() => {
+            // TODO: the need for setTimeout is ugly
+            setTimeout(focus)
+          }}
         />
       {/if}
 
@@ -1858,6 +1862,7 @@
                 }
               ]
             : []}
+          onClose={focus}
         />
       {/if}
 

diff --git a/src/lib/components/modes/textmode/TextMode.scss b/src/lib/components/modes/textmode/TextMode.scss
@@ -176,6 +176,8 @@
 
     &.jse-preview {
       flex: 1;
+      font-family: var(--jse-font-family-mono);
+      font-size: var(--jse-font-size-mono);
       color: var(--jse-panel-color-readonly);
       overflow: auto;
       white-space: pre-wrap;

diff --git a/src/lib/components/modes/textmode/TextMode.svelte b/src/lib/components/modes/textmode/TextMode.svelte
@@ -901,6 +901,7 @@
             onClick: cancelLoadTooLarge
           }
         ]}
+        onClose={focus}
       />
 
       <div class="jse-contents jse-preview">
@@ -920,6 +921,7 @@
           message={jsonParseError.message}
           actions={repairActions}
           onClick={handleShowMe}
+          onClose={focus}
         />
       {/if}
 
@@ -941,6 +943,7 @@
               onClick: () => (askToFormat = false)
             }
           ]}
+          onClose={focus}
         />
       {/if}
 

diff --git a/src/lib/components/modes/treemode/TreeMode.svelte b/src/lib/components/modes/treemode/TreeMode.svelte
@@ -2181,6 +2181,10 @@
               onClick: handleClearPastedJson
             }
           ]}
+          onClose={() => {
+            // TODO: the need for setTimeout is ugly
+            setTimeout(focus)
+          }}
         />
       {/if}
 
@@ -2202,6 +2206,7 @@
                 }
               ]
             : []}
+          onClose={focus}
         />
       {/if}
 

diff --git a/src/routes/development/+page.svelte b/src/routes/development/+page.svelte
@@ -543,7 +543,7 @@
     <button
       on:click={() => {
         content = {
-          text: 'abc',
+          text: '[1,2,3',
           json: undefined
         }
       }}