Re-add emoji detection script

[kraftbj]

Describe the bug
In #6151, the emoji detection script was removed to avoid a conflict with Gutenberg saving emoji-as-images. I didn't see a corresponding issue to track fixing the underlying issue and re-enabling emoji detection support.

This will generally be needed for 5.0 and Trunk now included Twemoji 11—which adds the new emoji from Unicode 11 (cupcakes! superheroes!).

To Reproduce
Steps to reproduce the behavior:

1. On trunk, go to edit a post.
2. Add a cupcake emoji ( 🧁 )
3. Save the post, refresh, etc.

Expected behavior
The cupcake emoji (on an OS that does not yet support a cupcake, macOS 10.13.5 for example) should render.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: macOS 10.13.5 but would currently happen for all operating systems.
• Browser all
• Version all

Smartphone (please complete the following information):

• Device: all
• OS: all stable versions. Android P beta have system emoji, so it is harder to duplicate.

[desrosj]

So did some testing to determine the current status of this.

With Gutenberg as is now, the emojis will paste but not appear. They are saved as emojis in the database, though.

When I revert #2799, the following issues occur:

• When pasting new emojis, they are correctly converted to images, but:
  • The images are selectable with corners for scaling (don't actually scale)
  • Pasting them into the title does not remove the square when the image is added.
  • Pasting them into paragraph blocks does not reliably cause the image to be added (sometimes the � is added).
  • Changing to edit as HTML and back causes some of the pasted emojis to disappear.
• When saving the post:
  • Emojis in the title are saved correctly as emojis in the database.
  • Emojis in paragraph blocks are not saved correctly as emojis, but rather as images.

Screencast of my testing: https://cloudup.com/cd4i2kGPMLu

[desrosj]

Twemoji could be updated in Core. Core is on 11.0, the latest version is 11. with two small updates in between. I tested this locally, but it does not solve any of the issues described in my last comment.

[ellatrix]

We cannot simply re-add the emoji script while also using React and the RichText component.

• We would need to somehow filter the displaying of text nodes with React. Simply adding the script may introduce performance issues where React continuously updates a piece of DOM to reflect the state, and the emoji script re-adding the images to replace emoji. Cc @aduth as this may be of interest to you.
• If we do reintroduce the script, all RichText instances need to be ignored.
• Inside RichText instances, we should convert the emoji when creating an editable tree and ignore the images when creating internal state. We don't want the emoji to save as images.

[strarsis]

I would need this for replacing an emoji character (shape provided by font) by a SVG image for precisely styling some emojis (by theme).

[paaljoachim]

Hey @kraftbj Brandon. Could you please retest using WP 5.7 beta and Gutenberg plugin 10.
It would be nice with an update and a focus on how we can move this issue onward. Thanks!

[t-hamano]

I tested this issue with the latest Gutenberg trunk.

remove_action introduced by #6151 appears to have been subsequently removed by #13569.

When I revert #2799, the following issues occur:

As far as I've tested, none of these issues occur and everything appears to be working as expected.

Therefore, I would like to close this issue, but please feel free to reopen it at any time if I have missed anything.

f65c9184b4d4179b65575e522a35f44d.mp4