Make emojis work as placeables

[iafan]

With the increasing use of emojis in translation, a nice usability improvement would be to make all emojis act like placeables (i.e. clickable entities in source text).

Example: https://translate.evernote.com/ru/android_evernote/translate/strings.xml.po#unit=1254182
(here, in source text, tags <i> and </i> are highlighted and can be placed into the translation field at current caret position with a single click).

Relevant code: https://github.com/evernote/zing/blob/8157b44d7a46cf4bdc230a22ec83fa24ce56bcdc/pootle/static/js/utils.js#L116-L138

Relevant discussion on matching emojis with regular expressions in JavaScript:
https://stackoverflow.com/questions/22006218/replace-emoji-unicode-symbol-using-regexp-in-javascript

[benjamimo1]

Hello @iafan ! I'm trying to get into this request and noticed that when clicking the placeable in the example you provided; white-font text is added to the text-field instead of text in a readable color. Is this the expected behavior or a bug?
(In the example provided I clicked several times on the placeable ,"<i>)

Should the format of the placeable clicked be kept when inserted?
I'll start trying to replicate a similar behavior for emojis as requested.

[iafan]

@benjamimo1 Since the field is grayed out, this means that you are in read-only mode, and placeables should not be inserted at all. So looks like a separate bug, good catch! I filed #460

The white text seems like a styling issue. Not sure why it's white for you; it's supposed to be gray:

Can you experiment in different browsers and see if it's different there?

When you have editing permissions, the text area will have a black text on white background.

[julen]

The styling issue for a disabled textarea is a problem in Safari, will fix that now.