<template>
    <div class="editable" contenteditable="true"
         v-html="innerText"
         :contenteditable="canEdit"
         @focus="isLocked = true"
         @blur="isLocked = false"
         @input="changeText"></div>
</template>
<script>
    export default {
        props: {
            value: {
                type: String,
                default: ''
            },
            canEdit: {
                type: Boolean,
                default: true
            }
        },
        data(){
            return {
                innerText: this.value,
                isLocked: false
            }
        },
        watch: {
            'value'(){
                if (!this.isLocked || !this.innerText) {
                    this.innerText = this.value;
                }
            }
        },
        methods: {
            changeText(){
                if (!this.isLocked || !this.innerText) {
                    this.$emit('input', this.$el.innerHTML);
                }
            }
        }
    }
</script>

<style lang="less" scoped>
.editable{
    width: 100%;
    height: 100%;
    word-break: break-all;
    outline: none;
    user-select: text;
    white-space: pre-wrap;
    text-align: left;
    // display: flex;
    // justify-content: center;
    // align-items: center;
}
</style>