Trigger @change when pasting content into editor

This commit is contained in:
kolaente 2020-07-29 21:57:35 +02:00
parent d9361bcd53
commit aa67a6971a
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B

View file

@ -11,7 +11,7 @@
</ul>
</div>
<vue-easymde v-model="text" :configs="config" @change="bubble" class="content" v-if="isEditActive"/>
<vue-easymde v-model="text" :configs="config" @change="bubble" class="content" v-if="isEditActive" @input="handleInput"/>
<div class="preview content" v-if="isPreviewActive" v-html="preview">
</div>
@ -224,7 +224,17 @@
this.isEditActive = true
},
methods: {
bubble() {
// This gets triggered when only pasting content into the editor.
// A change event would not get generated by that, an input event does.
// Therefore, we're using this handler to catch paste events.
// But because this also gets triggered when typing into the editor, we give
// it a higher timeout to make the timouts cancel each other in that case so
// that in the end, only one change event is triggered to the outside per change.
handleInput(val) {
this.text = val
this.bubble(1000)
},
bubble(timeout = 500) {
if (this.changeTimeout !== null) {
clearTimeout(this.changeTimeout)
}
@ -232,7 +242,7 @@
this.changeTimeout = setTimeout(() => {
this.$emit('input', this.text)
this.$emit('change')
}, 500)
}, timeout)
},
replaceAt(str, index, replacement) {
return str.substr(0, index) + replacement + str.substr(index + replacement.length);