<template>
    <textarea v-model="markdown" cols="30" rows="10"></textarea>
    <div ref="target" v-html="html"></div>
</template>

<script>
import { debounce } from "../helpers";

export default {
    data() {
        return {
            markdown: "",
            html: null,
            converter: null,
            onChange: () => {}
        };
    },
    mounted() {
        this.converter = new showdown.Converter();
        this.onChange = debounce(() => {
            this.onChangeHandler();
        }, 500);
    },
    methods: {
        onChangeHandler() {
            this.html = this.converter.makeHtml(this.markdown);
        }
    },
    watch: {
        markdown() {
            this.onChange();
        }
    }
}
</script>
