Use objecteditor throughout the app

frontend/src/components/objecteditor.svelte

@@ -5,9 +5,13 @@
   import { EditorState } from '@codemirror/state';
   import { EditorView, keymap } from '@codemirror/view';
   import { basicSetup } from 'codemirror';
-  import { onMount } from 'svelte';
+  import { createEventDispatcher, onMount } from 'svelte';
 
   export let text = '';
+  export let editor = undefined;
+
+  const dispatch = createEventDispatcher();
+  let editorParent;
 
   const editorState = EditorState.create({
     doc: '',
@@ -17,17 +21,14 @@
       javascript(),
       EditorState.tabSize.of(4),
       EditorView.updateListener.of(e => {
-        // if (!e.docChanged) {
+        if (!e.docChanged) {
-        //   return;
+          return;
-        // }
+        }
         text = e.state.doc.toString();
       }),
     ],
   });
 
-  let editorParent;
-  let editor;
-
   onMount(() => {
     editor = new EditorView({
       parent: editorParent,
@@ -37,10 +38,12 @@
     editor.dispatch({
       changes: {
         from: 0,
-        to: editorState.doc.length,
+        to: editor.state.doc.length,
         insert: text,
       },
     });
+
+    dispatch('inited', { editor });
   });
 </script>
 
@@ -49,9 +52,11 @@
 <style>
   .editor {
     width: 100%;
+    background-color: #fff;
   }
 
   .editor :global(.cm-editor) {
     overflow: auto;
+    height: 100%;
   }
 </style>

frontend/src/organisms/connection/collection/aggregate.svelte

@@ -3,7 +3,7 @@
   import Icon from '$components/icon.svelte';
   import Modal from '$components/modal.svelte';
   import MongoCollation from '$components/mongo-collation.svelte';
-  import input from '$lib/actions/input';
+  import ObjectEditor from '$components/objecteditor.svelte';
   import { aggregationStageDocumentationURL, aggregationStages } from '$lib/mongo';
   import { jsonLooseParse, looseJsonIsValid } from '$lib/strings';
   import { Aggregate } from '$wails/go/app/App';
@@ -32,7 +32,13 @@
 
   async function run() {
     const pipeline = stages.map(stage => ({ [stage.type]: jsonLooseParse(stage.data) }));
-    await Aggregate(collection.hostKey, collection.dbKey, collection.key, JSON.stringify(pipeline), JSON.stringify(options));
+    await Aggregate(
+      collection.hostKey,
+      collection.dbKey,
+      collection.key,
+      JSON.stringify(pipeline),
+      JSON.stringify(options)
+    );
   }
 
   onMount(() => {
@@ -57,8 +63,22 @@
             <Icon name="info" />
           </button>
         </label>
+
+        <!-- svelte-ignore a11y-label-has-associated-control -->
         <label class="field">
-          <textarea bind:value={stage.data} class="code" use:input={{ type: 'json' }}></textarea>
+          <ObjectEditor bind:text={stage.data} on:inited={e => {
+            e.detail.editor.dispatch({
+              changes: {
+                from: 0,
+                to: e.detail.editor.state.doc.length,
+                insert: '{\n\t\n}',
+              },
+              selection: {
+                anchor: 3,
+              },
+            });
+            e.detail.editor.focus();
+          }} />
         </label>
       </Details>
     {/each}
@@ -102,6 +122,21 @@
     grid-template: 1fr auto / 1fr;
   }
 
+  .aggregate :global(details) {
+    position: relative;
+    z-index: 2;
+  }
+  .aggregate :global(details + details::before) {
+    content: "";
+    position: absolute;
+    top: -0.6rem;
+    left: 50%;
+    width: 1px;
+    height: 0.6rem;
+    background-color: #888;
+    z-index: 1;
+  }
+
   .settinggrid {
     margin-bottom: 0.5rem;
   }
@@ -112,8 +147,7 @@
     align-items: center;
   }
 
-  textarea {
+  .field + .field {
-    min-height: 100px;
     margin-top: 0.5rem;
   }
 </style>

frontend/src/organisms/connection/collection/insert.svelte

@@ -3,21 +3,22 @@
   import Grid from '$components/grid.svelte';
   import Icon from '$components/icon.svelte';
   import ObjectViewer from '$components/objectviewer.svelte';
-  import input from '$lib/actions/input';
   import { randomString } from '$lib/math';
   import { inputTypes } from '$lib/mongo';
   import views from '$lib/stores/views';
   import { capitalise, convertLooseJson, jsonLooseParse } from '$lib/strings';
   import { InsertItems } from '$wails/go/app/App';
   import { EJSON } from 'bson';
-  import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher, onMount } from 'svelte';
   import Form from './components/form.svelte';
+  import ObjectEditor from '$components/objecteditor.svelte';
 
   export let collection;
 
   const dispatch = createEventDispatcher();
   const formValidity = {};
 
+  let editor;
   let json = '';
   let newItems = [];
   let insertedIds;
@@ -46,7 +47,12 @@
   }
 
   async function insert() {
-    insertedIds = await InsertItems(collection.hostKey, collection.dbKey, collection.key, convertLooseJson(json));
+    insertedIds = await InsertItems(
+      collection.hostKey,
+      collection.dbKey,
+      collection.key,
+      convertLooseJson(json)
+    );
     if ((collection.viewKey === 'list') && insertedIds) {
       newItems = [];
     }
@@ -90,13 +96,30 @@
     newItems.splice(index, 1);
     newItems = newItems;
   }
+
+  onMount(() => {
+    if (collection.viewKey === 'list') {
+      editor.dispatch({
+        changes: {
+          from: 0,
+          to: editor.state.doc.length,
+          insert: '{\n\t\n}',
+        },
+        selection: {
+          anchor: 3,
+        },
+      });
+      editor.focus();
+    }
+  });
 </script>
 
 <form on:submit|preventDefault={insert}>
   <div class="items">
     {#if collection.viewKey === 'list'}
+      <!-- svelte-ignore a11y-label-has-associated-control -->
       <label class="field json">
-        <textarea placeholder="[]" class="code" bind:value={json} use:input={{ type: 'json', autofocus: true }}></textarea>
+        <ObjectEditor bind:text={json} bind:editor />
       </label>
     {:else if viewType === 'form'}
       <div class="form">
@@ -205,7 +228,4 @@
   .field.json {
     height: 100%;
   }
-  .field.json textarea {
-    resize: none;
-  }
 </style>

frontend/src/organisms/connection/collection/remove.svelte

@@ -1,32 +1,47 @@
 <script>
   import Icon from '$components/icon.svelte';
-  import input from '$lib/actions/input';
+  import ObjectEditor from '$components/objecteditor.svelte';
+  import { convertLooseJson } from '$lib/strings';
   import { RemoveItems } from '$wails/go/app/App';
+  import { onMount } from 'svelte';
 
   export let collection;
 
   let json = '';
   let many = true;
   let result = undefined;
+  let editor;
   $: code = `db.${collection.key}.remove(${json});`;
 
   async function removeItems() {
-    result = await RemoveItems(collection.hostKey, collection.dbKey, collection.key, json, many);
+    result = await RemoveItems(
+      collection.hostKey,
+      collection.dbKey,
+      collection.key,
+      convertLooseJson(json),
+      many
+    );
   }
+
+  onMount(() => {
+    editor.dispatch({
+      changes: {
+        from: 0,
+        to: editor.state.doc.length,
+        insert: '{\n\t\n}',
+      },
+      selection: {
+        anchor: 3,
+      },
+    });
+    editor.focus();
+  });
 </script>
 
 <form on:submit|preventDefault={removeItems}>
-  <!-- <CodeExample {code} /> -->
+  <!-- svelte-ignore a11y-label-has-associated-control -->
-
   <label class="field">
-    <textarea
+    <ObjectEditor bind:text={json} bind:editor />
-      cols="30"
-      rows="10"
-      placeholder={'{}'}
-      class="code"
-      bind:value={json}
-      use:input={{ type: 'json', autofocus: true }}
-    ></textarea>
   </label>
 
   <div class="actions">
@@ -59,8 +74,4 @@
   .many {
     display: inline-flex;
   }
-
-  textarea {
-    resize: none;
-  }
 </style>