Automatically replace :colon: shortcodes and Emoticons as user types

[tdulcet]

Background

A few websites (such as Slack) automatically replace the :colon: shortcodes and/or :-) Emoticons with actual Emojis as the user types, but most do not.

Proposed solution

I propose that two options be added to this add-on to automatically replace (autocorrect) :colon: shortcodes and Emoticons with Emojis as the user types. A third option could also be added to autocomplete the :colon: shortcodes.

Alternatives

There is another Firefox add-on, :emoji:, claiming to the :colon: shortcode autocorrections, but unfortunately, it is extremely buggy and does not work on many websites.

Additional context

I created a webpage to demo the feature here: https://tealdulcet.com/autocorrect/. Type any of the supported :colon: shortcodes or Emoticons into the three input types near the top of the page and they will be replaced with emojis as you type. There are some tables further down the page that list all the supported Emoticons and :colon: shortcodes.

I would be willing to create a pull request, if it would be accepted. The webpage uses about 350 lines of plain JavaScript to do the autocorrections, which can be found in this file: https://tealdulcet.com/autocorrect/script.js.

Thunderbird

Since you are looking into making this add-on work in Thunderbird (#49), it currently shows 16 emoticons as an emoji in the editor, but it does not actually replace the emoticon with the emoji, so unless the recipient is also using Thunderbird, they just receive the emoticon. Adding this feature to this add-on would make it a good candidate to be integrated into Thunderbird core replacing the current emoticon picker, to be used by the 25 million active users of Thunderbird. Also see Bug 1213694.

[rugk]

First, great idea.
I see this is quite complicated and a JS needs to be injected in any of the sites. That's why I have not implemented it yet.

Also thanks for suggesting an implementation/doing a prototype.

Some things about the implementation:

• obviously, it should have a setting to enable/disable this feature in the settings
• I am not sure whether it should be enabled/disabled by default though
  pro enabled: likely very very useful for all users
  contra: not intuitive without suggestions (you need to remember names)
  contra: if it uses too much RAM I'd rather disable it, by default
• your proof of concept looks quite nice, but (only had a very very quick look!) the JS has some encoding issues or so (could find the string “%s� there)
• for implementation (or maybe even copy/paste) also see https://github.com/threema-ch/threema-web, maybe it's even somehow included in this Rust/WebAssembly implementation: https://github.com/threema-ch/compose-area
• your implementation does not actually use our lib here, emoji-mart, does it?
  Because if not then:
  pro: You likely save some RAM usage (loading emoji-mart is quite heavy as I've noticed while implementing my search in the address bar)
  contra: We have to maintain our own text->emoji mapping, do we?

Generally usability:

• It's hardly noticeable/advantageous if there are no suggestions, see Shortcut (Autocomplete) for Emoji threema-ch/threema-web#433, so it would really only be really nice, if there is a popup -> which has been requested in Popup inside of website #9

Generally regarding your PR suggestion: Yes it would be glad of you to propose a PR. I guess we still need to discuss some implementation details though.

[tdulcet]

I see this is quite complicated

Yes, the demo is really tuned for performance, so the user does not experience any delay when typing, especially on large documents.

contra: not intuitive without suggestions (you need to remember names)

Most of the supported Emoticons are commonly known, such as :), :D and :(. While the :colon: shortcodes are harder to remember, users typically only need to type the first few characters, as they will autocomplete. In addition, unless #50 is done, users are shown the :colon: shortcodes every time they insert an emoji using the picker, making it easier for them to remember the ones they regularly use.

contra: if it uses too much RAM I'd rather disable it, by default

Most of the RAM usage in the demo is for dynamically generating and displaying those huge tables with all the autocorrections and it still only uses about 15 MB of RAM.

the JS has some encoding issues or so

Thanks for pointing this out! The files were already encoded in UTF-8, but it seems that I needed to add a BOM to make them display correctly.

your implementation does not actually use our lib here, emoji-mart, does it?

No, I wanted the demo webpage to support the latest emojis (#34). All the current mappings can be found in this file: https://tealdulcet.com/autocorrect/symbols.js. I could easily change the implementation in the pull request to get the :colon: shortcodes from Emoji Mart. You would have to maintain your own list of Emoticons, although they are not likely to change.

It's hardly noticeable/advantageous if there are no suggestions

Yes, a popup would be very nice, but it would add a lot more complexity and could cause conflicts and compatibility issues with the CSS used by many websites. See the :emoji: add-on for an example of the issues associated with a popup. Maybe you could add an option to open the picker to show the suggestions. I think this would be a good first step in completing #9. The web app you referenced is different from my demo in that is does not support :colon: shortcode autocompletion (threema-ch/threema-web#433) or undoing the autocorrections.

[rugk]

such as :), :D and :(

Okay I did not notice that. If that is to be included, one needs to be able to disable each of these group replacements, as you also made it possible on the website.
AFAIK for the use case here one would mainly only need usual shortcodes (emojis, at least by default), replacing :) would be not expected.

about 15 MB of RAM

That's quite a lot an I could not reproduce it. The emoj-mart address bar implementation only increases RAM usage for about 5-10 MB and that also contains all emoji mappings.

You would have to maintain your own list of Emoticons, although they are not likely to change.

Nah, not really. Emoji mart includes them: https://github.com/missive/emoji-mart#examples-of-emoji-object

Yes, a popup would be very nice, but it would add a lot more complexity and could cause conflicts and compatibility issues with the CSS used by many websites.

Yeah, I would also only do this if it is really required… for now, at least.

[tdulcet]

one needs to be able to disable each of these group replacements, as you also made it possible on the website

Yes, as I said in my "Proposed solution" above, I propose adding three options to this add-on. For clarity, the three options could be something like:

• Autocorrect Emoticon Emojis (e.g. :) → ☺️, :D → 😃, :( → ☹️)
• Autocorrect :colon: Emoji Shortcodes (e.g. :smiley: → 😃, :apple: → 🍎)
• Autocomplete :colon: Emoji Shortcodes (e.g. :ap → :apple:)

The demo webpage has three additional options relating to Unicode symbols:

• Autocorrect Symbols (e.g. -- → –, --> → ⟶, 1/4 → ¼)
• Use smart quotes (e.g. ' → ‘ or ’ and " → “ or ”)
• Convert fractions and mathematical constants to Unicode characters (e.g. 1234.25 → 1234¼)

That's quite a lot an I could not reproduce it.

Without the huge tables, it uses less than 800 KB of RAM. I am using the "Memory" column from about:performance (open the Firefox menu "≡", click on "More" and "Task Manager") to measure the RAM usage.

Emoji mart includes them

Yes, but Emoji Mart only includes 48 Emoticons for 19 emojis. My demo webpage includes 140 Emoticons for 81 emojis. See the "Emoji autocorrections" table. Since Emoji Mart does not include a comprehensive list of Emoticons, you would likely have to maintain your own list.

[rugk]

My demo webpage includes 140 Emoticons for 81 emojis.

What do you mean by emoticons? Keywords?

Actually, I found them quite impressive and a lot. (when searching in the picker I usually do find the correct emoji, that's why I am using emojji-mart.)

The number of emojis is of course limited by Unicode.

[tdulcet]

What do you mean by emoticons?

Like the three examples I provided: :), :D and :(. Also see the list in the Wikipedia page I linked to in the "Background" section above: https://en.wikipedia.org/wiki/List_of_emoticons. There is another list here. I consider almost everything in the "Emoji autocorrections" table on my demo webpage to be an Emoticon. I generated the mappings that are shown in the table by combining a bunch of sources, including these two lists.

As I said above, Emoji Mart currently only includes Emoticons for 19 emojis (see list here and iamcal/emoji-data#114), but my demo includes emoticons for 81 emojis (again, see the "Emoji autocorrections" table).

[rugk]

BTW a good alternative/data source may also be https://milesj.gitbook.io/emojibase/ (also 140 emoticons as far as I see, and it is maintained, so we would not need to maintain it by ourselves) +localized

[tdulcet]

BTW a good alternative/data source may also be https://milesj.gitbook.io/emojibase/ (also 140 emoticons as far as I see, and it is maintained, so we would not need to maintain it by ourselves) +localized

Yes, that was one of the sources I used to generate the mappings for my demo. Note that it only includes 48 Emoticons/Emojis (the file is 140 lines, but most of that is comments or blank lines), although their API supports generating emoticon permutations, many of them are nonstandard, which I did not use.