Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

implement a safari hack for ime (#4186)

remove debug logs

use a better hack

implement a safari hack

extract `isSafari` and `isFirefox` to a global variable

authored by

Hailey and committed by
GitHub
d0516143 2c6c9069

+30 -6
+2
src/lib/browser.native.ts
··· 1 + export const isSafari = false 2 + export const isFirefox = false
+6
src/lib/browser.ts
··· 1 + // https://stackoverflow.com/questions/7944460/detect-safari-browser 2 + export const isSafari = /^((?!chrome|android).)*safari/i.test( 3 + navigator.userAgent, 4 + ) 5 + 6 + export const isFirefox = /firefox|fxios/i.test(navigator.userAgent)
+1 -4
src/lib/strings/embed-player.ts
··· 1 1 import {Dimensions, Platform} from 'react-native' 2 2 3 + import {isSafari} from 'lib/browser' 3 4 import {isWeb} from 'platform/detection' 4 5 const {height: SCREEN_HEIGHT} = Dimensions.get('window') 5 6 ··· 353 354 354 355 if (id && filename && dimensions && id.includes('AAAAC')) { 355 356 if (Platform.OS === 'web') { 356 - const isSafari = /^((?!chrome|android).)*safari/i.test( 357 - navigator.userAgent, 358 - ) 359 - 360 357 if (isSafari) { 361 358 id = id.replace('AAAAC', 'AAAP1') 362 359 filename = filename.replace('.gif', '.mp4')
+20
src/screens/Messages/Conversation/MessageInput.web.tsx
··· 10 10 useMessageDraft, 11 11 useSaveMessageDraft, 12 12 } from '#/state/messages/message-drafts' 13 + import {isSafari} from 'lib/browser' 13 14 import * as Toast from '#/view/com/util/Toast' 14 15 import {atoms as a, useTheme} from '#/alf' 15 16 import {useSharedInputStyles} from '#/components/forms/TextField' ··· 47 48 (e: React.KeyboardEvent<HTMLTextAreaElement>) => { 48 49 // Don't submit the form when the Japanese or any other IME is composing 49 50 if (isComposing.current) return 51 + 52 + // see https://github.com/bluesky-social/social-app/issues/4178 53 + // see https://www.stum.de/2016/06/24/handling-ime-events-in-javascript/ 54 + // see https://lists.w3.org/Archives/Public/www-dom/2010JulSep/att-0182/keyCode-spec.html 55 + // 56 + // On Safari, the final keydown event to dismiss the IME - which is the enter key - is also "Enter" below. 57 + // Obviously, this causes problems because the final dismissal should _not_ submit the text, but should just 58 + // stop the IME editing. This is the behavior of Chrome and Firefox, but not Safari. 59 + // 60 + // Keycode is deprecated, however the alternative seems to only be to compare the timestamp from the 61 + // onCompositionEnd event to the timestamp of the keydown event, which is not reliable. For example, this hack 62 + // uses that method: https://github.com/ProseMirror/prosemirror-view/pull/44. However, from my 500ms resulted in 63 + // far too long of a delay, and a subsequent enter press would often just end up doing nothing. A shorter time 64 + // frame was also not great, since it was too short to be reliable (i.e. an older system might have a larger 65 + // time gap between the two events firing. 66 + if (isSafari && e.key === 'Enter' && e.keyCode === 229) { 67 + return 68 + } 69 + 50 70 if (e.key === 'Enter') { 51 71 if (e.shiftKey) return 52 72 e.preventDefault()
+1 -2
src/view/com/util/List.web.tsx
··· 5 5 import {batchedUpdates} from '#/lib/batchedUpdates' 6 6 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' 7 7 import {useScrollHandlers} from '#/lib/ScrollContext' 8 + import {isFirefox, isSafari} from 'lib/browser' 8 9 import {usePalette} from 'lib/hooks/usePalette' 9 10 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 10 11 import {addStyle} from 'lib/styles' ··· 503 504 ) => React.ReactElement 504 505 505 506 // https://stackoverflow.com/questions/7944460/detect-safari-browser 506 - const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent) 507 - const isFirefox = /firefox|fxios/i.test(navigator.userAgent) 508 507 509 508 const styles = StyleSheet.create({ 510 509 sideBorders: {