chore: update formatter

package-lock.json

@@ -2215,17 +2215,6 @@
             "unique-filename": "^1.1.1"
           }
         },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz",
-          "integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
         "cliui": {
           "version": "6.0.0",
           "resolved": "https://registry.npm.taobao.org/cliui/download/cliui-6.0.0.tgz?cache=0&sync_timestamp=1604880033053&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcliui%2Fdownload%2Fcliui-6.0.0.tgz",
@@ -2298,18 +2287,6 @@
             "supports-color": "^7.0.0"
           }
         },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
-          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npm.taobao.org/locate-path/download/locate-path-5.0.0.tgz",
@@ -2394,18 +2371,6 @@
             "webpack-sources": "^1.4.3"
           }
         },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.1.0",
-          "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.1.0.tgz?cache=0&sync_timestamp=1606702144322&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.1.0.tgz",
-          "integrity": "sha1-5FRKv2XLs7gfPVNg2Vo+Kug3SaE=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
-        },
         "wrap-ansi": {
           "version": "6.2.0",
           "resolved": "https://registry.npm.taobao.org/wrap-ansi/download/wrap-ansi-6.2.0.tgz",
@@ -15415,6 +15380,87 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.1.0",
+      "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.1.0.tgz?cache=0&sync_timestamp=1606702187774&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.1.0.tgz",
+      "integrity": "sha1-5FRKv2XLs7gfPVNg2Vo+Kug3SaE=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1606792395101&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
+          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz",
+          "integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
+          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
+          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz",
+          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
+          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1606205011199&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
+          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-router": {
       "version": "3.4.9",
       "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.4.9.tgz?cache=0&sync_timestamp=1605950355808&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.4.9.tgz",

src/api/file.js

@@ -9,16 +9,26 @@ import * as qiniu from "qiniu-js";
 import { utf16to8, base64encode, safe64 } from "../assets/scripts/tokenTools";
 
 function getConfig(useDefault, platform) {
-    const config = platform === "github" ? githubConfig : giteeConfig;
     if (useDefault) {
+        // load default config file
+        const config = platform === "github" ? githubConfig : giteeConfig;
         const { username, repoList, branch, accessTokenList } = config;
+
+        // choose random token from access_token list
         const tokenIndex = Math.floor(Math.random() * accessTokenList.length);
-        const repoIndex = Math.floor(Math.random() * repoList.length);
         const accessToken = accessTokenList[tokenIndex].replace("doocsmd", "");
+
+        // choose random repo from repo list
+        const repoIndex = Math.floor(Math.random() * repoList.length);
         const repo = repoList[repoIndex];
+
         return { username, repo, branch, accessToken };
     }
+
+    // load configuration from localStorage
     const customConfig = JSON.parse(localStorage.getItem(`${platform}Config`));
+
+    // split username/repo
     const repoUrl = customConfig.repo
         .replace(`https://${platform}.com/`, "")
         .replace(`http://${platform}.com/`, "")

src/assets/scripts/closebrackets.js

@@ -1,237 +0,0 @@
-// CodeMirror, copyright (c) by Marijn Haverbeke and others
-// Distributed under an MIT license: https://codemirror.net/LICENSE
-import CodeMirror from "codemirror/lib/codemirror";
-(function (CodeMirror) {
-    var defaults = {
-        pairs: "()[]{}''\"\"",
-        closeBefore: ")]}'\":;>",
-        triples: "",
-        explode: "[]{}",
-    };
-
-    var Pos = CodeMirror.Pos;
-
-    CodeMirror.defineOption(
-        "autoCloseBrackets",
-        false,
-        function (cm, val, old) {
-            if (old && old != CodeMirror.Init) {
-                cm.removeKeyMap(keyMap);
-                cm.state.closeBrackets = null;
-            }
-            if (val) {
-                ensureBound(getOption(val, "pairs"));
-                cm.state.closeBrackets = val;
-                cm.addKeyMap(keyMap);
-            }
-        }
-    );
-
-    function getOption(conf, name) {
-        if (name == "pairs" && typeof conf == "string") return conf;
-        if (typeof conf == "object" && conf[name] != null) return conf[name];
-        return defaults[name];
-    }
-
-    var keyMap = {
-        Backspace: handleBackspace,
-        Enter: handleEnter,
-    };
-
-    function ensureBound(chars) {
-        for (var i = 0; i < chars.length; i++) {
-            var ch = chars.charAt(i),
-                key = "'" + ch + "'";
-            if (!keyMap[key]) keyMap[key] = handler(ch);
-        }
-    }
-    ensureBound(defaults.pairs + "`");
-
-    function handler(ch) {
-        return function (cm) {
-            return handleChar(cm, ch);
-        };
-    }
-
-    function getConfig(cm) {
-        var deflt = cm.state.closeBrackets;
-        if (!deflt || deflt.override) return deflt;
-        var mode = cm.getModeAt(cm.getCursor());
-        return mode.closeBrackets || deflt;
-    }
-
-    function handleBackspace(cm) {
-        var conf = getConfig(cm);
-        if (!conf || cm.getOption("disableInput")) return CodeMirror.Pass;
-
-        var pairs = getOption(conf, "pairs");
-        var ranges = cm.listSelections();
-        for (var i = 0; i < ranges.length; i++) {
-            if (!ranges[i].empty()) return CodeMirror.Pass;
-            var around = charsAround(cm, ranges[i].head);
-            if (!around || pairs.indexOf(around) % 2 != 0)
-                return CodeMirror.Pass;
-        }
-        for (var i = ranges.length - 1; i >= 0; i--) {
-            var cur = ranges[i].head;
-            cm.replaceRange(
-                "",
-                Pos(cur.line, cur.ch - 1),
-                Pos(cur.line, cur.ch + 1),
-                "+delete"
-            );
-        }
-    }
-
-    function handleEnter(cm) {
-        var conf = getConfig(cm);
-        var explode = conf && getOption(conf, "explode");
-        if (!explode || cm.getOption("disableInput")) return CodeMirror.Pass;
-
-        var ranges = cm.listSelections();
-        for (var i = 0; i < ranges.length; i++) {
-            if (!ranges[i].empty()) return CodeMirror.Pass;
-            var around = charsAround(cm, ranges[i].head);
-            if (!around || explode.indexOf(around) % 2 != 0)
-                return CodeMirror.Pass;
-        }
-        cm.operation(function () {
-            var linesep = cm.lineSeparator() || "\n";
-            cm.replaceSelection(linesep + linesep, null);
-            cm.execCommand("goCharLeft");
-            ranges = cm.listSelections();
-            for (var i = 0; i < ranges.length; i++) {
-                var line = ranges[i].head.line;
-                cm.indentLine(line, null, true);
-                cm.indentLine(line + 1, null, true);
-            }
-        });
-    }
-
-    function contractSelection(sel) {
-        var inverted = CodeMirror.cmpPos(sel.anchor, sel.head) > 0;
-        return {
-            anchor: new Pos(
-                sel.anchor.line,
-                sel.anchor.ch + (inverted ? -1 : 1)
-            ),
-            head: new Pos(sel.head.line, sel.head.ch + (inverted ? 1 : -1)),
-        };
-    }
-
-    function handleChar(cm, ch) {
-        var conf = getConfig(cm);
-        if (!conf || cm.getOption("disableInput")) return CodeMirror.Pass;
-
-        var pairs = getOption(conf, "pairs");
-        var pos = pairs.indexOf(ch);
-        if (pos == -1) return CodeMirror.Pass;
-
-        var closeBefore = getOption(conf, "closeBefore");
-
-        var triples = getOption(conf, "triples");
-
-        var identical = pairs.charAt(pos + 1) == ch;
-        var ranges = cm.listSelections();
-        var opening = pos % 2 == 0;
-
-        var type;
-        for (var i = 0; i < ranges.length; i++) {
-            var range = ranges[i],
-                cur = range.head,
-                curType;
-            var next = cm.getRange(cur, Pos(cur.line, cur.ch + 1));
-            if (opening && !range.empty()) {
-                curType = "surround";
-            } else if ((identical || !opening) && next == ch) {
-                if (identical && stringStartsAfter(cm, cur)) curType = "both";
-                else if (
-                    triples.indexOf(ch) >= 0 &&
-                    cm.getRange(cur, Pos(cur.line, cur.ch + 3)) == ch + ch + ch
-                )
-                    curType = "skipThree";
-                else curType = "skip";
-            } else if (
-                identical &&
-                cur.ch > 1 &&
-                triples.indexOf(ch) >= 0 &&
-                cm.getRange(Pos(cur.line, cur.ch - 2), cur) == ch + ch
-            ) {
-                if (
-                    cur.ch > 2 &&
-                    /\bstring/.test(
-                        cm.getTokenTypeAt(Pos(cur.line, cur.ch - 2))
-                    )
-                )
-                    return CodeMirror.Pass;
-                curType = "addFour";
-            } else if (identical) {
-                var prev =
-                    cur.ch == 0
-                        ? " "
-                        : cm.getRange(Pos(cur.line, cur.ch - 1), cur);
-                if (
-                    !CodeMirror.isWordChar(next) &&
-                    prev != ch &&
-                    !CodeMirror.isWordChar(prev)
-                )
-                    curType = "both";
-                else return CodeMirror.Pass;
-            } else if (
-                opening &&
-                (next.length === 0 ||
-                    /\s/.test(next) ||
-                    closeBefore.indexOf(next) > -1)
-            ) {
-                curType = "both";
-            } else {
-                return CodeMirror.Pass;
-            }
-            if (!type) type = curType;
-            else if (type != curType) return CodeMirror.Pass;
-        }
-
-        var left = pos % 2 ? pairs.charAt(pos - 1) : ch;
-        var right = pos % 2 ? ch : pairs.charAt(pos + 1);
-        cm.operation(function () {
-            if (type == "skip") {
-                cm.execCommand("goCharRight");
-            } else if (type == "skipThree") {
-                for (var i = 0; i < 3; i++) cm.execCommand("goCharRight");
-            } else if (type == "surround") {
-                var sels = cm.getSelections();
-                for (var i = 0; i < sels.length; i++)
-                    sels[i] = left + sels[i] + right;
-                cm.replaceSelections(sels, "around");
-                sels = cm.listSelections().slice();
-                for (var i = 0; i < sels.length; i++)
-                    sels[i] = contractSelection(sels[i]);
-                cm.setSelections(sels);
-            } else if (type == "both") {
-                cm.replaceSelection(left + right, null);
-                cm.triggerElectric(left + right);
-                cm.execCommand("goCharLeft");
-            } else if (type == "addFour") {
-                cm.replaceSelection(left + left + left + left, "before");
-                cm.execCommand("goCharRight");
-            }
-        });
-    }
-
-    function charsAround(cm, pos) {
-        var str = cm.getRange(
-            Pos(pos.line, pos.ch - 1),
-            Pos(pos.line, pos.ch + 1)
-        );
-        return str.length == 2 ? str : null;
-    }
-
-    function stringStartsAfter(cm, pos) {
-        var token = cm.getTokenAt(Pos(pos.line, pos.ch + 1));
-        return (
-            /\bstring/.test(token.type) &&
-            token.start == pos.ch &&
-            (pos.ch == 0 || !/\bstring/.test(cm.getTokenTypeAt(pos)))
-        );
-    }
-})(CodeMirror);

src/assets/scripts/format.js

@@ -1,120 +0,0 @@
-import CodeMirror from "codemirror/lib/codemirror";
-(function () {
-    CodeMirror.extendMode("css", {
-        commentStart: "/*",
-        commentEnd: "*/",
-        newlineAfterToken: function (type, content) {
-            return /^[;{}]$/.test(content);
-        },
-    });
-
-    // 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;
-        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
-                    );
-                }
-            } else {
-                // Uncomment range
-                var selText = cm.getRange(from, to);
-                var startIndex = selText.indexOf(curMode.commentStart);
-                var endIndex = selText.lastIndexOf(curMode.commentEnd);
-                if (startIndex > -1 && endIndex > -1 && endIndex > startIndex) {
-                    // Take string till comment start
-                    selText =
-                        selText.substr(0, startIndex) +
-                        // From comment start till comment end
-                        selText.substring(
-                            startIndex + curMode.commentStart.length,
-                            endIndex
-                        ) +
-                        // From comment end till string end
-                        selText.substr(endIndex + curMode.commentEnd.length);
-                }
-                cm.replaceRange(selText, from, to);
-            }
-        });
-    });
-
-    // Applies automatic mode-aware indentation to the specified range
-    CodeMirror.defineExtension("autoIndentRange", function (from, to) {
-        var cmInstance = this;
-        this.operation(function () {
-            for (var i = from.line; i <= to.line; i++) {
-                cmInstance.indentLine(i, "smart");
-            }
-        });
-    });
-
-    // 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 state = CodeMirror.copyState(outer, cm.getTokenAt(from).state);
-        var tabSize = cm.getOption("tabSize");
-
-        var out = "";
-        var lines = 0;
-        var atSol = from.ch == 0;
-
-        function newline() {
-            out += "\n";
-            atSol = true;
-            ++lines;
-        }
-
-        for (var i = 0; i < text.length; ++i) {
-            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();
-                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();
-                }
-            }
-            if (!stream.pos && outer.blankLine) outer.blankLine(state);
-            if (!atSol) newline();
-        }
-
-        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");
-            }
-            cm.setSelection(from, cm.getCursor(false));
-        });
-    });
-})();

src/assets/scripts/uploadImageFile.js

@@ -3,13 +3,12 @@ import fileApi from "../../api/file";
 export function uploadImgFile(file) {
     return new Promise((resolve, reject) => {
         const checkImageResult = isImageIllegal(file);
-
         if (checkImageResult) {
             reject(checkImageResult);
             return;
         }
-        const base64Reader = new FileReader();
 
+        const base64Reader = new FileReader();
         base64Reader.readAsDataURL(file);
         base64Reader.onload = function () {
             const base64Content = this.result.split(",").pop();

src/assets/scripts/util.js

@@ -1,6 +1,7 @@
 import default_theme from "./themes/default-theme";
 import prettier from "prettier/standalone";
 import prettierMarkdown from "prettier/parser-markdown";
+import prettierCss from "prettier/parser-postcss";
 
 // 设置自定义颜色
 export function setColorWithTemplate(template) {
@@ -200,6 +201,18 @@ export function formatDoc(content) {
     return doc;
 }
 
+/**
+ * 格式化css
+ * @param {css内容}} content
+ */
+export function formatCss(content) {
+    const doc = prettier.format(content, {
+        parser: "css",
+        plugins: [prettierCss],
+    });
+    return doc;
+}
+
 export function fixCodeWhiteSpace(value = "pre") {
     const preDomList = document.getElementsByClassName("code__pre");
     if (preDomList.length > 0) {

src/main.js

@@ -9,14 +9,13 @@ import "codemirror/theme/ambiance.css";
 import "codemirror/theme/xq-light.css";
 import "codemirror/mode/css/css";
 import "codemirror/mode/markdown/markdown";
+import "codemirror/addon/edit/closebrackets";
 import "codemirror/addon/edit/matchbrackets";
 import "codemirror/addon/selection/active-line";
 import "codemirror/addon/hint/show-hint.js";
 import "codemirror/addon/hint/css-hint.js";
 import "./assets/less/theme.less";
-// 对codemirror预处理
+
-import "./assets/scripts/format";
-import "./assets/scripts/closebrackets";
 Vue.use(ElementUI);
 
 Vue.config.productionTip = false;

src/store/index.js

@@ -6,7 +6,7 @@ import marked from "marked";
 import CodeMirror from "codemirror/lib/codemirror";
 import DEFAULT_CONTENT from "../assets/scripts/default-content";
 import DEFAULT_CSS_CONTENT from "../assets/scripts/themes/default-theme-css";
-import { setColor, formatDoc } from "../assets/scripts/util";
+import { setColor, formatDoc, formatCss } from "../assets/scripts/util";
 
 Vue.use(Vuex);
 
@@ -121,17 +121,9 @@ const mutations = {
                 autofocus: true,
                 extraKeys: {
                     "Ctrl-F": function autoFormat(editor) {
-                        const totalLines = editor.lineCount();
+                        const doc = formatCss(editor.getValue(0));
-
+                        localStorage.setItem("__css_content", doc);
-                        editor.autoFormatRange(
+                        editor.setValue(doc);
-                            {
-                                line: 0,
-                                ch: 0,
-                            },
-                            {
-                                line: totalLines,
-                            }
-                        );
                     },
                     "Ctrl-S": function save(editor) {},
                 },