refactor: ♻️ Use official Tiptap emoji extension

components/editor/content.vue

@@ -4,6 +4,7 @@
 </template>
 
 <script lang="ts" setup>
+import Emoji, { emojis } from "@tiptap/extension-emoji";
 import Highlight from "@tiptap/extension-highlight";
 import Link from "@tiptap/extension-link";
 import Mention from "@tiptap/extension-mention";
@@ -13,7 +14,6 @@ import Superscript from "@tiptap/extension-superscript";
 import Underline from "@tiptap/extension-underline";
 import StarterKit from "@tiptap/starter-kit";
 import { Editor, EditorContent } from "@tiptap/vue-3";
-import { Emoji } from "./emoji.ts";
 import suggestion from "./suggestion.ts";
 
 const content = defineModel<string>("content");
@@ -49,7 +49,20 @@ const editor = new Editor({
             },
             suggestion,
         }),
-        Emoji,
+        Emoji.configure({
+            emojis: emojis.concat(
+                identity.value?.emojis.map((emoji) => ({
+                    name: emoji.shortcode,
+                    shortcodes: [emoji.shortcode],
+                    group: emoji.category ?? undefined,
+                    tags: [],
+                    fallbackImage: emoji.url,
+                })) || [],
+            ),
+            HTMLAttributes: {
+                class: "emoji not-prose",
+            },
+        }),
     ],
     content: content.value,
     onUpdate: ({ editor }) => {
@@ -99,4 +112,8 @@ onUnmounted(() => {
 .tiptap .mention {
     @apply font-bold rounded-sm text-primary-foreground bg-primary px-1 py-0.5;
 }
+
+.tiptap .emoji > img {
+    @apply h-[1lh] align-middle inline hover:scale-110 transition-transform duration-75 ease-in-out;
+}
 </style>

components/editor/emoji.ts

@@ -1,78 +0,0 @@
-/**
- * Adapted from https://github.com/ueberdosis/tiptap/blob/main/packages/extension-image/src/image.ts
- */
-
-import { Node, nodeInputRule } from "@tiptap/core";
-import { VueNodeViewRenderer } from "@tiptap/vue-3";
-import EmojiVue from "./emoji.vue";
-
-export interface EmojiOptions {
-    /**
-     * Shortcode of the emoji.
-     */
-    shortcode: string;
-}
-
-declare module "@tiptap/core" {
-    interface Commands<ReturnType> {
-        emoji: {
-            /**
-             * Add an emoji
-             * @param options The image attributes
-             * @example
-             * editor
-             *   .commands
-             *   .setEmoji({ shortcode: 'smile' })
-             */
-            setImage: (options: { shortcode: string }) => ReturnType;
-        };
-    }
-}
-
-/**
- * Matches an emoji to a :shortcode: on input.
- */
-export const inputRegex = /(?:^|\s)(:([a-zA-Z0-9_]+):)$/;
-
-/**
- * This extension allows you to insert emojis.
- */
-export const Emoji = Node.create<EmojiOptions>({
-    name: "emoji",
-
-    draggable: true,
-
-    group: "inline",
-
-    inline: true,
-
-    addAttributes() {
-        return {
-            shortcode: {
-                default: this.options.shortcode,
-            },
-        };
-    },
-
-    renderHTML({ node }) {
-        return `:${node.attrs.shortcode}:`;
-    },
-
-    addNodeView() {
-        return VueNodeViewRenderer(EmojiVue);
-    },
-
-    addInputRules() {
-        return [
-            nodeInputRule({
-                find: inputRegex,
-                type: this.type,
-                getAttributes: (match) => {
-                    const [, , shortcode] = match;
-
-                    return { shortcode };
-                },
-            }),
-        ];
-    },
-});

components/editor/emoji.vue

@@ -1,16 +0,0 @@
-<template>
-    <NodeViewWrapper as="span">
-        <img v-if="emojiData" :src="emojiData.url" class="h-[1lh] align-middle inline not-prose hover:scale-110 transition-transform duration-75 ease-in-out" :alt="emojiData.description || `:${emojiData.shortcode}:`" :title="emojiData.shortcode" />
-        <img v-else src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cdefs%3E%3Cpattern id='a' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Cpath fill='%23ff00dc' d='M0 0h50v50H0zm50 50h50v50H50z'/%3E%3Cpath fill='%23010001' d='M50 0h50v50H50zM0 50h50v50H0z'/%3E%3C/pattern%3E%3C/defs%3E%3Cpath fill='url(%23a)' d='M0 0h100v100H0z'/%3E%3C/svg%3E" class="h-[1lh] align-middle inline not-prose hover:scale-110 transition-transform duration-75 ease-in-out" alt="A purple and black missing texture image" title="Emoji not found" />
-    </NodeViewWrapper>
-</template>
-
-<script lang="ts" setup>
-import { type NodeViewProps, NodeViewWrapper } from "@tiptap/vue-3";
-
-const { node } = defineProps<NodeViewProps>();
-
-const emojiData = computed(() =>
-    identity.value?.emojis.find((e) => e.shortcode === node.attrs.shortcode),
-);
-</script>