Ok working

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

@@ -94,7 +94,9 @@ export const TagsPluginKey = new PluginKey('tags')
  * This extension allows you to insert mentions into the editor.
  * @see https://www.tiptap.dev/api/extensions/mention
  */
-export const Tags = Node.create<MentionOptions>({
+export const Tags = Node.create<
+  MentionOptions<any, {tag: string; punctuation?: string}>
+>({
   name: 'tags',
 
   addOptions() {
@@ -115,6 +117,8 @@ export const Tags = Node.create<MentionOptions>({
         char: '#',
         pluginKey: TagsPluginKey,
         command: ({editor, range, props}) => {
+          const {tag, punctuation} = 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
@@ -130,11 +134,11 @@ export const Tags = Node.create<MentionOptions>({
             .insertContentAt(range, [
               {
                 type: this.name,
-                attrs: props,
+                attrs: {id: tag},
               },
               {
                 type: 'text',
-                text: ' ',
+                text: `${punctuation || ''} `,
               },
             ])
             .run()
@@ -145,6 +149,7 @@ export const Tags = Node.create<MentionOptions>({
           const $from = state.doc.resolve(range.from)
           const type = state.schema.nodes[this.name]
           const allow = !!$from.parent.type.contentMatch.matchType(type)
+
           return allow
         },
         findSuggestionMatch: findSuggestionMatch,

src/view/com/composer/text-input/web/Tags/utils.ts

@@ -49,6 +49,13 @@ export function findSuggestionMatch({
   const from = textFrom + match.index + leadingSpaceOffset
   const to = from + tag.length + hashtagOffset
 
+  console.log({
+    pos: $position.pos,
+    from,
+    to,
+    text,
+  })
+
   // If the $position is located within the matched substring, return that range
   if (from < $position.pos && to >= $position.pos) {
     return {
@@ -56,7 +63,11 @@ export function findSuggestionMatch({
         from,
         to,
       },
-      query: tag.replace(TRAILING_PUNCTUATION_REGEX, ''),
+      /**
+       * TODO
+       * We parse out the punctuation later.
+       */
+      query: tag,
       text: fullMatch.replace(/^\s{1}/, ''),
     }
   }

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

@@ -1,17 +1,16 @@
 import React, {forwardRef, useImperativeHandle, useState} from 'react'
 import {Pressable, StyleSheet, View} from 'react-native'
 import {ReactRenderer} from '@tiptap/react'
-import tippy, {Instance as TippyInstance} from 'tippy.js'
 import {
+  SuggestionKeyDownProps,
   SuggestionOptions,
   SuggestionProps,
-  SuggestionKeyDownProps,
 } from '@tiptap/suggestion'
+import tippy, {Instance as TippyInstance} from 'tippy.js'
 
 // import {TagsAutocompleteModel} from 'state/models/ui/tags-autocomplete'
 import {usePalette} from 'lib/hooks/usePalette'
 import {Text} from 'view/com/util/text/Text'
-
 import {parsePunctuationFromTag} from './utils'
 
 type AutocompleteResult = string
@@ -22,9 +21,8 @@ type AutocompleteRef = {
   onKeyDown: (props: SuggestionKeyDownProps) => boolean
 }
 
-export function createTagsAutocomplete({
-  // autocompleteModel,
-}: {
+export function createTagsAutocomplete({}: // autocompleteModel,
+{
   // autocompleteModel: TagsAutocompleteModel
 }): Omit<SuggestionOptions, 'editor'> {
   return {
@@ -32,9 +30,7 @@ export function createTagsAutocomplete({
      * This `query` param comes from the result of `findSuggestionMatch`
      */
     async items({query}) {
-      // autocompleteModel.setActive(true)
-      // await autocompleteModel.search(query)
-      return ['tag']//autocompleteModel.suggestions.slice(0, 8)
+      return [query, 'javascript']
     },
     render() {
       let component: ReactRenderer<AutocompleteRef> | undefined
@@ -45,7 +41,6 @@ export function createTagsAutocomplete({
           component = new ReactRenderer(Autocomplete, {
             props: {
               ...props,
-              //autocompleteModel,
             },
             editor: props.editor,
           })
@@ -110,7 +105,6 @@ const Autocomplete = forwardRef<AutocompleteRef, ListProps>(
          * separately above. We could do this in `command` definition, but we
          * only want to `commitRecentTag` with the sanitized tag.
          */
-        // @ts-ignore
         command({tag, punctuation})
       },
       [command],
@@ -141,7 +135,7 @@ const Autocomplete = forwardRef<AutocompleteRef, ListProps>(
         if (event.key === 'Enter') {
           if (!props.items.length) {
             // no items, use whatever the user typed
-            // commit(autocompleteModel.query)
+            commit(props.query)
           } else {
             selectItem(selectedIndex)
           }
@@ -149,7 +143,7 @@ const Autocomplete = forwardRef<AutocompleteRef, ListProps>(
         }
 
         if (event.key === ' ') {
-          // commit(autocompleteModel.query)
+          commit(props.query)
           return true
         }