Przeglądaj źródła

Revert "The mention ui should prefer position below the caret."

This reverts commit 36be2b2a
Maciej Gołaszewski 6 lat temu
rodzic
commit
a7878d9454

+ 14 - 2
packages/ckeditor5-mention/src/mentionui.js

@@ -441,7 +441,19 @@ export default class MentionUI extends Plugin {
 
 				return rangeRects.pop();
 			},
-			positions: getBalloonPanelPositions( positionName )
+			limiter: () => {
+				const view = this.editor.editing.view;
+				const viewDocument = view.document;
+				const editableElement = viewDocument.selection.editableElement;
+
+				if ( editableElement ) {
+					return view.domConverter.mapViewToDom( editableElement.root );
+				}
+
+				return null;
+			},
+			positions: getBalloonPanelPositions( positionName ),
+			fitInViewport: true
 		};
 	}
 }
@@ -498,8 +510,8 @@ function getBalloonPanelPositions( positionName ) {
 	// As default return all positions callbacks.
 	return [
 		positions.caret_se,
-		positions.caret_sw,
 		positions.caret_ne,
+		positions.caret_sw,
 		positions.caret_nw
 	];
 }

+ 30 - 6
packages/ckeditor5-mention/tests/mentionui.js

@@ -138,6 +138,8 @@ describe( 'MentionUI', () => {
 		} );
 
 		it( 'should properly calculate position data', () => {
+			const editableElement = editingView.document.selection.editableElement;
+
 			setData( model, '<paragraph>foo []</paragraph>' );
 			stubSelectionRects( [ caretRect ] );
 
@@ -150,13 +152,13 @@ describe( 'MentionUI', () => {
 			return waitForDebounce()
 				.then( () => {
 					const pinArgument = pinSpy.firstCall.args[ 0 ];
-					const { target, positions } = pinArgument;
+					const { target, positions, limiter, fitInViewport } = pinArgument;
 
+					expect( fitInViewport ).to.be.true;
 					expect( positions ).to.have.length( 4 );
 
-					// Mention UI should not set limiter or default values.
-					expect( pinArgument.limiter ).to.be.undefined;
-					expect( pinArgument.fitInViewport ).to.be.undefined;
+					// Mention UI should set limiter to the editable area.
+					expect( limiter() ).to.equal( editingView.domConverter.mapViewToDom( editableElement ) );
 
 					expect( editor.model.markers.has( 'mention' ) ).to.be.true;
 					const mentionMarker = editor.model.markers.get( 'mention' );
@@ -176,8 +178,8 @@ describe( 'MentionUI', () => {
 					expect( mentionMarker.getRange().isEqual( range ), 'Should position to mention marker.' );
 
 					const caretSouthEast = positions[ 0 ];
-					const caretSouthWest = positions[ 1 ];
-					const caretNorthEast = positions[ 2 ];
+					const caretNorthEast = positions[ 1 ];
+					const caretSouthWest = positions[ 2 ];
 					const caretNorthWest = positions[ 3 ];
 
 					expect( caretSouthEast( caretRect, balloonRect ) ).to.deep.equal( {
@@ -242,6 +244,28 @@ describe( 'MentionUI', () => {
 					expect( positions[ 0 ].name ).to.equal( positionAfterFirstShow );
 				} );
 		} );
+
+		it( 'does not fail if selection has no #editableElement', () => {
+			setData( model, '<paragraph>foo []</paragraph>' );
+			stubSelectionRects( [ caretRect ] );
+
+			expect( editor.model.markers.has( 'mention' ) ).to.be.false;
+
+			model.change( writer => {
+				writer.insertText( '@', doc.selection.getFirstPosition() );
+			} );
+
+			return waitForDebounce()
+				.then( () => {
+					const pinArgument = pinSpy.firstCall.args[ 0 ];
+					const { limiter } = pinArgument;
+
+					sinon.stub( editingView.document.selection, 'editableElement' ).value( null );
+
+					// Should not break;
+					expect( limiter() ).to.be.null;
+				} );
+		} );
 	} );
 
 	describe( 'typing integration', () => {