{{ profileHandle }}
This post requires authentication to view.
This author has chosen to make their posts visible only to people who are signed in.
+
Your account was found to be in violation of the{' '} + style={[a.text_md, a.leading_snug]}> Bluesky Social Terms of Service . You have been sent an email outlining the specific violation diff --git a/src/view/com/composer/text-input/TextInput.web.tsx b/src/view/com/composer/text-input/TextInput.web.tsx index c1efce8c5..3f12b2f59 100644 --- a/src/view/com/composer/text-input/TextInput.web.tsx +++ b/src/view/com/composer/text-input/TextInput.web.tsx @@ -20,7 +20,7 @@ import {Text as TiptapText} from '@tiptap/extension-text' import {generateJSON} from '@tiptap/html' import {Fragment, Node, Slice} from '@tiptap/pm/model' import {EditorContent, type JSONContent, useEditor} from '@tiptap/react' -import Graphemer from 'graphemer' +import {splitGraphemes} from 'unicode-segmenter/grapheme' import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle' import {blobToDataUri, isUriImage} from '#/lib/media/util' @@ -218,7 +218,7 @@ export function TextInput({ // all the lines get mushed together -sfn '\n', ) - const graphemes = new Graphemer().splitGraphemes(textBefore) + const graphemes = [...splitGraphemes(textBefore)] if (graphemes.length > 0) { const lastGrapheme = graphemes[graphemes.length - 1] diff --git a/src/view/com/composer/text-input/hooks/useGrapheme.tsx b/src/view/com/composer/text-input/hooks/useGrapheme.tsx deleted file mode 100644 index aa375ff47..000000000 --- a/src/view/com/composer/text-input/hooks/useGrapheme.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import {useCallback, useMemo} from 'react' -import Graphemer from 'graphemer' - -export const useGrapheme = () => { - const splitter = useMemo(() => new Graphemer(), []) - - const getGraphemeString = useCallback( - (name: string, length: number) => { - let remainingCharacters = 0 - - if (name.length > length) { - const graphemes = splitter.splitGraphemes(name) - - if (graphemes.length > length) { - remainingCharacters = 0 - name = `${graphemes.slice(0, length).join('')}…` - } else { - remainingCharacters = length - graphemes.length - name = graphemes.join('') - } - } else { - remainingCharacters = length - name.length - } - - return { - name, - remainingCharacters, - } - }, - [splitter], - ) - - return { - getGraphemeString, - } -} diff --git a/src/view/com/composer/videos/SubtitleDialog.tsx b/src/view/com/composer/videos/SubtitleDialog.tsx index a3e8d62b5..e2f7ac947 100644 --- a/src/view/com/composer/videos/SubtitleDialog.tsx +++ b/src/view/com/composer/videos/SubtitleDialog.tsx @@ -4,7 +4,7 @@ import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {MAX_ALT_TEXT} from '#/lib/constants' -import {useEnforceMaxGraphemeCount} from '#/lib/strings/helpers' +import {isOverMaxGraphemeCount} from '#/lib/strings/helpers' import {LANGUAGES} from '#/locale/languages' import {isWeb} from '#/platform/detection' import {useLanguagePrefs} from '#/state/preferences' @@ -72,7 +72,6 @@ function SubtitleDialogInner({ const control = Dialog.useDialogContext() const {_} = useLingui() const t = useTheme() - const enforceLen = useEnforceMaxGraphemeCount() const {primaryLanguage} = useLanguagePrefs() const [altText, setAltText] = useState(defaultAltText) @@ -94,18 +93,23 @@ function SubtitleDialogInner({ const subtitleMissingLanguage = captions.some(sub => sub.lang === '') + const isOverMaxLength = isOverMaxGraphemeCount({ + text: altText, + maxCount: MAX_ALT_TEXT, + }) + return ( Alt text - + setAltText(enforceLen(evt, MAX_ALT_TEXT))} + onChangeText={setAltText} maxLength={MAX_ALT_TEXT * 10} multiline style={{maxHeight: 300}} @@ -118,6 +122,18 @@ function SubtitleDialogInner({ /> + {isOverMaxLength && ( + + Alt text must be less than {MAX_ALT_TEXT} characters. + + )} + {isWeb && ( <> + style={a.mt_lg} + disabled={isOverMaxLength}> Done diff --git a/yarn.lock b/yarn.lock index 0204e500c..9c3baf231 100644 --- a/yarn.lock +++ b/yarn.lock @@ -19158,10 +19158,10 @@ unicode-property-aliases-ecmascript@^2.0.0: resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz#43d41e3be698bd493ef911077c9b131f827e8ccd" integrity sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w== -unicode-segmenter@^0.14.0: - version "0.14.0" - resolved "https://registry.yarnpkg.com/unicode-segmenter/-/unicode-segmenter-0.14.0.tgz#090128182bcc710327a1b7e4af4f5834444eaa61" - integrity sha512-AH4lhPCJANUnSLEKnM4byboctePJzltF4xj8b+NbNiYeAkAXGh7px2K/4NANFp7dnr6+zB3e6HLu8Jj8SKyvYg== +unicode-segmenter@0.14.5, unicode-segmenter@^0.14.0, unicode-segmenter@^0.14.5: + version "0.14.5" + resolved "https://registry.yarnpkg.com/unicode-segmenter/-/unicode-segmenter-0.14.5.tgz#c658f6dd30de172cdcd94542adc205ba43fb63c6" + integrity sha512-jHGmj2LUuqDcX3hqY12Ql+uhUTn8huuxNZGq7GvtF6bSybzH3aFgedYu/KTzQStEgt1Ra2F3HxadNXsNjb3m3g== unimodules-app-loader@~6.0.8: version "6.0.8" -- 2.51.2 From 9cfa7d0ba8ba9218362c0ed342c20fd7fcc90a58 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 30 Dec 2025 13:40:19 +0200 Subject: [PATCH 14/15] Remove RNGH from web bundle (#9528) * remove RNGH on web * add intentionally-failing webpack alias * Update webpack.config.js --- src/components/moderation/ReportDialog/index.tsx | 3 +-- src/view/shell/BlockDrawerGesture.web.tsx | 3 +++ webpack.config.js | 1 + 3 files changed, 5 insertions(+), 2 deletions(-) create mode 100644 src/view/shell/BlockDrawerGesture.web.tsx diff --git a/src/components/moderation/ReportDialog/index.tsx b/src/components/moderation/ReportDialog/index.tsx index 3b7cd916e..157ad18fb 100644 --- a/src/components/moderation/ReportDialog/index.tsx +++ b/src/components/moderation/ReportDialog/index.tsx @@ -1,6 +1,5 @@ import React from 'react' -import {Pressable, View} from 'react-native' -import {type ScrollView} from 'react-native-gesture-handler' +import {Pressable, type ScrollView, View} from 'react-native' import {type AppBskyLabelerDefs, BSKY_LABELER_DID} from '@atproto/api' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' diff --git a/src/view/shell/BlockDrawerGesture.web.tsx b/src/view/shell/BlockDrawerGesture.web.tsx new file mode 100644 index 000000000..4a826672e --- /dev/null +++ b/src/view/shell/BlockDrawerGesture.web.tsx @@ -0,0 +1,3 @@ +export function BlockDrawerGesture({children}: {children: React.ReactNode}) { + return children +} diff --git a/webpack.config.js b/webpack.config.js index 866ff1a3b..b312a2d6c 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -27,6 +27,7 @@ module.exports = async function (env, argv) { 'unicode-segmenter/grapheme': require .resolve('unicode-segmenter/grapheme') .replace(/\.cjs$/, '.js'), + 'react-native-gesture-handler': false, // RNGH should not be used on web, so let's cause a build error if it sneaks in }) config.module.rules = [ ...(config.module.rules || []), -- 2.51.2 From 0aaf11aa7b60927a0630ecd7f70fc4b55367c834 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 30 Dec 2025 19:56:05 +0200 Subject: [PATCH 15/15] fix drawer layout on mobile web (#9618) --- src/Navigation.tsx | 14 ++++++-- src/view/shell/index.web.tsx | 65 +++++++++++++++++++++--------------- 2 files changed, 50 insertions(+), 29 deletions(-) diff --git a/src/Navigation.tsx b/src/Navigation.tsx index fda4f4152..bf43eec6f 100644 --- a/src/Navigation.tsx +++ b/src/Navigation.tsx @@ -5,7 +5,6 @@ import {i18n, type MessageDescriptor} from '@lingui/core' import {msg} from '@lingui/macro' import { type BottomTabBarProps, - type BottomTabNavigatorProps, createBottomTabNavigator, } from '@react-navigation/bottom-tabs' import { @@ -637,7 +636,11 @@ function commonScreens(Stack: typeof Flat, unreadCountLabel?: string) { * The TabsNavigator is used by native mobile to represent the routes * in 3 distinct tab-stacks with a different root screen on each. */ -function TabsNavigator({layout}: {layout: BottomTabNavigatorProps['layout']}) { +function TabsNavigator({ + layout, +}: { + layout: React.ComponentProps['layout'] +}) { const tabBar = useCallback( (props: JSX.IntrinsicAttributes & BottomTabBarProps) => ( @@ -759,7 +762,11 @@ function MessagesTabNavigator() { * The FlatNavigator is used by Web to represent the routes * in a single ("flat") stack. */ -const FlatNavigator = () => { +const FlatNavigator = ({ + layout, +}: { + layout: React.ComponentProps['layout'] +}) => { const t = useTheme() const numUnread = useUnreadNotifications() const screenListeners = useWebScrollRestoration() @@ -767,6 +774,7 @@ const FlatNavigator = () => { return ( () const closeAllActiveElements = useCloseAllActiveElements() - const {_} = useLingui() - const showDrawer = !isDesktop && isDrawerOpen - const [showDrawerDelayedExit, setShowDrawerDelayedExit] = useState(showDrawer) const {state: policyUpdateState} = usePolicyUpdateContext() const welcomeModalControl = useWelcomeModal() - useLayoutEffect(() => { - if (showDrawer !== showDrawerDelayedExit) { - if (showDrawer) { - setShowDrawerDelayedExit(true) - } else { - const timeout = setTimeout(() => { - setShowDrawerDelayedExit(false) - }, 160) - return () => clearTimeout(timeout) - } - } - }, [showDrawer, showDrawerDelayedExit]) - useComposerKeyboardShortcut() useIntentHandler() @@ -74,10 +53,16 @@ function ShellInner() { return unsubscribe }, [navigator, closeAllActiveElements]) + const drawerLayout = useCallback( + ({children}: {children: React.ReactNode}) => ( + {children} + ), + [], + ) return ( <> - + @@ -100,6 +85,36 @@ function ShellInner() { )} + + + ) +} + +function DrawerLayout({children}: {children: React.ReactNode}) { + const t = useTheme() + const isDrawerOpen = useIsDrawerOpen() + const setDrawerOpen = useSetDrawerOpen() + const {gtTablet} = useBreakpoints() + const {_} = useLingui() + const showDrawer = !gtTablet && isDrawerOpen + const [showDrawerDelayedExit, setShowDrawerDelayedExit] = useState(showDrawer) + + useLayoutEffect(() => { + if (showDrawer !== showDrawerDelayedExit) { + if (showDrawer) { + setShowDrawerDelayedExit(true) + } else { + const timeout = setTimeout(() => { + setShowDrawerDelayedExit(false) + }, 160) + return () => clearTimeout(timeout) + } + } + }, [showDrawer, showDrawerDelayedExit]) + + return ( + <> + {children} {showDrawerDelayedExit && ( <> @@ -137,8 +152,6 @@ function ShellInner() { )} - - ) }