WIP autocomplete

src/view/com/composer/Composer.tsx

@@ -16,6 +16,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {RichText} from '@atproto/api'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {UserAutocompleteModel} from 'state/models/discovery/user-autocomplete'
+import {TagsAutocompleteView} from 'state/models/ui/tags-autocomplete'
 import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible'
 import {ExternalEmbed} from './ExternalEmbed'
 import {Text} from '../util/text/Text'
@@ -97,6 +98,10 @@ export const ComposePost = observer(function ComposePost({
     () => new UserAutocompleteModel(store),
     [store],
   )
+  const tagAutoCompleteView = useMemo<TagsAutocompleteView>(
+    () => new TagsAutocompleteView(store),
+    [store],
+  )
 
   const insets = useSafeAreaInsets()
   const viewStyles = useMemo(
@@ -366,6 +371,7 @@ export const ComposePost = observer(function ComposePost({
               placeholder={selectTextInputPlaceholder}
               suggestedLinks={suggestedLinks}
               autocompleteView={autocompleteView}
+              tagsAutocompleteView={tagAutoCompleteView}
               autoFocus={true}
               setRichText={setRichText}
               onPhotoPasted={onPhotoPasted}

src/view/com/composer/text-input/TextInput.tsx

@@ -19,6 +19,7 @@ import PasteInput, {
 import {AppBskyRichtextFacet, RichText} from '@atproto/api'
 import isEqual from 'lodash.isequal'
 import {UserAutocompleteModel} from 'state/models/discovery/user-autocomplete'
+import {TagsAutocompleteView} from 'state/models/ui/tags-autocomplete'
 import {Autocomplete} from './mobile/Autocomplete'
 import {Text} from 'view/com/util/text/Text'
 import {cleanError} from 'lib/strings/errors'
@@ -39,6 +40,7 @@ interface TextInputProps extends ComponentProps<typeof RNTextInput> {
   placeholder: string
   suggestedLinks: Set<string>
   autocompleteView: UserAutocompleteModel
+  tagsAutocompleteView: TagsAutocompleteView
   setRichText: (v: RichText | ((v: RichText) => RichText)) => void
   onPhotoPasted: (uri: string) => void
   onPressPublish: (richtext: RichText) => Promise<void>

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

@@ -12,6 +12,7 @@ import {Placeholder} from '@tiptap/extension-placeholder'
 import {Text} from '@tiptap/extension-text'
 import isEqual from 'lodash.isequal'
 import {UserAutocompleteModel} from 'state/models/discovery/user-autocomplete'
+import {TagsAutocompleteView} from 'state/models/ui/tags-autocomplete'
 import {createSuggestion} from './web/Autocomplete'
 import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 import {isUriImage, blobToDataUri} from 'lib/media/util'
@@ -19,6 +20,7 @@ import {Emoji} from './web/EmojiPicker.web'
 import {LinkDecorator} from './web/LinkDecorator'
 import {generateJSON} from '@tiptap/html'
 import {TagDecorator} from './web/TagDecorator'
+import {Tags, createTagsSuggestion} from './web/Tags'
 
 export interface TextInputRef {
   focus: () => void
@@ -30,6 +32,7 @@ interface TextInputProps {
   placeholder: string
   suggestedLinks: Set<string>
   autocompleteView: UserAutocompleteModel
+  tagsAutocompleteView: TagsAutocompleteView
   setRichText: (v: RichText | ((v: RichText) => RichText)) => void
   onPhotoPasted: (uri: string) => void
   onPressPublish: (richtext: RichText) => Promise<void>
@@ -45,6 +48,7 @@ export const TextInput = React.forwardRef(function TextInputImpl(
     placeholder,
     suggestedLinks,
     autocompleteView,
+    tagsAutocompleteView,
     setRichText,
     onPhotoPasted,
     onPressPublish,
@@ -58,7 +62,13 @@ export const TextInput = React.forwardRef(function TextInputImpl(
     () => [
       Document,
       LinkDecorator,
-      TagDecorator,
+      // TagDecorator,
+      Tags.configure({
+        HTMLAttributes: {
+          class: 'autolink',
+        },
+        suggestion: createTagsSuggestion({autocompleteView: tagsAutocompleteView}),
+      }),
       Mention.configure({
         HTMLAttributes: {
           class: 'mention',

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

@@ -0,0 +1,163 @@
+import { mergeAttributes, Node } from '@tiptap/core'
+import { Node as ProseMirrorNode } from '@tiptap/pm/model'
+import { PluginKey } from '@tiptap/pm/state'
+import Suggestion, { SuggestionOptions } from '@tiptap/suggestion'
+
+export type TagOptions = {
+  HTMLAttributes: Record<string, any>
+  renderLabel: (props: { options: TagOptions; node: ProseMirrorNode }) => string
+  suggestion: Omit<SuggestionOptions, 'editor'>
+}
+
+export const TagsPluginKey = new PluginKey('tags')
+
+export const Tags = Node.create<TagOptions>({
+  name: 'tags',
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      renderLabel({ options, node }) {
+        return `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`
+      },
+      suggestion: {
+        char: '#',
+        pluginKey: TagsPluginKey,
+        command: ({ editor, range, props }) => {
+          // increase range.to by one when the next node is of type "text"
+          // and starts with a space character
+          const nodeAfter = editor.view.state.selection.$to.nodeAfter
+          const overrideSpace = nodeAfter?.text?.startsWith(' ')
+
+          if (overrideSpace) {
+            range.to += 1
+          }
+
+          editor
+            .chain()
+            .focus()
+            .insertContentAt(range, [
+              {
+                type: this.name,
+                attrs: props,
+              },
+              {
+                type: 'text',
+                text: ' ',
+              },
+            ])
+            .run()
+
+          window.getSelection()?.collapseToEnd()
+        },
+        allow: ({ state, range }) => {
+          const $from = state.doc.resolve(range.from)
+          const type = state.schema.nodes[this.name]
+          const allow = !!$from.parent.type.contentMatch.matchType(type)
+
+          return allow
+        },
+      },
+    }
+  },
+
+  group: 'inline',
+
+  inline: true,
+
+  selectable: true,
+
+  atom: true,
+
+  addAttributes() {
+    return {
+      id: {
+        default: null,
+        parseHTML: element => element.getAttribute('data-id'),
+        renderHTML: attributes => {
+          if (!attributes.id) {
+            return {}
+          }
+
+          return {
+            'data-id': attributes.id,
+          }
+        },
+      },
+
+      label: {
+        default: null,
+        parseHTML: element => element.getAttribute('data-label'),
+        renderHTML: attributes => {
+          if (!attributes.label) {
+            return {}
+          }
+
+          return {
+            'data-label': attributes.label,
+          }
+        },
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: `span[data-type="${this.name}"]`,
+      },
+    ]
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      'span',
+      mergeAttributes({ 'data-type': this.name }, this.options.HTMLAttributes, HTMLAttributes),
+      this.options.renderLabel({
+        options: this.options,
+        node,
+      }),
+    ]
+  },
+
+  renderText({ node }) {
+    return this.options.renderLabel({
+      options: this.options,
+      node,
+    })
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Backspace: () => this.editor.commands.command(({ tr, state }) => {
+        let isTag = false
+        const { selection } = state
+        const { empty, anchor } = selection
+
+        if (!empty) {
+          return false
+        }
+
+        state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {
+          if (node.type.name === this.name) {
+            isTag = true
+            tr.insertText(this.options.suggestion.char || '', pos, pos + node.nodeSize)
+
+            return false
+          }
+        })
+
+        return isTag
+      }),
+    }
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      Suggestion({
+        editor: this.editor,
+        ...this.options.suggestion,
+      }),
+    ]
+  },
+})