[Super Editor] - Allow for non-bound stable tag references

[matthew-carroll]

Up to this point, either a stable tag is committed, or not. In other words, when using stable tags to search for a user, the tag is either bound to a user, or not. There's no middleground.

As discussed in #1962 - some apps would like to have a kind of tag which represents a non-committed or a non-bound reference. For example, a user might tag "@John Smuth", which references a non-existent user. The display of that tag may then customized by an app to demonstrate that its unbounded. The user can then place the caret back into the tag and edit it, perhaps changing it to "@John Smith", which then commits.

Questions:

If non-bound tag is permitted, along with spaces, then how do we know when to stop adding characters to the tag? For example, when typing the following, how do we know when to stop adding characters to the tag:

Hello @John Smuth world

If the user can edit an un-bound tag value, when do we commit it? When the user moves the caret outside? When the user presses ENTER? When the user presses ESCAPE? All of the above?

[matthew-carroll]

@BazinC - can you offer your thoughts on the open questions in this ticket?

[BazinC]

@matthew-carroll on app like Slack, it looks like the user search is ran against characters between the trigger @ and cursor position.
If you move cursor the search result list is updated.
If search result is empty, popover is hidden.
See example below.

exsearch.mp4

[matthew-carroll]

FYI, it looks like the behavior works differently on desktop.

There seems to be a composing mode (or maybe that's the permanent mode). Then there's what I'll call the abandoned mode.

On desktop, when composing a tag, if you leave it behind by moving the caret, and then you move the caret back, the search results don't re-appear. However, if you start typing near the tag again, the search results do re-appear.

Screen.Recording.2024-05-13.at.11.58.37.PM.mov

If you take whatever action is necessary to abandon the tag, then we get a box around it with a question mark. This time, if you put the caret back in the box, the search results do re-appear. However, you'll notice that typing more characters immediately moves outside the box. Once in the abandoned state, it looks like all you can do is position the caret in the box and then select an option from the popover.

Screen.Recording.2024-05-14.at.12.02.05.AM.mov

@BazinC given the variability within even this one example product, would you like to provide a full spec for the behavior that you'd like, so that we don't spend time building behaviors that you don't really need?

[BazinC]

@matthew-carroll oh yes I remember noticing different behavior on desktop but didn't mention it since I'm focused on mobile first. Good catch, you nailed it.

On Slack desktop app, as soon as an inserted characters lead to an empty search result, all the previous character up to the trigger are tagged with an "unresolved state": dotted line rectangle with question mark and a tooltip "Several matches for @xxx". I may be wrong but my first guess is that marking such state could be helpful to close search and avoid unnecessary calculation.
I don't know why slack mobile vs desktop app behaviors are different.

Let me talk with my team for more precise specs and I'll come back to you asap.

[josephrcox]

@matthew-carroll
TLDR of the experience: Match Slack mobile.

• When the user is typing and inserts an @, show the user picker with recommendations given no string.

• When the user begins typing, check if there are results.

  • If there are results, then show up to 5 of them in the scrollable window.

  • If there are no results, then hide the window, but show it again if the user goes back and there are results.

• There shouldn't be any fancy formatting when the user types @, it should match Slack mobile and just look like normal text until the user actually selects a mention.

• When you go back to the @ mention and edit the text after it, match Slack mobile and allow the popup to reappear, if there are results that match the query after the @.

• Allow for spaces and keep searching for results until there are none, even if you are typing 15+ chars.

[matthew-carroll]

@josephrcox

If there are no results, then hide the window, but show it again if the user goes back and there are results.

When you go back to the @ mention and edit the text after it...

Allow for spaces and keep searching for results until there are none, even if you are typing 15+ chars.

Can you please define what it means to "go back". In the example provided from Slack we can see that there's some amount of consideration of multiple words. Therefore, it's unclear to me exactly where and when we should be trying to run a search for a tag. What's the region that's "in play" at any given moment?

[josephrcox]

Can you please define what it means to "go back". In the example provided from Slack we can see that there's some amount of consideration of multiple words. Therefore, it's unclear to me exactly where and when we should be trying to run a search for a tag. What's the region that's "in play" at any given moment?

Good question. I tried to answer your question in this video here with multiple examples:
https://t333.s.clickup-attachments.com/t333/ecaf439d-b413-4ddb-8e7b-99f2f8b38eff/CleanShot%202024-05-17%20at%2007.04.06.mp4?view=open