Win 8..1 / Chrome 40 Emoji Don't Render Without Saving Post

[mrwweb]

Using the Windows 8.1 touch keyboard on a desktop with a mouse (cannot test with actual touch) in Chrome 40, when I insert emoji into the editor, they appear as the unknown entity rectangle character until I save/publish the post.

The touch input keyboard with mouse works as expected in Firefox 33 and IE 11.

[azaozz]

Only have Win 7 but AFAIK Win 8.1 has better native emoji support built in. Have you seen this happen in Firefox and IE at all? Seems it's a Chrome bug that probably will be fixed soon.

May be worth opening a ticket on the ​Chromium trac if this hasn't been reported yet.

[azaozz]

Actually my Chrome version is 41.0.2272.89 m. Could you update Chrome and test again plz.

[mrwweb]

Yeah. Chrome only.

I just updated to 41.0.2272.89 m and see the issue still.

Here's a screencast of the issue if that helps: ​http://screencast.com/t/Qa1liPhuK

Currently Chrome doesn't have native emoji support so I thought that WordPress was converting those entities into twemoji images on insertion into the editor.

[mrwweb]

Still seeing this in Chrome 41.0.2272.101 m, WordPress 4.2-beta3-31903 on Windows 8.1.

[pento]

Thanks, @mrwweb! Sorry for not updating this ticket - we've been able to reproduce the bug, but we're still working on how to fix it. :-)

[azaozz]

In 31922:

TinyMCE emoji: catch the inserting of emoji chars with the Windows 8 onscreen keyboard and replace if needed.
Fixes #31627.

[azaozz]

In 31923:

Remove unused vars. See #31627.

[mrwweb]

I can confirm this is working!

Is it the expected behavior that the cursor doesn't advance after the insertion of an emoji? (e.g. typing four emoji in the order "1234", outputs "4321.") It works as expected for alpha characters.

[azaozz]

typing four emoji in the order "1234", outputs "4321."

Reproduced. Chrome just has to be more difficult, happens only there :)
Patch coming up.

[azaozz]

In 31946:

TinyMCE emoji: fix caret position after replacing emoji in Chrome on Windows 8.
See #31627.

[azaozz]

In 31627.patch:

• Enhance twemoji.js to support passing of additional attributes for the replacement images.
• Use that to add the needed attributes when replacing emoji inside the editor.

This changes the (external) twemoji.js but increases speed between 9% and 22% depending on post length and number of emoji used.

[pento]

Oh, that's pretty cool. Let's try it out in trunk, then push it upstream.

[azaozz]

In 31948:

Emoji:

• Enhance twemoji.js to support passing of additional attributes for the replacement images.
• Use that to add the needed attributes when replacing emoji inside the editor.

Fixes #31627.