feat: improve welcome screen with action buttons to create an array or object

Author: josdejong

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

@@ -26,10 +26,11 @@
         .filter((path) => path.length > 0)
     : []
   $: hasNestedArrays = !isEmpty(nestedArrayPaths)
+  $: isEmptyDocument = json === undefined && (text === '' || text === undefined)
 
   $: documentType = hasNestedArrays
     ? 'Object with nested arrays'
-    : json === undefined && (text === '' || text === undefined)
+    : isEmptyDocument
     ? 'An empty document'
     : isJSONObject(json)
     ? 'An object'
@@ -48,7 +49,12 @@
         An object cannot be opened in table mode. You can open a nested array instead, or open the
         document in tree mode.
       {:else}
-        {documentType} cannot be opened in table mode. You can open the document in tree mode instead.
+        {documentType} cannot be opened in table mode.
+      {/if}
+      {#if isEmptyDocument && !readOnly}
+        You can open the document in tree mode instead, or paste a JSON Array using <b>Ctrl+V</b>.
+      {:else}
+        You can open the document in tree mode instead.
       {/if}
     </div>
     {#each nestedArrayPaths as nestedArrayPath}

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

@@ -1027,6 +1027,10 @@
       updateSelection(createValueSelection(documentState.selection.path, false))
     }
 
+    if (!documentState.selection) {
+      updateSelection(getInitialSelection(json, documentState))
+    }
+
     handleInsert(type)
   }
 
@@ -2145,7 +2149,17 @@
     </label>
     {#if json === undefined}
       {#if text === '' || text === undefined}
-        <Welcome {readOnly} />
+        <Welcome
+          {readOnly}
+          onCreateObject={() => {
+            focus()
+            handleInsertCharacter('{')
+          }}
+          onCreateArray={() => {
+            focus()
+            handleInsertCharacter('[')
+          }}
+        />
       {:else}
         <Message
           type="error"

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

@@ -2,7 +2,7 @@
 
 .jse-welcome {
   flex: 1;
-  overflow: auto; // FIXME: overflow doesn't work (try giving editor 100px height)
+  overflow: auto;
   font-family: var(--jse-font-family);
   font-size: var(--jse-font-size);
 
@@ -26,24 +26,21 @@
   }
 
   .jse-contents {
+    display: flex;
+    flex-direction: column;
+    max-width: 300px;
     margin: 2em $padding 0;
-    color: var(--jse-panel-color-readonly);
+    gap: $padding;
 
-    ul {
-      $list-padding: 10px;
-
-      list-style: '●';
-      list-style-position: outside;
-      padding-left: 2 * $list-padding;
+    .jse-welcome-title {
+    }
 
-      li {
-        padding-left: $list-padding;
+    .jse-welcome-info {
+      color: var(--jse-panel-color-readonly);
+    }
 
-        span.jse-bold {
-          font-family: var(--jse-font-family-mono);
-          font-weight: bold;
-        }
-      }
+    button {
+      @include jsoneditor-button-primary;
     }
   }
 }

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

@@ -2,19 +2,20 @@
 
 <script lang="ts">
   export let readOnly: boolean
+  export let onCreateArray: () => void
+  export let onCreateObject: () => void
 </script>
 
 <div class="jse-welcome">
   <div class="jse-space jse-before" />
   <div class="jse-contents">
-    Empty document
+    <div class="jse-welcome-title">Empty document</div>
     {#if !readOnly}
-      <ul>
-        <li>Click inside the editor</li>
-        <li>Paste clipboard data using <span class="jse-bold">Ctrl+V</span></li>
-        <li>Create a new object by typing <span class="jse-bold">&lbrace;</span></li>
-        <li>Create a new array by typing <span class="jse-bold">[</span></li>
-      </ul>
+      <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 array (press '[')"} on:click={() => onCreateArray()}>Create array</button>
     {/if}
   </div>
   <div class="jse-space jse-after" />