fix: escape in nested JSONEditorModals closing all modals instead of …

…the last
josdejong · Jul 11, 2024 · dfe4af8 · dfe4af8
1 parent 425c7a7
commit dfe4af8
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 22 deletions.
diff --git a/src/lib/components/modals/JSONEditorModal.svelte b/src/lib/components/modals/JSONEditorModal.svelte
@@ -30,10 +30,9 @@
   import Icon from 'svelte-awesome'
   import { faCaretLeft } from '@fortawesome/free-solid-svg-icons'
   import memoizeOne from 'memoize-one'
-  import { onEscape } from '$lib/actions/onEscape.js'
   import { getFocusPath, isJSONSelection } from '$lib/logic/selection.js'
   import Modal from './Modal.svelte'
-  import AbsolutePopup from '$lib/components/modals/popup/AbsolutePopup.svelte'
+  import AbsolutePopup from './popup/AbsolutePopup.svelte'
 
   const debug = createDebug('jsoneditor:JSONEditorModal')
 
@@ -74,6 +73,7 @@
   }
 
   let refEditor: JSONEditorRoot
+  let refApply: HTMLButtonElement
   let fullscreen: boolean
 
   const rootState: ModalState = {
@@ -149,7 +149,10 @@
   function handleClose() {
     debug('handleClose')
 
-    if (stack.length > 1) {
+    if (fullscreen) {
+      // exit fullscreen
+      fullscreen = false
+    } else if (stack.length > 1) {
       // remove the last item from the stack
       stack = initial(stack)
       tick().then(scrollToSelection)
@@ -162,14 +165,6 @@
     }
   }
 
-  function handleEscape() {
-    if (fullscreen) {
-      fullscreen = false
-    } else {
-      handleClose()
-    }
-  }
-
   function handleChange(updatedContent: Content) {
     debug('handleChange', updatedContent)
 
@@ -218,15 +213,17 @@
       relativePath: path
     }
     stack = [...stack, nestedModalState]
+
+    refApply.focus()
   }
 
   function focus(element: HTMLElement) {
     element.focus()
   }
 </script>
 
-<Modal {onClose} className="jse-jsoneditor-modal" {fullscreen}>
-  <div class="jse-modal-wrapper" use:onEscape={handleEscape}>
+<Modal onClose={handleClose} className="jse-jsoneditor-modal" {fullscreen}>
+  <div class="jse-modal-wrapper">
     <AbsolutePopup>
       <Header
         title="Edit nested content {stack.length > 1 ? ` (${stack.length})` : ''}"
@@ -302,11 +299,11 @@
             </button>
           {/if}
           {#if !readOnly}
-            <button type="button" class="jse-primary" on:click={handleApply} use:focus>
+            <button type="button" class="jse-primary" on:click={handleApply} use:focus bind:this={refApply}>
               Apply
             </button>
           {:else}
-            <button type="button" class="jse-primary" on:click={handleClose} use:focus>
+            <button type="button" class="jse-primary" on:click={handleClose}>
               Close
             </button>
           {/if}

diff --git a/src/lib/components/modals/Modal.svelte b/src/lib/components/modals/Modal.svelte
@@ -12,10 +12,6 @@
   onMount(() => dialog.showModal())
   onDestroy(() => dialog.close())
 
-  function handleEscape() {
-    onClose()
-  }
-
   function close() {
     onClose()
   }
@@ -26,11 +22,11 @@
   bind:this={dialog}
   on:close={close}
   on:click|self={close}
+  use:onEscape={close}
   class={className}
   class:jse-fullscreen={fullscreen}
 >
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <div class="jse-modal" on:click|stopPropagation use:onEscape={handleEscape}>
+  <div class="jse-modal">
     <slot />
   </div>
 </dialog>
@@ -40,11 +36,13 @@
 
   dialog {
     border-radius: $border-radius;
+    font-size: $padding; // for some reason that I don't understand, the font-size of the dialog is used as margin around the dialog
     border: none;
     padding: 0;
     display: flex;
     min-width: 0;
     overflow: visible;
+    transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
 
     &.jse-sort-modal {
       width: 400px;
@@ -62,7 +60,7 @@
 
     &.jse-transform-modal {
       width: 1200px;
-      height: 1200px;
+      height: 800px;
     }
 
     &.jse-fullscreen {