WordPress.org

Make WordPress Core

Opened 9 months ago

Last modified 8 months ago

#40911 new defect (bug)

Replacing an image in the text editor causes text below to get deleted

Reported by: jpenningroth Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.7.5
Component: Editor Keywords: dev-feedback
Focuses: Cc:

Description

We've run into the following problem when editing a post using the text editor: if you have an image inserted with paragraphs of text below it and you go back to try to remove and replace the image, text below is getting deleted.

Here are the steps to recreate this problem:

  1. Select the image code
  2. Delete the image
  3. Hit "Add Media" to add in a new image
  4. When the image is inserted, you can see that the first few lines of copy below it are getting deleted, and the remaining copy is getting shifted up so that it's on the same line as the image code.

We were also able to reproduce this issue on a fresh install of WordPress. It seems this does only occur in a specific edge case, though:

  1. When using the editor in the "Text" tab
  2. Deleting an existing image (and caption)
  3. Not creating a new line
  4. Inserting an image

We're able to avoid this by doing either of the following workarounds:

  • Only adding and removing images in the "Visual" tab of the editor
  • If using the "Text" tab, first create a new line after deleting the image, return to the previous line and insert image.

Attachments (1)

odd-wp-behavior.mp4 (4.5 MB) - added by jpenningroth 9 months ago.
Demonstration to reproduce image wiping out copy below it

Change History (6)

@jpenningroth
9 months ago

Demonstration to reproduce image wiping out copy below it

#1 @karmatosed
9 months ago

  • Keywords dev-feedback added

I can also replicate this, whilst it does happen in a very particular sequence, it still happens and is replicable.

Here is what happens:

https://cldup.com/cySAr5Vz7t.gif

#2 @azaozz
9 months ago

As far as I see this happens only in latest Chrome, all works as expected in Firefox, Edge and IE11. Looks like a bug with the selection in textarea elements. Can reproduce in any textarea when some content is inserted from JS after deleting something.

If this is indeed a browser bug, it will be fixed in Chromium.

This ticket was mentioned in Slack in #themereview by djrmom. View the logs.


8 months ago

#4 @dingo_bastard
8 months ago

#41043 was marked as a duplicate.

#5 @BrianLayman
8 months ago

Note that it doesn't have to be a video that is replaced. In our case, the workflow is for the authors to copy a post and then replace the [INSERT IMAGE HERE] text with the image. Usually they delete the text and then insert the image. I believe the character count for the text that is deleted determines who much is wiped out. Simply moving off of that line and back on is sufficient to eliminate the problem.

Here is a video I did to explain the issue:
https://www.screencast.com/t/OupeCVZ0c2zS

Has anyone logged this as an issue in Chrome?

Note: See TracTickets for help on using tickets.