<template>
    <textarea class="form-control" name="obsah" id="summernote" rows="10" :placeholder="placeholder" v-model="model"></textarea>
</template>

<script>
  const ObsahSekcie = {
    name: 'ObsahSekcie',
    props: {
      model: {
        type: String,
        default: null
      },
      placeholder: {
        type: String,
        default: 'sem zadajte obsah'
      }
    },
    mounted() {
      let vm = this
      let config = {
        tabsize: 2,
        height: 400,
        minHeight: 200,
        placeholder: vm.placeholder,
        toolbar: [
          ['misc', ['undo', 'redo']],
          ['style', ['style', 'bold', 'italic', 'underline', 'clear']],
          ['font', ['strikethrough', 'superscript', 'subscript']],
          ['height', ['height']],
          ['para', ['ul', 'ol', 'paragraph']],
          ['insert', ['picture', 'link', 'table', 'hr']],
          ['misc', ['codeview']]
        ],
        popover: {
          image: [
            ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
            ['float', ['floatLeft', 'floatRight', 'floatNone']],
            ['remove', ['removeMedia']]
          ],
          link: [
            ['link', ['linkDialogShow', 'unlink']]
          ],
          air: [
            ['color', ['color']],
            ['font', ['bold', 'underline', 'clear']],
            ['para', ['ul', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link', 'picture']]
          ]
        },
        lang: 'sk-SK',
        prettifyHtml: true,
        codemirror: {
          theme: 'monokai',
          mode: 'text/html',
          lineNumbers: true,
          tabMode: 'indent',
          htmlMode: true
        }
      }

      config.callbacks = {
        onInit: function () {
          $(vm.$el).summernote("code", vm.model)
        },
        onChange: function () {
          vm.$emit('update:model', $(vm.$el).summernote('code'))
        }
      }

      $(this.$el).summernote(config)
    }
  }

  export default ObsahSekcie
</script>

<style scoped>

</style>
