JSFiddle - React, Tailwind, and code Playground

by jessuni

HTML

<div id="app">
  <h1>contenteditable caret bug fix</h1>
  <h2>Component 1</h2>
  <card v-model="content"></card>
  <h2>Component 2</h2>
  <card v-model="content"></card>
</div>

Vue

const app = Vue.createApp({
	data() {
  	return {
	    content: "Caret will not jump on input"
    }
  }
})

app.component('card',{
  template: `<div v-once contenteditable="true" v-text="modelValue" @input="$emit('input', $event.target.textContent)"></div>`,
  props: {
    modelValue: String,
  },
  
  watch: {
    modelValue: function (v) {
      if (document.activeElement == this.$el) {
        return
      }
      this.$el.innerHTML = v
    }
  }
})

app.mount('#app')