diff options
Diffstat (limited to 'src/view/com/composer/text-input')
-rw-r--r-- | src/view/com/composer/text-input/TextInput.web.tsx | 6 | ||||
-rw-r--r-- | src/view/com/composer/text-input/web/EmojiPicker.tsx | 37 | ||||
-rw-r--r-- | src/view/com/composer/text-input/web/EmojiPicker.web.tsx | 11 |
3 files changed, 45 insertions, 9 deletions
diff --git a/src/view/com/composer/text-input/TextInput.web.tsx b/src/view/com/composer/text-input/TextInput.web.tsx index 8ec4fefa8..06ff9836c 100644 --- a/src/view/com/composer/text-input/TextInput.web.tsx +++ b/src/view/com/composer/text-input/TextInput.web.tsx @@ -12,14 +12,14 @@ import {Placeholder} from '@tiptap/extension-placeholder' import {Text as TiptapText} from '@tiptap/extension-text' import {generateJSON} from '@tiptap/html' import {Fragment, Node, Slice} from '@tiptap/pm/model' -import {EditorContent, JSONContent, useEditor} from '@tiptap/react' +import {EditorContent, type JSONContent, useEditor} from '@tiptap/react' import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle' import {usePalette} from '#/lib/hooks/usePalette' import {blobToDataUri, isUriImage} from '#/lib/media/util' import {useActorAutocompleteFn} from '#/state/queries/actor-autocomplete' import { - LinkFacetMatch, + type LinkFacetMatch, suggestLinkCardUri, } from '#/view/com/composer/text-input/text-input-util' import {textInputWebEmitter} from '#/view/com/composer/text-input/textInputWebEmitter' @@ -28,7 +28,7 @@ import {normalizeTextStyles} from '#/alf/typography' import {Portal} from '#/components/Portal' import {Text} from '../../util/text/Text' import {createSuggestion} from './web/Autocomplete' -import {Emoji} from './web/EmojiPicker.web' +import {type Emoji} from './web/EmojiPicker' import {LinkDecorator} from './web/LinkDecorator' import {TagDecorator} from './web/TagDecorator' diff --git a/src/view/com/composer/text-input/web/EmojiPicker.tsx b/src/view/com/composer/text-input/web/EmojiPicker.tsx new file mode 100644 index 000000000..5001753a5 --- /dev/null +++ b/src/view/com/composer/text-input/web/EmojiPicker.tsx @@ -0,0 +1,37 @@ +export type Emoji = { + aliases?: string[] + emoticons: string[] + id: string + keywords: string[] + name: string + native: string + shortcodes?: string + unified: string +} + +export interface EmojiPickerPosition { + top: number + left: number + right: number + bottom: number + nextFocusRef: React.MutableRefObject<HTMLElement> | null +} + +export interface EmojiPickerState { + isOpen: boolean + pos: EmojiPickerPosition +} + +interface IProps { + state: EmojiPickerState + close: () => void + /** + * If `true`, overrides position and ensures picker is pinned to the top of + * the target element. + */ + pinToTop?: boolean +} + +export function EmojiPicker(_opts: IProps) { + return null +} diff --git a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx index b3659f22d..c0cae620f 100644 --- a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx +++ b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx @@ -3,8 +3,7 @@ import {Pressable, useWindowDimensions, View} from 'react-native' import Picker from '@emoji-mart/react' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {DismissableLayer} from '@radix-ui/react-dismissable-layer' -import {FocusScope} from '@radix-ui/react-focus-scope' +import {DismissableLayer, FocusScope} from 'radix-ui/internal' import {textInputWebEmitter} from '#/view/com/composer/text-input/textInputWebEmitter' import {atoms as a, flatten} from '#/alf' @@ -121,7 +120,7 @@ export function EmojiPicker({state, close, pinToTop}: IProps) { return ( <Portal> - <FocusScope + <FocusScope.FocusScope loop trapped onUnmountAutoFocus={e => { @@ -154,7 +153,7 @@ export function EmojiPicker({state, close, pinToTop}: IProps) { }, ])}> <View style={[{position: 'absolute'}, position]}> - <DismissableLayer + <DismissableLayer.DismissableLayer onFocusOutside={evt => evt.preventDefault()} onDismiss={close}> <Picker @@ -164,7 +163,7 @@ export function EmojiPicker({state, close, pinToTop}: IProps) { onEmojiSelect={onInsert} autoFocus={true} /> - </DismissableLayer> + </DismissableLayer.DismissableLayer> </View> </View> @@ -175,7 +174,7 @@ export function EmojiPicker({state, close, pinToTop}: IProps) { onPress={close} style={[a.fixed, a.inset_0]} /> - </FocusScope> + </FocusScope.FocusScope> </Portal> ) } |