Merge branch 'master' of github.com:doocs/md

.eslintrc.js

@@ -16,8 +16,7 @@ module.exports = {
     parserOptions: {
         parser: 'babel-eslint'
     },
-  overrides: [
+    overrides: [{
-    {
         files: [
             '**/__tests__/*.{j,t}s?(x)',
             '**/tests/unit/**/*.spec.{j,t}s?(x)'
@@ -25,6 +24,5 @@ module.exports = {
         env: {
             jest: true
         }
-    }
+    }]
-  ]
 }

README.md

@@ -43,6 +43,9 @@ Markdown 文档自动即时渲染为微信图文，让你不再为微信文章
 - [x] 支持自定义 CSS 样式并实时渲染
 - [x] 支持一键恢复至默认内容及样式
 - [x] 支持打开或关闭引用链接的选项
+- [ ] 支持在编辑框右键弹出功能选项卡
+- [ ] 支持更加人性化的插入表格功能
+
 
 ![select-and-change-color-theme](https://imgkr.cn-bj.ufileos.com/32c05c23-6309-491f-bd0d-f22a62c944b4.gif)
 

public/assets/css/app.css

@@ -4,11 +4,18 @@
     padding: 0;
 }
 
-input, button, textarea {
+input,
+button,
+textarea {
     font-family: inherit;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     font-weight: normal;
 }
 
@@ -16,7 +23,8 @@ em {
     font-style: normal !important;
 }
 
-html, body {
+html,
+body {
     height: 100%;
     font-family: 'PingFang SC', BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
 }
@@ -112,6 +120,7 @@ section {
     display: table;
     width: 100% !important;
 }
+
 /* 
 .preview table tr:nth-child(even){
   background: rgb(250, 250, 250);
@@ -146,7 +155,8 @@ section {
 }
 
 /*wechat code block*/
-.rich_media_content .code-snippet *, .rich_media_content .code-snippet__fix * {
+.rich_media_content .code-snippet *,
+.rich_media_content .code-snippet__fix * {
     max-width: 1000% !important;
 }
 
@@ -228,7 +238,8 @@ section {
     outline: none;
 }
 
-.CodeMirror-scroll, .preview-wrapper {
+.CodeMirror-scroll,
+.preview-wrapper {
     overflow: unset;
     overflow-y: scroll;
 }

public/assets/css/style-mirror.css

@@ -15,32 +15,40 @@
     padding: 20px;
     line-height: 25px;
 }
+
 .cm-s-style-mirror div.CodeMirror-selected {
     background: #e0e0e0;
 }
+
 .cm-s-style-mirror .CodeMirror-line::selection,
 .cm-s-style-mirror .CodeMirror-line>span::selection,
 .cm-s-style-mirror .CodeMirror-line>span>span::selection {
     background: #e0e0e0;
 }
+
 .cm-s-style-mirror .CodeMirror-line::-moz-selection,
 .cm-s-style-mirror .CodeMirror-line>span::-moz-selection,
 .cm-s-style-mirror .CodeMirror-line>span>span::-moz-selection {
     background: #e0e0e0;
 }
+
 .cm-s-style-mirror .CodeMirror-gutters {
     background: #f5f5f5;
     border-right: 0px;
 }
+
 .cm-s-style-mirror .CodeMirror-guttermarker {
     color: #ac4142;
 }
+
 .cm-s-style-mirror .CodeMirror-guttermarker-subtle {
     color: #b0b0b0;
 }
+
 .cm-s-style-mirror .CodeMirror-linenumber {
     color: #b0b0b0;
 }
+
 .cm-s-style-mirror .CodeMirror-cursor {
     border-left: 1px solid #505050;
 }
@@ -48,9 +56,11 @@
 .cm-s-style-mirror span.cm-comment {
     color: green;
 }
+
 .cm-s-style-mirror span.cm-atom {
     color: #aa759f;
 }
+
 .cm-s-style-mirror span.cm-number {
     color: #aa759f;
 }
@@ -59,9 +69,11 @@
 .cm-s-style-mirror span.cm-attribute {
     color: #90a959;
 }
+
 .cm-s-style-mirror span.cm-keyword {
     color: #023a52;
 }
+
 .cm-s-style-mirror span.cm-string {
     color: #e46918;
 }
@@ -69,24 +81,31 @@
 .cm-s-style-mirror span.cm-variable {
     color: #90a959;
 }
+
 .cm-s-style-mirror span.cm-variable-2 {
     color: #00695f;
 }
+
 .cm-s-style-mirror span.cm-variable-3 {
     color: #2e6e8a;
 }
+
 .cm-s-style-mirror span.cm-def {
     color: #d28445;
 }
+
 .cm-s-style-mirror span.cm-bracket {
     color: #202020;
 }
+
 .cm-s-style-mirror span.cm-tag {
     color: #000;
 }
+
 .cm-s-style-mirror span.cm-link {
     color: #b26a00;
 }
+
 .cm-s-style-mirror span.cm-error {
     /* background: #ac4142;
     color: #f5f5f5; */
@@ -94,11 +113,12 @@
     text-decoration-style: wavy;
     text-decoration-color: #df8d8e;
 }
+
 .cm-s-style-mirror .CodeMirror-activeline-background {
     background: #dddcdc;
 }
+
 .cm-s-style-mirror .CodeMirror-matchingbracket {
     color: rgb(32, 32, 32) !important;
     background-color: rgba(0, 0, 0, 0.1) !important;
 }
-  

public/index.html

@@ -1,32 +1,4 @@
 <!DOCTYPE html>
-<!--
-                              _.._        ,------------.
-                           ,'      `.    ( 你终于发现我啦 )
-                          /  __) __` \    `-,----------'
-                         (  (`-`(-')  ) _.-'
-                         /)  \  = /  (
-                        /'    |--' .  \
-                       (  ,---|  `-.)__`
-                        )(  `-.,--'   _`-.
-                       '/,'          (  Uu",
-                        (_       ,    `/,-' )
-                        `.__,  : `-'/  /`--'
-                          |     `--'  |
-                          `   `-._   /
-                           \        (
-                           /\ .      \.  
-                          / |` \     ,-\
-                         /  \| .)   /   \
-                        ( ,'|\    ,'     :
-                        | \,`.`--"/      }
-                        `,'    \  |,'    /
-                       / "-._   `-/      |
-                       "-.   "-.,'|     ;
-                      /        _/["---'""]
-                     :        /  |"-     '
-                     '           |      /
-                                 `      |
--->
 <html lang="en">
 
 <head>
@@ -38,7 +10,8 @@
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <title>微信 Markdown 编辑器</title>
     <link rel="shortcut icon" href="https://imgkr.cn-bj.ufileos.com/f3accc83-b854-4e99-afb5-8a6465e1d84f.png">
-  <link rel="apple-touch-icon-precomposed" href="https://imgkr.cn-bj.ufileos.com/f3accc83-b854-4e99-afb5-8a6465e1d84f.png">
+    <link rel="apple-touch-icon-precomposed"
+        href="https://imgkr.cn-bj.ufileos.com/f3accc83-b854-4e99-afb5-8a6465e1d84f.png">
     <link rel="stylesheet" href="assets/css/loading.css">
     <link rel="stylesheet" href="libs/css/index.css">
     <link rel="stylesheet" href="libs/css/code-themes/github-v2.min.css">

public/libs/css/style-mirror.css

@@ -15,32 +15,40 @@
     padding: 20px;
     line-height: 25px;
 }
+
 .cm-s-style-mirror div.CodeMirror-selected {
     background: #e0e0e0;
 }
+
 .cm-s-style-mirror .CodeMirror-line::selection,
 .cm-s-style-mirror .CodeMirror-line>span::selection,
 .cm-s-style-mirror .CodeMirror-line>span>span::selection {
     background: #e0e0e0;
 }
+
 .cm-s-style-mirror .CodeMirror-line::-moz-selection,
 .cm-s-style-mirror .CodeMirror-line>span::-moz-selection,
 .cm-s-style-mirror .CodeMirror-line>span>span::-moz-selection {
     background: #e0e0e0;
 }
+
 .cm-s-style-mirror .CodeMirror-gutters {
     background: #f5f5f5;
     border-right: 0px;
 }
+
 .cm-s-style-mirror .CodeMirror-guttermarker {
     color: #ac4142;
 }
+
 .cm-s-style-mirror .CodeMirror-guttermarker-subtle {
     color: #b0b0b0;
 }
+
 .cm-s-style-mirror .CodeMirror-linenumber {
     color: #b0b0b0;
 }
+
 .cm-s-style-mirror .CodeMirror-cursor {
     border-left: 1px solid #505050;
 }
@@ -48,9 +56,11 @@
 .cm-s-style-mirror span.cm-comment {
     color: green;
 }
+
 .cm-s-style-mirror span.cm-atom {
     color: #aa759f;
 }
+
 .cm-s-style-mirror span.cm-number {
     color: #aa759f;
 }
@@ -59,9 +69,11 @@
 .cm-s-style-mirror span.cm-attribute {
     color: #90a959;
 }
+
 .cm-s-style-mirror span.cm-keyword {
     color: #023a52;
 }
+
 .cm-s-style-mirror span.cm-string {
     color: #e46918;
 }
@@ -69,24 +81,31 @@
 .cm-s-style-mirror span.cm-variable {
     color: #90a959;
 }
+
 .cm-s-style-mirror span.cm-variable-2 {
     color: #00695f;
 }
+
 .cm-s-style-mirror span.cm-variable-3 {
     color: #2e6e8a;
 }
+
 .cm-s-style-mirror span.cm-def {
     color: #d28445;
 }
+
 .cm-s-style-mirror span.cm-bracket {
     color: #202020;
 }
+
 .cm-s-style-mirror span.cm-tag {
     color: #000;
 }
+
 .cm-s-style-mirror span.cm-link {
     color: #b26a00;
 }
+
 .cm-s-style-mirror span.cm-error {
     /* background: #ac4142;
     color: #f5f5f5; */
@@ -94,11 +113,12 @@
     text-decoration-style: wavy;
     text-decoration-color: #df8d8e;
 }
+
 .cm-s-style-mirror .CodeMirror-activeline-background {
     background: #dddcdc;
 }
+
 .cm-s-style-mirror .CodeMirror-matchingbracket {
     color: rgb(32, 32, 32) !important;
     background-color: rgba(0, 0, 0, 0.1) !important;
 }
-  

src/App.vue

@@ -21,9 +21,6 @@ export default {
         setTimeout(() => {
             this.loading = false
         }, 200)
-        window.console &&
-            window.console.log &&
-            (console.log("Think big, train fast, learn deep. See https://github.com/yanglbme"))
     }
 }
 

src/api/fetch.js

@@ -20,11 +20,7 @@ service.interceptors.request.use(
 );
 
 service.interceptors.response.use(res => {
-    if (res.data.success) {
+    return res.data.success ? res.data : Promise.reject(res.data);
-        return res.data;
-    }
-    console.log(res);
-    return Promise.reject(res.data);
 }, error => Promise.reject(error));
 
 export default service;

src/components/Loading.vue

@@ -11,6 +11,7 @@
     export default {
 
     }
+
 </script>
 
 <style scoped>

src/scripts/closebrackets.js

@@ -29,7 +29,11 @@ import CodeMirror from "codemirror/lib/codemirror";
         return defaults[name];
     }
 
-  var keyMap = { Backspace: handleBackspace, Enter: handleEnter };
+    var keyMap = {
+        Backspace: handleBackspace,
+        Enter: handleEnter
+    };
+
     function ensureBound(chars) {
         for (var i = 0; i < chars.length; i++) {
             var ch = chars.charAt(i),

src/scripts/config.js

@@ -1,6 +1,5 @@
 export default {
-    builtinFonts: [
+    builtinFonts: [{
-        {
             label: '无衬线',
             value: '-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif'
         },
@@ -9,8 +8,7 @@ export default {
             value: "Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif"
         }
     ],
-    sizeOption: [
+    sizeOption: [{
-        {
             label: '12px',
             value: '12px',
             desc: '更小'
@@ -36,8 +34,7 @@ export default {
             desc: '更大'
         }
     ],
-    colorOption: [
+    colorOption: [{
-        {
             label: '经典蓝',
             value: 'rgba(15, 76, 129, 1)',
             hex: '最新流行'

src/scripts/converter.js

@@ -18,8 +18,7 @@ export function solveHtml(nightMode = false) {
     let html = element.innerHTML
     let res = "";
     res = juice.inlineContent(
-    html,
+        html, {
-    {
             inlinePseudoElements: true,
             preserveImportant: true
         }

src/scripts/format.js

@@ -10,13 +10,16 @@ import CodeMirror from "codemirror/lib/codemirror";
 
     // Comment/uncomment the specified range
     CodeMirror.defineExtension('commentRange', function (isComment, from, to) {
-    var cm = this; var curMode = CodeMirror.innerMode(cm.getMode(), cm.getTokenAt(from).state).mode
+        var cm = this;
+        var curMode = CodeMirror.innerMode(cm.getMode(), cm.getTokenAt(from).state).mode
         cm.operation(function () {
             if (isComment) { // Comment range
                 cm.replaceRange(curMode.commentEnd, to)
                 cm.replaceRange(curMode.commentStart, from)
                 if (from.line == to.line && from.ch == to.ch) // An empty comment inserted - put cursor inside
-        { cm.setCursor(from.line, from.ch + curMode.commentStart.length) }
+                {
+                    cm.setCursor(from.line, from.ch + curMode.commentStart.length)
+                }
             } else { // Uncomment range
                 var selText = cm.getRange(from, to)
                 var startIndex = selText.indexOf(curMode.commentStart)
@@ -47,11 +50,15 @@ import CodeMirror from "codemirror/lib/codemirror";
     // Applies automatic formatting to the specified range
     CodeMirror.defineExtension('autoFormatRange', function (from, to) {
         var cm = this
-    var outer = cm.getMode(); var text = cm.getRange(from, to).split('\n')
+        var outer = cm.getMode();
+        var text = cm.getRange(from, to).split('\n')
         var state = CodeMirror.copyState(outer, cm.getTokenAt(from).state)
         var tabSize = cm.getOption('tabSize')
 
-    var out = ''; var lines = 0; var atSol = from.ch == 0
+        var out = '';
+        var lines = 0;
+        var atSol = from.ch == 0
+
         function newline() {
             out += '\n'
             atSol = true
@@ -62,14 +69,17 @@ import CodeMirror from "codemirror/lib/codemirror";
             var stream = new CodeMirror.StringStream(text[i], tabSize)
             while (!stream.eol()) {
                 var inner = CodeMirror.innerMode(outer, state)
-        var style = outer.token(stream, state); var cur = stream.current()
+                var style = outer.token(stream, state);
+                var cur = stream.current()
                 stream.start = stream.pos
                 if (!atSol || /\S/.test(cur)) {
                     out += cur
                     atSol = false
                 }
                 if (!atSol && inner.mode.newlineAfterToken &&
-              inner.mode.newlineAfterToken(style, cur, stream.string.slice(stream.pos) || text[i + 1] || '', inner.state)) { newline() }
+                    inner.mode.newlineAfterToken(style, cur, stream.string.slice(stream.pos) || text[i + 1] || '', inner.state)) {
+                    newline()
+                }
             }
             if (!stream.pos && outer.blankLine) outer.blankLine(state)
             if (!atSol) newline()
@@ -77,7 +87,9 @@ import CodeMirror from "codemirror/lib/codemirror";
 
         cm.operation(function () {
             cm.replaceRange(out, from, to)
-      for (var cur = from.line + 1, end = from.line + lines; cur <= end; ++cur) { cm.indentLine(cur, 'smart') }
+            for (var cur = from.line + 1, end = from.line + lines; cur <= end; ++cur) {
+                cm.indentLine(cur, 'smart')
+            }
             cm.setSelection(from, cm.getCursor(false))
         })
     })

src/scripts/util.js

@@ -99,6 +99,7 @@ export function customCssWithTemplate (jsonString, color, theme) {
  */
 export function css2json(css) {
     // 移除CSS所有注释
+    let open, close;
     while (
         (open = css.indexOf('/*')) !== -1 &&
         (close = css.indexOf('*/')) !== -1

src/view/CodemirrorEditor.vue

@@ -14,7 +14,7 @@
                 />
             </el-header>
             <el-main class="main-body">
-                <el-row :gutter="10" class="main-section">
+                <el-row class="main-section">
                     <el-col :span="12">
                         <textarea id="editor" type="textarea" placeholder="Your markdown text here." v-model="source">
                         </textarea>