fix: regression since v0.18.17 not allowing to put the cursor halfway the value when editing a value

Author: josdejong

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

@@ -730,10 +730,7 @@
     setTimeout(() => {
       setTimeout(() => {
         // for example when clicking on the empty area in the main menu
-        if (
-          (!hasFocus && !isChildOfNodeName(event.target, 'BUTTON')) ||
-          event.target.nodeName === 'DIV'
-        ) {
+        if (!hasFocus && !isChildOfNodeName(event.target, 'BUTTON')) {
           focus()
         }
       })

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

@@ -1820,10 +1820,7 @@
     // TODO: ugly to have two setTimeout here. Without it, hiddenInput will blur
     setTimeout(() => {
       setTimeout(() => {
-        if (
-          (!hasFocus && !isChildOfNodeName(event.target, 'BUTTON')) ||
-          event.target.nodeName === 'DIV'
-        ) {
+        if (!hasFocus && !isChildOfNodeName(event.target, 'BUTTON')) {
           // for example when clicking on the empty area in the main menu
           focus()
 
@@ -2164,6 +2161,12 @@
             focus()
             handleInsertCharacter('[')
           }}
+          onClick={() => {
+            // FIXME: this is a workaround for the editor not putting the focus on refHiddenInput
+            //  when clicking in the welcome screen (only occurs in 'tree' mode,
+            //  so you cannot paste a document from clipboard.
+            focus()
+          }}
         />
       {:else}
         <Message

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

@@ -4,21 +4,24 @@
   export let readOnly: boolean
   export let onCreateArray: () => void
   export let onCreateObject: () => void
+  export let onClick: () => void
 </script>
 
-<div class="jse-welcome">
+<div class="jse-welcome" on:click={() => onClick()} role="none">
   <div class="jse-space jse-before" />
   <div class="jse-contents">
     <div class="jse-welcome-title">Empty document</div>
     {#if !readOnly}
       <div class="jse-welcome-info">
         You can paste clipboard data using <b>Ctrl+V</b>, or use the following options:
       </div>
-      <button title={"Create an empty JSON object (press '{')"} on:click={() => onCreateObject()}
-        >Create object</button
+      <button
+        title={"Create an empty JSON object (press '{')"}
+        on:click|stopPropagation={() => onCreateObject()}>Create object</button
       >
-      <button title={"Create an empty JSON array (press '[')"} on:click={() => onCreateArray()}
-        >Create array</button
+      <button
+        title={"Create an empty JSON array (press '[')"}
+        on:click|stopPropagation={() => onCreateArray()}>Create array</button
       >
     {/if}
   </div>