Add a proper emoji picker to Remarkup bar
Open, Needs TriagePublic

Description

For reference:

For inclusion:
http://emojione.com/

chad created this task.Jan 21 2017, 3:13 AM
chad updated the task description. (Show Details)Jan 21 2017, 3:14 AM
chad awarded a token.

Yep, go for it.

Awesome! I think this will be really cool. Will have to build a sprite sheet for it, shouldn't be too much.

I think we should just use actual emoji for this, not sprite sheets?

The major thing we need is a huge list of English language word labels for every possible emoji and then a pile of JS.

chad added a comment.Jan 21 2017, 7:19 PM

Haha, sorry I think this might be a good JS learning side project for me on the weekends if I have free time.

On Emojis - yes in theory, but not sure in practice - I can try both and see how bad it is. Mostly, there is too much differentiation across platforms leading to an inconsistent experience in expressing an emotion. Having a consistent experience here (if we're using them to help improve communication in the product) would be something I prefer we ship with. I also think when new ones get standardized, they roll out at different times at different places. Controlling that seems beneficial to some users not seeing blank unicode blocks? Maybe we just always stay behind then.

http://unicode.org/emoji/charts/full-emoji-list.html

chad added a comment.Jan 21 2017, 7:23 PM

oh man these crack me up.

I think the pros and cons are something like:

Pros

  • Users on old versions of Windows or who compiled their own Gentoo don't have occasional missing/fallback emoji.
  • Users see the same picture of a smiling cat instead of different pictures of smiling cats.

Cons

  • You need to rewrite RemarkupTextControl to use contentEditable, which I believe to be an enormous, complex undertaking -- or have :boar: and ๐Ÿ— mean different things and be visually distinct.
  • Probably nine million other problems (commit messages, text email, search, performance, combining emoji like flags and skin tones, internationalization).
chad added a comment.Jan 21 2017, 7:50 PM

I'll get back to you

chad added a comment.EditedJan 23 2017, 4:55 PM

All I've learned is:

  • Seems really simple/easy to build this into Autocomplete.js
  • Emoji look terrible on nearly every platform / browser
  • "Frequently Used" would be nice to have in Autocomplete for all objects, I think I'd save a lot of time typing @e instead of @epri daily.
  • Seems like we already special case "MacroEmoji", so swapping in images would not be much work.
  • Slack transforms actual emoji pastes like โค๏ธ๏ธ to :heart:
  • There is a lot to do to make the search feel "correct" and "natural" given how much junk emoji there are.
chad added a comment.Jan 23 2017, 5:00 PM

phurl autocomplete might be nice too

Emoji look terrible on nearly every platform / browser

Can you go into more depth on this one? Specifically, they don't look terrible for me in any browser on MacOS X or in iOS Safari. They're fairly bad on Windows 7, but from Googling it looks like they're OK on Windows 8 and 10 and (recent versions of?) Android. Assuming they're OK on OSX, Windows 8 and 10, and iOS and recent Android I'd guess like ~95% or more of our users can see emoji fine? Did you come up with different results? Or do you think more than 5% of our users are on other platforms like self-compiled Ubuntu? Or do you think some of the full-color OS icon sets are just terrible compared to the Emojione set?

chad added a comment.Jan 23 2017, 5:52 PM

I believe Firefox is adopting EmojiOne. If I could CSS style the emojis, it would help. I find them small and hard to identify in text. Basic ones like โค๏ธ are easy, but all the different emotions are somewhat harder. ๐Ÿ˜ vis. ๐Ÿ˜‚ really are hard for me to visually focus on (and on my laptop, which is smaller dpi, is even harder).

This is ๐Ÿ˜„ ๐Ÿ˜‚ on normal Emoji.

Maybe there are some other Emoji-style tricks in CSS. I don't think I've looked.

chad added a comment.Jan 23 2017, 5:57 PM

oh man, at least in Safari they look way better.

This is what I see on my Macbook in Safari:

Those look exactly identical to me (except that Slack has a larger font size?) so I'm not sure what distinction you're pointing out or seeing on your machine.

chad added a comment.EditedJan 23 2017, 5:59 PM

Chrome/Firefox seems to be shrinking them smaller. I think we can maybe cheat that with font-size and the emoji remarkup rule...

chad added a comment.Jan 23 2017, 6:05 PM

If I can get most places to appear like Safari shows them, this will probably be good for a v1. The reason I like EmojiOne is mostly aesthetic, they are less busy visually (flatter) and are easier to determine what they are individually. I can also control the size. Let me futz with our emoji remarkup rule and see if I can normalize the display better. Though, not sure that's really possible still given Google search results.

Also, I didn't intend to work on this today, just wanted to brain dump thoughts.

Pros

  • Users on old versions of Windows or who compiled their own Gentoo don't have occasional missing/fallback emoji.
  • Users see the same picture of a smiling cat instead of different pictures of smiling cats.

Second! Really jab at gentoo users was absolutely true.

avivey added a subscriber: avivey.Jan 23 2017, 7:29 PM


(Chrome on Windows 10)

chad added a comment.EditedJan 23 2017, 11:37 PM

Yeah emoji on Windows is non-existent still. At least, on Windows 10 Chrome / Firefox / Edge it's just what @avivey posted above.

chad added a comment.Jan 23 2017, 11:37 PM

Well, not non-existent, just black and white line art.

chad added a comment.Jan 24 2017, 2:03 AM

@avivey let me know how this looks now

wow! the beautiful colors!

Oh, woe is me, for there are no colours in my emoji. One thing to notice though - where can I find that beautiful emoji example in ui examples? Would be cool place to check for emoji support on different browsers/platforms :)

chad added a comment.Jan 24 2017, 4:45 PM

If you're on linux, I think emojione extension likely only choice. What OS/Browser?

Typing :cat will list the cat2 emoji before cat
๐Ÿฑ

chad added a comment.Jan 25 2017, 12:56 AM

Cat2 is twice as good as Cat

sort by awesome, descending

chad added a comment.Jan 25 2017, 4:02 AM

I can't figure out the sort thing, don't think it's an emoji issue.

cats are naturally dubious so i'm not surprised

EmojiCodepoint
๐ŸˆU+1F408
๐ŸฑU+1F431

The list is sorted by emoji. ๐Ÿˆ is "alphabetically" earlier than ๐Ÿฑ in the list of emoji.

I think you can sort the list by English label instead by doing setName("cat ๐Ÿฑ") (controls sort order), then setDisplayName("๐Ÿฑ cat") (controls display).

chad added a comment.Jan 25 2017, 4:13 AM

FINE IT IS MY FAULT

not memorizing emoji collation order in 2017 pfft

Also while you're in there maybe replace _ with (space) in the strings? I can't find :lion_face: by typing :fac... right now, but I think if you swap the underscores for spaces it will work. Then :cat should be able to find crying_cat_face and stuff, too.

chad added a comment.Jan 25 2017, 4:16 AM

I've already started the 2 minute arc diff process

I guess I don't even have a glyph for :lion_face: anyway.

๐Ÿˆ

๐Ÿˆ
๐Ÿˆ

๐Ÿˆ

๐Ÿˆ

๐Ÿˆ

chad added a comment.Jan 25 2017, 4:22 AM

๐Ÿฑ

๐Ÿฑ
๐Ÿฑ

๐Ÿฑ

๐Ÿฑ

๐Ÿฑ

chad added a comment.Jan 25 2017, 4:23 AM

I rolled the server for the bug testers.

chad added a comment.Jan 25 2017, 4:23 AM

๐Ÿ’ฏ

๐Ÿ˜ป๐Ÿ˜ป๐Ÿ˜ป
๐Ÿฑ๐Ÿฑ๐Ÿฑ
๐Ÿˆ๐Ÿˆ๐Ÿˆ

yup it works

Poor ๐Ÿˆ.

chad added a comment.Jan 25 2017, 4:27 AM

These are still so painful on non-Safari

He's so little. :)

๐Ÿฑ ๐Ÿˆ

๐Ÿˆ ๐Ÿˆ ๐Ÿˆ ๐Ÿˆ

๐Ÿฑ

๐Ÿˆ

๐Ÿฑ

:cat2:
๐Ÿˆ

:cat2:
๐Ÿˆ

Click here for ๐Ÿฑ

๐Ÿˆ โ†’ ๐Ÿฑ โ†’ ๐Ÿ•

๐Ÿˆ+๐Ÿˆ

๐Ÿฑ
๐Ÿˆ

hmm everything seems in order

mavit added a subscriber: mavit.Jan 27 2017, 9:28 PM
In T12139#208563, @chad wrote:

If you're on linux, I think emojione extension likely only choice. What OS/Browser?

Firefox 50 uses EmojiOne by default (except when it doesn't for some characters).

I came across a small bug with the "auto-suggest" feature. In differential I was writing an inline diff, and ended with :/ to show my face in plain ascii, and hit โŒ˜+enter immediately after to complete my inline diff. After typing :/ the auto-complete popped up and when I saved the draft with โŒ˜+enter it forever immortalized the auto-complete popup on screen with no seeming way to get rid of it (refreshing probably fixes~). I can reproduce on this install.

Do you have persistent chat open?

I do not have persistent chat open.

Oh, I missed "inline". That reproduces for me. I'll file a separate issue.

Also I very probably meant "inline comment" and not "inline diff"

chad added a subscriber: beng.Feb 15 2017, 9:16 PM

@beng pointed out this resource for future use: http://cldr.unicode.org/

chad moved this task from Backlog to Tomfoolery on the Remarkup board.Mar 27 2017, 4:01 PM