Bladeren bron

Merge pull request #52 from ckeditor/t/37

Other: The mention UI panel should prefer positions below the caret rather than above it for a more natural UX. Closes #37.
Aleksander Nowodzinski 6 jaren geleden
bovenliggende
commit
7484b31865
2 gewijzigde bestanden met toevoegingen van 12 en 14 verwijderingen
  1. 2 3
      packages/ckeditor5-mention/src/mentionui.js
  2. 10 11
      packages/ckeditor5-mention/tests/mentionui.js

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

@@ -452,8 +452,7 @@ export default class MentionUI extends Plugin {
 
 				return null;
 			},
-			positions: getBalloonPanelPositions( positionName ),
-			fitInViewport: true
+			positions: getBalloonPanelPositions( positionName )
 		};
 	}
 }
@@ -510,8 +509,8 @@ function getBalloonPanelPositions( positionName ) {
 	// As default return all positions callbacks.
 	return [
 		positions.caret_se,
-		positions.caret_ne,
 		positions.caret_sw,
+		positions.caret_ne,
 		positions.caret_nw
 	];
 }

+ 10 - 11
packages/ckeditor5-mention/tests/mentionui.js

@@ -152,9 +152,8 @@ describe( 'MentionUI', () => {
 			return waitForDebounce()
 				.then( () => {
 					const pinArgument = pinSpy.firstCall.args[ 0 ];
-					const { target, positions, limiter, fitInViewport } = pinArgument;
+					const { target, positions, limiter } = pinArgument;
 
-					expect( fitInViewport ).to.be.true;
 					expect( positions ).to.have.length( 4 );
 
 					// Mention UI should set limiter to the editable area.
@@ -178,8 +177,8 @@ describe( 'MentionUI', () => {
 					expect( mentionMarker.getRange().isEqual( range ), 'Should position to mention marker.' );
 
 					const caretSouthEast = positions[ 0 ];
-					const caretNorthEast = positions[ 1 ];
-					const caretSouthWest = positions[ 2 ];
+					const caretSouthWest = positions[ 1 ];
+					const caretNorthEast = positions[ 2 ];
 					const caretNorthWest = positions[ 3 ];
 
 					expect( caretSouthEast( caretRect, balloonRect ) ).to.deep.equal( {
@@ -188,18 +187,18 @@ describe( 'MentionUI', () => {
 						top: 121
 					} );
 
-					expect( caretNorthEast( caretRect, balloonRect ) ).to.deep.equal( {
-						left: 501,
-						name: 'caret_ne',
-						top: -53
-					} );
-
 					expect( caretSouthWest( caretRect, balloonRect ) ).to.deep.equal( {
 						left: 301,
 						name: 'caret_sw',
 						top: 121
 					} );
 
+					expect( caretNorthEast( caretRect, balloonRect ) ).to.deep.equal( {
+						left: 501,
+						name: 'caret_ne',
+						top: -53
+					} );
+
 					expect( caretNorthWest( caretRect, balloonRect ) ).to.deep.equal( {
 						left: 301,
 						name: 'caret_nw',
@@ -260,7 +259,7 @@ describe( 'MentionUI', () => {
 					const pinArgument = pinSpy.firstCall.args[ 0 ];
 					const { limiter } = pinArgument;
 
-					testUtils.sinon.stub( editingView.document.selection, 'editableElement' ).value( null );
+					sinon.stub( editingView.document.selection, 'editableElement' ).value( null );
 
 					// Should not break;
 					expect( limiter() ).to.be.null;