feat: add tabSize prop

Author: code-farmer-i

dev/main.js

@@ -6,6 +6,14 @@ import VueMarkdownEditor from '@/codemirror-editor';
 import Codemirror from 'codemirror';
 // mode
 import 'codemirror/mode/markdown/markdown';
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/css/css';
+import 'codemirror/mode/htmlmixed/htmlmixed';
+import 'codemirror/mode/vue/vue';
+// edit
+import 'codemirror/addon/edit/closebrackets';
+import 'codemirror/addon/edit/closetag';
+import 'codemirror/addon/edit/matchbrackets';
 // placeholder
 import 'codemirror/addon/display/placeholder';
 // active-line

src/assets/css/theme/vuepress-markdown.css

@@ -9,9 +9,6 @@
   word-wrap: normal;
   word-break: normal;
   word-spacing: normal;
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
   -webkit-hyphens: none;
   -ms-hyphens: none;
   hyphens: none;

src/base-editor.vue

@@ -41,6 +41,7 @@
     >
       <v-md-preview
         :text="text"
+        :tab-size="tabSize"
         :scroll-container="getPreviewScrollContainer"
         @change="handleChange"
         ref="preview"
@@ -73,7 +74,7 @@ const component = {
       this.setFocusEnd();
     },
     // Must implement
-    editorFocusEnd () {
+    editorFocusEnd() {
       this.focus();
 
       this.$refs.editorEgine.setRange({
@@ -82,7 +83,7 @@ const component = {
       });
     },
     // Must implement
-    delLineLeft () {
+    delLineLeft() {
       const { editorEgine } = this.$refs;
       const { start } = editorEgine.getRange();
 
@@ -91,25 +92,25 @@ const component = {
       this.replaceSelectionText('\n');
     },
     // Must implement
-    getCursorLineLeftText () {
+    getCursorLineLeftText() {
       const { start, end } = this.$refs.editorEgine.getRange();
 
       return start === end ? this.text.slice(0, start).split('\n').pop() : null;
     },
     // Must implement
-    editorRegisterHotkeys (...arg) {
+    editorRegisterHotkeys(...arg) {
       this.$refs.editorEgine.registerHotkeys(...arg);
     },
     // Must implement
-    editorScrollToTop (scrollTop) {
+    editorScrollToTop(scrollTop) {
       this.$refs.editorScroller.scrollTo(scrollTop);
     },
     // Must implement
-    getScrollInfo () {
+    getScrollInfo() {
       return this.$refs.editorScroller.getScrollInfo();
     },
     // Must implement
-    heightAtLine (...arg) {
+    heightAtLine(...arg) {
       return this.$refs.editorEgine.heightAtLine(...arg);
     },
     // Must implement
@@ -135,7 +136,7 @@ const component = {
       this.$refs.editorEgine.insertText(text);
     },
     // Must implement
-    getCurrentSelectedStr () {
+    getCurrentSelectedStr() {
       const { start, end } = this.$refs.editorEgine.getRange();
 
       return end > start ? this.text.slice(start, end) : null;

src/codemirror-editor.vue

@@ -34,6 +34,7 @@
     >
       <v-md-preview
         :text="text"
+        :tab-size="tabSize"
         :scroll-container="getPreviewScrollContainer"
         @change="handleChange"
         ref="preview"
@@ -84,15 +85,20 @@ const component = {
     }
 
     this.codemirrorInstance = new this.Codemirror(this.$refs.codemirrorEditor, {
-      tabSize: 2,
       lineNumbers: true,
       styleActiveLine: true,
+      autoCloseTags: true,
+      matchBrackets: true,
+      indentWithTabs: true,
+      autoCloseBrackets: true,
+      ...this.codemirrorConfig,
+      tabSize: this.tabSize,
+      indentUnit: this.tabSize,
       value: this.text,
       placeholder: this.placeholder,
       mode: 'markdown',
-      lineWrapping: 'wrap',
+      lineWrapping: true,
       scrollbarStyle: 'overlay',
-      ...this.codemirrorConfig,
     });
 
     this.codemirrorInstance.on('change', () => {

src/mixins/common.js

@@ -31,6 +31,10 @@ export default {
     },
     autofocus: Boolean,
     placeholder: String,
+    tabSize: {
+      type: Number,
+      default: 2,
+    },
   },
   data() {
     return {

src/mixins/hotkeys.js

@@ -19,8 +19,13 @@ export default function (Component) {
       });
     },
     methods: {
-      registerHotkeys({ modifier, key, action }) {
-        this.editorRegisterHotkeys({ modifier, key, action: (...arg) => action(this, ...arg) });
+      registerHotkeys({ modifier, key, action, preventDefault = true }) {
+        this.editorRegisterHotkeys({
+          modifier,
+          key,
+          preventDefault,
+          action: (...arg) => action(this, ...arg),
+        });
       },
     },
   };

src/mixins/list.js

@@ -10,6 +10,7 @@ export default {
 
     this.registerHotkeys({
       key: 'enter',
+      preventDefault: false,
       action: (editor, e) => {
         if (e.isComposing) return;
 
@@ -20,11 +21,14 @@ export default {
         if (ol.test(cursorLineLeftText)) {
           suffix = 'x. ';
           syntax = olSyntax;
+
+          e.preventDefault();
         } else if (ul.test(cursorLineLeftText)) {
           suffix = '- ';
           syntax = ulSyntax;
+
+          e.preventDefault();
         } else {
-          this.replaceSelectionText('\n', 'end');
           return;
         }
 
@@ -39,10 +43,6 @@ export default {
           }
 
           this.replaceSelectionText(`\n${beforeText}`, 'end');
-        } else {
-          // break
-          this.delLineLeft();
-          this.replaceSelectionText('\n', 'end');
         }
       },
     });

src/mixins/preview.js

@@ -13,6 +13,10 @@ export default {
       type: Number,
       default: 0,
     },
+    tabSize: {
+      type: Number,
+      default: 2,
+    },
   },
   components: {
     [ImagePreview.name]: ImagePreview,

src/preview-html.vue

@@ -1,6 +1,11 @@
 <template>
   <div
     class="v-md-editor-preview"
+    :style="{
+      tabSize,
+      '-moz-tab-size': tabSize,
+      '-o-tab-size': tabSize
+    }"
     @click="handlePreviewClick"
   >
     <div

src/preview.vue

@@ -1,6 +1,11 @@
 <template>
   <div
     class="v-md-editor-preview"
+    :style="{
+      tabSize,
+      '-moz-tab-size': tabSize,
+      '-o-tab-size': tabSize
+    }"
     @click="handlePreviewClick"
   >
     <div