[Edge/FF] Exception after dragging the selection through the image

[Mgsy]

Steps to reproduce

1. Go to https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/examples/builds/balloon-editor.html.
2. Start the selection from the end of the first header.
3. Drag it down through the image.

Current result

• The toolbar appears in the left corner of the browser.
• There is the exception in the console.

Error

SCRIPT438: Object doesn't support property or method 'getBoundingClientRect'
rect.js (365,1)

GIF

Other information

OS: Windows 10
Browser: Edge 16, Firefox
Release: 0.11.0

[ma2ciek]

In FF the selection starts at the end of the text that's inside the header, so in the https://github.com/ckeditor/ckeditor5-utils/blob/ac06329334e9f981e10df18237a986b56a43112e/src/dom/rect.js#L365, the startContainer variable is the Text element.

[ma2ciek]

( range.getClientRects() returns an empty array. )

[ma2ciek]

Maybe it can be solved by using the parent element instead of the original element when the startContainer is a text node?

[Reinmar]

But why isn't this throwing in all browsers?

[ma2ciek]

It's interesting that the error doesn't occur in the manual tests: http://localhost:8125/ckeditor5-image/tests/manual/caption.html.

[ma2ciek]

When the selection starts inside the header, its start moves to the caption during dragging down. When dragging up all works fine.

[ma2ciek]

Actually, this is caused by the BalloonEditor which calculates the rect for its position. It can be reproduced here too http://localhost:8125/ckeditor5-editor-balloon/tests/manual/ballooneditor.html

[ma2ciek]

It's connected to https://github.com/ckeditor/ckeditor5-engine/issues/1156. There's a moment before the crash when selection starts at the end of the text and ends in the main editable element just after the text node. So there's no native rectangle available from getClientRects method and startContainer of the range is a text node, which doesn't have a getBoundingClientRect method.

[oleq]

I briefly checked this issue and the problem is in this line https://github.com/ckeditor/ckeditor5-utils/blob/7211d0269bf3e3ab7586afa987785e3dcbbcf31c/src/dom/rect.js#L365.

The startContainer is a text node, and text nodes don't have such a method. However, using text's parent here in such situation will not fix the issue completely (it will not throw, though).

Generally speaking, the client rects interface in Firefox is very experimental. Such DOM range:

<h>Foo[</h>
<img>
<p>Ba]r</p>

has 0 rects in getClientRects() and a rect full of zeros in getBoundingClientRect(). It's like it does not exist but... it renders. The API is totally broken.

I anticipated this situation a couple months ago and used a hack that retrieves the parent of the startContainer, calculates its rects and returns them as if they were range's rects.

ATM the best we can achieve is:

with the following fix:

diff --git a/src/dom/rect.js b/src/dom/rect.js
index 480452f..7ec5444 100644
--- a/src/dom/rect.js
+++ b/src/dom/rect.js
@@ -3,6 +3,8 @@
  * For licensing, see LICENSE.md.
  */
 
+/* global Node */
+
 /**
  * @module utils/dom/rect
  */
@@ -362,11 +364,17 @@ export default class Rect {
 		// instead and adjust rect's width to simulate the actual geometry of such range.
 		// https://github.com/ckeditor/ckeditor5-utils/issues/153
 		else {
-			const startContainerRect = new Rect( range.startContainer.getBoundingClientRect() );
-			startContainerRect.right = startContainerRect.left;
-			startContainerRect.width = 0;
+			let startContainer = range.startContainer;
+
+			if ( startContainer.nodeType == Node.TEXT_NODE ) {
+				startContainer = startContainer.parentNode;
+			}
+
+			const rect = new Rect( startContainer.getBoundingClientRect() );
+			rect.right = rect.left;
+			rect.width = 0;
 
-			rects.push( startContainerRect );
+			rects.push( rect );
 		}
 
 		return rects;

Later on, we could also consider endContainer, offsets and direction of the range to make it smarter. But considering the market share of FF, it's not gonna be so soon.