feat: auto format markdown text(Ctrl-F)

按 Ctrl-F 自动格式化 Markdown 文章

package.json

@@ -18,6 +18,7 @@
     "juice": "^6.0.0",
     "markdown": "^0.5.0",
     "marked": "^0.8.0",
+    "prettier": "^2.0.5",
     "prettify": "^0.1.7",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3",

src/store/index.js

@@ -3,6 +3,8 @@ import Vuex from 'vuex'
 import config from '../scripts/config';
 import WxRenderer from '../scripts/renderers/wx-renderer'
 import marked from 'marked'
+import prettier from 'prettier/standalone'
+import prettierMarkdown from 'prettier/parser-markdown'
 import CodeMirror from 'codemirror/lib/codemirror'
 import DEFAULT_CONTENT from '../scripts/default-content'
 import DEFAULT_CSS_CONTENT from '../scripts/themes/default-theme-css'
@@ -78,7 +80,17 @@ const mutations = {
                 lineNumbers: false,
                 lineWrapping: true,
                 styleActiveLine: true,
-                autoCloseBrackets: true
+                autoCloseBrackets: true,
+                extraKeys: {
+                    'Ctrl-F': function autoFormat(editor) {
+                        const doc = prettier.format(editor.getValue(0), {
+                            parser: 'markdown',
+                            plugins: [prettierMarkdown]
+                        })
+                        localStorage.setItem('__editor_content', doc)
+                        editor.setValue(doc)
+                    }
+                }
             }
         )
         // 如果有编辑器内容被保存则读取，否则加载默认内容
@@ -90,7 +102,8 @@ const mutations = {
     },
     initCssEditorEntity(state) {
         state.cssEditor = CodeMirror.fromTextArea(
-            document.getElementById('cssEditor'), {
+            document.getElementById('cssEditor'),
+            {
                 value: '',
                 mode: 'css',
                 theme: 'style-mirror',