Merge branch 'refs/heads/v1' into feat/svelte5

src/lib/components/controls/EditableDiv.scss

@@ -28,6 +28,7 @@ div.jse-editable-div {
     outline: $edit-outline;
     background: $background-color;
     position: relative;
+    display: inline-block;
     border-radius: 0;
     z-index: 3; // must be on top of hovering the entry below it
   }

src/lib/components/controls/ValidationErrorsOverview.svelte

@@ -45,6 +45,7 @@
           {#each limit(validationErrors, MAX_VALIDATION_ERRORS) as validationError, index}
             <tr
               class="jse-validation-{validationError.severity}"
+              tabindex="0"
               on:click={() => {
                 // trigger on the next tick to prevent the editor not getting focus
                 setTimeout(() => selectError(validationError))

src/lib/components/modes/tablemode/TableMode.svelte

@@ -725,6 +725,10 @@
     }
 
     const target = event.target as HTMLElement
+    if (!target.isContentEditable) {
+      focus()
+    }
+
     const path = getDataPathFromTarget(target)
     if (path) {
       // when clicking inside the current selection, editing a value, do nothing
@@ -736,11 +740,6 @@
 
       event.preventDefault()
     }
-
-    // for example when clicking on the empty area in the main menu or on an InlineValue
-    if (!target.isContentEditable && !hasFocus) {
-      setTimeout(focus)
-    }
   }
 
   function createDefaultSelection(): JSONSelection | undefined {

src/lib/components/modes/treemode/JSONNode.scss

@@ -188,6 +188,26 @@
     }
   }
 
+  &.jse-hovered:not(.jse-selected):not(.jse-selected-value) {
+    .jse-value-outer,
+    .jse-meta,
+    .jse-items .jse-header,
+    .jse-items .jse-contents,
+    .jse-props .jse-header,
+    .jse-props .jse-contents,
+    .jse-footer {
+      background: $hover-background-color;
+      cursor: $contents-cursor;
+
+      .jse-value-outer,
+      .jse-meta {
+        // since the $hover-background-color is half transparent,
+        // we have to prevent it from being applied twice, else it gets a darker color
+        background: none;
+      }
+    }
+  }
+
   // key and value selected
   &.jse-selected {
     .jse-header,
@@ -225,12 +245,12 @@
     .jse-footer {
       background: $selection-background-color;
       cursor: $contents-selected-cursor;
-    }
 
-    .jse-key-outer {
-      &:hover {
-        background: inherit;
-        cursor: inherit;
+      .jse-key-outer {
+        &:hover {
+          background: inherit;
+          cursor: inherit;
+        }
       }
     }
   }

src/lib/components/modes/treemode/JSONNode.svelte

@@ -507,6 +507,8 @@
 
     if (isChildOfAttribute(event.target as Element, 'data-type', 'selectable-value')) {
       hover = HOVER_COLLECTION
+    } else if (isChildOfAttribute(event.target as Element, 'data-type', 'selectable-key')) {
+      hover = undefined
     } else if (
       isChildOfAttribute(event.target as Element, 'data-type', 'insert-selection-area-inside')
     ) {

src/lib/components/modes/treemode/TreeMode.scss

@@ -67,5 +67,13 @@
       font-family: $font-family;
       font-size: $font-size;
     }
+
+    .jse-search-box-background {
+      $search-box-height: 100px;
+      border: calc($search-box-height / 2) solid $modal-background;
+      margin: -$contents-padding;
+      margin-bottom: $contents-padding;
+      display: inline-block;
+    }
   }
 }

src/lib/components/modes/treemode/TreeMode.svelte

@@ -269,17 +269,14 @@
       return
     }
 
-    if (showSearch) {
-      const padding = parseInt(getComputedStyle(refContents).padding) ?? 0
+    if (showSearch && refContents.scrollTop === 0) {
       refContents.style.overflowAnchor = 'none'
-      refContents.style.paddingTop = padding + SEARCH_BOX_HEIGHT + 'px'
       refContents.scrollTop += SEARCH_BOX_HEIGHT
-      refContents.style.overflowAnchor = ''
-    } else {
-      refContents.style.overflowAnchor = 'none'
-      refContents.style.paddingTop = ''
-      refContents.scrollTop -= SEARCH_BOX_HEIGHT
-      refContents.style.overflowAnchor = ''
+      setTimeout(() => {
+        if (refContents) {
+          refContents.style.overflowAnchor = ''
+        }
+      })
     }
   }
 
@@ -1937,6 +1934,9 @@
         />
       </div>
       <div class="jse-contents" data-jsoneditor-scrollable-contents={true} bind:this={refContents}>
+        {#if showSearch}
+          <div class="jse-search-box-background"></div>
+        {/if}
         <JSONNode
           value={json}
           pointer={''}

src/lib/plugins/value/components/ColorPicker.scss

@@ -7,7 +7,7 @@
   height: $color-picker-button-size;
   box-sizing: border-box;
   padding: 0;
-  margin: 2px 0 0;
+  margin: 2px 0 0 $padding-half;
   display: inline-flex;
   vertical-align: top;