const Vue = require('vue').default
const VueMarkdownEditor = require('@kangc/v-md-editor')
const githubTheme = require('@kangc/v-md-editor/lib/theme/github.js')
const fr = require('@kangc/v-md-editor/lib/lang/fr-FR').default
const hljs = require('highlight.js')

VueMarkdownEditor.use(githubTheme, {Hljs: hljs})
VueMarkdownEditor.lang.use('fr-FR', fr)
Vue.use(VueMarkdownEditor)

module.exports = () => {
  const components = document.querySelectorAll('.markdown-editor')

  components.forEach((component) => {
    return new Vue({
      el: component,
      template: `
        <div>
          <textarea :name="name" v-model="value" class="d-none"></textarea>
          <v-md-editor v-model="value" mode="edit"></v-md-editor>
        </div>
      `,
      data() {
        return {
          name: component.getAttribute('data-name'),
          value: JSON.parse(component.getAttribute('data-value')),
        }
      },
      components: {
        VueMarkdownEditor
      }
    })
  })
}