Trigger @change when pasting content into editor

src/components/input/editor.vue

@@ -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);