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