Make WordPress Core

Opened 7 years ago

Closed 4 years ago

#40911 closed defect (bug) (worksforme)

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

Reported by: jpenningroth's profile jpenningroth Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.7.5
Component: Editor Keywords:
Focuses: Cc:


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 7 years ago.
Demonstration to reproduce image wiping out copy below it

Change History (8)

7 years ago

Demonstration to reproduce image wiping out copy below it

#1 @karmatosed
7 years 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:

#2 @azaozz
7 years 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.

7 years ago

#4 @dingo_bastard
7 years ago

#41043 was marked as a duplicate.

#5 @BrianLayman
7 years 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:

Has anyone logged this as an issue in Chrome?

#6 @noisysocks
4 years ago

  • Keywords needs-patch added; dev-feedback removed

#7 @noisysocks
4 years ago

  • Keywords needs-patch removed
  • Milestone Awaiting Review deleted
  • Resolution set to worksforme
  • Status changed from new to closed

This works for me in the latest Chrome.

Note: See TracTickets for help on using tickets.