mirror of
https://github.com/versia-pub/frontend.git
synced 2025-12-06 08:28:20 +01:00
refactor: ♻️ Use official Tiptap emoji extension
This commit is contained in:
Jesse Wierzbinski
parent
f8e219889c
commit
5dd1752a25
13
bun.lock
13
bun.lock
|
|
@ -9,6 +9,7 @@
|
|||
"@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",
|
||||
|
|
@ -690,6 +691,8 @@
|
|||
|
||||
"@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=="],
|
||||
|
|
@ -1190,7 +1193,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@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
|
||||
"emoji-regex": ["emoji-regex@10.4.0", "", {}, "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw=="],
|
||||
|
||||
"emojibase": ["emojibase@16.0.0", "", {}, "sha512-Nw2m7JLIO4Ou2X/yZPRNscHQXVbbr6SErjkJ7EooG7MbR3yDZszCv9KTizsXFc7yZl0n3WF+qUKIC/Lw6H9xaQ=="],
|
||||
|
||||
|
|
@ -1464,6 +1467,8 @@
|
|||
|
||||
"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=="],
|
||||
|
|
@ -2562,6 +2567,8 @@
|
|||
|
||||
"@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=="],
|
||||
|
|
@ -2696,8 +2703,12 @@
|
|||
|
||||
"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=="],
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
},
|
||||
}),
|
||||
];
|
||||
},
|
||||
});
|
||||
|
|
@ -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>
|
||||
|
|
@ -37,6 +37,7 @@
|
|||
"@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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue