From 4785efd43c948ddf27a5974830cf9a83c9073eb8 Mon Sep 17 00:00:00 2001
From: codytseng <codytseng98@gmail.com>
Date: Wed, 28 May 2025 22:04:38 +0800
Subject: [PATCH] feat: show emoji picker on non-touch devices

---
 src/components/PostEditor/PostContent.tsx | 14 +++++++++++++-
 src/lib/utils.ts                          |  5 +++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/PostEditor/PostContent.tsx b/src/components/PostEditor/PostContent.tsx
index 26045482..50f01b02 100644
--- a/src/components/PostEditor/PostContent.tsx
+++ b/src/components/PostEditor/PostContent.tsx
@@ -3,12 +3,14 @@ import { Button } from '@/components/ui/button'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { useToast } from '@/hooks/use-toast'
 import { createCommentDraftEvent, createShortTextNoteDraftEvent } from '@/lib/draft-event'
+import { isTouchDevice } from '@/lib/utils'
 import { useNostr } from '@/providers/NostrProvider'
 import postContentCache from '@/services/post-content-cache.service'
-import { ImageUp, LoaderCircle, Settings } from 'lucide-react'
+import { ImageUp, LoaderCircle, Settings, Smile } from 'lucide-react'
 import { Event, kinds } from 'nostr-tools'
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import EmojiPickerDialog from '../EmojiPickerDialog'
 import Mentions from './Mentions'
 import { usePostEditor } from './PostEditorProvider'
 import PostOptions from './PostOptions'
@@ -124,6 +126,16 @@ export default function PostContent({
               {uploadingFiles > 0 ? <LoaderCircle className="animate-spin" /> : <ImageUp />}
             </Button>
           </Uploader>
+          {/* I'm not sure why, but after triggering the virtual keyboard,
+              opening the emoji picker drawer causes an issue,
+              the emoji I tap isn't the one that gets inserted. */}
+          {!isTouchDevice() && (
+            <EmojiPickerDialog onEmojiClick={(emoji) => textareaRef.current?.insertText(emoji)}>
+              <Button variant="ghost" size="icon">
+                <Smile />
+              </Button>
+            </EmojiPickerDialog>
+          )}
           <Button
             variant="ghost"
             size="icon"
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index f759d07c..a91496e8 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -24,6 +24,11 @@ export function isTorBrowser() {
   return /torbrowser/i.test(ua)
 }
 
+export function isTouchDevice() {
+  if (typeof window === 'undefined' || !window.navigator) return false
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 0
+}
+
 export function isInViewport(el: HTMLElement) {
   const rect = el.getBoundingClientRect()
   return (