diff --git a/frontend/src/components/input/editor/emoji/emojiExtension.ts b/frontend/src/components/input/editor/emoji/emojiExtension.ts new file mode 100644 index 000000000..c83d13339 --- /dev/null +++ b/frontend/src/components/input/editor/emoji/emojiExtension.ts @@ -0,0 +1,23 @@ +import {Extension} from '@tiptap/core' +import Suggestion from '@tiptap/suggestion' + +import emojiSuggestionSetup from './emojiSuggestion' + +export const EmojiExtension = Extension.create({ + name: 'emojiAutocomplete', + + addOptions() { + return { + suggestion: emojiSuggestionSetup(), + } + }, + + addProseMirrorPlugins() { + return [ + Suggestion({ + editor: this.editor, + ...this.options.suggestion, + }), + ] + }, +}) diff --git a/frontend/src/components/input/editor/emoji/emojiSuggestion.ts b/frontend/src/components/input/editor/emoji/emojiSuggestion.ts index aa279400b..22dad82b2 100644 --- a/frontend/src/components/input/editor/emoji/emojiSuggestion.ts +++ b/frontend/src/components/input/editor/emoji/emojiSuggestion.ts @@ -1,11 +1,13 @@ import {VueRenderer} from '@tiptap/vue-3' import {computePosition, flip, shift, offset, autoUpdate} from '@floating-ui/dom' import type {Editor, Range} from '@tiptap/core' -import type {EditorState} from '@tiptap/pm/state' +import {PluginKey, type EditorState} from '@tiptap/pm/state' import EmojiList from './EmojiList.vue' import {loadEmojis, filterEmojis, type EmojiEntry} from './emojiData' +export const EmojiSuggestionPluginKey = new PluginKey('emojiSuggestion') + interface SuggestionProps { editor: Editor range: Range @@ -20,6 +22,7 @@ const SHORTCODE_RE = /^[a-zA-Z0-9_]*$/ export default function emojiSuggestionSetup() { return { + pluginKey: EmojiSuggestionPluginKey, char: ':', allowedPrefixes: [' ', '\t', '\n'], startOfLine: false,