Wp-calypso: Editor: pasting/deleting image breaks editor

[keoshi]

Steps to reproduce

1. Create new post.
2. Add image by copy/pasting it in Visual editor.
3. Switch to HTML Editor.
4. Switch back to Visual Editor.
5. Delete image.
6. Switch to HTML Editor to make sure code is removed.

What I expected

I expected the image block to be deleted.

What happened instead

• When removing the image, the floating tools block doesn't go away.
• The entire editor breaks, when switching to HTML Editor after removing the image.
• The browser console shows a couple of errors:

179.124ca3d5f2073509a386.min.js:1 Uncaught TypeError: Cannot read property 'nodeName' of null
179.124ca3d5f2073509a386.min.js:1 Uncaught TypeError: Failed to execute 'setStart' on 'Range': parameter 1 is not of type 'Node'.

Browser / OS version

Google Chrome Version 68.0.3440.84 (Official Build) (64-bit) running on macOS High Sierra 10.13.6 (17G65).

Screenshot / Video

[rachelmcr]

I tested this issue and couldn't reproduce it when copy/pasting and removing just an image.

However, I _did_ reproduce it when:

• The image is wrapped in figure tags.
• The img tag was selected in the HTML editor before removing it from the Visual editor.

(The GIF in the original report shows these conditions, as well.)

The console errors I saw:

179.124ca3d5f2073509a386.min.js:1 Uncaught TypeError: Cannot read property 'nodeName' of null
179.124ca3d5f2073509a386.min.js:1 Uncaught Error: Node cannot be null or undefined
179.124ca3d5f2073509a386.min.js:1 Uncaught TypeError: Cannot read property 'focus' of null
179.124ca3d5f2073509a386.min.js:1 Uncaught TypeError: Cannot read property 'nodeName' of null
179.124ca3d5f2073509a386.min.js:1 Uncaught TypeError: Cannot read property 'focus' of null
post-editor.b0dd2f02811122d33b6e.min.js:48 Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
179.124ca3d5f2073509a386.min.js:1 Uncaught TypeError: Cannot read property 'childNodes' of null
146.6ec02e2ea1bdebce6e30.min.js:79 Uncaught TypeError: Cannot read property 'childNodes' of null

@bisko / @Automattic/delta-samus Is this perhaps a defect in persisting the selection between the Visual & HTML editors?

[bisko]

@rachelmcr Seems like it. We haven't spend much time improving that experience, since Gutenberg is expected to replace the editor and offer much better editing experience.

I will double check to see if fixing this would be easy and will get back to you.

[bisko]

@rachelmcr @keoshi I think I'm doing something wrong when trying to reproduce the issue as I'm unable to reproduce it. It properly deletes the image and doesn't break the editor.

Also:

Add image by copy/pasting it in Visual editor.

How/where do we support this? On macOS/Chrome I tried to copy a file through Finder and pasted the image, but it only pasted the file name. I tried copying the whole image in Preview.app, but it didn't paste in Visual mode. I'm wondering if I'm doing it right or if there is another way I'm missing.

I'd love if you can give me examples of the raw HTML code you see that triggers the condition, as I suspect I might not be able to recreate the exact conditions in my testing :(

[rachelmcr]

Here's example HTML you can use to reproduce the issue:

<figure><img src="https://twentysixteendemo.files.wordpress.com/2015/11/post.png" /></figure>

After pasting that in the HTML editor, you can select just the img tag. Then, switch back to the visual editor and delete the image using the trash icon in the image toolbar.

[andfinally]

Hm, I can reproduce that using the trash icon. Interestingly it doesn't happen when you select the image tag, switch to visual editor and delete using the delete key - in that situation the empty <figure> tag remains, as you'd expect.

[bisko]

@rachelmcr Thanks for the example!

I actually managed to reproduce the issue just after posting the previous comment 😳 It's a bit hard to catch.

The issue is not "exactly" with the selection keeping. Exactly is in quotes, because it allows a behavior that is not available by default in Visual mode. For some reason selecting just the image and deleting it cause some extremely weird case in TinyMCE that causes it to delete way too much DOM nodes and breaks subsequent execution.

I'm not sure if I can fix that issue though as it seems to be somewhere in the core of TinyMCE and triggered only in a similar case, where the <img> is wrapped in a tag that's not p,div,etc..

There was a discussion about disabling the selection keeping as it isn't running the latest version of the code ( WP.org has far more recent update on that code ), but it's a bit hard to port it back and integrate in Calypso in a reasonable amount of time.

@andfinally for me it clears out the <figure> tag too. Thanks for checking that case. Definitely broken with the Trash icon though. I think there're more actions running when you press the Trash icon, instead of pressing the Delete key.

[keoshi]

Thank you all for looking into this! 🙌

[stale[bot]]

This issue has been marked as stale and will be closed in seven days. This happened because:

• It has been inactive in the past 9 months.
• It isn't a project or a milestone, and hasn’t been labeled `[Pri] Blocker`, `[Pri] High`, `[Status] Keep Open`, or `OSS Citizen`.

You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation.