Merge branch 'master' of github.com:doocs/md into feature-code-snippet

package.json

@@ -1,6 +1,6 @@
 {
     "name": "vue-md",
-    "version": "1.3.4",
+    "version": "1.3.5",
     "private": true,
     "homepage": "https://doocs.gitee.io/md",
     "scripts": {

src/assets/less/codeTheme/github-code-block.less

@@ -5,7 +5,7 @@
     margin: 10px 8px;
     position: relative; 
     height: auto;
-    background-color: rgb(238, 238, 238);
+    background-color: rgba(27,31,35,.05);
 
     .code-snippet__line-index {
         display: none;

src/components/CodemirrorEditor/rightClickMenu.vue

@@ -1,12 +1,12 @@
 <template>
     <ul v-show="value"  id="menu" class="menu" :style="`left: ${left}px;top: ${top}px;`">
-        <li v-for="item of list" :key="item.key" class="menu_item">
+        <li v-for="item of list" :key="item.key" class="menu_item" @mousedown="onMouseDown(item.key)">
             <el-upload v-if="item.key === 'insertPic'" action="" class="li__upload"
                 :show-file-list="false" :multiple="true" accept=".jpg,.jpeg,.png,.gif" name="file"
                 :before-upload="beforeUpload">
-                <span>{{item.text}}</span>
+                <button class="btn-upload">{{item.text}}</button>
             </el-upload>
-            <span v-else @click="$emit('menuTick', item.key)">{{item.text}}</span>
+            <span v-else>{{item.text}}</span>
         </li>
     </ul>
 </template>
@@ -70,14 +70,13 @@ export default {
             });
             return false;
         },
-    },
-    watch: {
-        value(newVal) {
-            if (newVal) {
-                document.body.addEventListener('click', this.closeCB.bind(this));
+        onMouseDown(key){
+            if (key == 'insertPic') {
+                document.querySelector('.li__upload button').click()
             } else {
-                document.body.removeEventListener('click', this.closeCB.bind(this));
+                this.$emit('menuTick', key)
             }
+           this.$emit('closeMenu', false)
         }
     },
 }
@@ -107,12 +106,22 @@ export default {
         color: white;
         background: rgb(139, 146, 148);
     }
-    span {
+    span,.btn-upload {
         text-align: center;
         display: inline-block;
         padding: 4px 0;
         width: 100%;
     }
+    .btn-upload {
+        margin: 0;
+        border:none;
+        outline: none;
+        background: transparent;
+    }
+    .btn-upload:hover {
+        color: white;
+        background: rgb(139, 146, 148);
+    }
     /deep/ .el-upload {
         width: 100%;
     }

src/store/index.js

@@ -24,7 +24,8 @@ const state = {
     currentColor: '',
     citeStatus: 0,
     nightMode: false,
-    codeTheme: 'wechat'
+    codeTheme: 'wechat',
+    rightClickMenuVisible: false
 };
 const mutations = {
     setEditorValue(state, data) {
@@ -54,7 +55,10 @@ const mutations = {
     },
     setCurrentCodeTheme(state, data) {
         state.codeTheme = data;
-        localStorage.setItem('codeTheme', data);
+        localStorage.setItem('codeTheme', data)
+    },
+    setRightClickMenuVisible(state, data) {
+        state.rightClickMenuVisible = data;
     },
     themeChanged(state) {
         state.nightMode = !state.nightMode;
@@ -74,8 +78,7 @@ const mutations = {
     },
     initEditorEntity(state) {
         state.editor = CodeMirror.fromTextArea(
-            document.getElementById('editor'),
-            {
+            document.getElementById('editor'), {
                 value: '',
                 mode: 'text/x-markdown',
                 theme: 'xq-light',
@@ -92,18 +95,13 @@ const mutations = {
                 }
             }
         )
+        
         // 如果有编辑器内容被保存则读取，否则加载默认内容
-        if (localStorage.getItem('__editor_content')) {
-            state.editor.setValue(localStorage.getItem('__editor_content'))
-        } else {
-            const doc = formatDoc(DEFAULT_CONTENT)
-            state.editor.setValue(doc)
-        }
+        state.editor.setValue(localStorage.getItem('__editor_content') || formatDoc(DEFAULT_CONTENT))
     },
     initCssEditorEntity(state) {
         state.cssEditor = CodeMirror.fromTextArea(
-            document.getElementById('cssEditor'),
-            {
+            document.getElementById('cssEditor'), {
                 value: '',
                 mode: 'css',
                 theme: 'style-mirror',
@@ -114,7 +112,6 @@ const mutations = {
                 extraKeys: {
                     'Ctrl-F': function autoFormat(editor) {
                         const totalLines = editor.lineCount()
-
                         editor.autoFormatRange({
                             line: 0,
                             ch: 0
@@ -127,11 +124,7 @@ const mutations = {
         )
 
         // 如果有编辑器内容被保存则读取，否则加载默认内容
-        if (localStorage.getItem('__css_content')) {
-            state.cssEditor.setValue(localStorage.getItem('__css_content'))
-        } else {
-            state.cssEditor.setValue(DEFAULT_CSS_CONTENT)
-        }
+        state.cssEditor.setValue(localStorage.getItem('__css_content') || DEFAULT_CSS_CONTENT)
     },
     editorRefresh(state) {
         let output = marked(state.editor.getValue(0), {

src/view/CodemirrorEditor.vue

@@ -57,6 +57,7 @@
             :left="mouseLeft"
             :top="mouseTop"
             @menuTick="onMenuEvent"
+            @closeMenu="closeRightClickMenu"
         />
     </div>
 </template>
@@ -82,7 +83,6 @@ export default {
             showCssEditor: false,
             aboutDialogVisible: false,
             dialogFormVisible: false,
-            rightClickMenuVisible: false,
             isCoping: false,
             isImgLoading: false,
             backLight: false,
@@ -107,7 +107,8 @@ export default {
             cssEditor: state=> state.cssEditor,
             currentSize: state=> state.currentSize,
             currentColor: state=> state.currentColor,
-            nightMode: state=> state.nightMode
+            nightMode: state=> state.nightMode,
+            rightClickMenuVisible: state=> state.rightClickMenuVisible
         })
     },
     created() {
@@ -158,6 +159,18 @@ export default {
                     }
                 }
             });
+
+            this.editor.on('mousedown', () => {
+                this.$store.commit('setRightClickMenuVisible', false);
+            });
+            this.editor.on('blur', () => {
+                //!影响到右键菜单的点击事件，右键菜单的点击事件在组件内通过mousedown触发
+                this.$store.commit('setRightClickMenuVisible', false);   
+            });
+            this.editor.on('scroll', () => {
+                this.$store.commit('setRightClickMenuVisible', false);
+            });
+
         },
         initCssEditor() {
             this.initCssEditorEntity();
@@ -267,7 +280,10 @@ export default {
             const left = e.clientX - offsetLeft;
             this.mouseLeft = Math.min(maxLeft, left);
             this.mouseTop = e.clientY + 10;
-            this.rightClickMenuVisible = true;
+            this.$store.commit('setRightClickMenuVisible', true);
+        },
+        closeRightClickMenu(){
+            this.$store.commit('setRightClickMenuVisible', false);
         },
         onMenuEvent(type, info = {}) {
             switch (type) {