Improve UI, Implement prediction of serial list

Author: timchanpon

src/renderer/App.vue

@@ -1,7 +1,10 @@
 <template>
 <div id="root">
-  <textarea v-model="text" />
-  <p v-html="compiledMarkdown" />
+  <textarea
+    :value="text"
+    @input="updateText"
+  />
+  <div v-html="compiledMarkdown" />
 </div>
 </template>
 
@@ -17,20 +20,57 @@ export default {
   },
   computed: {
     compiledMarkdown() {
-      return marked(this.text, { sanitize: true });
+      return marked(this.text);
+    },
+  },
+  methods: {
+    updateText(e) {
+      this.text = e.target.value;
+      this.handleEnter(e);
+    },
+    handleEnter(e) {
+      if (e.inputType !== 'insertLineBreak') return;
+
+      const splitText = e.target.value.split('\n');
+      const lenLine = splitText.length;
+      const prevLine = splitText[lenLine - 2];
+      const isOrderedList = prevLine.match(/^\d*\.\s.*/);
+      const isUnorderedList = prevLine.match(/^[\*|-]\s.*/);
+
+      let prefix = '';
+
+      if (isOrderedList) {
+        const num = prevLine.match(/^\d*/);
+        prefix = `${parseInt(num) + 1}.\v`;
+      } else if (isUnorderedList) {
+        prefix = prevLine.slice(0, 2);
+      }
+
+      this.text += prefix;
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
 #root {
-  display: grid;
-  grid-template-rows: 100vh;
-  grid-template-columns: 1fr 1fr;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+
+  textarea {
+    width: 50%;
+    height: 100%;
+    padding: 10px;
+    font-size: 1.5rem;
+  }
 
-  p {
+  div {
+    width: 50%;
+    height: 100%;
     padding: 10px;
+    font-size: 1.5rem;
+    overflow-y: scroll;
   }
 }
 </style>

static/index.css

@@ -1,5 +1,7 @@
 * {
   margin: 0;
+  box-sizing: border-box;
+  font-family: 'Nunito', sans-serif;
   color: #C9D2D9;
   background-color: #161C22;
 }