Make WordPress Core

Opened 9 years ago

Closed 9 years ago

#31627 closed defect (bug) (fixed)

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

Reported by: mrwweb's profile mrwweb Owned by: pento's profile pento
Milestone: 4.2 Priority: normal
Severity: normal Version: 4.2
Component: TinyMCE Keywords: has-patch emoji
Focuses: javascript, administration Cc:

Description

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.

Attachments (1)

31627.patch (4.2 KB) - added by azaozz 9 years ago.

Download all attachments as: .zip

Change History (19)

This ticket was mentioned in Slack in #core-editor by iseulde. View the logs.


9 years ago

#2 @azaozz
9 years ago

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.

Last edited 9 years ago by azaozz (previous) (diff)

#3 @azaozz
9 years ago

  • Keywords reporter-feedback added

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

#4 @mrwweb
9 years ago

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.

This ticket was mentioned in Slack in #core by pento. View the logs.


9 years ago

This ticket was mentioned in Slack in #core by pento. View the logs.


9 years ago

#7 @mrwweb
9 years ago

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

#8 @pento
9 years ago

  • Focuses javascript administration added
  • Keywords needs-patch added; reporter-feedback removed
  • Milestone changed from Awaiting Review to 4.2

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. :-)

This ticket was mentioned in Slack in #core by drew. View the logs.


9 years ago

#10 @DrewAPicture
9 years ago

  • Owner set to pento
  • Status changed from new to assigned

#11 @azaozz
9 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 31922:

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

#12 @azaozz
9 years ago

In 31923:

Remove unused vars. See #31627.

#13 @mrwweb
9 years ago

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.

#14 @azaozz
9 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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

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

#15 @azaozz
9 years ago

In 31946:

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

@azaozz
9 years ago

#16 @azaozz
9 years ago

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.

#17 @pento
9 years ago

  • Keywords has-patch emoji added; needs-patch removed

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

#18 @azaozz
9 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

Note: See TracTickets for help on using tickets.