From 6afa44ddcb78b9f3a2824a06ac0166220ce05c4e Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Fri, 20 Dec 2024 16:57:19 +0000 Subject: [PATCH 1/9] Moderate composer quote (#7213) * moderate composer quote * consistency with other uses --- src/view/com/util/post-embeds/QuoteEmbed.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/view/com/util/post-embeds/QuoteEmbed.tsx b/src/view/com/util/post-embeds/QuoteEmbed.tsx index 77f5f6c951..cb549f7cda 100644 --- a/src/view/com/util/post-embeds/QuoteEmbed.tsx +++ b/src/view/com/util/post-embeds/QuoteEmbed.tsx @@ -26,7 +26,7 @@ import {useQueryClient} from '@tanstack/react-query' import {HITSLOP_20} from '#/lib/constants' import {usePalette} from '#/lib/hooks/usePalette' import {InfoCircleIcon} from '#/lib/icons' -import {moderatePost_wrapped} from '#/lib/moderatePost_wrapped' +import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped' import {makeProfileLink} from '#/lib/routes/links' import {s} from '#/lib/styles' import {useModerationOpts} from '#/state/preferences/moderation-opts' @@ -134,9 +134,7 @@ function QuoteEmbedModerated({ [viewRecord], ) const moderation = React.useMemo(() => { - return moderationOpts - ? moderatePost_wrapped(postView, moderationOpts) - : undefined + return moderationOpts ? moderatePost(postView, moderationOpts) : undefined }, [postView, moderationOpts]) return ( @@ -295,10 +293,14 @@ export function QuoteX({onRemove}: {onRemove: () => void}) { export function LazyQuoteEmbed({uri}: {uri: string}) { const {data} = useResolveLinkQuery(uri) + const moderationOpts = useModerationOpts() if (!data || data.type !== 'record' || data.kind !== 'post') { return null } - return + const moderation = moderationOpts + ? moderatePost(data.view, moderationOpts) + : undefined + return } function viewRecordToPostView( From 8a3dfcb9d0860eb8f8112a84dcf32ae522f77069 Mon Sep 17 00:00:00 2001 From: dan Date: Fri, 20 Dec 2024 18:00:30 +0000 Subject: [PATCH 2/9] Don't add unused keydown listeners (#7218) --- src/view/com/util/forms/NativeDropdown.web.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/view/com/util/forms/NativeDropdown.web.tsx b/src/view/com/util/forms/NativeDropdown.web.tsx index c1a0b80966..b3ec319e3b 100644 --- a/src/view/com/util/forms/NativeDropdown.web.tsx +++ b/src/view/com/util/forms/NativeDropdown.web.tsx @@ -70,6 +70,10 @@ export function NativeDropdown({ const menuRef = React.useRef(null) React.useEffect(() => { + if (!open) { + return + } + function clickHandler(e: MouseEvent) { const t = e.target From 8116d12c15495fa192e92f5bfb75cb561bb16402 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Fri, 20 Dec 2024 13:59:33 -0600 Subject: [PATCH 3/9] Fix Emoji picker focus (#7217) * Only portal the emoji picker where needed * Add optional portal prop to emoji picker * Use FocusScope to our advantage * Pare back, add guards, fix focus trap * Don't return focus to emoji button * Set DM input position on emoji insert * Let the caller determine next focus node --------- Co-authored-by: Dan Abramov --- .../Messages/components/MessageInput.web.tsx | 28 ++++-- .../Messages/components/MessagesList.tsx | 2 +- src/state/shell/composer/index.tsx | 3 +- src/view/com/composer/Composer.tsx | 9 +- .../text-input/web/EmojiPicker.web.tsx | 87 +++++++++++-------- src/view/shell/Composer.web.tsx | 20 +++-- 6 files changed, 96 insertions(+), 53 deletions(-) diff --git a/src/screens/Messages/components/MessageInput.web.tsx b/src/screens/Messages/components/MessageInput.web.tsx index 72e0382a93..bac163685a 100644 --- a/src/screens/Messages/components/MessageInput.web.tsx +++ b/src/screens/Messages/components/MessageInput.web.tsx @@ -3,6 +3,7 @@ import {Pressable, StyleSheet, View} from 'react-native' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import Graphemer from 'graphemer' +import {flushSync} from 'react-dom' import TextareaAutosize from 'react-textarea-autosize' import {isSafari, isTouchDevice} from '#/lib/browser' @@ -106,11 +107,19 @@ export function MessageInput({ const onEmojiInserted = React.useCallback( (emoji: Emoji) => { - const position = textAreaRef.current?.selectionStart ?? 0 - setMessage( - message => - message.slice(0, position) + emoji.native + message.slice(position), - ) + if (!textAreaRef.current) { + return + } + const position = textAreaRef.current.selectionStart ?? 0 + textAreaRef.current.focus() + flushSync(() => { + setMessage( + message => + message.slice(0, position) + emoji.native + message.slice(position), + ) + }) + textAreaRef.current.selectionStart = position + emoji.native.length + textAreaRef.current.selectionEnd = position + emoji.native.length }, [setMessage], ) @@ -148,7 +157,14 @@ export function MessageInput({