2025-12-06 08:28:20 +01:00
12 changed files with 102 additions and 230 deletions
--- a/bun.lock
+++ b/bun.lock
@ -9,7 +9,6 @@
        "@tailwindcss/typography": "^0.5.16",
        "@tailwindcss/vite": "^4.1.11",
        "@tanstack/vue-table": "^8.21.3",
-        "@tiptap/extension-emoji": "2.25.0",
        "@tiptap/extension-highlight": "^2.25.0",
        "@tiptap/extension-image": "^2.25.0",
        "@tiptap/extension-link": "^2.25.0",
@ -691,8 +690,6 @@

    "@tiptap/extension-dropcursor": ["@tiptap/extension-dropcursor@2.25.0", "", { "peerDependencies": { "@tiptap/core": "^2.7.0", "@tiptap/pm": "^2.7.0" } }, "sha512-eSHqp+iUI2mGVwvIyENP02hi5TSyQ+bdwNwIck6bdzjRvXakm72+8uPfVSLGxRKAQZ0RFtmux8ISazgUqF/oSw=="],

-    "@tiptap/extension-emoji": ["@tiptap/extension-emoji@2.25.0", "", { "dependencies": { "emoji-regex": "^10.4.0", "emojibase-data": "^15", "is-emoji-supported": "^0.0.5" }, "peerDependencies": { "@tiptap/core": "^2.7.0", "@tiptap/pm": "^2.7.0", "@tiptap/suggestion": "^2.7.0" } }, "sha512-C6e8Q5Hf40zyWHoGwrTwfoaL6K4DzctGR/irnOG7RoYYitGCmtJYQiLuuhIjcwbtccxnbNA/7H6Vwsl8sm9Pag=="],
-
    "@tiptap/extension-floating-menu": ["@tiptap/extension-floating-menu@2.25.0", "", { "dependencies": { "tippy.js": "^6.3.7" }, "peerDependencies": { "@tiptap/core": "^2.7.0", "@tiptap/pm": "^2.7.0" } }, "sha512-hPZ5SNpI14smTz4GpWQXTnxmeICINYiABSgXcsU5V66tik9OtxKwoCSR/gpU35esaAFUVRdjW7+sGkACLZD5AQ=="],

    "@tiptap/extension-gapcursor": ["@tiptap/extension-gapcursor@2.25.0", "", { "peerDependencies": { "@tiptap/core": "^2.7.0", "@tiptap/pm": "^2.7.0" } }, "sha512-s/3WDbgkvLac88h5iYJLPJCDw8tMhlss1hk9GAo+zzP4h0xfazYie09KrA0CBdfaSOFyeJK3wedzjKZBtdgX4w=="],
@ -1193,7 +1190,7 @@

    "embla-carousel-vue": ["embla-carousel-vue@8.6.0", "", { "dependencies": { "embla-carousel": "8.6.0", "embla-carousel-reactive-utils": "8.6.0" }, "peerDependencies": { "vue": "^3.2.37" } }, "sha512-v8UO5UsyLocZnu/LbfQA7Dn2QHuZKurJY93VUmZYP//QRWoCWOsionmvLLAlibkET3pGPs7++03VhJKbWD7vhQ=="],

-    "emoji-regex": ["emoji-regex@10.4.0", "", {}, "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw=="],
+    "emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],

    "emojibase": ["emojibase@16.0.0", "", {}, "sha512-Nw2m7JLIO4Ou2X/yZPRNscHQXVbbr6SErjkJ7EooG7MbR3yDZszCv9KTizsXFc7yZl0n3WF+qUKIC/Lw6H9xaQ=="],

@ -1467,8 +1464,6 @@

    "is-docker": ["is-docker@3.0.0", "", { "bin": { "is-docker": "cli.js" } }, "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ=="],

-    "is-emoji-supported": ["is-emoji-supported@0.0.5", "", {}, "sha512-WOlXUhDDHxYqcSmFZis+xWhhqXiK2SU0iYiqmth5Ip0FHLZQAt9rKL5ahnilE8/86WH8tZ3bmNNNC+bTzamqlw=="],
-
    "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],

    "is-finalizationregistry": ["is-finalizationregistry@1.1.1", "", { "dependencies": { "call-bound": "^1.0.3" } }, "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg=="],
@ -2567,8 +2562,6 @@

    "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],

-    "@tiptap/extension-emoji/emojibase-data": ["emojibase-data@15.3.2", "", { "peerDependencies": { "emojibase": "*" } }, "sha512-TpDyTDDTdqWIJixV5sTA6OQ0P0JfIIeK2tFRR3q56G9LK65ylAZ7z3KyBXokpvTTJ+mLUXQXbLNyVkjvnTLE+A=="],
-
    "@typescript-eslint/typescript-estree/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],

    "@vercel/nft/estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
@ -2703,12 +2696,8 @@

    "source-map-support/source-map": ["source-map@0.6.1", "", {}, "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="],

-    "string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
-
    "string-width/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],

-    "string-width-cjs/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
-
    "string-width-cjs/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],

    "string_decoder/safe-buffer": ["safe-buffer@5.2.1", "", {}, "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="],
--- a/components/composer/composer.ts
+++ b/components/composer/composer.ts
@ -46,8 +46,8 @@ export const state = reactive<ComposerState>({
 watch(
    state,
    (newState) => {
-        const characterLimit =
-            identity.value?.instance.configuration.statuses.max_characters ?? 0;
+        const characterLimit = (identity.value as Identity).instance
+            .configuration.statuses.max_characters;
        const characterCount = newState.rawContent.length;

        state.canSend =
--- a/components/editor/bubble-menu.vue
+++ b/components/editor/bubble-menu.vue
@ -1,97 +0,0 @@
-<script setup lang="ts">
-import { BubbleMenu, type Editor } from "@tiptap/vue-3";
-import {
-    BoldIcon,
-    CurlyBracesIcon,
-    ItalicIcon,
-    StrikethroughIcon,
-    SubscriptIcon,
-    SuperscriptIcon,
-    UnderlineIcon,
-} from "lucide-vue-next";
-import { ToggleGroup, ToggleGroupItem } from "~/components/ui/toggle-group";
-
-const { editor } = defineProps<{
-    editor: Editor;
-}>();
-
-const active = ref<string[]>(
-    [
-        editor.isActive("bold") ? "bold" : null,
-        editor.isActive("italic") ? "italic" : null,
-        editor.isActive("underline") ? "underline" : null,
-        editor.isActive("code") ? "code" : null,
-        editor.isActive("strike") ? "strike" : null,
-        editor.isActive("subscript") ? "subscript" : null,
-        editor.isActive("superscript") ? "superscript" : null,
-    ].filter((s) => s !== null),
-);
-
-watch(active, (value) => {
-    if (value.includes("bold")) {
-        editor.chain().focus().toggleBold().run();
-    } else {
-        editor.chain().unsetBold().run();
-    }
-    if (value.includes("italic")) {
-        editor.chain().focus().toggleItalic().run();
-    } else {
-        editor.chain().unsetItalic().run();
-    }
-    if (value.includes("underline")) {
-        editor.chain().focus().toggleUnderline().run();
-    } else {
-        editor.chain().unsetUnderline().run();
-    }
-    if (value.includes("code")) {
-        editor.chain().focus().toggleCode().run();
-    } else {
-        editor.chain().unsetCode().run();
-    }
-    if (value.includes("strike")) {
-        editor.chain().focus().toggleStrike().run();
-    } else {
-        editor.chain().unsetStrike().run();
-    }
-    if (value.includes("subscript")) {
-        editor.chain().focus().toggleSubscript().run();
-    } else {
-        editor.chain().unsetSubscript().run();
-    }
-    if (value.includes("superscript")) {
-        editor.chain().focus().toggleSuperscript().run();
-    } else {
-        editor.chain().unsetSuperscript().run();
-    }
-});
-</script>
-
-<template>
-    <BubbleMenu :editor="editor" class="bg-popover rounded-md">
-        <ToggleGroup type="multiple"
-            v-model="active"
-        >
-            <ToggleGroupItem value="bold">
-                <BoldIcon />
-            </ToggleGroupItem>
-            <ToggleGroupItem value="italic">
-                <ItalicIcon />
-            </ToggleGroupItem>
-            <ToggleGroupItem value="underline">
-                <UnderlineIcon />
-            </ToggleGroupItem>
-            <ToggleGroupItem value="code">
-                <CurlyBracesIcon />
-            </ToggleGroupItem>
-            <ToggleGroupItem value="strike">
-                <StrikethroughIcon />
-            </ToggleGroupItem>
-            <ToggleGroupItem value="subscript">
-                <SubscriptIcon />
-            </ToggleGroupItem>
-            <ToggleGroupItem value="superscript">
-                <SuperscriptIcon />
-            </ToggleGroupItem>
-        </ToggleGroup>
-    </BubbleMenu>
-</template>
--- a/components/editor/content.vue
+++ b/components/editor/content.vue
@ -1,12 +1,9 @@
 <template>
-    <BubbleMenu :editor="editor" />
    <EditorContent :editor="editor"
-        v-bind="$attrs"
        :class="[$style.content, 'prose prose-sm dark:prose-invert break-words prose-a:no-underline prose-a:hover:underline prose-p:first-of-type:mt-0']" />
 </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";
@ -16,7 +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 BubbleMenu from "./bubble-menu.vue";
+import { Emoji } from "./emoji.ts";
 import suggestion from "./suggestion.ts";

 const content = defineModel<string>("content");
@ -52,20 +49,7 @@ const editor = new Editor({
            },
            suggestion,
        }),
-        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",
-            },
-        }),
+        Emoji,
    ],
    content: content.value,
    onUpdate: ({ editor }) => {
@ -115,8 +99,4 @@ 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>
--- a/components/editor/emoji.ts
+++ b/components/editor/emoji.ts
@ -0,0 +1,78 @@
+/**
+ * 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 };
+                },
+            }),
+        ];
+    },
+});
--- a/components/editor/emoji.vue
+++ b/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>
--- a/components/ui/toggle-group/ToggleGroup.vue
+++ b/components/ui/toggle-group/ToggleGroup.vue
@ -1,45 +0,0 @@
-<script setup lang="ts">
-import { reactiveOmit } from "@vueuse/core";
-import type { VariantProps } from "class-variance-authority";
-import {
-    ToggleGroupRoot,
-    type ToggleGroupRootEmits,
-    type ToggleGroupRootProps,
-    useForwardPropsEmits,
-} from "reka-ui";
-import { type HTMLAttributes, provide } from "vue";
-import { cn } from "@/lib/utils";
-import type { toggleVariants } from "../toggle/index.ts";
-
-type ToggleGroupVariants = VariantProps<typeof toggleVariants>;
-
-const props = defineProps<
-    ToggleGroupRootProps & {
-        class?: HTMLAttributes["class"];
-        variant?: ToggleGroupVariants["variant"];
-        size?: ToggleGroupVariants["size"];
-    }
->();
-const emits = defineEmits<ToggleGroupRootEmits>();
-
-provide("toggleGroup", {
-    variant: props.variant,
-    size: props.size,
-});
-
-const delegatedProps = reactiveOmit(props, "class", "size", "variant");
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
-</script>
-
-<template>
-  <ToggleGroupRoot
-    v-slot="slotProps"
-    data-slot="toggle-group"
-    :data-size="size"
-    :data-variant="variant"
-    v-bind="forwarded"
-    :class="cn('group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs', props.class)"
-  >
-    <slot v-bind="slotProps" />
-  </ToggleGroupRoot>
-</template>
--- a/components/ui/toggle-group/ToggleGroupItem.vue
+++ b/components/ui/toggle-group/ToggleGroupItem.vue
@ -1,46 +0,0 @@
-<script setup lang="ts">
-import { reactiveOmit } from "@vueuse/core";
-import type { VariantProps } from "class-variance-authority";
-import {
-    ToggleGroupItem,
-    type ToggleGroupItemProps,
-    useForwardProps,
-} from "reka-ui";
-import { type HTMLAttributes, inject } from "vue";
-import { cn } from "@/lib/utils";
-import { toggleVariants } from "../toggle/index.ts";
-
-type ToggleGroupVariants = VariantProps<typeof toggleVariants>;
-
-const props = defineProps<
-    ToggleGroupItemProps & {
-        class?: HTMLAttributes["class"];
-        variant?: ToggleGroupVariants["variant"];
-        size?: ToggleGroupVariants["size"];
-    }
->();
-
-const context = inject<ToggleGroupVariants>("toggleGroup");
-
-const delegatedProps = reactiveOmit(props, "class", "size", "variant");
-const forwardedProps = useForwardProps(delegatedProps);
-</script>
-
-<template>
-  <ToggleGroupItem
-    v-slot="slotProps"
-    data-slot="toggle-group-item"
-    :data-variant="context?.variant || variant"
-    :data-size="context?.size || size"
-    v-bind="forwardedProps"
-    :class="cn(
-      toggleVariants({
-        variant: context?.variant || variant,
-        size: context?.size || size,
-      }),
-      'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
-      props.class)"
-  >
-    <slot v-bind="slotProps" />
-  </ToggleGroupItem>
-</template>
--- a/components/ui/toggle-group/index.ts
+++ b/components/ui/toggle-group/index.ts
@ -1,2 +0,0 @@
-export { default as ToggleGroup } from "./ToggleGroup.vue";
-export { default as ToggleGroupItem } from "./ToggleGroupItem.vue";
--- a/layouts/app.vue
+++ b/layouts/app.vue
@ -9,7 +9,7 @@
    </SidebarProvider>
    <MobileNavbar v-if="identity" />
    <Preferences />
-    <ComposerDialog v-if="identity" />
+    <ComposerDialog />
 </template>

 <script setup lang="ts">
--- a/layouts/default.vue
+++ b/layouts/default.vue
@ -1,8 +1,8 @@
 <template>
    <slot />
-    <ComposerDialog v-if="identity" />
+    <ComposerDialog />
 </template>

 <script lang="ts" setup>
 import ComposerDialog from "~/components/composer/dialog.vue";
-</script>
+</script>
--- a/package.json
+++ b/package.json
@ -37,7 +37,6 @@
        "@tailwindcss/typography": "^0.5.16",
        "@tailwindcss/vite": "^4.1.11",
        "@tanstack/vue-table": "^8.21.3",
-        "@tiptap/extension-emoji": "2.25.0",
        "@tiptap/extension-highlight": "^2.25.0",
        "@tiptap/extension-image": "^2.25.0",
        "@tiptap/extension-link": "^2.25.0",