<template>
  <div class='simplemde-container' :style="{height:height+'px',zIndex:zIndex}">
    <textarea :id='id'>
    </textarea>
  </div>
</template>

<script>
  import 'simplemde/dist/simplemde.min.css';
  import SimpleMDE from 'simplemde';

  export default {
    name: 'simplemde-md',
    props: {
      value: String,
      id: {
        type: String,
        default: 'markdown-editor'
      },
      autofocus: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: ''
      },
      height: {
        type: Number,
        default: 150
      },
      zIndex: {
        type: Number,
        default: 10
      },
      toolbar: {
        type: Array
      }
    },
    data() {
      return {
        simplemde: null,
        hasChange: false
      };
    },
    watch: {
      value(val) {
        if (val === this.simplemde.value() && !this.hasChange) return;
        this.simplemde.value(val);
      }
    },
    mounted() {
      this.simplemde = new SimpleMDE({
        element: document.getElementById(this.id),
        autofocus: this.autofocus,
        toolbar: this.toolbar,
        spellChecker: false,
        insertTexts: {
          link: ['[', ']( )']
        },
      // hideIcons: ['guide', 'heading', 'quote', 'image', 'preview', 'side-by-side', 'fullscreen'],
        placeholder: this.placeholder
      });
      if (this.value) {
        this.simplemde.value(this.value);
      }
      this.simplemde.codemirror.on('change', () => {
        if (this.hasChange) {
          this.hasChange = true
        }
        this.$emit('input', this.simplemde.value());
      });
    },
    destroyed() {
      this.simplemde = null;
    }
};
</script>

<style>
.simplemde-container .CodeMirror {
  /*height: 150px;*/
  min-height: 150px;
}

.simplemde-container .CodeMirror-scroll {
  min-height: 150px;
}

.simplemde-container .CodeMirror-code {
  padding-bottom: 40px;
}

.simplemde-container .editor-statusbar {
  display: none;
}

.simplemde-container .CodeMirror .CodeMirror-code .cm-link {
  color: #1482F0;
}

.simplemde-container .CodeMirror .CodeMirror-code .cm-string.cm-url {
  color: #2d3b4d;
  font-weight: bold;
}

.simplemde-container .CodeMirror .CodeMirror-code .cm-formatting-link-string.cm-url {
  padding: 0 2px;
  font-weight: bold;
  color: #E61E1E;
}
</style>


