<template>
    <div contenteditable @input="onchange">
        <span v-html="rawhtml(value)"></span>
    </div>
</template>

<script>
export default {
    name: 'FormatedText',
    props: {
        value: {
            type: String,
            required: true
        },
        format: {
            type: Function,
            default: null
        }
    },
    emits: ['input'],
    methods: {
        rawhtml(value) {
            if (typeof this.format === 'function') {
                return this.format(value);
            } else {
                return value;
            }
        },
        onchange(event) {
            this.$emit('input', event.target.innerText);
            this.value = event.target.innerText;
        }
    }
};
</script>