Skip to content

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

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

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.

3 participants