Opened 8 years ago

Last modified 7 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

  1. Open current version of online nightly ckeditor.
  2. insert the folowing html source code:
<div style="float:left"><img src="img/logo.png" /></div>
  1. Highlight image (don't use mouse click to select).
  2. 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)

2016-04-26_1322.swf (1.7 MB) - added by Jakub Ś 8 years ago.

Download all attachments as: .zip

Change History (13)

comment:1 Changed 8 years ago by Jakub Ś

Keywords: Firefox added
Status: newconfirmed
Version: 4.5.84.0

Problem can be reproduced in Firefox only from CKEditor 4.0.

Message: range is undefined
Code: path = range.startPath()
File: editable.js
Line: 949

comment:2 Changed 8 years ago by Tade0

Owner: set to Tade0
Status: confirmedassigned

comment:3 Changed 8 years ago by Jakub Ś

Status: assignedpending

@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 8 years ago by mdprw

@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).

Last edited 8 years ago by mdprw (previous) (diff)

Changed 8 years ago by Jakub Ś

Attachment: 2016-04-26_1322.swf added

comment:5 Changed 8 years ago by Jakub Ś

Status: pendingconfirmed

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 8 years ago by Tade0

For future reference the key to reproducing this bug is as follows:

  1. Put the caret on the left hand side of the image.
  2. 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 7 years ago by Tade0

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 7 years ago by Tade0

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 7 years ago by Tade0

Status: confirmedreview

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 Changed 7 years ago by Tomasz Jakut

Status: reviewreview_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 in getRanges method (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.

Last edited 7 years ago by Tomasz Jakut (previous) (diff)

comment:11 in reply to:  10 Changed 7 years ago by Tade0

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 in getRanges method (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 7 years ago by Tade0

I analyzed the issue deeper and here are my findings:

  • When the image is selected both selectionchange and selectionChange are 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?

Note: See TracTickets for help on using tickets.
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy