diff --git a/frontend/app/package.json b/frontend/app/package.json index 1c691242b0..5ff2bc4cbf 100644 --- a/frontend/app/package.json +++ b/frontend/app/package.json @@ -87,7 +87,7 @@ "@open-ic/open-storage-agent": "^0.1.6", "@sveltejs/svelte-virtual-list": "^3.0.1", "drange": "^2.0.1", - "emoji-picker-element": "^1.11.2", + "emoji-picker-element": "git+https://github.com/hpeebles/emoji-picker-element.git#716e3a30a87e7f7e471f90bebe1af93d90d866ff", "idb": "^6.1.5", "identicon.js": "^2.3.3", "intl-tel-input": "^17.0.16", diff --git a/frontend/app/src/components/home/Markdown.svelte b/frontend/app/src/components/home/Markdown.svelte index 1e64166357..58abf9b558 100644 --- a/frontend/app/src/components/home/Markdown.svelte +++ b/frontend/app/src/components/home/Markdown.svelte @@ -15,17 +15,13 @@ export let suppressLinks: boolean = false; let sanitized = "unsafe"; - let singleEmoji = false; + $: singleEmoji = isSingleEmoji(text); $: userStore = client.userStore; $: options = { breaks: !oneLine, }; - $: { - isSingleEmoji(text).then((b) => singleEmoji = b); - } - function replaceUserIds(text: string): string { return text.replace(/@UserId\(([\d\w-]+)\)/g, (match, p1) => { const u = $userStore[p1]; diff --git a/frontend/app/src/utils/emojis.ts b/frontend/app/src/utils/emojis.ts index 91d5909264..03974b57ff 100644 --- a/frontend/app/src/utils/emojis.ts +++ b/frontend/app/src/utils/emojis.ts @@ -1,7 +1,26 @@ import { Database } from "emoji-picker-element"; +const emojiSet = new Set(); +let initializing = false; + export const emojiDatabase = new Database(); -export async function isSingleEmoji(text: string): Promise { - return text.length > 0 && (await emojiDatabase.getEmojiByUnicodeOrName(text)) !== null; +export function isSingleEmoji(text: string): boolean { + initEmojiSet(); + return emojiSet.has(text); } + +function initEmojiSet() { + if (emojiSet.size > 0 || initializing) return; + initializing = true; + + emojiDatabase + .getAllNativeEmojis() + .then((emojis) => emojis.forEach((e) => { + emojiSet.add(e.unicode); + e.skins?.forEach((s) => emojiSet.add(s.unicode)); + })) + .finally(() => initializing = false); +} + +initEmojiSet(); diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 76d0be3fb0..f4ae0670b9 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -29,7 +29,7 @@ "@open-ic/open-storage-agent": "^0.1.6", "@sveltejs/svelte-virtual-list": "^3.0.1", "drange": "^2.0.1", - "emoji-picker-element": "^1.11.2", + "emoji-picker-element": "git+https://github.com/hpeebles/emoji-picker-element.git#716e3a30a87e7f7e471f90bebe1af93d90d866ff", "idb": "^6.1.5", "identicon.js": "^2.3.3", "intl-tel-input": "^17.0.16", @@ -6859,6 +6859,8 @@ }, "node_modules/emoji-picker-element": { "version": "1.13.0", + "resolved": "git+ssh://git@github.com/hpeebles/emoji-picker-element.git#716e3a30a87e7f7e471f90bebe1af93d90d866ff", + "integrity": "sha512-/DJeFgR2s578Sxw9OniADMqGIEfAPNgqWiA9m4GalLwz1HrVtJPw9sRzJtbX59hyF3TL0jaiiBuNO5VmlJzeYA==", "license": "Apache-2.0" }, "node_modules/emoji-regex": { @@ -20911,7 +20913,9 @@ "version": "0.10.2" }, "emoji-picker-element": { - "version": "1.13.0" + "version": "git+ssh://git@github.com/hpeebles/emoji-picker-element.git#716e3a30a87e7f7e471f90bebe1af93d90d866ff", + "integrity": "sha512-/DJeFgR2s578Sxw9OniADMqGIEfAPNgqWiA9m4GalLwz1HrVtJPw9sRzJtbX59hyF3TL0jaiiBuNO5VmlJzeYA==", + "from": "emoji-picker-element@git+https://github.com/hpeebles/emoji-picker-element.git#716e3a30a87e7f7e471f90bebe1af93d90d866ff" }, "emoji-regex": { "version": "8.0.0" @@ -24365,7 +24369,7 @@ "dompurify": "^2.3.10", "dotenv": "^10.0.0", "drange": "^2.0.1", - "emoji-picker-element": "^1.11.2", + "emoji-picker-element": "git+https://github.com/hpeebles/emoji-picker-element.git#716e3a30a87e7f7e471f90bebe1af93d90d866ff", "eslint": "^7.32.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-prettier": "^3.4.1",