From eba1540a95bdba42a3533ec2b63acbdefbf38aae Mon Sep 17 00:00:00 2001
From: G30 <50341825+silentoplayz@users.noreply.github.com>
Date: Thu, 14 May 2026 20:32:56 -0400
Subject: [PATCH] feat(ui): add emoji picker to rich text formatting toolbar
 (#24704)

---
 .../RichTextInput/FormattingButtons.svelte    | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/lib/components/common/RichTextInput/FormattingButtons.svelte b/src/lib/components/common/RichTextInput/FormattingButtons.svelte
index 48faab4578..e230462285 100644
--- a/src/lib/components/common/RichTextInput/FormattingButtons.svelte
+++ b/src/lib/components/common/RichTextInput/FormattingButtons.svelte
@@ -19,6 +19,10 @@
 	import CheckBox from '$lib/components/icons/CheckBox.svelte';
 	import ArrowLeftTag from '$lib/components/icons/ArrowLeftTag.svelte';
 	import ArrowRightTag from '$lib/components/icons/ArrowRightTag.svelte';
+
+	import EmojiPicker from '../EmojiPicker.svelte';
+	import FaceSmile from '$lib/components/icons/FaceSmile.svelte';
+	import { shortCodesToEmojis } from '$lib/stores';
 </script>
 
 <div
@@ -179,4 +183,26 @@
 			<CodeBracket />
 		</button>
 	</Tooltip>
+
+	<EmojiPicker
+		onSubmit={(shortCode) => {
+			const codepoint = $shortCodesToEmojis[shortCode];
+			if (codepoint) {
+				const emoji = codepoint
+					.split('-')
+					.map((cp) => String.fromCodePoint(parseInt(cp, 16)))
+					.join('');
+				editor?.chain().focus().insertContent(emoji).run();
+			}
+		}}
+	>
+		<Tooltip placement="top" content={$i18n.t('Emoji')}>
+			<button
+				class="hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg p-1.5 transition-all"
+				type="button"
+			>
+				<FaceSmile className="size-4" />
+			</button>
+		</Tooltip>
+	</EmojiPicker>
 </div>