Use VueEasyMDE initialized event instead of setTimeout as proposed by @juliushaertl

Signed-off-by: ben <ben@ro.tt>
This commit is contained in:
ben
2022-05-02 21:45:24 +02:00
committed by Julius Härtl
parent f01a4433ed
commit 3af54d7186

View File

@@ -60,6 +60,7 @@
ref="markdownEditor" ref="markdownEditor"
v-model="description" v-model="description"
:configs="mdeConfig" :configs="mdeConfig"
@initialized="addKeyListeners"
@update:modelValue="updateDescription" @update:modelValue="updateDescription"
@blur="saveDescription" /> @blur="saveDescription" />
@@ -175,6 +176,26 @@ export default {
}, },
}, },
methods: { methods: {
addKeyListeners() {
this.$refs.markdownEditor.easymde.codemirror.on('keydown', (a, b) => {
if (this.keyExitState === 0 && (b.key === 'Meta' || b.key === 'Alt')) {
this.keyExitState = 1
}
if (this.keyExitState === 1 && b.key === 'Enter') {
this.keyExitState = 0
this.$refs.markdownEditor.easymde.codemirror.off('keydown', undefined)
this.$refs.markdownEditor.easymde.codemirror.off('keyup', undefined)
this.hideEditor()
}
})
this.$refs.markdownEditor.easymde.codemirror.on('keyup', (a, b) => {
if (b.key === 'Meta' || b.key === 'Control') {
this.keyExitState = 0
}
})
},
showEditor() { showEditor() {
if (!this.canEdit) { if (!this.canEdit) {
return return
@@ -182,28 +203,6 @@ export default {
this.descriptionEditing = true this.descriptionEditing = true
this.description = this.card.description this.description = this.card.description
// Has to start after the Editor is fully loaded. This shouldn't take longer than 1/4 second
setTimeout(() => {
this.$refs.markdownEditor.easymde.codemirror.on('keydown', (a, b) => {
if (this.keyExitState === 0 && (b.key === 'Meta' || b.key === 'Alt')) {
this.keyExitState = 1
}
if (this.keyExitState === 1 && b.key === 'Enter') {
this.keyExitState = 0
this.$refs.markdownEditor.easymde.codemirror.off('keydown', undefined)
this.$refs.markdownEditor.easymde.codemirror.off('keyup', undefined)
this.hideEditor()
}
})
this.$refs.markdownEditor.easymde.codemirror.on('keyup', (a, b) => {
if (b.key === 'Meta' || b.key === 'Control') {
this.keyExitState = 0
}
})
}, 250)
}, },
hideEditor() { hideEditor() {
this.$refs.markdownEditor.easymde.codemirror.off('keydown', undefined) this.$refs.markdownEditor.easymde.codemirror.off('keydown', undefined)