<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: 'Sticky',
  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>


