Image selection: Uncaught TypeError: Cannot read property 'checkReadOnly' of undefined

[ashklianko]

Type of report

Bug

Provide detailed reproduction steps (if any)

1. Insert captioned image as a first entry in editor (nothing should be above it, even empty p or div)
2. Type some text after image
3. Start selecting text and release mouse button over image
4. Open image dialog and try inserting other image

Expected result

New image inserted in place of selected text and image

Actual result

Nothing happens, error in dev console:

Uncaught TypeError: Cannot read property 'checkReadOnly' of undefined

Other details

Reproduced even on https://ckeditor.com/ckeditor-4/

Other details

• Browser: Chrome, Firefox

[mlewand]

On Firefox a different exception is thrown: TypeError: b is null, works fine on Edge.

[engineering-this]

There is an issue with selection.

Chrome:

startContainer: div.cke_widget_wrapper.cke_widget_block.cke_widget_image,
startOffset: 2

Focusing editor in this case removes selection ranges.

Firefox

startContainer: span.cke_image_resizer_wrapper,
startOffset: 1

In this case widget is not inserted because range.checkReadOnly returns true, and then editor tries to focus widget that wasn't inserted which results in error.

[engineering-this]

See #2866 (review). There are other closely related issues #3007 and #3008 caused by buggy selection. Currently #2866 contains fix for selection on widget finalizeCreation. However as there are more related issues and every browser allows different selection it would be better to normalize selection. widgetselection plugin is right place for such logic.

If one end of range is in widget, and it's not at the start of it selection should be moved out of a widget.

[engineering-this]

There is another steps to reproduce this issue:

Steps

1. Open https://codepen.io/anon/pen/dLNPGg
2. Open browser console.
3. Press button below editor.
4. Press Image2 button.
5. Paste or type any src, and press OK.

Expected

Image is inserted into editor.

Actual

• Image is not inserted.
• Error is thrown.

Note: such selection is created when I try to select whole editor content in IE11 with mouse.

Edit:

Actually it's different bug caused by range.deleteContents. Extracted to #3041