Issues with @tagging people

[KrishaTerranIO]

• When I start typing out a user's name in a comment, a list pops up for me to chose from certain individuals. However, the person I'm tagging isn't on that list, and if I type out @ followed by their name, they aren't tagged. We need to allow scrolling the list to load more people who match #1689
• Allow for typing a space and then a last name and having the matching algorithm understand that. Look into FBs UX for how they handle this. Update TipTap and see if they have support for this built in. This extension seems to support a space being included in the lookup: https://tiptap.dev/docs/editor/extensions/nodes/mention (see code https://github.com/ueberdosis/tiptap/blob/main/packages/extension-mention/src/mention.ts) #1690
• Typing certain exact names e.g. Laure, it doesnt show them in the list, it only shows Laura's, so we need to improve the searching/matching algorithm on the backend #1691
• Do we want to filter by who is actually in a group that the current post is part of? #1692

Screen.Recording.2023-02-15.at.4.00.01.PM.mov

[tibetsprague]

typing a space still not working well, it gets stuck in suggestion mode after typing an @ and there is no way to get out of it.
Might need to update tiptap to latest version and explore a solution like this ueberdosis/tiptap#214 (comment) (https://codesandbox.io/p/sandbox/tiptap-mention-ddfcm?file=%2Fsrc%2Fcomponents%2FsuggestionPlugin.js) which is unfortunately in Vue so would have to be translated to React

[tibetsprague]

ooh someone just added to the tiptap issue above this solution that may work for us:

onUpdate(props) {
  if (renderer) {
    renderer.updateProps(props)
  }

  if (!popup || !props.clientRect) return

  const matches = props?.query?.match(/([\s]+)/g)
  const spacesCount = matches?.length || 0

  if (spacesCount > 1 && props.items === null) {
    popup?.[0]?.hide()
    return
  }

  popup[0].setProps({ getReferenceClientRect: props.clientRect })
},