diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index 8436a6a2c5..eb0c9a806d 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -244,6 +244,10 @@ export const ComposePost = observer(function ComposePost({ }) if (replyTo && replyTo.uri) track('Post:Reply') + // save outline tags + tags.forEach(tag => tagsAutocompleteModel.commitRecentTag(tag)) + + // save inline tags for (const facet of richtext.facets || []) { for (const feature of facet.features) { if (AppBskyRichtextFacet.isTag(feature)) { @@ -396,7 +400,6 @@ export const ComposePost = observer(function ComposePost({ placeholder={selectTextInputPlaceholder} suggestedLinks={suggestedLinks} autocompleteView={autocompleteView} - tagsAutocompleteModel={tagsAutocompleteModel} autoFocus={true} setRichText={setRichText} onPhotoPasted={onPhotoPasted} diff --git a/src/view/com/composer/text-input/TextInput.tsx b/src/view/com/composer/text-input/TextInput.tsx index 047907f13a..f853c6e0df 100644 --- a/src/view/com/composer/text-input/TextInput.tsx +++ b/src/view/com/composer/text-input/TextInput.tsx @@ -34,6 +34,7 @@ import {useTheme} from 'lib/ThemeContext' import {isUriImage} from 'lib/media/util' import {downloadAndResize} from 'lib/media/manip' import {POST_IMG_MAX} from 'lib/constants' +import {useStores} from 'state/index' export interface TextInputRef { focus: () => void @@ -45,7 +46,6 @@ interface TextInputProps extends ComponentProps { placeholder: string suggestedLinks: Set autocompleteView: UserAutocompleteModel - tagsAutocompleteModel: TagsAutocompleteModel setRichText: (v: RichText | ((v: RichText) => RichText)) => void onPhotoPasted: (uri: string) => void onPressPublish: (richtext: RichText) => Promise @@ -64,7 +64,6 @@ export const TextInput = forwardRef(function TextInputImpl( placeholder, suggestedLinks, autocompleteView, - tagsAutocompleteModel, setRichText, onPhotoPasted, onSuggestedLinksChanged, @@ -73,10 +72,15 @@ export const TextInput = forwardRef(function TextInputImpl( }: TextInputProps, ref, ) { + const store = useStores() const pal = usePalette('default') const textInput = useRef(null) const textInputSelection = useRef({start: 0, end: 0}) const theme = useTheme() + const tagsAutocompleteModel = React.useMemo( + () => new TagsAutocompleteModel(store), + [store], + ) React.useImperativeHandle(ref, () => ({ focus: () => textInput.current?.focus(), @@ -210,7 +214,6 @@ export const TextInput = forwardRef(function TextInputImpl( onChangeText( insertTagAt(richtext.text, textInputSelection.current?.start || 0, tag), ) - tagsAutocompleteModel.commitRecentTag(tag) tagsAutocompleteModel.setActive(false) }, [onChangeText, richtext, tagsAutocompleteModel], diff --git a/src/view/com/composer/text-input/TextInput.web.tsx b/src/view/com/composer/text-input/TextInput.web.tsx index 7459c43fe1..3698317c1e 100644 --- a/src/view/com/composer/text-input/TextInput.web.tsx +++ b/src/view/com/composer/text-input/TextInput.web.tsx @@ -20,6 +20,7 @@ import {Emoji} from './web/EmojiPicker.web' import {LinkDecorator} from './web/LinkDecorator' import {generateJSON} from '@tiptap/html' import {Tags, createTagsAutocomplete} from './web/Tags' +import {useStores} from 'state/index' export interface TextInputRef { focus: () => void @@ -31,7 +32,6 @@ interface TextInputProps { placeholder: string suggestedLinks: Set autocompleteView: UserAutocompleteModel - tagsAutocompleteModel: TagsAutocompleteModel setRichText: (v: RichText | ((v: RichText) => RichText)) => void onPhotoPasted: (uri: string) => void onPressPublish: (richtext: RichText) => Promise @@ -47,7 +47,6 @@ export const TextInput = React.forwardRef(function TextInputImpl( placeholder, suggestedLinks, autocompleteView, - tagsAutocompleteModel, setRichText, onPhotoPasted, onPressPublish, @@ -56,6 +55,11 @@ export const TextInput = React.forwardRef(function TextInputImpl( TextInputProps, ref, ) { + const store = useStores() + const tagsAutocompleteModel = React.useMemo( + () => new TagsAutocompleteModel(store), + [store], + ) const modeClass = useColorSchemeStyle('ProseMirror-light', 'ProseMirror-dark') const extensions = React.useMemo( () => [ diff --git a/src/view/com/composer/text-input/web/Tags/view.tsx b/src/view/com/composer/text-input/web/Tags/view.tsx index 2845c0bdc9..bc40250975 100644 --- a/src/view/com/composer/text-input/web/Tags/view.tsx +++ b/src/view/com/composer/text-input/web/Tags/view.tsx @@ -112,9 +112,8 @@ const Autocomplete = forwardRef( */ // @ts-ignore command({tag, punctuation}) - autocompleteModel.commitRecentTag(tag) }, - [command, autocompleteModel], + [command], ) const selectItem = React.useCallback( @@ -142,7 +141,7 @@ const Autocomplete = forwardRef( if (event.key === 'Enter') { if (!props.items.length) { // no items, use whatever the user typed - commit(props.autocompleteModel.query) + commit(autocompleteModel.query) } else { selectItem(selectedIndex) } @@ -150,7 +149,7 @@ const Autocomplete = forwardRef( } if (event.key === ' ') { - commit(props.autocompleteModel.query) + commit(autocompleteModel.query) return true }