<template>
  <div contenteditable="true" @blur="updateValue" v-text="content" class="editable-div"></div>
</template>

<script setup lang="ts">
const content = defineModel("text");

const updateValue = (event: Event) => {
  const target = event.target as HTMLElement;
  console.log(target);
  content.value = target.innerText;
};
</script>

<style scoped>
.editable-div {
  border: none;
  outline: none;
}

.editable-div:focus {
  border: 1px solid #66afe9;
  box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
}
</style>
