joeattardi / picmo

JavaScript emoji picker. Any app, any framework.
https://picmojs.com
MIT License
1.19k stars 117 forks source link

How can we add custom tags to improve search terms? #222

Open marquizzo opened 2 years ago

marquizzo commented 2 years ago

I'd like to add custom tags to existing emojis to improve searchability.

For instance, the "🎃" emoji has the following tags in the default database: "celebration", "halloween", "jack", "lantern". However, it does not include the "pumpkin" tag, which is a pretty common name for it. So I'd like to:

  1. Get the database after it's been retrieved from the CDN
  2. Search for the emoji with "label": "jack-o-lantern"
  3. Add a custom search term with tags.push("pumpkin")
const emojiPicker = picmo.createPicker(options);
emojiPicker.addEventListener("data:ready", () => {
    // How do I access database here?
});

I've scoured the API documents for a property or method that lets me access the DB, but I can't find it. I've tried adding custom emojis in the createPicker() options, but that appends a new emoji, instead of modifying an existing one. Finally, I came up with a hacky solution, but this creates a second 🎃 entry, instead of just modifying the existing one:

emojiPicker.customEmojis.push({
    "label":"jack-o-lantern",
    "tags":["pumpkin"],
    "emoji":"🎃",
})

How do I gain access to the DB to add extra search terms?

joeattardi commented 2 years ago

Interesting, this is not a use case I thought of.

There is not an official way to do this currently, but I can think of a few potential solutions:

(1) If you're using the default data store strategy, it's just an IndexedDB database. The data:ready event gives you a database object that encapsulates the underlying IndexedDB database itself. This object doesn't expose the actual DB, but you can just use the regular IndexedDB APIs. The name of the database is PicMo_<locale> where is the current locale, so for example, PicMo-en. You could use the IDB APIs to look up emoji records and add additional tags to the tags array.

(2) You can install the emojibase-data package and supply the static data (by default, PicMo will download it from a CDN). See here for details. To add your tags here, you'd just import the JSON data from emojibase-data. Add your tags to the emojis' tags array, then initialize PicMo and pass your modified dataset. You can probably wrap this up in a new datastore factory as well to encapsulate the tagging.

I'm hesitant to add a specific API to do this because PicMo is already a little complex with all the options it supports.

If you do find one of the above options works well for your use case, let me know! At the very least we can add some documentation about how to accomplish this!

I'll leave the issue open for now, let me know how you make out.