Run emoji script correctly in editable #3520
Conversation
Codecov Report
@@ Coverage Diff @@
## master #3520 +/- ##
==========================================
- Coverage 34.54% 34.51% -0.04%
==========================================
Files 261 271 +10
Lines 6710 7588 +878
Branches 1225 1471 +246
==========================================
+ Hits 2318 2619 +301
- Misses 3704 4114 +410
- Partials 688 855 +167
Continue to review full report at Codecov.
|
ellatrix
changed the title
| @@ -57,4 +57,9 @@ export default function( node ) { | |||
| if ( node.height === 1 || node.width === 1 ) { | |||
| node.parentNode.removeChild( node ); | |||
| } | |||
|
|
|||
| // Restore emoji as images. | |||
| if ( node.className === 'emoji' ) { | |||
There was a problem hiding this comment.
Does it make sense to also verify that there is a usable node.alt in the if?
|
I'm experiencing this:
|
|
^ Also present in that screencast is some weirdness in caret position when moving around the emoji with the arrows. Chrome is Version 62.0.3202.94 (Official Build) (64-bit). |
|
The issue with the caret is probably one of the concerns @ephox-mogran raised regarding images and arrow key nav some time ago. |
|
If the emojis are being represented by Short reason is that img tags don't have any text content, and a block with just an image tag in doesn't have any text content, therefore, it things you are at the end of your block on the first character. I don't have an environment here to check this, though, so it could be unrelated to the issue. I'll try to look into it today if @iseulde hasn't fixed it already :) |
|
@mcsf I have the same Chrome version, but cannot reproduce the emoji => text issue... Save draft + refresh saves normally. |
|
@iseulde It looks like it is the edge detection. I've updated #3015 to match master (and fixes a few things). I'm not 100% sure it's ready for review, though --- I'd like to add some tests. It seems to handle the emoji better (so you can try it out), but there will always be edge cases when dealing with zero-width cursors, br tags, hr tags, input fields, image tags etc. As soon as you move away from just a container with text, edge detection becomes a lot more complex. |
aduth
added
the
[Status] Stale
|
What's the status of this pull request? |
aduth
added
the
[Feature] Rich Text
|
Let's disable instead per chat. #2799 remains open. |
Description
See #2799. In some browsers, the emoji script should be run. This PR adds it to editable correctly, similar to WP core, and removes the images on save.
How Has This Been Tested?
In Chrome, verify that emoji are replaced with an image on insertion. Switch to HTML mode. There should be no image. Switch back to visual, and there should again be an image.
In Chrome, paste some text from a WordPress site with emoji into Gutenberg. It should work as expected.