When I press "Ctrl+Shift+period", the emoji picker is opened but I still have to use the mouse to focus the search box to type the keyword search. Then I have to use the mouse again to select the particular emoji.
Is it possible to auto-focus the search box when pressing the shortcut key, then using some controls like the arrow keys (or Ctrl+arrow keys) to select the particular emoji to copy?

Strengthen the identity by changing the default 🏬 emoji to 🤩 and adjusting the text.

If translations are updated, I'll comment here so translators have a chance to update the translation files in a new release.

Remember that currently the add-on is still in beta phase!

I'll make this "read-only" i.e. lock it, so you can safely subscribe to this issue without getting annoyed by off-topic comments. Open a new issue or so if something is to be said/discussed about a translation.

In the settings:

This needs to be internationalized and localized (to German, at least).

Ref rugk/emoji-mart-embed#2

CTRL+Shift+Q possibly?

Affected website: web.threema.ch, web-beta.threema.ch

Reported as downstream issue: threema-ch/threema-web#860

Bug description

Steps to reproduce

1. Go to https://web-beta.threema.ch and set up a session.
2. Send an image.
3. Enter a description.
4. Use the add-on to add an emoji at the end of the text.

Screencast

Actual behavior

text is sent without emoji

Expected behavior

send text with emoji, just as it is displayed to the user

System

• Threema Web version: 2.2.0-beta.3
• Threema App version: Android
• Browser name and version: Firefox 68
• Computer operating system and version: Linux/Fedora 30
• Smartphone operating system and version: LineageOS 14.1
• Add-on version: v1.1

Possible solution

input event?? (trigger manually?)

We don't want that:

…or the same on Android, where we have a fixed witdh.

Solution

Thus, we should ignore the user setting of the width there and just set width: auto, which lets emoji-mart use all width it has.
Maybe the same for height?

TODO

• As we may also need this in OfflineQr, for rugk/offline-qr-code#187, make a common lib to determinate where a page is running.
• implement this issue here based on that lib

If users do this…:

…, it will obviously lead to an error when choosing an emoji:

Solution

We should prevent users from unselecting both options at a time. Reselect the other option automatically…

STR

Say we have this situation:

You can force it by enabling the fallback option, but then e.g. executing this to remove the optional clipboardWrite permission:

browser.permissions.remove({
    permissions: ["clipboardWrite"]
});

What happens

So if I now click on any other emojiResult option, i.e. e.g. disable copying the emoji to the clipboard, it triggers the permission prompt:

What should happen

As you clicked on an totally unrelated option, it does not make sense to show the permission prompt.

I've no been able to pinpoint the source of the problem, but it seems that when you insert two emoji quickly, the focus on the comment is loss and it either insert the emoji at the beginning, or reinsert your own comment at the end of the original.

1st click: works normally
2nd click: insert at the beginning
3rd click: the comment is duplicated, along with the emoji inserted at the beginning of the duplicated message

And removing the first weird unicode emoji results in the comment box being closed ad infinitum

…instead of copying.

As an option, however.

Ref #2

This issue was generated by todo based on a TODO comment in dda31f7 when #21 was merged. cc @rugk.

If you:

• use Windows
• and have a emoji set other than "native emojis" selected

Then the performance when scrolling may be bad.

Questions

• Can you confirm that?
• Any solution/potential problem?

Note: If you manually go to moz-extension://<extension-id>/popup/index.html (access the extension id by going to about:debugging and clicking on "Manifest URL") scrolling still works as expected. This only happens in the popup itself.

I'm a UI/UX designer and some of suggestions below are improvised from my experience.

Windows 8 and Linux users background

We don't have a system-wide shortcut to open emoji menu, so we rely on browser extensions to insert an emoji. We also installed a custom emoji font "Twemoji" to replace boxes or black-white polyfills: https://github.com/eosrei/twemoji-color-font

Note: Twemoji is an active development forked from abandoned EmojiOne Color project.

Build a keyboard shortcut

Feature request: A pre-built keyboard shortcut to open an emoji extension interface.

This should be a quick feature addition, and I would love it to see it built.

Pasting an emoji from a picker and extension

I'm aware of the : shortcut, but it doesn't function the same as an actual extension interface. The shortcode isn't converted to emoji inside the textfield.

Fix request: Instead of pasting a shortcode, paste an actual emoji from a : mini-picker interface.

With this change, an emoji should show up in the text field instead of a :shortcode:, which would be great for most text-editor webapp... except Notion.

Fix ideas and suggestions for special expectation cases

Notion - an emoji-heavy text editor, on this specific webapp, the : shortcut does not pop up any picker at all, it just input colons like normal.

With keyboard shortcut feature: If a keyboard shortcut to open an emoji picker doesn't defocus a textfield, then it will open afunctionality to paste an emoji in current text input when emoji is selected.

Without keyboard shortcut feature: If a keyboard shortcut to open an emoji picker still defocus a textfield, then try to behave similarly to a Chrome extension Chromoji as shown on image:

Note: This extension Chromoji does not have keyboard shortcut and the interface is opened by clicking an icon in extension bar.

When an extension icon is clicked, it seems like this extension "remembers" the current input (refer to the blue glow around the input field in an image) and opens a possibility to paste an emoji on the input.

Future feature requests

Later down in the line, it would be very useful to have these features developed:

##An option to change a keyboard shortcut
Feature request: An option to allow users to change a keyboard shortcut to open.

It will allow the extension support longevity in case Firefox changed their shortcut that happens to override the extension. It occurred to one Emoji picker extension, rendering it useless because their pre-built shortcut got overridded by a Firefox update for some dev tool shortcut.

##Focus on the search field
Feature request: Make a search as a default focused field upon opening the emoji picker menu.

So users can type down in the search right away after pressing a keyboard shortcut or clicking on an extension icon.

##Emoji pop-up picker menu
Feature request: Build a "popup interface" which pops up above the current text field input, triggered by a keyboard shortcut, featuring:

• Search emoji as a default focused field
• Close the pop-up after the emoji selection (and auto-paste)
• Popup interface design inspirations:
  
  😃

/cc @ongspxm

Similar to rugk/offline-qr-code#43, I want to adjust the design here, too, so it fits the Photon design.

The best would be to actually split the options.css in a common options file and put it into this module, so it can be re-used across add-ons…

BTW, @ongspxm, if you want to look into this again, let me know. No obligation of course, and I have to do #10 basically too, anyway, first… 😄

Is there any chance that your awesome emoji picker will become available for Chrome surfers?

• TinyWebEx/AutomaticSettings#9
• TinyWebEx/AddonSettings#5

This is some easy refactoring. (thus "good first issue")

Currently

Currently the things that happen on click/selection of an emoji are in the same file/module as the emoji picker loading etc.

File is:
https://github.com/rugk/awesome-emoji-picker/blob/master/src/popup/module/EmojiPicker.js

Problem: The only single function that is executed on click (copyEmoji) is really huge!

Wanted

TODO: Create a file "EmojiResult" or "EmojiAction" or so that contains all the "controller" handling that is triggered on click/selection.
Edit: EmojiInteraction may be the best name.

Also:

• independent of HTML/DOM
• only contain logic that gets an emoji or so and does whatever the user configured
• likely split copyEmoji…

Notes

I've tried that in #5 already, but that may be out-of-date and AFAIK I did not really commit it.

Background

Currently when hovering an emoji in the picker, this appears:

It is a lot of information, and not easy to process. Also the :colon: notation is rare and most often not used since the picker inputs Unicode as a default.

Proposed solution

Only show the name of the emoji, vertically centred. Maybe the bar can be slightly less tall, showing a smaller preview of the icon.

Alternatives

If the user have selected the “Use the :colon: instead of the Emoji unicode” option, then the :colon: preview could be displayed back, but only in that case.

There are many websites, where this add-on may fail to work properly. They are reported with the label "site-issue".
If you know some arcane ones or just want to play around a little, feel free to please test this on as many sites as possible.

If you find a bug…

…please open a new issue -> "Problem with a specific website". Fill out the template as stated.
(I think I don't need to mention, you'd better look for duplicates in the issue list, though. 😉)

Of course, it would be awesome if you could already investigate how and possibly why this happens. Extra points for a complete solution (or PR), of course! 😉

That all said, a bug report is more than enough. It's the first step to a solution, and it reports and documents the problem.

For the general contributing guidelines, also see the contributing doc.

Bug description

As reported by @shanirub in #62 (comment):

Under the behaviour settings the "colon code / unicode" option is incorrectly displayed.

Steps to reproduce

1. (Use a version with the Hebrew or another RTL language translation.)
2. Choose that language in the settings of Firefox.
3. Restart Firefox.
4. Open settings of add-on.

Actual behavior

The : after (in the LTR sense) or before (in the RTL sense) the colon is missing.

Expected behavior

• the colon should say :colon:

For comparison the German translation:

System

Operating system and version: Fedora 30
Browser and version: Firefox 69
Add-on version: dev (master)

Possible solution

When looking into the source HTML code, I can see, it (the text) is correctly applied/set. This likely is related to some display error related to RTL languages – or rather the mix of these.

Note the :colon: thing is in it's own span tag, because this is how our translation system works.

<label data-i18n="__MSG_optionCopyEmojiColons__" data-opt-i18n-keep-children="" for="resultType">השתמש ב- <code data-i18n="__MSG_optionCopyEmojiColonsCode__">:colon:</code> Code במקום ב- Unicode.</label>

Related issue: #63

Background

Since Firefox and Thunderbird extensions are probably made the same way and since Thunderbird currently has a antiquated emoticon picker, it would be really nice to have a version of Awesome Emoji Picker for Thunderbird.

Proposed solution

Insert the emoji picking window in the editing bar of the composing window, possibly replacing the current emoticon picker:

Distribute it on https://addons.thunderbird.net

Same as rugk/offline-qr-code#183 for the other add-on.

Required to satisfy the new way to credit people: https://github.com/TinyWebEx/common/blob/master/CONTRIBUTING.md#translator-credit-inside-of-add-on

The screenshots on AMO do not show all settings properly. Particularly an screenshot with big emojis is missing.

The GIF does not really convey it, but it does not really start fast. 😃

Actually, it is kinda slow and you can see it first opens only a small white space and then – when the Emoji picker is inserted – it occupies all the space and FF increases the popup size… 😄

This should be faster… (no idea, how, though…)

Create a FAQ entry explaining how you can actually enable that search bar feature and use it. (tip: first create a FAQ at all in the GitHub wiki)

Doc-only task.

See also #59 (for screenshots to be made there)

On Android, the "close tab after done", will not work.

Ref https://discourse.mozilla.org/t/can-an-extension-close-its-own-popup-opened-by-a-browseraction-or-pageaction/38645/3?u=rugkx

Upstream has merged/accepted emoji 11 support in iamcal/emoji-data#152.

Let's see when this gets into emoji-mart, so we can make use of it here. 😄

The permission doc is not really adjusted…

clipboardWrite is missing, other things are wrong.

(e.g.?)

(usual twitter.com, not this mobile PWA at mobile.twitter.com)

This addon looks awesome, but I'm using Waterfox 56.2.12 (which the Firefox addon site seems to identify as Firefox 57.0), and it tells me that I can't install the addon below browser version v63.0 😞

Bug description

As reported by @shanirub in #62 (comment):

The small circle that represents the skin tone overlaps the text "Awesome Emoji" [in a RTL language].

Steps to reproduce

1. (Use a version with the Hebrew or another RTL language translation.)
2. Choose that language in the settings of Firefox.
3. Restart Firefox.
4. Open emoji picker.

Actual behavior

Expected behavior

• emoji should be at the right
• skin selector should be on the left

System

Operating system and version: Fedora 30
Browser and version: Firefox 69
Add-on version: dev (master)

Possible solution

likely CSS

Related issue: #64

STR

1. Ctrl+Shift+Period

What happens

Input field not focused

What should happen

Auto-focus should work.

System

Firefox 66
Linux/GNOME/Fedora 30

https://github.com/TinyWebEx/RandomTips

With tips:

• shortcut, see #12
• usual stuff, such as ratings

Especially useful with #6, so you can use a shortcut to open the picker, select the emoji and get it directly inserted…

Background

I think adding a context menu would be closer to what you type meaning there's less movement involved to activate it and it means I can have one less icon on the top bar. 😉

Proposed solution

Add context menu functionality

Trying to insert an emoji in the instantaneous messages results in the blockage of the Messenger in the current page.

It only does that bug when no character are into the dialog box beforehand.

I assume it's on Fb's side, like an non-handled error or an anti-bot/flood/spam measure; so it might be hard to fix that.
I'm not sure we can access the message field to determine whether or not the field is empty through the add-on.

Tracked/tested in rugk/offline-qr-code#177

Guide is currently written for that other add-on, but can be adjusted for this one. (most is just the same)

When I click on an emoji, I should get some feedback, so I know it was successful.

It would likely be best to use this kind of confirmation popup:
https://design.firefox.com/photon/motion/icons.html#confirmation-pop-up

See rugk/offline-qr-code#190

This issue was generated by todo based on a TODO comment in a63f6b0 when #5 was merged. cc @rugk.

This issue was generated by todo based on a TODO comment in a63f6b0 when #5 was merged. cc @rugk.

In the settings:

Currently we show a screenshot for the dark version.
IMHO, the screenshot shown should be dependent on whether the user (likely) uses a dark Firefox/OS theme or a light one.

Tip: use https://developer.mozilla.org/docs/Web/CSS/@media/prefers-color-scheme and https://developer.mozilla.org/docs/Web/API/Window/matchMedia

I mean this color:

Which color should it be, by default?

• should it be adjustable in the options or is it just a matter of detail?
• potentially automatically change/adjust?
  • by time/randomly?
  • by current website favicon/by last selected icon?
  • automatically adjust based on add-on icon (see also #14)?
• possibly just a color out of the current 🤩 emoji

What could work?

When adding multiple emojis, on GitHub gists in multiple lines, there, it seems to insert emojis into multiple lines at the same time.

Seems codemirror is used, and somehow the line has a preview and an insertion. Also, actually it is only one line as you can see in the line number on GitHub, so the HTML DOM is somehow destroyed here or similar…

Introduction in English

and anomalous "les"

will do a PR when I have time

Background

Similar to #23 and basically equal to rugk/offline-qr-code#186.

Requested in #23 (comment)

Proposed solution

prefers-color-scheme is theoretically possible too…

Alternatives

manual switch -> no

Additional context

Problem is: Emoji-mart does not support this yet. So we would either have to style it on our own, or it would likely look quite bad.

May be hard to implement, but certainly worth it… 😜