From 6ebee5b7f3122dff9b2538130a9cdf094cebb4be Mon Sep 17 00:00:00 2001
From: majianquan <ma_jianquan@sina.com>
Date: Sat, 15 Feb 2020 21:44:42 +0800
Subject: [PATCH] feat:remove css from html

---
 public/index.html                   |  18 ---
 src/components/CodemirrorEditor.vue |   7 +-
 src/main.js                         |   1 +
 src/scripts/closebrackets.js        | 214 ++++++++++++++++++++++++++++
 src/scripts/format.js               |   1 +
 src/scripts/util.js                 |   1 +
 6 files changed, 221 insertions(+), 21 deletions(-)
 create mode 100644 src/scripts/closebrackets.js
diff --git a/public/index.html b/public/index.html
index 8148158..bca21a8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -41,21 +41,10 @@
   <link rel="apple-touch-icon-precomposed" href="assets/images/favicon.png">
   <link rel="stylesheet" href="assets/css/loading.css">
   <link rel="stylesheet" href="libs/css/index.css">
-
-  <link rel="stylesheet" href="libs/css/xq-light.min.css">
   <link rel="stylesheet" href="libs/css/code-themes/github-v2.min.css">
-
-  <!-- codemirror -->
-  <!-- <link rel="stylesheet" href="libs/css/codemirror.min.css"> -->
-  <!-- <link rel="stylesheet" href="libs/css/show-hint.css"> -->
   <link rel="stylesheet" href="libs/css/style-mirror.css">
-
   <link rel="stylesheet" href="libs/css/animate.css">
   <link rel="stylesheet" href="assets/css/app.css">
-
-  <!-- 默认CSS/JS -->
-  <script src="assets/scripts/themes/default-theme-css.js"></script>
-  <script src="assets/scripts/default-content.js"></script>
 </head>
 
 <body>
@@ -64,15 +53,8 @@
   </div>
 
 
-  <!-- codemirror -->
-  <script src="libs/scripts/codemirror/codemirror.min.js"></script>
-
-  <script src="libs/scripts/markdown.min.js"></script>
   <script src="libs/scripts/prettify.min.js"></script>
   <script src="libs/scripts/jquery.min.js"></script>
-  <script src="libs/scripts/closebrackets.js"></script>
-  <!-- <script src="assets/scripts/sync-scroll.js"></script> -->
-
   <script>
     window.console
       && window.console.log
diff --git a/src/components/CodemirrorEditor.vue b/src/components/CodemirrorEditor.vue
index 5c0ca1c..6a36097 100644
--- a/src/components/CodemirrorEditor.vue
+++ b/src/components/CodemirrorEditor.vue
@@ -123,7 +123,8 @@
 <script>
 import CodeMirror from 'codemirror/lib/codemirror'
 
-import 'codemirror/mode/css/css.js'
+import 'codemirror/mode/css/css'
+import 'codemirror/mode/markdown/markdown'
 import 'codemirror/addon/edit/matchbrackets'
 import 'codemirror/addon/selection/active-line'
 
@@ -134,6 +135,7 @@ import '../scripts/format.js'
 import axios from 'axios'
 import WxRenderer from '../scripts/renderers/wx-renderer'
 import marked from 'marked'
+import markdown from 'markdown'
 import {
   setColorWithCustomTemplate,
   setColor,
@@ -145,6 +147,7 @@ import DEFAULT_CONTENT from '../scripts/default-content'
 import DEFAULT_CSS_CONTENT from '../scripts/themes/default-theme-css'
 
 require('codemirror/mode/javascript/javascript')
+import '../scripts/closebrackets'
 export default {
   data () {
     let d = {
@@ -496,9 +499,7 @@ export default {
     },
     // 左右栏同步滚动
     leftAndRightScroll() {
-      console.log($)
       $('div.CodeMirror-scroll, #preview').on('scroll', function callback () {
-        console.log(object)
         clearTimeout(this.timeout)
 
         let source = $(this)
diff --git a/src/main.js b/src/main.js
index 9c083f7..5312c50 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,6 +8,7 @@ import './element'
 import 'codemirror/lib/codemirror.css';
 import "codemirror/theme/ambiance.css";
 import "codemirror/addon/hint/show-hint.css";
+import "codemirror/theme/xq-light.css";
 Vue.use(ElementUI)
 
 Vue.config.productionTip = false
diff --git a/src/scripts/closebrackets.js b/src/scripts/closebrackets.js
new file mode 100644
index 0000000..1db4714
--- /dev/null
+++ b/src/scripts/closebrackets.js
@@ -0,0 +1,214 @@
+// 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);
diff --git a/src/scripts/format.js b/src/scripts/format.js
index f9979f1..452e80c 100644
--- a/src/scripts/format.js
+++ b/src/scripts/format.js
@@ -1,3 +1,4 @@
+import CodeMirror from "codemirror/lib/codemirror";
 (function () {
   CodeMirror.extendMode('css', {
     commentStart: '/*',
diff --git a/src/scripts/util.js b/src/scripts/util.js
index 6e49f14..fe6ce62 100644
--- a/src/scripts/util.js
+++ b/src/scripts/util.js
@@ -1,5 +1,6 @@
 import  default_theme  from "./themes/default-theme";
 
+
 // 设置自定义颜色
 export function setColorWithTemplate (template) {
   return function (color) {
