Fix height jumping when switching from empty to non-empty and vice versa

src/JSONNode.svelte

@@ -52,18 +52,14 @@
 
   $: valueIsUrl = isUrl(value)
 
-  $: keyClass = classnames('key', {
+  let keyClass
-    empty: key === '',
+  $: keyClass = getKeyClass(key, searchResult)
-    search: searchResult 
-      ? !!searchResult[SEARCH_PROPERTY]
-      : false
-  })
 
   let valueClass
   $: valueClass = getValueClass(value, searchResult)
 
   $: if (domKey) {
-    if (document.activeElement !== domKey || key === '') {
+    if (document.activeElement !== domKey) {
       // synchronize the innerText of the editable div with the escaped value,
       // but only when the domValue does not have focus else we will ruin 
       // the cursor position.
@@ -72,7 +68,7 @@
   }
 
   $: if (domValue) {
-    if (document.activeElement !== domValue || value === '') {
+    if (document.activeElement !== domValue) {
       // synchronize the innerText of the editable div with the escaped value,
       // but only when the domValue does not have focus else we will ruin 
       // the cursor position.
@@ -92,6 +88,15 @@
     })
   }
 
+  function getKeyClass(key, searchResult) {
+    return classnames('key', {
+      empty: key === '',
+      search: searchResult
+        ? !!searchResult[SEARCH_PROPERTY]
+        : false
+    })
+  }
+
   function toggle () {
     expanded = !expanded
   }
@@ -113,6 +118,14 @@
   const updateKeyDebounced = debounce(updateKey, DEBOUNCE_DELAY)
 
   function handleKeyInput (event) {
+    const newKey = getPlainText(event.target)
+    keyClass = getKeyClass(newKey, searchResult)
+    if (newKey === '') {
+      // immediately update to cleanup any left over <br/>
+      setPlainText(domKey, '')
+    }
+
+    // fire a change event only after a delay
     updateKeyDebounced()
   }
 
@@ -145,6 +158,10 @@
     // do not await the debounced update to apply styles
     const newValue = getValue()
     valueClass = getValueClass(newValue, searchResult)
+    if (newValue === '') {
+      // immediately update to cleanup any left over <br/>
+      setPlainText(domValue, '')
+    }
 
     // fire a change event only after a delay
     debouncedUpdateValue()