ソースを参照

The mention panel will be better positioned in the editing area.

Maciej Gołaszewski 6 年 前
コミット
53f6308382

+ 13 - 1
packages/ckeditor5-mention/src/mentionui.js

@@ -402,7 +402,19 @@ export default class MentionUI extends Plugin {
 
 				return rangeRects.pop();
 			},
-			positions: getBalloonPanelPositions()
+			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(),
+			fitInViewport: true
 		};
 	}
 }

+ 7 - 1
packages/ckeditor5-mention/tests/mentionui.js

@@ -108,6 +108,8 @@ describe( 'MentionUI', () => {
 		} );
 
 		it( 'should properly calculate position data', () => {
+			const editableElement = editingView.document.selection.editableElement;
+
 			setData( model, '<paragraph>foo []</paragraph>' );
 			stubSelectionRects( [ caretRect ] );
 
@@ -120,10 +122,14 @@ 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 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' );
 					const focus = doc.selection.focus;