Editor styles

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: {
   }

assets/src/css/base.css

@@ -112,6 +112,6 @@ nav .action>* {
 
 main {
   min-height: 1em;
-  margin: 0 1em 0 auto;
+  margin: 0 1em 1em auto;
   width: calc(100% - 19em);
 }

assets/src/css/editor.css

@@ -1,5 +1,184 @@
 @import "~codemirror/lib/codemirror.css";
+@import "~codemirror/theme/ttcn.css";
+#editor {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+#editor .CodeMirror {
+  border: 1px solid #dddddd;
+  margin: 2em 0;
+  border-radius: .5em;
+}
+
+#editor h2 {
+  color: rgba(0, 0, 0, 0.3);
+  font-weight: 500;
+}
 
 .CodeMirror {
   height: auto;
 }
+
+.markdown .CodeMirror {
+  padding: .75em;
+}
+
+.cm-s-markdown .CodeMirror-gutter {
+  border-right: 1px solid #eff3f5;
+  padding-right: 5px;
+  margin-right: 15px;
+  min-width: 2.5em;
+  padding-bottom: 30px;
+}
+
+.cm-s-markdown .CodeMirror-cursor {
+  border-right: 2px solid #667880;
+}
+
+.cm-s-markdown .CodeMirror-lines {
+  margin: 0;
+}
+
+.cm-s-markdown {
+  color: #3D494E;
+}
+
+.cm-s-markdown span.cm-header {
+  color: #3D494E;
+  font-weight: bold;
+}
+
+.cm-s-markdown span.cm-variable-2 {
+  color: #3D494E;
+}
+
+.cm-s-markdown span.cm-meta {
+  color: #516066;
+}
+
+.cm-s-markdown span.cm-hr {
+  color: #516066;
+}
+
+.cm-s-markdown span.cm-comment {
+  color: #868f93;
+}
+
+.cm-s-markdown span.cm-qualifier {
+  color: #868f93;
+}
+
+.cm-s-markdown span.cm-number {
+  color: #197987;
+}
+
+.cm-s-markdown span.cm-variable {
+  color: #197987;
+}
+
+.cm-s-markdown span.cm-builtin {
+  color: #197987;
+}
+
+.cm-s-markdown span.cm-link {
+  color: #197987;
+  text-decoration: underline;
+}
+
+.cm-s-markdown span.cm-tag {
+  color: #197987;
+}
+
+.cm-s-markdown span.cm-string {
+  color: #48abb9;
+}
+
+.cm-s-markdown span.cm-string-2 {
+  color: #48abb9;
+}
+
+.cm-s-markdown span.cm-quote {
+  color: #48abb9;
+}
+
+.cm-s-markdown span.cm-atom {
+  color: #48abb9;
+}
+
+.cm-s-markdown span.cm-property {
+  color: #82a367;
+}
+
+.cm-s-markdown span.cm-operator {
+  color: #82a367;
+}
+
+.cm-s-markdown span.cm-variable-3 {
+  color: #82a367;
+}
+
+.cm-s-markdown span.cm-attribute {
+  color: #90bb74;
+}
+
+.cm-s-markdown span.cm-def {
+  color: #90bb74;
+}
+
+.cm-s-markdown span.cm-keyword {
+  color: #ec6c45;
+}
+
+.cm-s-markdown span.cm-bracket {
+  color: #ec6c45;
+}
+
+.cm-s-markdown span.cm-error {
+  color: #e45346;
+}
+
+.cm-s-markdown span.cm-em {
+  font-style: italic;
+}
+
+.cm-s-markdown span.cm-strong {
+  font-weight: bold;
+}
+
+.cm-s-markdown .cm-header-1 {
+  font-size: 200%;
+  line-height: 200%;
+}
+
+.cm-s-markdown .cm-header-2 {
+  font-size: 160%;
+  line-height: 160%;
+}
+
+.cm-s-markdown .cm-header-3 {
+  font-size: 125%;
+  line-height: 125%;
+}
+
+.cm-s-markdown .cm-header-4 {
+  font-size: 110%;
+  line-height: 110%;
+}
+
+.cm-s-markdown .cm-comment {
+  background: rgba(0, 0, 0, .05);
+  border-radius: 2px;
+}
+
+.cm-s-markdown .cm-link {
+  color: #7f8c8d;
+}
+
+.cm-s-markdown .cm-url {
+  color: #aab2b3;
+}
+
+.cm-s-markdown .cm-strikethrough {
+  text-decoration: line-through;
+}