Shell feature (#44)

Resolves #37: adds a shell tab where the user can write mongo shell
scripts and execute them.

frontend/src/components/codeeditor.svelte

@@ -0,0 +1,57 @@
+<script>
+  import { indentWithTab } from '@codemirror/commands';
+  import { indentOnInput } from '@codemirror/language';
+  import { EditorState } from '@codemirror/state';
+  import { EditorView, keymap } from '@codemirror/view';
+  import { basicSetup } from 'codemirror';
+  import { createEventDispatcher, onMount } from 'svelte';
+
+  export let text = '';
+  export let editor = undefined;
+  export let extensions = [];
+
+  const dispatch = createEventDispatcher();
+  let editorParent;
+
+  const editorState = EditorState.create({
+    doc: '',
+    extensions: [
+      basicSetup,
+      keymap.of([ indentWithTab, indentOnInput ]),
+      EditorState.tabSize.of(4),
+      EditorView.updateListener.of(e => {
+        if (!e.docChanged) {
+          return;
+        }
+        text = e.state.doc.toString();
+        dispatch('updated', { text });
+      }),
+      ...extensions,
+    ],
+  });
+
+  onMount(() => {
+    editor = new EditorView({
+      parent: editorParent,
+      state: editorState,
+    });
+
+    dispatch('inited', { editor });
+  });
+</script>
+
+<div bind:this={editorParent} class="editor"></div>
+
+<style>
+  .editor {
+    width: 100%;
+    background-color: #fff;
+    border-radius: var(--radius);
+    overflow: hidden;
+  }
+
+  .editor :global(.cm-editor) {
+    overflow: auto;
+    height: 100%;
+  }
+</style>

frontend/src/components/icon.svelte

@@ -147,6 +147,8 @@
     <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01" />
   {:else if name === 'loading'}
     <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />
+  {:else if name === 'shell'}
+    <path d="m4 17 6-6-6-6M12 19h8" />
   {:else if name === 'doc'}
     <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" />
   {/if}

frontend/src/components/objecteditor.svelte

@@ -1,43 +1,17 @@
 <script>
-  import { indentWithTab } from '@codemirror/commands';
   import { javascript } from '@codemirror/lang-javascript';
-  import { indentOnInput } from '@codemirror/language';
-  import { EditorState } from '@codemirror/state';
-  import { EditorView, keymap } from '@codemirror/view';
-  import { basicSetup } from 'codemirror';
-  import { createEventDispatcher, onMount } from 'svelte';
+  import { onMount } from 'svelte';
+  import CodeEditor from './codeeditor.svelte';
 
   export let text = '';
   export let editor = undefined;
   export let readonly = false;
 
-  const dispatch = createEventDispatcher();
-  let editorParent;
-
-  const editorState = EditorState.create({
-    doc: '',
-    extensions: [
-      basicSetup,
-      keymap.of([ indentWithTab, indentOnInput ]),
-      javascript(),
-      EditorState.tabSize.of(4),
-      EditorState.readOnly.of(readonly),
-      EditorView.updateListener.of(e => {
-        if (!e.docChanged) {
-          return;
-        }
-        text = e.state.doc.toString();
-        dispatch('updated', { text });
-      }),
-    ],
-  });
+  const extensions = [
+    javascript(),
+  ];
 
   onMount(() => {
-    editor = new EditorView({
-      parent: editorParent,
-      state: editorState,
-    });
-
     editor.dispatch({
       changes: {
         from: 0,
@@ -45,23 +19,13 @@
         insert: text,
       },
     });
-
-    dispatch('inited', { editor });
   });
 </script>
 
-<div bind:this={editorParent} class="editor"></div>
-
-<style>
-  .editor {
-    width: 100%;
-    background-color: #fff;
-    border-radius: var(--radius);
-    overflow: hidden;
-  }
-
-  .editor :global(.cm-editor) {
-    overflow: auto;
-    height: 100%;
-  }
-</style>
+<CodeEditor bind:editor
+  bind:text
+  on:inited
+  on:updated
+  {extensions}
+  {readonly}
+/>