improvement: content中markdown语法隐藏，开头退格删除markdown语法，markdown语法匹配后光标位置维持

src/components/editor/EditableItem.vue

@@ -8,8 +8,8 @@
     @input.stop="handleInput"
     @keydown.stop="handleKeyDown"
     contenteditable
-    v-html="item.content"
-    :class="item.content ? '' : 'placeholder'"
+    v-html="contentForShow"
+    :class="contentForShow ? '' : 'placeholder'"
     :placeholder="item.placeholder"
   >
   </component>
@@ -25,13 +25,19 @@ import {
   SET_FOCUS_BEFORE,
   SET_FOCUS
 } from '../../store/types/editor-types'
+import defaultPlaceholder from '../../utils/default-placeholder'
+import defaultMarkdownFagment from '../../utils/default-markdown-fagment'
 export default {
   name: 'editable-item',
   props: ['item', 'pageId'],
   data: function() {
     return {
       isCompositionStarted: false,
-      range: null
+      range: null,
+      contentForShow:
+        this.item.type === 'div'
+          ? this.item.content
+          : this.item.content.replace(blockTypeRegs[this.item.type], '')
     }
   },
   methods: {
@@ -59,7 +65,32 @@ export default {
                 pageId: this.pageId,
                 itemId: this.item.id
               })
+              break
             }
+
+            this.range = window.getSelection().getRangeAt(0)
+            const offset = this.range.startOffset
+
+            if (
+              offset === 0 &&
+              this.range.collapsed &&
+              this.item.type !== 'div'
+            ) {
+              this.$store.commit(MODIFY_ITEM, {
+                pageId: this.pageId,
+                itemId: this.item.id,
+                diff: {
+                  type: 'div',
+                  placeholder: defaultPlaceholder['div'],
+                  content: this.contentForShow
+                }
+              })
+              this.$store.commit(SET_FOCUS, {
+                focusItemId: this.item.id,
+                focusItemOffset: offset
+              })
+            }
+
             break
 
           case 'ArrowUp':
@@ -92,13 +123,16 @@ export default {
       !this.isCompositionStarted && this.handleInputValue(e)
     },
     handleInputValue(e) {
-      const diff = { content: e.target.textContent }
+      const diff = {
+        content: defaultMarkdownFagment[this.item.type] + e.target.textContent
+      }
       this.item.type === 'div' &&
         Object.entries(blockTypeRegs)
           .map(array => ({ tagName: array[0], reg: array[1] }))
           .some(({ tagName, reg }) => {
             if (reg.test(e.target.textContent)) {
               diff.type = tagName
+              diff.placeholder = defaultPlaceholder[tagName]
             }
           })
 
@@ -134,14 +168,9 @@ export default {
     background: #f9fafc;
   }
 
-  &:empty:focus:before {
+  &:empty:before {
     content: attr(placeholder);
     color: #bbb;
   }
 }
-
-h1:empty:before {
-  content: attr(placeholder);
-  color: #bbb;
-}
 </style>

src/components/editor/Editor.vue

@@ -3,7 +3,7 @@
     <template v-for="page in pages">
       <editing-page-vue :key="page.id" :page="page"></editing-page-vue>
     </template>
-    <div>{{ focus }}</div>
+    <div v-show="false">{{ focus }}</div>
   </div>
 </template>
 

src/store/modules/editor.js

@@ -30,8 +30,8 @@ export default {
         items: [{
           id: newItemId,
           type: 'h1',
-          placeholder: '未命名文档标题',
-          content: ''
+          placeholder: '未编辑文档标题',
+          content: '# '
         }]
       }]
       state.focus = {
@@ -49,7 +49,7 @@ export default {
           items: [{
             id: uuid.v4(),
             type: 'h3',
-            placeholder: '未命名小标题',
+            placeholder: '未编辑小标题',
             content: ''
           }, ...state.pages.slice(index + 1)]
         }

src/utils/default-markdown-fagment.js

@@ -0,0 +1,13 @@
+const defaultMarkdownFagment = {}
+defaultMarkdownFagment.div = ''
+defaultMarkdownFagment.h1 = '# '
+defaultMarkdownFagment.h2 = '## '
+defaultMarkdownFagment.h3 = '### '
+defaultMarkdownFagment.h4 = '#### '
+defaultMarkdownFagment.h5 = '#####'
+defaultMarkdownFagment.h6 = '######'
+defaultMarkdownFagment.blockquote = '> '
+defaultMarkdownFagment.ol = '1. '
+defaultMarkdownFagment.ul = '- '
+
+export default defaultMarkdownFagment

src/utils/default-placeholder.js

@@ -0,0 +1,13 @@
+const defaultPlaceholder = {}
+defaultPlaceholder.div = '未编辑正文项'
+defaultPlaceholder.h1 = '未编辑标题'
+defaultPlaceholder.h2 = '未编辑标题'
+defaultPlaceholder.h3 = '未编辑小标题'
+defaultPlaceholder.h4 = '未编辑小标题'
+defaultPlaceholder.h5 = '未编辑小标题'
+defaultPlaceholder.h6 = '未编辑小标题'
+defaultPlaceholder.blockquote = '未编辑引用项'
+defaultPlaceholder.ol = '未编辑有序列表'
+defaultPlaceholder.ul = '未编辑无序列表'
+
+export default defaultPlaceholder