Images don't select properly in Firefox, so replacement and deletion don't work
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 16.3k
- Forks
- 2.3k
- PR merge metrics
- No merged PRs in 30d
Description
What is the current behavior? Describe the bug
FIREFOX-ONLY PROBLEM!
If you have a right (or left) floated image relative to some text in Firefox, and you click on it, the image appears to be selected (it has handles and a blue outline, the image button is highlighted, and the document structure shows IMG as the last item).
However, it isn't selected properly. If you look closely there's a little caret at the bottom left of the picture. The text insertion point is not the image.
If you then press DEL or Backspace, nothing happens, where in Chrome it would and does delete the image. And, worse, if you click the image button in the toolbar (NOT the one on the right-click menu!), and replace the URL with a different image, and Save, you get a second image alongside, where in Chrome it replaces the original image.
If you DOUBLE click the image in Firefox, it does then seem to select the image properly, presumably because the insertion point is then a range which includes the IMG element. If you right-click the image and then dismiss the menu (ESC) it also then seems to have the image correctly selected, and similarly, if you right-click and use the image button on the menu, it can replace correctly, presumably because the initial right-click also selected the image properly.
Please provide the steps to reproduce and if possible a minimal demo of the problem via fiddle.tiny.cloud or similar.
In FIREFOX: https://fiddle.tiny.cloud/M0iaab/3
Click the image. Press DEL. Nothing happens.
Click the image. Press the toolbar image button. Provide a different image URL. Save. You get two images.
What is the expected behavior?
DEL or Backspace should delete the image that appears to be selected as it does in Chrome.
The image button should replace the selected image with a new one when the URL is changed, as it does in Chrome,
Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE?
Recent 6. Whatever the one is in your default Fiddle (tinymce6-cloud-stable). I don't have an older one to try it against, but I believe this probably didn't happen in v5, as this has been reported to me as happening after I upgraded, and not previously.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the Firefox-only behavior using the linked fiddle: click a floated image, test DEL or Backspace, then use the toolbar image button to change its URL. Compare the result with Chrome; done means deletion removes the selected image and changing its URL replaces it rather than creating a second image.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100