<template>
  <div class="markdown-wrapper">
    <textarea ref="editor"></textarea>
  </div>
</template>

<script>
import Simplemde from 'simplemde'
import 'simplemde/dist/simplemde.min.css'
export default {
    name: 'MarkdownEditor',
    props: {
        value: {
            type: String,
            default: ''
        },
        options: {
            type: Object,
            default: () => {
                return {}
            }
        },
        localCache: {
            type: Boolean,
            default: true
        }
    },
    data () {
        return {
            editor: null
        }
    },
    methods: {
        addEvents () {
            this.editor.codemirror.on('change', () => {
                let value = this.editor.value()
                if (this.localCache) localStorage.markdownContent = value
                this.$emit('input', value)
                this.$emit('on-change', value)
            })
            this.editor.codemirror.on('focus', () => {
                this.$emit('on-focus', this.editor.value())
            })
            this.editor.codemirror.on('blur', () => {
                this.$emit('on-blur', this.editor.value())
            })
        }
    },
    mounted () {
        this.editor = new Simplemde(Object.assign(this.options, {
            element: this.$refs.editor
        }))
        /**
     * 事件列表为Codemirror编辑器的事件，更多事件类型，请参考：
     * https://codemirror.net/doc/manual.html#events
     */
        this.addEvents()
        let content = localStorage.markdownContent
        if (content) this.editor.value(content)
    }
}
</script>

<style lang="less">
.markdown-wrapper{
  .editor-toolbar.fullscreen{
    z-index: 9999;
  }
  .CodeMirror-fullscreen{
    z-index: 9999;
  }
  .CodeMirror-fullscreen ~ .editor-preview-side{
    z-index: 9999;
  }
}
</style>
