Messing around with different editors to replace HyperMD for more customization.

Author: CoreParadox

package-lock.json

@@ -10,13 +10,16 @@
     "postinstall": "electron-builder install-app-deps"
   },
   "dependencies": {
+    "@toast-ui/vue-editor": "^1.0.4",
     "codemirror": "^5.43.0",
     "fs-extra": "^7.0.1",
     "hypermd": "^0.3.11",
     "vue": "^2.5.21",
     "vue-class-component": "^6.0.0",
+    "vue-codemirror": "^4.0.6",
     "vue-property-decorator": "^7.0.0",
     "vue-router": "^3.0.1",
+    "vue-showdown": "^2.4.0",
     "vuex": "^3.0.1"
   },
   "devDependencies": {

package.json

@@ -11,17 +11,31 @@ body {
   border-radius: 5px;
 }
 
-#app #home .editor .CodeMirror {
+/*  .editor .tuieditor .CodeMirror .tui-editor-defaultUI */
+#app #home{
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
   width: 100vw;
   height: 88vh;
+  background:transparent !important;
+  background-color:transparent !important;
 }
 
+.te-editor, .te-ww-container, .editor{
+  width: 100% !important;
+  position: absolute;
+  background:transparent !important;
+  background-color:transparent !important;
+}
+
+
+.te-toolbar-section, .te-preview, .te-md-splitter{
+  display: none !important;
+} 
 
-.CodeMirror {
+.CodeMirror .tui-editor-defaultUI{
   height: 100%;
 }
 

public/style.css

@@ -0,0 +1,55 @@
+<template>
+  <div class="editor">
+    <editor
+    :value="editorText"
+    :options="editorOptions"
+    :html="editorHtml"
+    :visible="editorVisible"
+    height="500px"
+    mode="markdown"
+    previewStyle="vertical"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { codemirror } from 'vue-codemirror';
+import 'codemirror/lib/codemirror.css';
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+@Component({
+    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");
+    }
+
+    onEditorFocus() {
+        // implement your code
+    }
+
+    onEditorBlur() {
+        // implement your code
+    }
+
+    onEditorChange() {
+        // implement your code
+    }
+
+    onEditorStateChange() {
+        // implement your code
+    }
+};
+</script>

src/components/CodeMirrorEditor.vue

@@ -11,7 +11,8 @@ import { clearInterval } from "timers";
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 import * as path from "path";
 import "hypermd/theme/hypermd-light.css";
-import "@/theme/sticky.css";
+import "../theme/sticky.css"
+import "../theme/dark.css"
 import Configuration from "@/utility/Configuration";
 
 @Component
@@ -21,6 +22,9 @@ export default class Editor extends Vue {
   private config = this.$store.getters.Config
   private filePath = () => this.$store.getters.NotePath
 
+  mounted(){
+    this.NoteUpdate();
+  }
   destroyed() {
     document.removeChild(document.getElementsByClassName("CodeMirror")[0])
     this.internalEditor = null;

src/components/Editor.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="editor">
+    <editor
+    :value="editorText"
+    :options="editorOptions"
+    :html="editorHtml"
+    :visible="editorVisible"
+    height="500px"
+    mode="markdown"
+    previewStyle="vertical"
+    />
+  </div>
+</template>
+<script lang="ts">
+import 'tui-editor/dist/tui-editor.css';
+import 'tui-editor/dist/tui-editor-contents.css';
+import 'codemirror/lib/codemirror.css';
+import { Editor } from '@toast-ui/vue-editor';
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+@Component({
+    components: {
+        'editor': Editor
+    }
+})
+export default class TuiEditor extends Vue {
+    data() {
+        return {
+            editorText: 'This is initialValue.',
+            editorOptions: {
+                hideModeSwitch: true,
+                toolbarItems:[]
+            },
+            editorHtml: '',
+            editorVisible: true
+        };
+    }
+    onEditorLoad() {
+        console.log("Test");
+    }
+
+    onEditorFocus() {
+        // implement your code
+    }
+
+    onEditorBlur() {
+        // implement your code
+    }
+
+    onEditorChange() {
+        // implement your code
+    }
+
+    onEditorStateChange() {
+        // implement your code
+    }
+};
+</script>

src/components/TUIEditor.vue

@@ -0,0 +1,4 @@
+.cm-s-dark .CodeMirror-gutters { background: #2d3033; border-right: 0px; }
+.CodeMirror.cm-s-dark { background: #2d3033; color: #fff !important; border-radius: 0px 0px 5px 5px;}
+.cm-s-dark, .cm-formatting-list, .cm-formatting-task, .cm-property { color: #fff !important;}
+.CodeMirror-line::selection { color: #fff !important;}

src/theme/dark.css

@@ -1,2 +1,2 @@
 .cm-s-sticky .CodeMirror-gutters { background: #f1ea99; border-right: 0px; }
-.cm-s-sticky.CodeMirror { background: #f1ea99; color: #41323f; border-radius: 0px 0px 5px 5px;}
+.CodeMirror.cm-s-sticky { background: #f1ea99; color: #41323f; border-radius: 0px 0px 5px 5px;}

src/theme/sticky.css

@@ -27,21 +27,22 @@
         <i class="fas fa-trash"></i>
       </a>
     </NavBar>
-    <Editor v-on:finished="handleClose()" v-on:fileLoaded="setFileName"></Editor>
+    <TuiEditor v-on:finished="handleClose()" v-on:fileLoaded="setFileName"></TuiEditor>
   </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 Editor from "@/components/Editor.vue"; // @ is an alias to /src
+import TuiEditor from "@/components/TUIEditor.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: {
-    Editor,
+    TuiEditor,
     NavBar
   }
 })