Stop emoji autocompletion when it got escaped by hitting <Esc>

Signed-off-by: Jonas <[email protected]>

Author: mejo-

src/EditorFactory.js

@@ -33,7 +33,7 @@ import { translate as t } from '@nextcloud/l10n'
 import { listLanguages, registerLanguage } from 'lowlight/lib/core.js'
 import { emojiSearch } from '@nextcloud/vue/dist/Functions/emoji.js'
 import { VueRenderer } from '@tiptap/vue-2'
-import EmojiList from './components/EmojiList.vue'
+import EmojiListWrapper from './components/EmojiListWrapper.vue'
 import MentionSuggestion from './components/Mention/suggestion.js'
 import tippy from 'tippy.js'
 
@@ -73,7 +73,7 @@ const createEditor = ({ content, onCreate, onUpdate, extensions, enableRichEditi
 
 						return {
 							onStart: props => {
-								component = new VueRenderer(EmojiList, {
+								component = new VueRenderer(EmojiListWrapper, {
 									parent: this,
 									propsData: props,
 								})
@@ -98,7 +98,8 @@ const createEditor = ({ content, onCreate, onUpdate, extensions, enableRichEditi
 
 							onKeyDown(props) {
 								if (props.event.key === 'Escape') {
-									popup[0].hide()
+									component.destroy()
+									popup[0].destroy()
 									return true
 								}
 								return component.ref?.onKeyDown(props)

src/components/EmojiListWrapper.vue

@@ -0,0 +1,57 @@
+<!--
+  - @copyright Copyright (c) 2021 Jonas <[email protected]>
+  -
+  - @author Jonas <[email protected]>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<EmojiList ref="emojiList"
+		:items="items"
+		:command="command" />
+</template>
+
+<script>
+import EmojiList from './EmojiList.vue'
+
+export default {
+	name: 'EmojiListWrapper',
+
+	components: {
+		EmojiList,
+	},
+
+	props: {
+		items: {
+			type: Array,
+			required: true,
+		},
+		command: {
+			type: Function,
+			required: true,
+		},
+	},
+
+	methods: {
+		onKeyDown({ event }) {
+			// Ignore any key modifier combinations
+			return this.$refs.emojiList?.onKeyDown({ event })
+		},
+	},
+}
+</script>