Opened 9 years ago
Last modified 8 years ago
#14565 review_failed Bug
Pressing delete key in a highlighted image inside a floating div throws an error
| Reported by: | mdprw | Owned by: | Tade0 |
|---|---|---|---|
| Priority: | Normal | Milestone: | |
| Component: | Core : Editable | Version: | 4.0 |
| Keywords: | Firefox | Cc: |
Description
If you have an image inside a floating div an error occurs if you highlight the image and press delete key.
The error appear in line 949 of editable.js
path = range.startPath()
since range is undefined.
Steps to reproduce
- Open current version of online nightly ckeditor.
- insert the folowing html source code:
<div style="float:left"><img src="img/logo.png" /></div>
- Highlight image (don't use mouse click to select).
- Press delete key.
- if you use the lastest stable version you can use:
<div style="float:left;"><img src="http://c.cksource.com/a/5/img/sprites.png" /></div>
Other details (browser, OS, CKEditor version, installed plugins)
OS: Windows 7 Browser: Firefox 45.0.1 CKEditor: 4.5.8
Attachments (1)
Change History (13)
comment:1 Changed 9 years ago by
| Keywords: | Firefox added |
|---|---|
| Status: | new → confirmed |
| Version: | 4.5.8 → 4.0 |
comment:2 Changed 9 years ago by
| Owner: | set to Tade0 |
|---|---|
| Status: | confirmed → assigned |
comment:3 Changed 9 years ago by
| Status: | assigned → pending |
|---|
@mdprw, are you still able to reproduce this issue? I have tried latest FF and everything seems to work fine (even in version 4.0).
comment:4 Changed 9 years ago by
@Tade0: I'm able to reproduce the problem in full editor only, but I must have web console opened to see the message (maybe is a bug with firefox debug console).
Changed 9 years ago by
| Attachment: | 2016-04-26_1322.swf added |
|---|
comment:5 Changed 9 years ago by
| Status: | pending → confirmed |
|---|
I have managed to reproduce it. The key seems to be selecting image so that selection is marked in with blue color and not with native border.
comment:6 Changed 9 years ago by
For future reference the key to reproducing this bug is as follows:
- Put the caret on the left hand side of the image.
- Drag the mouse from the left-bottom corner over the right-top corner, then(with the mouse button still pressed) move the mouse onto the image.
The image should be highlighted in blue.
comment:7 Changed 8 years ago by
The problem magically goes away if you simply prevent the method in which the error occurs from proceeding when there's no range.
Checking what does this change break.
comment:8 Changed 8 years ago by
Found one thing: backspace stops working in this case.
Which means that in order to solve this problem the range must not be undefined in this event handler.
comment:9 Changed 8 years ago by
| Status: | confirmed → review |
|---|
Finally found a solution.
If there's no range, select the element that's currently in the native selection range.
Changes pushed to branch:t/14565.
comment:10 follow-up: 11 Changed 8 years ago by
| Status: | review → review_failed |
|---|
- I don't see a need to recreate a new selection before selecting new range in Firefox. Selecting new range in the existing selection should be sufficient.
- I'd add some unit test. We already have some tests for handling Backspace/Delete.
- I'd investigate the issue further. It seems that the source of the issue is not in the handling of these keys in
core/editable.js, but it's located ingetRangesmethod (apparently cache is not refreshed for this particular case).
I've rebased the branch:t/14565 to the latest major and updated tags in tests.
comment:11 Changed 8 years ago by
Replying to t.jakut:
- I'd investigate the issue further. It seems that the source of the issue is not in the handling of these keys in
core/editable.js, but it's located ingetRangesmethod (apparently cache is not refreshed for this particular case).
For now it seems that simply invalidating the cache doesn't do the trick, because the start container of the refreshed selection is <html>(yes, the parent of the editable), which is obviously bad and causes errors(specifically range-startcontainer) to appear.
comment:12 Changed 8 years ago by
I analyzed the issue deeper and here are my findings:
- When the image is selected both
selectionchangeandselectionChangeare not fired. - The cached selection is empty(hence this bug), but the native is anchored in the
<html>element at the start and<div>element at the end, thus resetting the selection does not solve the problem. - Enter key behaviour is weird as well - normally it should remove the image and insert a new line, but instead it places a new line above the image.
- Paste does nothing.
Overall the problem is that we have a rogue selection, that doesn't announce its appearance and this causes a series of problems.
Question is: how to trace a selection that doesn't fire selection change events?
Problem can be reproduced in Firefox only from CKEditor 4.0.
Message: range is undefined
Code: path = range.startPath()
File: editable.js
Line: 949