Add emoji autocompletion (#987)

Adds emoji autocompletion by typing `:<search_string>`.

It utilizes the emoji functions from nextcloud-vue[1] and the TipTap
suggestions extension.

[1] https://github.com/nextcloud/nextcloud-vue/pull/1474

Signed-off-by: Jonas <jonas@freesources.org>

1 files changed, 54 insertions, 1 deletions

diff --git a/src/EditorFactory.js b/src/EditorFactory.js
index 5e3897b9d..4e9bb9cd8 100644
--- a/src/EditorFactory.js
+++ b/src/EditorFactory.js
@@ -42,6 +42,10 @@ import {
 import { Markdown, Emoji } from './extensions'
 import { translate as t } from '@nextcloud/l10n'
 import { listLanguages, registerLanguage } from 'lowlight/lib/core'
+import { emojiSearch } from '@nextcloud/vue/dist/Functions/emoji'
+import { VueRenderer } from '@tiptap/vue-2'
+import EmojiList from './components/EmojiList'
+import tippy from 'tippy.js'
 
 import 'proxy-polyfill'
 
@@ -79,7 +83,56 @@ const createEditor = ({ content, onCreate, onUpdate, extensions, enableRichEditi
 			ListItem,
 			Underline,
 			Image.configure({ currentDirectory, inline: true }),
-			Emoji,
+			Emoji.configure({
+				suggestion: {
+					items: ({ query }) => {
+						return emojiSearch(query)
+					},
+					render: () => {
+						let component
+						let popup
+
+						return {
+							onStart: props => {
+								component = new VueRenderer(EmojiList, {
+									parent: this,
+									propsData: props,
+								})
+
+								popup = tippy('body', {
+									getReferenceClientRect: props.clientRect,
+									appendTo: () => document.body,
+									content: component.element,
+									showOnCreate: true,
+									interactive: true,
+									trigger: 'manual',
+									placement: 'bottom-start',
+								})
+							},
+
+							onUpdate(props) {
+								component.updateProps(props)
+								popup[0].setProps({
+									getReferenceClientRect: props.clientRect,
+								})
+							},
+
+							onKeyDown(props) {
+								if (props.event.key === 'Escape') {
+									popup[0].hide()
+									return true
+								}
+								return component.ref?.onKeyDown(props)
+							},
+
+							onExit() {
+								popup[0].destroy()
+								component.destroy()
+							},
+						}
+					},
+				},
+			}),
 			Placeholder.configure({
 				emptyNodeClass: 'is-empty',
 				placeholder: t('text', 'Add notes, lists or links …'),