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

<script>
export default {
    name: 'FormatedText',
    props: {
        value: {
            type: String,
            required: true
        },
        format: {
            type: Function,
            default: null
        }
    },
    data() {
        return {
            selection: null,
        };
    },
    emits: ['input'],
    methods: {
        rawhtml(value) {
            if (typeof this.format === 'function') {
                return this.format(value);
            } else {
                return value;
            }
        },
        onchange(event) {
            this.selection = window.getSelection();
            this.$emit('input', event.target.innerText);
        }
    },
    watch: {
        value() {
            if (this.selection) {
                const div = this.$refs.text;
                const range = document.createRange();
                range.setStart(div.childNodes[0], this.selection.anchorOffset);
                range.setEnd(div.childNodes[0], Math.min(this.selection.anchorOffset, div.childNodes[0].length));
                this.selection.removeAllRanges();
                this.selection.addRange(range);
            }
        }
    }
};
</script>