Editor styles

Former-commit-id: b954b64d0e89c6e9c2c481b2fa16b95891c40a9d [formerly a50272da1714389c884ad99ecfe990cd8b2484f9] [formerly b8048e5921a42709ca5e9120461ae36a3520baf1 [formerly a70d1c090c71b204df9186451b30b34ef63b2cff]]
Former-commit-id: cdf4f4fa9ef6e935aa0a82b077165cf5f6794c0c [formerly c91fe3bbee247103e0b1d5ce98d8d7b6296dec76]
Former-commit-id: 5733d865c0daf94d9397930c516ccb68cb7fa559

assets/src/components/Editor.vue

@@ -1,10 +1,10 @@
 <template>
-    <form id="editor">
+    <form id="editor" :class="req.language">
         <h2 v-if="hasMetadata">Metadata</h2>
-        <textarea v-if="hasMetadata" id="metadata">{{ req.metadata }}</textarea>
+        <textarea v-model="req.metadata" v-if="hasMetadata" id="metadata"></textarea>
 
         <h2 v-if="hasMetadata">Body</h2>
-        <textarea id="content">{{ req.content }}</textarea>
+        <textarea v-model="req.content" id="content"></textarea>
     </form>
 </template>
 
@@ -30,7 +30,9 @@ export default {
     this.content = CodeMirror.fromTextArea(document.getElementById('content'), {
       lineNumbers: (this.req.language !== 'markdown'),
       viewportMargin: Infinity,
-      autofocus: true
+      autofocus: true,
+      theme: (this.req.language === 'markdown') ? 'markdown' : 'ttcn',
+      lineWrapping: (this.req.language === 'markdown')
     })
 
     CodeMirror.autoLoadMode(this.content, this.req.language)
@@ -41,8 +43,22 @@ export default {
     }
 
     this.metadata = CodeMirror.fromTextArea(document.getElementById('metadata'), {
-      viewportMargin: Infinity
+      viewportMargin: Infinity,
+      lineWrapping: true,
+      theme: 'markdown'
     })
+
+    if (this.req.metadata.startsWith('{')) {
+      CodeMirror.autoLoadMode(this.metadata, 'json')
+    }
+
+    if (this.req.metadata.startsWith('---')) {
+      CodeMirror.autoLoadMode(this.metadata, 'yaml')
+    }
+
+    if (this.req.metadata.startsWith('+++')) {
+      CodeMirror.autoLoadMode(this.metadata, 'toml')
+    }
   },
   methods: {
   }