new editor mostly implemented using codemirror and showdown, syncs checkbox state

Author: CoreParadox

public/style.css

@@ -11,6 +11,9 @@ body {
   border-radius: 5px;
 }
 
+.cm-s-default{
+  background:transparent !important;
+}
 /*  .editor .tuieditor .CodeMirror .tui-editor-defaultUI */
 #app #home{
   font-family: 'Avenir', Helvetica, Arial, sans-serif;

src/components/CodeMirrorEditor.vue

@@ -1,55 +1,132 @@
 <template>
   <div class="editor">
-    <editor
-    :value="editorText"
-    :options="editorOptions"
-    :html="editorHtml"
-    :visible="editorVisible"
-    height="500px"
-    mode="markdown"
-    previewStyle="vertical"
+    <codemirror
+      ref="cm"
+      v-model="text"
+      :hidden="!editorVisible"
+      :options="editorOptions"
+      @blur="onCmBlur"
+      @focus="onCmFocus"
+      @ready="onCmReady"
     />
+    <div :hidden="editorVisible" id="renderContainer">
+      <VueShowdown :extensions="[enableCheckBoxExt]" :markdown="text"/>
+    </div>
   </div>
 </template>
 <script lang="ts">
-import { codemirror } from 'vue-codemirror';
-import 'codemirror/lib/codemirror.css';
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import { codemirror } from "vue-codemirror";
+import "codemirror/lib/codemirror.css";
+import "codemirror/mode/gfm/gfm.js";
+import "codemirror/addon/edit/continuelist.js";
+import VueShowdown from "vue-showdown";
+import { clearTimeout } from "timers";
+import { constants } from 'http2';
+
+var myext2 = {
+  type: "lang",
+  regex: /markdown/g,
+  replace: "showdown"
+};
+Vue.use(VueShowdown, {
+  flavor: "github",
+  options: {
+    emoji: true,
+    tasklists: true
+  }
+});
 @Component({
-    components: {
-        codemirror
-    }
+  components: {
+    codemirror
+  }
 })
-export default class TuiEditor extends Vue {
-    data() {
-        return {
-            editorText: 'This is initialValue.',
-            editorOptions: {
-                hideModeSwitch: true,
-                toolbarItems:[]
-            },
-            editorHtml: '',
-            editorVisible: true
-        };
-    }
-    onEditorLoad() {
-        console.log("Test");
-    }
+export default class CodeMirrorEditor extends Vue {
+  private cm;
+  private readonly editorOptions = {
+    lineNumbers: false,
+    mode: {
+      name: "gfm",
+      tokenTypeOverrides: {
+        emoji: true,
+        taskLists: true,
+        strikethrough: true,
+        gitHubSpice: true
+      }
+    },
+    extraKeys: { Enter: "newlineAndIndentContinueMarkdownList" }
+  };
 
-    onEditorFocus() {
-        // implement your code
-    }
+  private enableCheckBoxExt = () => {
+    var c = 0;
+    return [
+      {
+        type: "lang",
+        regex: /$/g,
+        replace: () => {
+          c = 0;
+          return "";
+        }
+      },
+      {
+        type: "output",
+        regex: /disabled/gm,
+        replace: (match, $1) => {
+          return `id="checkbox-${c++}"`;
+        }
+      }
+    ];
+  };
 
-    onEditorBlur() {
-        // implement your code
-    }
+  public text = "- [ ] test\n- [ ] test2\nblah blah\n- [ ] test\n- [ ] test2";
 
-    onEditorChange() {
-        // implement your code
-    }
+  public get editorText() {
+    return this.text;
+  }
+  public set editorText(text) {
+    this.text = text;
+  }
+  private editorVisible = true;
+
+  onCmReady(cm) {
+    this.cm = cm;
+  }
 
-    onEditorStateChange() {
-        // implement your code
+  mounted() {
+    document.addEventListener(
+      "click",
+      e => {
+        var target = <any>e.target;
+        if (target.type == "checkbox") {
+          var i = -1;
+          this.editorText = this.editorText.replace(/\[[\sxX]\]/g, match => {
+              i++;
+              return i == target.id.replace("checkbox-","") ? 
+                match.replace(/\[[\sxX]\]/g, target.checked ? "[x]" : "[ ]") : match;
+          });
+        }
+        else if(!target.className.includes("cm") && !target.className.includes("CodeMirror")){
+          console.log(target.className)
+          this.onCmBlur();
+        }
+      },
+      false
+    );
+  }
+
+  onCmFocus() {
+    this.cm.setCursor(this.cm.lineCount(), 0);
+  }
+
+  onCmBlur() {
+    this.editorVisible = !this.editorVisible;
+    if (this.editorVisible) {
+      var timeout = setTimeout(() => {
+        console.log("focused");
+        this.cm.focus();
+      }, 100);
+      clearTimeout(timeout);
     }
-};
+  }
+}
 </script>

src/components/TUIEditor.vue

@@ -27,22 +27,22 @@
         <i class="fas fa-trash"></i>
       </a>
     </NavBar>
-    <TuiEditor v-on:finished="handleClose()" v-on:fileLoaded="setFileName"></TuiEditor>
+    <CodeMirrorEditor v-on:finished="handleClose()" v-on:fileLoaded="setFileName"></CodeMirrorEditor>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Watch } from "vue-property-decorator";
 //import Editor from "@/components/Editor.vue"; // @ is an alias to /src
-import TuiEditor from "@/components/TUIEditor.vue";
+import CodeMirrorEditor from "@/components/CodeMirrorEditor.vue";
 import NavBar from "@/components/NavBar.vue";
 import { unlink, writeFile, readdirSync } from "fs";
 import * as path from "path";
 import Configuration from "@/utility/Configuration";
 
 @Component({
   components: {
-    TuiEditor,
+    CodeMirrorEditor,
     NavBar
   }
 })