hxqlin / emoji-codes

A Chrome extension to quickly add emojis to Facebook messages using emoji codes.

Emoji Codes

A React component to quickly add emojis to text fields using emoji codes, intended for use as a Chrome extension for Facebook Messenger. It looks and behaves similarly to the emoji autocomplete menu in Slack.

The component listens for changes on an editable <div>. When a : and some letters matching to an emoji code are typed in the field, the autocomplete menu will appear. An emoji can be selected by clicking on it or by using ↑ and ↓ to navigate and pressing Enter or Tab. The menu can be dismissed with the Esc key. Emoji lookup is powered by emoji-mart-lite.

emoji-codes's Issues

Update README.md

Add description of project and instructions for how to run the app for development and load it as a Chrome extension.

Make the extension work in Messenger on all urls

Right now, the emoji picker is only usable on urls matching https://www.facebook.com/messages/* and https://www.messenger.com/*, but it should work for the smaller Messenger tabs across https://www.facebook.com/ too.

Hide the emoji picker if the editor loses focus

Steps to reproduce:

1. Click editor field and type in emoji code so that emoji picker becomes visible
2. Click outside of the editor

The emoji picker should become hidden but it stays visible.

Using the emoji picker breaks text deletion on Messenger

Steps to reproduce:

1. Bring up the emoji picker in Messenger and choose an emoji
2. Type some more text in the field
3. Try to delete the text

Insert emojis if the full emoji code is typed

The emoji should be inserted if the full emoji code is typed in the text field. For example, if :smile: is typed out in full, it should be replaced with 😄

Modularize App.less

App.less has all the LESS for the project. The styling for the components should be split into another file and imported as needed.

No shrug emoji and potentially other missing emojis

The emojiIndex provided by emoji-mart-lite doesn't have the shrug emoji, possibly because it's not considered native? Using emoji-mart's emojiIndex does have the shrug emoji, but there's also emojis that don't have native representations and get displayed as the 🩳 character. The emoji-mart package is also bigger; from https://github.com/vaskevich/emoji-mart-lite:

emoji-mart bundle sizes: 488k (minified), 84k (when gzipped)
emoji-mart-lite bundle sizes: 170k (minified), 45k (when gzipped)

Position the emoji container above the text

When the emoji container is visible, the bottom edge should be aligned with the top of the text that triggered it.

The selected emoji remains out of view when the arrow keys are used to navigate to hidden emojis

When the arrows keys are used to navigate to an emoji that's in the hidden part of the emoji picker, the emoji doesn't get scrolled into view.

Add visual indicator of which emoji is selected in the list

When a mouse is hovered over an emoji in the list, there should be a visual indication of which emoji; probably different styling for the selected item. The behaviour should be the same as when an emoji is selected with the keyboard.

Document components

If any component is missing documentation, add it.

Enable the emoji picker on all chats in Messenger without page reload

Currently, the script initializing the emoji picker will only set it up when the page loads. If the user goes to another conversation in Messenger, that conversation won't have the emoji picker unless the page is reloaded.

Prep extension for Chrome Web Store

https://developer.chrome.com/webstore/publish

• A detailed description of your application. Write your description to entice users to download your app.
• A 128x128 icon to display in the store. You may re-use your app icon here.
• At least one 1280x800 or 640x400 screenshot or YouTube video to show off what your app does.
• A 440x280 small tile icon that will be displayed on the Chrome Web Store wall.
• The primary category where your app should be listed.
• Your app's language to help users find it.

Support keyboard navigation in the emoji list

When the emoji list becomes visible, it should be possible to navigate the list using the arrow keys and select an emoji using the enter key.