fix: Fixed issue where entering a space or punctuation in Super autocomplete would dismiss menu

packages/web/src/javascripts/Components/NoteView/NoteView.tsx

@@ -905,9 +905,7 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
                 </div>
               )}
             </div>
-            {editorMode !== 'super' && (
-              <LinkedItemBubblesContainer linkingController={this.viewControllerManager.linkingController} />
-            )}
+            <LinkedItemBubblesContainer linkingController={this.viewControllerManager.linkingController} />
           </div>
         )}
 

packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionPlugin.tsx

@@ -1,5 +1,5 @@
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
-import { LexicalTypeaheadMenuPlugin, useBasicTypeaheadTriggerMatch } from '@lexical/react/LexicalTypeaheadMenuPlugin'
+import { LexicalTypeaheadMenuPlugin } from '@lexical/react/LexicalTypeaheadMenuPlugin'
 import { TextNode } from 'lexical'
 import { FunctionComponent, useCallback, useMemo, useState } from 'react'
 import { ItemSelectionItemComponent } from './ItemSelectionItemComponent'
@@ -12,6 +12,7 @@ import { INSERT_BUBBLE_COMMAND, INSERT_FILE_COMMAND } from '../Commands'
 import { useLinkingController } from '../../../../../Controllers/LinkingControllerProvider'
 import { PopoverClassNames } from '../ClassNames'
 import { isMobileScreen } from '@/Utils'
+import { useTypeaheadAllowingSpacesAndPunctuation } from './useTypeaheadAllowingSpacesAndPunctuation'
 
 type Props = {
   currentNote: SNNote
@@ -26,7 +27,7 @@ export const ItemSelectionPlugin: FunctionComponent<Props> = ({ currentNote }) =
 
   const [queryString, setQueryString] = useState<string | null>('')
 
-  const checkForTriggerMatch = useBasicTypeaheadTriggerMatch('@', {
+  const checkForTriggerMatch = useTypeaheadAllowingSpacesAndPunctuation('@', {
     minLength: 0,
   })
 

packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ItemSelectionPlugin/useTypeaheadAllowingSpacesAndPunctuation.tsx

@@ -0,0 +1,41 @@
+import { LexicalEditor } from 'lexical'
+import { useCallback } from 'react'
+
+export type QueryMatch = {
+  leadOffset: number
+  matchingString: string
+  replaceableString: string
+}
+type TriggerFn = (text: string, editor: LexicalEditor) => QueryMatch | null
+
+/**
+ * Derived from
+ * https://github.com/facebook/lexical/blob/main/packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx#L545
+ */
+export function useTypeaheadAllowingSpacesAndPunctuation(
+  trigger: string,
+  { minLength = 1, maxLength = 75 }: { minLength?: number; maxLength?: number },
+): TriggerFn {
+  return useCallback(
+    (text: string) => {
+      const validChars = '[^' + trigger + ']'
+      const TypeaheadTriggerRegex = new RegExp(
+        '(^|\\s|\\()(' + '[' + trigger + ']' + '((?:' + validChars + '){0,' + maxLength + '})' + ')$',
+      )
+      const match = TypeaheadTriggerRegex.exec(text)
+      if (match !== null) {
+        const maybeLeadingWhitespace = match[1]
+        const matchingString = match[3]
+        if (matchingString.length >= minLength) {
+          return {
+            leadOffset: match.index + maybeLeadingWhitespace.length,
+            matchingString,
+            replaceableString: match[2],
+          }
+        }
+      }
+      return null
+    },
+    [maxLength, minLength, trigger],
+  )
+}