<template>
  <div class='input_editor_preview__markdownHTML'>
    <!--
      A hack to call the getHTML() function, not sure why
      the value watcher function is not working, as it does
      in the ThreadNew page
    !-->
    <div style='display: none;'>{{valueWatch}}</div>

    <div v-html='HTML' style='margin-top: -0.5rem;'></div>
    <div v-if='!value.trim().length' class='input_editor_preview__markdownHTML--empty'>
      Type to get a preview of your MarkDown
    </div>
  </div>
</template>

<script>
  var md = require('markdown-it')({
    html:         false,        // Enable HTML tags in source
    xhtmlOut:     false,        // Use '/' to close single tags (<br />).
                                // This is only for full CommonMark compatibility.
    breaks:       true,        // Convert '\n' in paragraphs into <br>
    langPrefix:   'language-',  // CSS language prefix for fenced blocks. Can be
                                // useful for external highlighters.
    linkify:      true,        // Autoconvert URL-like text to links
    image: false,

    // Enable some language-neutral replacement + quotes beautification
    typographer:  true,

    // Double + single quotes replacement pairs, when typographer enabled,
    // and smartquotes on. Could be either a String or an Array.
    //
    // For example, you can use '«»„“' for Russian, '„“‚‘' for German,
    // and ['«\xA0', '\xA0»', '‹\xA0', '\xA0›'] for French (including nbsp).
    quotes: '“”‘’',

    // Highlighter function. Should return escaped HTML,
    // or '' if the source string is not changed and should be escaped externally.
    // If result starts with <pre... internal wrapper is skipped.
    highlight: function (/*str, lang*/) { return ''; }
  });
  md.disable('image')
  var emoji = require('markdown-it-emoji');
  var twemoji = require('twemoji')
  md.use(emoji);
  md.renderer.rules.emoji = function(token, idx) {
    return twemoji.parse(token[idx].content);
  };
  export default {
    name: 'InputEditorPreview',
    props: ['value', 'mentions'],
    data () {
      return {
        HTML: ''
      }
    },
    computed: {
      valueWatch () {
        this.getHTML();
        return '';
      }
    },
    methods: {
      getHTML () {
        let replacedMd = this.value;
        (this.mentions || []).forEach(mention => {
          let regexp = new RegExp('(^|\\s)@' + mention + '($|\\s)')
          replacedMd = replacedMd.replace(regexp, `$1[@${mention}](/user/${mention})$2`)
        })
        let HTML =md.render(replacedMd);
        this.HTML = HTML;
        this.$linkExpander(HTML, v => this.HTML = v);
      }
    }
  }
</script>

<style lang='scss' scoped>
  @import '../assets/scss/variables.scss';
  .input_editor_preview {
    @at-root #{&}__markdownHTML {
      height: 8.125rem;
      overflow: auto;
      padding: 0.5rem;
      @at-root #{&}--empty {
        @include text($font--role-emphasis, 1rem);
        display: flex;
        margin-top: 0.5rem;
        align-content: center;
        @include user-select(none);
        cursor: default;
        color: $color__darkgray--primary;
      }
    }
  }
</style>
