use separate models, commit once

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}

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<typeof RNTextInput> {
   placeholder: string
   suggestedLinks: Set<string>
   autocompleteView: UserAutocompleteModel
-  tagsAutocompleteModel: TagsAutocompleteModel
   setRichText: (v: RichText | ((v: RichText) => RichText)) => void
   onPhotoPasted: (uri: string) => void
   onPressPublish: (richtext: RichText) => Promise<void>
@@ -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<PasteInputRef>(null)
   const textInputSelection = useRef<Selection>({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],

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<string>
   autocompleteView: UserAutocompleteModel
-  tagsAutocompleteModel: TagsAutocompleteModel
   setRichText: (v: RichText | ((v: RichText) => RichText)) => void
   onPhotoPasted: (uri: string) => void
   onPressPublish: (richtext: RichText) => Promise<void>
@@ -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(
     () => [

src/view/com/composer/text-input/web/Tags/view.tsx

@@ -112,9 +112,8 @@ const Autocomplete = forwardRef<AutocompleteRef, ListProps>(
          */
         // @ts-ignore
         command({tag, punctuation})
-        autocompleteModel.commitRecentTag(tag)
       },
-      [command, autocompleteModel],
+      [command],
     )
 
     const selectItem = React.useCallback(
@@ -142,7 +141,7 @@ const Autocomplete = forwardRef<AutocompleteRef, ListProps>(
         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<AutocompleteRef, ListProps>(
         }
 
         if (event.key === ' ') {
-          commit(props.autocompleteModel.query)
+          commit(autocompleteModel.query)
           return true
         }