Adds JSON editor component in config modal

src/components/Configuration/ConfigContainer.vue

@@ -3,15 +3,14 @@
     <TabItem name="Edit">
       <div class="first-tab">Todo</div>
     </TabItem>
+    <TabItem name="Raw Editor">
+         <RawEditor :sections="sections" />
+    </TabItem>
     <TabItem name="Download">
-      <div class="second-tab">
         <pre>{{this.jsonParser(this.sections)}}</pre>
-      </div>
     </TabItem>
     <TabItem name="Add Item">
-      <div class="third-tab">
         <AddItem :sections="sections" />
-      </div>
     </TabItem>
   </Tabs>
 </template>
@@ -20,6 +19,7 @@
 
 import JsonToYaml from '@/utils/JsonToYaml';
 import AddItem from '@/components/Configuration/AddItem';
+import RawEditor from '@/components/Configuration/RawEditor';
 
 export default {
   name: 'ConfigContainer',
@@ -33,6 +33,7 @@ export default {
   },
   components: {
     AddItem,
+    RawEditor,
   },
 };
 </script>

src/components/Configuration/RawEditor.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <v-jsoneditor
+      v-model="json"
+      :options="options"
+      :plus="false"
+      height="650px"
+      @error="onError"
+    />
+  </div>
+</template>
+
+<script>
+
+import VJsoneditor from 'v-jsoneditor';
+
+export default {
+  name: 'RawEditor',
+  props: {
+    sections: Array,
+  },
+  components: {
+    VJsoneditor,
+  },
+  data() {
+    return {
+      json: this.sections,
+    };
+  },
+  methods: {
+    onError() {
+      console.log('error');
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>