Fix: Contextual toolbar should re–position correctly on window scroll…

…. Closes #227.
ckeditor · May 16, 2017 · 7d3977d · 7d3977d
1 parent 4e2ee36
commit 7d3977d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/src/toolbar/contextual/contextualtoolbar.js b/src/toolbar/contextual/contextualtoolbar.js
@@ -217,16 +217,20 @@ export default class ContextualToolbar extends Plugin {
 		// Get direction of the selection.
 		const isBackward = editingView.selection.isBackward;
 
-		// getBoundingClientRect() makes no sense when the selection spans across number
-		// of lines of text. Using getClientRects() allows us to browse micro–ranges
-		// that would normally make up the bounding client rect.
-		const rangeRects = editingView.domConverter.viewRangeToDom( editingView.selection.getFirstRange() ).getClientRects();
-
-		// Select the proper range rect depending on the direction of the selection.
-		const rangeRect = isBackward ? rangeRects.item( 0 ) : rangeRects.item( rangeRects.length - 1 );
-
 		return {
-			target: rangeRect,
+			// Because the target for BalloonPanelView is a Rect (not DOMRange), it's geometry will stay fixed
+			// as the window scrolls. To let the BalloonPanelView follow such Rect, is must be continuously
+			// computed and hence, the target is defined as a function instead of a static value.
+			// https://github.com/ckeditor/ckeditor5-ui/issues/195
+			target: () => {
+				// getBoundingClientRect() makes no sense when the selection spans across number
+				// of lines of text. Using getClientRects() allows us to browse micro–ranges
+				// that would normally make up the bounding client rect.
+				const rangeRects = editingView.domConverter.viewRangeToDom( editingView.selection.getFirstRange() ).getClientRects();
+
+				// Select the proper range rect depending on the direction of the selection.
+				return isBackward ? rangeRects.item( 0 ) : rangeRects.item( rangeRects.length - 1 );
+			},
 			positions: isBackward ?
 				[ defaultPositions.northWestArrowSouth, defaultPositions.southWestArrowNorth ] :
 				[ defaultPositions.southEastArrowNorth, defaultPositions.northEastArrowSouth ]

diff --git a/tests/toolbar/contextual/contextualtoolbar.js b/tests/toolbar/contextual/contextualtoolbar.js
@@ -140,7 +140,7 @@ describe( 'ContextualToolbar', () => {
 			editor.editing.view.isFocused = true;
 		} );
 
-		it( 'should return promise', () => {
+		it( 'should return a promise', () => {
 			setData( editor.document, '<paragraph>b[a]r</paragraph>' );
 
 			const returned = contextualToolbar._showPanel();
@@ -160,7 +160,7 @@ describe( 'ContextualToolbar', () => {
 					view: contextualToolbar.toolbarView,
 					balloonClassName: 'ck-toolbar-container ck-editor-toolbar-container',
 					position: {
-						target: forwardSelectionRect,
+						target: sinon.match( value => value() == backwardSelectionRect ) ,
 						positions: [ defaultPositions.southEastArrowNorth, defaultPositions.northEastArrowSouth ]
 					}
 				} );
@@ -178,7 +178,7 @@ describe( 'ContextualToolbar', () => {
 						view: contextualToolbar.toolbarView,
 						balloonClassName: 'ck-toolbar-container ck-editor-toolbar-container',
 						position: {
-							target: backwardSelectionRect,
+							target: sinon.match( value => value() == forwardSelectionRect ),
 							positions: [ defaultPositions.northWestArrowSouth, defaultPositions.southWestArrowNorth ]
 						}
 					} );