Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mention auto-complete #532

Merged
merged 3 commits into from
Oct 4, 2023
Merged

Conversation

SatsAllDay
Copy link
Contributor

@SatsAllDay SatsAllDay commented Oct 1, 2023

Closes #529

Support mention auto-complete in markdown input fields. Closely follows the suggestions in #529, which are largely inspired by GitHub's experience.

  • When @ is typed, show a list of top stackers for the day to pick from (5)
  • Use the text immediately following @ to search for similarly named users to pick from
  • Use up/down arrow to navigate between search options
  • Use Tab/Enter to pick the current selection
  • Use escape to close the dropdown
  • Selected user is inserted into the textarea input, and your cursor position is set to the end of the mention
  • Suggestions do not show up if there's non-whitespace characters immediately preceding @ e.g. x@
  • Suggestions are shown as you're deleting an existing mention, all the way back to @. Suggestions are based on the remaining mention text.
  • Suggestions appear below the caret position in the textarea, so it's easy to see but doesn't block your current text

@SatsAllDay SatsAllDay mentioned this pull request Oct 1, 2023
@SatsAllDay SatsAllDay force-pushed the mention-autocomplete branch 2 times, most recently from b725931 to bc39ec4 Compare October 4, 2023 15:37
* support custom limit on topUsers query

* hot keys for selecting user suggestion in markdown input

* query top stackers for mentions with no search query

* refactor UserSuggestion to help with reusability

textarea-caret for placing the user suggest dropdown appropriately

other various code cleanup items to make it easier to use

off by one errors are fun!

various code cleanup and reuse the UserSuggest component in InputUserSuggest to reduce duplication
@SatsAllDay SatsAllDay force-pushed the mention-autocomplete branch from bc39ec4 to 0ed4d03 Compare October 4, 2023 17:45
@SatsAllDay
Copy link
Contributor Author

Demo cc @ekzyis I believe this captures all of your input

Ignore the delay on searching users, that's just my slow machine :P

sn-mention-autocomplete.mov

@SatsAllDay SatsAllDay marked this pull request as ready for review October 4, 2023 17:54
@SatsAllDay SatsAllDay changed the title WIP: mention autocomplete mention autocomplete Oct 4, 2023
@SatsAllDay SatsAllDay changed the title mention autocomplete Mention auto-complete Oct 4, 2023
@huumn
Copy link
Member

huumn commented Oct 4, 2023

Great work!

@huumn huumn merged commit 502bfee into stackernews:master Oct 4, 2023
1 check passed
@SatsAllDay
Copy link
Contributor Author

Thank you! This is going to be a big release!

@SatsAllDay SatsAllDay deleted the mention-autocomplete branch October 4, 2023 20:12
@huumn
Copy link
Member

huumn commented Oct 4, 2023

YUGE 😄

@ekzyis ekzyis mentioned this pull request Mar 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

mention autocompletes
2 participants