From 160a8d30735cdfb9a68316b1f5f97448b55b8bf1 Mon Sep 17 00:00:00 2001
From: zema1 <rawidn@163.com>
Date: Mon, 16 Oct 2017 17:12:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B9=85=E7=BC=A9=E5=87=8Fbuild?=
 =?UTF-8?q?=E4=BD=93=E7=A7=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 oj/build/webpack.base.conf.js    |  10 +-
 oj/package-lock.json             |  26 ++--
 oj/package.json                  |   4 +-
 oj/src/components/CodeMirror.vue | 221 ++++++++++++++++---------------
 oj/src/components/Highlight.vue  |   2 +-
 oj/src/main.js                   |  44 +++++-
 oj/src/views/problem/Problem.vue |   5 +-
 7 files changed, 172 insertions(+), 140 deletions(-)

diff --git a/oj/build/webpack.base.conf.js b/oj/build/webpack.base.conf.js
index 689431a..f43ccde 100644
--- a/oj/build/webpack.base.conf.js
+++ b/oj/build/webpack.base.conf.js
@@ -1,5 +1,6 @@
 var path = require('path')
 var utils = require('./utils')
+var webpack = require('webpack')
 var config = require('../config')
 var vueLoaderConfig = require('./vue-loader.conf')
 
@@ -19,6 +20,7 @@ module.exports = {
       : config.dev.assetsPublicPath
   },
   resolve: {
+    modules: ['node_modules'],
     extensions: ['.js', '.vue', '.json'],
     alias: {
       'vue$': 'vue/dist/vue.esm.js',
@@ -45,7 +47,8 @@ module.exports = {
       },
       {
         test: /\.js$/,
-        loader: 'babel-loader',
+        loader: 'babel-loader?cacheDirectory',
+        exclude: /node_modules/,
         include: [resolve('src'), resolve('test')]
       },
       {
@@ -65,5 +68,8 @@ module.exports = {
         }
       }
     ]
-  }
+  },
+  plugins: [
+    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/)
+  ]
 }
diff --git a/oj/package-lock.json b/oj/package-lock.json
index 11a5c4d..3576bfa 100644
--- a/oj/package-lock.json
+++ b/oj/package-lock.json
@@ -1886,9 +1886,9 @@
       "dev": true
     },
     "codemirror": {
-      "version": "5.28.0",
-      "resolved": "http://registry.npm.taobao.org/codemirror/download/codemirror-5.28.0.tgz",
-      "integrity": "sha1-KXjZKA1nE1Gk9XN9BrvWgaD9b4M="
+      "version": "5.30.0",
+      "resolved": "http://registry.npm.taobao.org/codemirror/download/codemirror-5.30.0.tgz",
+      "integrity": "sha1-huV91epVNay8+ccgeXtM7+BbWnA="
     },
     "color": {
       "version": "0.11.4",
@@ -4491,7 +4491,7 @@
     },
     "highlight.js": {
       "version": "9.12.0",
-      "resolved": "http://registry.npm.taobao.org/highlight.js/download/highlight.js-9.12.0.tgz",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz",
       "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4="
     },
     "hmac-drbg": {
@@ -8027,12 +8027,12 @@
       "resolved": "http://registry.npm.taobao.org/vue/download/vue-2.4.4.tgz",
       "integrity": "sha1-6pVQuWpxRl/SuLF7YWc7NWGGF4k="
     },
-    "vue-codemirror": {
-      "version": "3.1.4",
-      "resolved": "http://registry.npm.taobao.org/vue-codemirror/download/vue-codemirror-3.1.4.tgz",
-      "integrity": "sha1-2vX1Z9H3Uy7kW65IuGP5tiH0KVg=",
+    "vue-codemirror-lite": {
+      "version": "1.0.2",
+      "resolved": "http://registry.npm.taobao.org/vue-codemirror-lite/download/vue-codemirror-lite-1.0.2.tgz",
+      "integrity": "sha1-7mxnlom3I7OvOANChG/E/c5rf7Y=",
       "requires": {
-        "codemirror": "5.28.0"
+        "codemirror": "5.30.0"
       }
     },
     "vue-cropper": {
@@ -8049,14 +8049,6 @@
         "lodash.debounce": "4.0.8"
       }
     },
-    "vue-highlightjs": {
-      "version": "1.3.3",
-      "resolved": "http://registry.npm.taobao.org/vue-highlightjs/download/vue-highlightjs-1.3.3.tgz",
-      "integrity": "sha1-KaDVcTL8HOFc+mHolpGPW3GMXVI=",
-      "requires": {
-        "highlight.js": "9.12.0"
-      }
-    },
     "vue-hot-reload-api": {
       "version": "2.1.0",
       "resolved": "http://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.1.0.tgz",
diff --git a/oj/package.json b/oj/package.json
index 7de4b20..58e427b 100644
--- a/oj/package.json
+++ b/oj/package.json
@@ -14,14 +14,14 @@
     "axios": "^0.16.2",
     "browser-detect": "^0.2.18",
     "echarts": "^3.6.2",
+    "highlight.js": "^9.12.0",
     "i": "^0.3.5",
     "iview": "^2.3.2",
     "moment": "^2.18.1",
     "vue": "^2.4.4",
-    "vue-codemirror": "^3.1.4",
+    "vue-codemirror-lite": "^1.0.2",
     "vue-cropper": "^0.2.1",
     "vue-echarts": "^2.4.1",
-    "vue-highlightjs": "^1.3.3",
     "vue-router": "^2.7.0",
     "vuex": "^2.4.0",
     "vuex-router-sync": "^4.3.2"
diff --git a/oj/src/components/CodeMirror.vue b/oj/src/components/CodeMirror.vue
index 0f3938c..c640224 100644
--- a/oj/src/components/CodeMirror.vue
+++ b/oj/src/components/CodeMirror.vue
@@ -2,135 +2,138 @@
   <div style="margin: 0px 0px 15px 0px">
     <Row type="flex" justify="space-between" class="header">
       <Col :span=10>
-        <div>
-          <span>Language:</span>
-          <Select v-model="lang" @on-change="onLangChange" class="adjust">
-            <Option v-for="item in languages" :key="item" :value="item">{{item}}
-            </Option>
-          </Select>
-        </div>
+      <div>
+        <span>Language:</span>
+        <Select v-model="lang" @on-change="onLangChange" class="adjust">
+          <Option v-for="item in languages" :key="item" :value="item">{{item}}
+          </Option>
+        </Select>
+      </div>
       </Col>
       <Col :span=10>
-        <div class="fl-right">
-          <span>Theme:</span>
-          <Select v-model="options.theme" class="adjust">
-            <Option v-for="item in themes" :key="item.label" :value="item.value">{{item.label}}
-            </Option>
-          </Select>
-        </div>
+      <div class="fl-right">
+        <span>Theme:</span>
+        <Select v-model="options.theme" @on-change="onThemeChange" class="adjust">
+          <Option v-for="item in themes" :key="item.label" :value="item.value">{{item.label}}
+          </Option>
+        </Select>
+      </div>
       </Col>
     </Row>
-    <codemirror :code="currentValue" :options="options" @change="onEditorCodeChange" ref="myEditor">
+    <codemirror :value="value" :options="options" @change="onEditorCodeChange" ref="myEditor">
     </codemirror>
   </div>
 </template>
 <script>
-import { codemirror } from 'vue-codemirror'
+  import { codemirror } from 'vue-codemirror-lite'
 
-// theme
-import 'codemirror/theme/monokai.css'
-import 'codemirror/theme/solarized.css'
-import 'codemirror/theme/base16-light.css'
-import 'codemirror/theme/twilight.css'
-import 'codemirror/theme/material.css'
+  // theme
+  import 'codemirror/theme/monokai.css'
+  import 'codemirror/theme/solarized.css'
+  import 'codemirror/theme/material.css'
 
-// mode
-import 'codemirror/mode/clike/clike.js'
-import 'codemirror/mode/python/python.js'
+  // mode
+  import 'codemirror/mode/clike/clike.js'
+  import 'codemirror/mode/python/python.js'
 
-// active-line.js
-import 'codemirror/addon/selection/active-line.js'
+  // active-line.js
+  import 'codemirror/addon/selection/active-line.js'
 
-// foldGutter
-import 'codemirror/addon/fold/foldgutter.css'
-import 'codemirror/addon/fold/foldgutter.js'
-import 'codemirror/addon/fold/brace-fold.js'
-import 'codemirror/addon/fold/indent-fold.js'
+  // foldGutter
+  import 'codemirror/addon/fold/foldgutter.css'
+  import 'codemirror/addon/fold/foldgutter.js'
+  import 'codemirror/addon/fold/brace-fold.js'
+  import 'codemirror/addon/fold/indent-fold.js'
 
-export default {
-  name: 'CodeMirror',
-  components: {
-    codemirror
-  },
-  props: {
-    value: {
-      type: String,
-      default: ''
+  export default {
+    name: 'CodeMirror',
+    components: {
+      codemirror
     },
-    languages: {
-      type: Array,
-      default: () => {
-        return ['C', 'C++', 'Java', 'Python2']
+    props: {
+      value: {
+        type: String,
+        default: ''
+      },
+      languages: {
+        type: Array,
+        default: () => {
+          return ['C', 'C++', 'Java', 'Python2']
+        }
+      }
+    },
+    data () {
+      return {
+        lang: 'C++',
+        options: {
+          // codemirror options
+          tabSize: 4,
+          mode: 'text/x-c++src',
+          theme: 'monokai',
+          lineNumbers: true,
+          line: true,
+          // 代码折叠
+          foldGutter: true,
+          gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+          // 选中文本自动高亮，及高亮方式
+          styleSelectedText: true,
+          lineWrapping: false,
+          highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: true}
+        },
+        mode: {
+          'C': 'text/x-csrc',
+          'C++': 'text/x-c++src',
+          'Java': 'text/x-java',
+          'Python2': 'text/x-python'
+        },
+        themes: [
+          {label: 'Monokai', value: 'monokai'},
+          {label: 'Solarized Light', value: 'solarized'},
+          {label: 'Material', value: 'material'}
+        ]
+      }
+    },
+    mounted () {
+      this.editor.focus()
+    },
+    methods: {
+      onEditorCodeChange (newCode) {
+        this.$emit('update:value', newCode)
+      },
+      onLangChange (newVal) {
+        this.editor.setOption('mode', this.mode[newVal])
+        this.$emit('changeLang', newVal)
+      },
+      onThemeChange (newTheme) {
+        this.editor.setOption('theme', newTheme)
+      }
+    },
+    computed: {
+      editor () {
+        // get current editor object
+        return this.$refs.myEditor.editor
       }
     }
-  },
-  data () {
-    return {
-      currentValue: '',
-      lang: 'C++',
-      options: {
-        // codemirror options
-        tabSize: 4,
-        mode: 'text/x-c++src',
-        theme: 'solarized',
-        lineNumbers: true,
-        line: true,
-        // 代码折叠
-        foldGutter: true,
-        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
-        // 选中文本自动高亮，及高亮方式
-        styleSelectedText: true,
-        lineWrapping: false,
-        highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true }
-      },
-      mode: {
-        'C': 'text/x-csrc',
-        'C++': 'text/x-c++src',
-        'Java': 'text/x-java',
-        'Python2': 'text/x-python'
-      },
-      themes: [
-        { label: 'Monokai', value: 'monokai' },
-        { label: 'Solarized Light', value: 'solarized' },
-        { label: 'Base16', value: 'base16-light' },
-        { label: 'Twilight', value: 'twilight' },
-        { label: 'Material', value: 'material' }
-      ]
-    }
-  },
-  mounted () {
-    this.currentValue = this.value
-  },
-  methods: {
-    onEditorCodeChange (newCode) {
-      this.currentValue = newCode
-      this.$emit('changeCode', newCode)
-    },
-    onLangChange (newVal) {
-      this.$refs.myEditor.editor.setOption('mode', this.mode[newVal])
-      this.$emit('changeLang', newVal)
-    }
   }
-}
 </script>
 
 <style lang="less" scoped>
-.CodeMirror {
-  height: auto !important;
-}
-
-.CodeMirror-scroll {
-  min-height: 300px;
-}
-
-.header {
-  margin: 5px 5px 15px 5px;
-  .adjust {
-    width: 150px;
-    margin-left: 10px;
+  .CodeMirror {
+    height: auto !important;
   }
-  .fl-right {
-    float: right;
+
+  .CodeMirror-scroll {
+    min-height: 300px;
+  }
+
+  .header {
+    margin: 5px 5px 15px 5px;
+    .adjust {
+      width: 150px;
+      margin-left: 10px;
+    }
+    .fl-right {
+      float: right;
+    }
   }
-}
 </style>
diff --git a/oj/src/components/Highlight.vue b/oj/src/components/Highlight.vue
index 43824c5..65b0551 100644
--- a/oj/src/components/Highlight.vue
+++ b/oj/src/components/Highlight.vue
@@ -1,5 +1,5 @@
 <template>
-  <pre v-highlightjs="code"><code :class="language" :style="styleObject"></code></pre>
+  <pre v-highlight="code"><code :class="language" :style="styleObject"></code></pre>
 </template>
 
 <script>
diff --git a/oj/src/main.js b/oj/src/main.js
index 2dd17c9..e0ff131 100644
--- a/oj/src/main.js
+++ b/oj/src/main.js
@@ -2,13 +2,10 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-import iView from 'iview'
 import locale from 'iview/src/locale/lang/en-US'
-import VueHighlightJS from 'vue-highlightjs'
 
+import iView from 'iview'
 import 'iview/dist/styles/iview.css'
-import 'highlight.js/styles/atom-one-light.css'
-import './styles/index.less'
 
 import Panel from '~/Panel.vue'
 import VerticalMenu from '~/verticalMenu/verticalMenu.vue'
@@ -27,6 +24,17 @@ import 'echarts/lib/component/tooltip'
 import 'echarts/lib/component/toolbox'
 import 'echarts/lib/component/markPoint'
 
+import hljs from 'highlight.js/lib/highlight'
+import cpp from 'highlight.js/lib/languages/cpp'
+import python from 'highlight.js/lib/languages/python'
+import java from 'highlight.js/lib/languages/java'
+import 'highlight.js/styles/atom-one-light.css'
+import './styles/index.less'
+
+hljs.registerLanguage('cpp', cpp)
+hljs.registerLanguage('java', java)
+hljs.registerLanguage('python', python)
+
 // add global EventBus
 const EventBus = new Vue()
 Object.defineProperties(Vue.prototype, {
@@ -42,8 +50,34 @@ Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key])
 })
 
+// highlight.js
+Vue.directive('highlight', {
+  deep: true,
+  bind: function (el, binding) {
+    // on first bind, highlight all targets
+    let targets = el.querySelectorAll('code')
+    targets.forEach((target) => {
+      // if a value is directly assigned to the directive, use this
+      // instead of the element content.
+      if (binding.value) {
+        target.textContent = binding.value
+      }
+      hljs.highlightBlock(target)
+    })
+  },
+  componentUpdated: function (el, binding) {
+    // after an update, re-fill the content and then highlight
+    let targets = el.querySelectorAll('code')
+    targets.forEach((target) => {
+      if (binding.value) {
+        target.textContent = binding.value
+        hljs.highlightBlock(target)
+      }
+    })
+  }
+})
+
 Vue.use(iView, {locale})
-Vue.use(VueHighlightJS)
 
 Vue.component('ECharts', ECharts)
 Vue.component(VerticalMenu.name, VerticalMenu)
diff --git a/oj/src/views/problem/Problem.vue b/oj/src/views/problem/Problem.vue
index f25d784..0e2ccf3 100644
--- a/oj/src/views/problem/Problem.vue
+++ b/oj/src/views/problem/Problem.vue
@@ -40,7 +40,7 @@
       </Panel>
       <!--problem main end-->
       <Card :padding="20" id="submit-code" dis-hover>
-        <CodeMirror :value="code" @changeCode="onChangeCode" @changeLang="onChangeLang"></CodeMirror>
+        <CodeMirror :value.sync="code" @changeLang="onChangeLang"></CodeMirror>
         <Row type="flex" justify="space-between">
           <Col :span="10">
           <div class="status" v-if="statusVisible && contestRuleType !== 'OI'">
@@ -241,9 +241,6 @@
       handleRoute (route) {
         this.$router.push(route)
       },
-      onChangeCode (newCode) {
-        this.code = newCode
-      },
       onChangeLang (newLang) {
         this.language = newLang
       },