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

Allow for searching by tag, description #47

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

eschwartz
Copy link

@eschwartz eschwartz commented Oct 7, 2021

Allow searching by tag or description, in addition to the actual emoji name.

For example, we can search by the :rich: tag to get 🤑 , by the :flirt: tag to get either 😉 or 😘 , or the :downcast description to get 😓

To support this, our emojiMap needs to support multiple matching emojis for each lookup term. I also updated the completion provider to show the search term to the right of the actual emoji name.


BTW, I love this extension thanks @mattbierner for sharing all your hard work on this! I teach at a programming bootcamp, and it adds some needed fun to remote lectures 😄

Demo
2021-10-07 10 29 31

Gemoji Data
For the demo's emojis

  {
    "emoji": "🤑",
    "names": [
      "money_mouth_face"
    ],
    "tags": [
      "rich"
    ],
    "description": "money-mouth face",
    "category": "Smileys & Emotion"
  },
  {
    "emoji": "😘",
    "names": [
      "kissing_heart"
    ],
    "tags": [
      "flirt"
    ],
    "description": "face blowing a kiss",
    "category": "Smileys & Emotion"
  },
  {
    "emoji": "😉",
    "names": [
      "wink"
    ],
    "tags": [
      "flirt"
    ],
    "description": "winking face",
    "category": "Smileys & Emotion"
  },
  {
    "emoji": "😓",
    "names": [
      "sweat"
    ],
    "tags": [],
    "description": "downcast face with sweat",
    "category": "Smileys & Emotion"
  },

Copy link
Owner

@mattbierner mattbierner left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for looking into this! I think the general idea makes sense but needs a bit of polish. A few things I noticed when testing:

  1. There are now duplicate suggestions:

Screen Shot 2021-10-07 at 11 22 36 PM

Ideally there should be a single suggestion that matches the different possible keywords

  1. It seems like :: aren't working when I tried them? The idea is that accepting these inserts the :emoji: directly

  2. Are there any emoji in gemoji that have duplicate keys or are these all unique?

@eschwartz
Copy link
Author

Thanks for taking a look. I will give it another go, and see if I can fix up those issues.

@eschwartz
Copy link
Author

@mattbierner Took a bit of research and poking around, but I think I have a better approach here.

The key is the CompletionItem.filterText property, which is what VSCode uses to filter the list of results. So rather than update the emojiMap to include duplicate emojis for each tag, I'm just including those tags as strings in the filterText. This prevents the duplicate suggestions.

I also updated the Markdown preview to show the category, tags, and description. And I verified that it works with ::.

Demo with :
2021-10-11 11 53 26

Demo with ::
2021-10-11 11 54 45

@@ -3,6 +3,9 @@ import { gemoji } from 'gemoji';
export interface Emoji {
readonly name: string;
readonly emoji: string;
readonly tags: string[];
readonly description: string;
readonly category: string;
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Category is useful to search for something like animal

@@ -40,8 +40,7 @@ export default class EmojiCompletionProvider implements vscode.CompletionItemPro
return this.getMarkupEmojiCompletions(document, replacementSpan);
}

return this.getUnicodeEmojiCompletions(document, replacementSpan)
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change prevented duplicate suggestions, like:

:wink:
::wink::

It still seems to work with either : or :: prefixes. Is there anything else I'm missing here?

Copy link
Owner

@mattbierner mattbierner left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm seeing odd sorting in a few cases when matching on the tags, such as :rich for example:

Screen Shot 2021-10-14 at 12 07 52 PM

If filterText / sortText isn't working, as a last resort you could also look into returning a vscode.CompletionList that marks isIncomplete. This will re-request completions as the user types, which would let you update the completion list based on the current word instead

label: `::${x.name} ${x.emoji}`,
description: x.tags.join(', ')
}, kind);
item.filterText = `::${x.name} ${x.tags.join(' ')} ${x.description} ${x.category}`;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think category should be included in the filter text as it is shared between too many emoji

Also I don't think description should be included because it will also match in some unexpected cases

@Cussa
Copy link

Cussa commented Mar 26, 2024

@eschwartz @mattbierner hello! Is there any update on this? I believe that this is an amazing feature and would be amazingly helpful to have it.

If @eschwartz is not interested anymore in doing that, I can try to continue from where he stopped.

Please, let me know!

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.

None yet

3 participants