Pin the toolbar to the element, not range, to fix positioning on Edge.

ckeditor · Apr 24, 2017 · 973f577 · 973f577
1 parent 5d7bef8
commit 973f577
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/src/image/ui/imageballoonpanelview.js b/src/image/ui/imageballoonpanelview.js
@@ -95,7 +95,7 @@ export default class ImageBalloonPanelView extends BalloonPanelView {
 		const defaultPositions = BalloonPanelView.defaultPositions;
 
 		this.attachTo( {
-			target: editingView.domConverter.viewRangeToDom( editingView.selection.getFirstRange() ),
+			target: editingView.domConverter.viewToDom( editingView.selection.getSelectedElement() ),
 			positions: [ defaultPositions.northArrowSouth, defaultPositions.southArrowNorth ]
 		} );
 	}

diff --git a/tests/image/ui/imageballoonpanelview.js b/tests/image/ui/imageballoonpanelview.js
@@ -67,6 +67,7 @@ describe( 'ImageBalloonPanel', () => {
 
 	it( 'should detach when image element is no longer selected', () => {
 		const spy = sinon.spy( panel, 'detach' );
+
 		setData( document, '[<image src=""></image>]' );
 		panel.attach();
 
@@ -79,13 +80,17 @@ describe( 'ImageBalloonPanel', () => {
 
 	it( 'should attach panel correctly', () => {
 		const spy = sinon.spy( panel, 'attachTo' );
+
+		setData( document, '[<image src=""></image>]' );
 		panel.attach();
 
 		testPanelAttach( spy );
 	} );
 
 	it( 'should calculate panel position on scroll event', () => {
+		setData( document, '[<image src=""></image>]' );
 		panel.attach();
+
 		const spy = sinon.spy( panel, 'attachTo' );
 
 		global.window.dispatchEvent( new Event( 'scroll' ) );
@@ -94,7 +99,9 @@ describe( 'ImageBalloonPanel', () => {
 	} );
 
 	it( 'should calculate panel position on resize event event', () => {
+		setData( document, '[<image src=""></image>]' );
 		panel.attach();
+
 		const spy = sinon.spy( panel, 'attachTo' );
 
 		global.window.dispatchEvent( new Event( 'resize' ) );
@@ -103,7 +110,9 @@ describe( 'ImageBalloonPanel', () => {
 	} );
 
 	it( 'should hide panel on detach', () => {
+		setData( document, '[<image src=""></image>]' );
 		panel.attach();
+
 		const spy = sinon.spy( panel, 'hide' );
 
 		panel.detach();
@@ -112,7 +121,9 @@ describe( 'ImageBalloonPanel', () => {
 	} );
 
 	it( 'should not reposition panel after detaching', () => {
+		setData( document, '[<image src=""></image>]' );
 		panel.attach();
+
 		const spy = sinon.spy( panel, 'attachTo' );
 
 		panel.detach();
@@ -124,16 +135,11 @@ describe( 'ImageBalloonPanel', () => {
 
 	// Tests if panel.attachTo() was called correctly.
 	function testPanelAttach( spy ) {
-		const domRange = editor.editing.view.domConverter.viewRangeToDom( editingView.selection.getFirstRange() );
-
 		sinon.assert.calledOnce( spy );
 		const options = spy.firstCall.args[ 0 ];
 
-		// Check if proper range was used.
-		expect( options.target.startContainer ).to.equal( domRange.startContainer );
-		expect( options.target.startOffset ).to.equal( domRange.startOffset );
-		expect( options.target.endContainer ).to.equal( domRange.endContainer );
-		expect( options.target.endOffset ).to.equal( domRange.endOffset );
+		// Check if proper target element was used.
+		expect( options.target.tagName.toLowerCase() ).to.equal( 'figure' );
 
 		// Check if correct positions are used.
 		const [ north, south ] = options.positions;