feat: ✨ Add inline emoji support to composer

components/editor/content.vue

@@ -13,6 +13,7 @@ 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");
@@ -43,6 +44,7 @@ const editor = new Editor({
             },
             suggestion,
         }),
+        Emoji,
     ],
     content: content.value,
     onUpdate: ({ editor }) => {

components/editor/emoji.ts

@@ -0,0 +1,80 @@
+/**
+ * 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

@@ -0,0 +1,16 @@
+<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>