// import in ES6
import Vue from 'vue'
import VueCodeMirror from 'vue-codemirror'


// require in Webpack/Node.js
var Vue = require('vue')
var VueCodeMirror = require('vue-codemirror')


// use
Vue.use(VueCodeMirror)


// if you need to custom new mode
VueCodeMirror.CodeMirror.defineMode('mymode', () => {
  return {
    token(stream, state) {
      if (stream.match("aaa")) {
        return "style1"
      } else if (stream.match("bbb")) {
        return "style2"
      } else {
        stream.next()
        return null
      }
    }
  }
})


// --------------------------------------


// or use with component(ES6)
import Vue from 'vue'
import { codemirror, CodeMirror } from 'vue-codemirror'

// if you need to custom new mode
CodeMirror.defineMode('mymode', () => {
  return {
    token(stream, state) {
      if (stream.match("aaa")) {
        return "style1"
      } else if (stream.match("bbb")) {
        return "style2"
      } else {
        stream.next()
        return null
      }
    }
  }
})

// use in component
export default {
  components: {
    codemirror
  }
}

// editor option example:
export default {
  data () {
    return {
      code: 'const a = 10',
      editorOption: {
        // 下面所有配置同Codemirror配置，均为可选
        tabSize: 4,
        mode: 'text/javascript',
        theme: 'base16-dark',
        lineNumbers: true,
        line: true,
        // sublime、emacs、vim三种键位模式，支持你的不同操作习惯
        keyMap: "sublime",
        // 按键映射，比如Ctrl键映射autocomplete，autocomplete是hint代码提示事件
        extraKeys: { "Ctrl": "autocomplete" },
        // 代码折叠
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
        // 选中文本自动高亮，及高亮方式
        styleSelectedText: true,
        highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
        // more codemirror config...
        // 如果有hint方面的配置，也应该出现在这里
      }
    }
  },
  // If you need to manually control the data synchronization, parent component needs to explicitly emit an event instead of relying on implicit binding
  // 在2.0中如果需要手动控制数据同步，父组件需要显式地处理changed事件
  methods: {
    codeChange(newCode) {
      console.log('this is new code', newCode)
      this.code = newCode
    }
  },
  // example code (if you need to get the current editor object, you can find the editor object like this, the $ref object is a ref attribute corresponding to the dom redefined)
  // 如果你需要得到当前的editor对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的editor对象，实际上这里的$refs对应的是当前组件内所有关联了ref属性的组件元素对象
  computed: {
    editor() {
      return this.$refs.myEditor.editor
    }
  },
  mounted() {
    // you can use current editor object to do something(editor methods)
    // 然后你就可以使用当前上下文内的editor对象去做你想做的事了
    console.log('this is current editor object', this.editor)
    // this.editor to do something...
  }
}

// editor options mode types:
// 编辑器的模式（mode属性）分为 字符串、对象两种方式，可以在下面的相关链接中找到语言列表

// string mode（MIME types/字符串方式）
mode: 'text/javascript'

// object mode（对象方式）
mode: {
  name: 'javascript',
  json: true
}