Merge branch 'master' into t/27

# Conflicts:
#	src/mentionui.js
#	tests/mentionui.js

src/mentionui.js

@@ -448,6 +448,17 @@ export default class MentionUI extends Plugin {
 
 				return rangeRects.pop();
 			},
+			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( preferredPosition )
 		};
 	}

tests/manual/mention-custom-renderer.html

@@ -2,18 +2,6 @@
 	<p>Have you met... </p>
 </div>
 
-<h3>The text below is used to fill the document body so the mention UI will be shown below cursor even if in bottom of the page.</h3>
-
-<p>Cupcake ipsum dolor. Sit amet oat cake pudding chocolate bar ice cream pie macaroon. Croissant I love I love. Dragée chupa chups soufflé apple pie caramels wafer powder. Muffin sugar plum tootsie roll. I love jelly donut sesame snaps gummies cheesecake. Pastry cupcake I love chocolate cake cheesecake croissant bear claw dessert. Jelly-o I love jujubes. I love toffee powder apple pie pie fruitcake I love gingerbread jelly beans. Chocolate cake dragée icing gummi bears I love croissant cake apple pie cake. Oat cake bonbon pastry jelly beans danish fruitcake macaroon oat cake. Oat cake I love biscuit cotton candy apple pie. Toffee tiramisu sweet roll pie.</p>
-
-<p>Dragée tart brownie I love. Sugar plum pastry chocolate bar gingerbread bear claw caramels. Donut wafer bonbon lemon drops biscuit. Topping ice cream I love pie jelly beans apple pie. Lemon drops I love sesame snaps. Liquorice marshmallow jelly-o chocolate cake jelly dragée I love. Tootsie roll carrot cake fruitcake apple pie. Cotton candy soufflé oat cake soufflé I love. Marshmallow cake toffee tiramisu candy canes. Donut gingerbread chocolate apple pie. Donut muffin chocolate bar marshmallow. Cupcake biscuit cotton candy croissant cupcake. Dessert pastry topping candy canes chocolate. Candy carrot cake I love tart cupcake gingerbread lemon drops.</p>
-
-<p>Macaroon wafer I love brownie apple pie jelly beans marshmallow sweet. Oat cake tiramisu topping I love macaroon. Chupa chups brownie bonbon candy canes. Carrot cake tootsie roll carrot cake jujubes pastry cookie. Lemon drops donut jujubes bonbon. Tootsie roll lemon drops sweet roll jelly-o jelly beans jelly-o lollipop sugar plum cookie. Dragée tart ice cream tiramisu. Chocolate bar candy sweet tart chocolate bar I love lemon drops. Biscuit liquorice carrot cake lollipop danish cake. Sweet lemon drops pie chocolate cake soufflé. Chupa chups cake cotton candy wafer I love. Oat cake sugar plum donut.</p>
-
-<p>Bonbon jujubes bonbon soufflé icing cupcake bear claw bear claw. Jelly cake bonbon jelly beans sweet roll muffin. Topping jujubes bonbon powder. Marshmallow biscuit biscuit fruitcake. I love jelly-o cheesecake sweet roll I love donut sugar plum dragée. Chocolate bar marshmallow liquorice. Wafer chocolate cake lemon drops candy sweet powder soufflé jelly. Gummi bears apple pie lemon drops cake tart tootsie roll. Gummi bears lemon drops jelly-o. Liquorice marzipan chocolate donut pastry. Icing I love lollipop gummi bears danish. Gummies powder danish bonbon cupcake pudding bonbon biscuit chocolate bar. Halvah wafer cupcake I love tootsie roll oat cake.</p>
-
-<p>Soufflé toffee jujubes bonbon jujubes bear claw marshmallow soufflé chocolate. Bear claw candy sweet roll chupa chups. Apple pie macaroon cotton candy I love marzipan. Topping pie brownie. Dessert I love I love. Apple pie chocolate bear claw danish carrot cake bonbon I love. Lollipop jelly beans croissant icing lollipop caramels toffee brownie biscuit. Tootsie roll tootsie roll biscuit croissant ice cream gingerbread jelly beans. Topping pastry I love halvah. Jelly beans candy canes I love macaroon. Topping cake ice cream oat cake bear claw. Toffee ice cream ice cream I love cheesecake liquorice tart I love sweet. Jelly-o lemon drops donut macaroon oat cake I love I love gummies cotton candy.</p>
-
 <style>
 	.custom-item {
 		display: block;

tests/manual/mention-custom-view.html

@@ -4,18 +4,6 @@
 	<p>Same mention twice in data: <a class="mention" data-mention="@Ted Mosby" href="https://www.imdb.com/title/tt0460649/characters/nm1102140">Ted Mosby</a><a class="mention" data-mention="@Ted Mosby" href="https://www.imdb.com/title/tt0460649/characters/nm1102140">Ted Mosby</a></p>
 </div>
 
-<h3>The text below is used to fill the document body so the mention UI will be shown below cursor even if in bottom of the page.</h3>
-
-<p>Cupcake ipsum dolor. Sit amet oat cake pudding chocolate bar ice cream pie macaroon. Croissant I love I love. Dragée chupa chups soufflé apple pie caramels wafer powder. Muffin sugar plum tootsie roll. I love jelly donut sesame snaps gummies cheesecake. Pastry cupcake I love chocolate cake cheesecake croissant bear claw dessert. Jelly-o I love jujubes. I love toffee powder apple pie pie fruitcake I love gingerbread jelly beans. Chocolate cake dragée icing gummi bears I love croissant cake apple pie cake. Oat cake bonbon pastry jelly beans danish fruitcake macaroon oat cake. Oat cake I love biscuit cotton candy apple pie. Toffee tiramisu sweet roll pie.</p>
-
-<p>Dragée tart brownie I love. Sugar plum pastry chocolate bar gingerbread bear claw caramels. Donut wafer bonbon lemon drops biscuit. Topping ice cream I love pie jelly beans apple pie. Lemon drops I love sesame snaps. Liquorice marshmallow jelly-o chocolate cake jelly dragée I love. Tootsie roll carrot cake fruitcake apple pie. Cotton candy soufflé oat cake soufflé I love. Marshmallow cake toffee tiramisu candy canes. Donut gingerbread chocolate apple pie. Donut muffin chocolate bar marshmallow. Cupcake biscuit cotton candy croissant cupcake. Dessert pastry topping candy canes chocolate. Candy carrot cake I love tart cupcake gingerbread lemon drops.</p>
-
-<p>Macaroon wafer I love brownie apple pie jelly beans marshmallow sweet. Oat cake tiramisu topping I love macaroon. Chupa chups brownie bonbon candy canes. Carrot cake tootsie roll carrot cake jujubes pastry cookie. Lemon drops donut jujubes bonbon. Tootsie roll lemon drops sweet roll jelly-o jelly beans jelly-o lollipop sugar plum cookie. Dragée tart ice cream tiramisu. Chocolate bar candy sweet tart chocolate bar I love lemon drops. Biscuit liquorice carrot cake lollipop danish cake. Sweet lemon drops pie chocolate cake soufflé. Chupa chups cake cotton candy wafer I love. Oat cake sugar plum donut.</p>
-
-<p>Bonbon jujubes bonbon soufflé icing cupcake bear claw bear claw. Jelly cake bonbon jelly beans sweet roll muffin. Topping jujubes bonbon powder. Marshmallow biscuit biscuit fruitcake. I love jelly-o cheesecake sweet roll I love donut sugar plum dragée. Chocolate bar marshmallow liquorice. Wafer chocolate cake lemon drops candy sweet powder soufflé jelly. Gummi bears apple pie lemon drops cake tart tootsie roll. Gummi bears lemon drops jelly-o. Liquorice marzipan chocolate donut pastry. Icing I love lollipop gummi bears danish. Gummies powder danish bonbon cupcake pudding bonbon biscuit chocolate bar. Halvah wafer cupcake I love tootsie roll oat cake.</p>
-
-<p>Soufflé toffee jujubes bonbon jujubes bear claw marshmallow soufflé chocolate. Bear claw candy sweet roll chupa chups. Apple pie macaroon cotton candy I love marzipan. Topping pie brownie. Dessert I love I love. Apple pie chocolate bear claw danish carrot cake bonbon I love. Lollipop jelly beans croissant icing lollipop caramels toffee brownie biscuit. Tootsie roll tootsie roll biscuit croissant ice cream gingerbread jelly beans. Topping pastry I love halvah. Jelly beans candy canes I love macaroon. Topping cake ice cream oat cake bear claw. Toffee ice cream ice cream I love cheesecake liquorice tart I love sweet. Jelly-o lemon drops donut macaroon oat cake I love I love gummies cotton candy.</p>
-
 <style>
 	.custom-item {
 		display: block;

tests/manual/mention.html

@@ -7,15 +7,3 @@
 		<figcaption>CKEditor logo - caption</figcaption>
 	</figure>
 </div>
-
-<h3>The text below is used to fill the document body so the mention UI will be shown below cursor even if in bottom of the page.</h3>
-
-<p>Cupcake ipsum dolor. Sit amet oat cake pudding chocolate bar ice cream pie macaroon. Croissant I love I love. Dragée chupa chups soufflé apple pie caramels wafer powder. Muffin sugar plum tootsie roll. I love jelly donut sesame snaps gummies cheesecake. Pastry cupcake I love chocolate cake cheesecake croissant bear claw dessert. Jelly-o I love jujubes. I love toffee powder apple pie pie fruitcake I love gingerbread jelly beans. Chocolate cake dragée icing gummi bears I love croissant cake apple pie cake. Oat cake bonbon pastry jelly beans danish fruitcake macaroon oat cake. Oat cake I love biscuit cotton candy apple pie. Toffee tiramisu sweet roll pie.</p>
-
-<p>Dragée tart brownie I love. Sugar plum pastry chocolate bar gingerbread bear claw caramels. Donut wafer bonbon lemon drops biscuit. Topping ice cream I love pie jelly beans apple pie. Lemon drops I love sesame snaps. Liquorice marshmallow jelly-o chocolate cake jelly dragée I love. Tootsie roll carrot cake fruitcake apple pie. Cotton candy soufflé oat cake soufflé I love. Marshmallow cake toffee tiramisu candy canes. Donut gingerbread chocolate apple pie. Donut muffin chocolate bar marshmallow. Cupcake biscuit cotton candy croissant cupcake. Dessert pastry topping candy canes chocolate. Candy carrot cake I love tart cupcake gingerbread lemon drops.</p>
-
-<p>Macaroon wafer I love brownie apple pie jelly beans marshmallow sweet. Oat cake tiramisu topping I love macaroon. Chupa chups brownie bonbon candy canes. Carrot cake tootsie roll carrot cake jujubes pastry cookie. Lemon drops donut jujubes bonbon. Tootsie roll lemon drops sweet roll jelly-o jelly beans jelly-o lollipop sugar plum cookie. Dragée tart ice cream tiramisu. Chocolate bar candy sweet tart chocolate bar I love lemon drops. Biscuit liquorice carrot cake lollipop danish cake. Sweet lemon drops pie chocolate cake soufflé. Chupa chups cake cotton candy wafer I love. Oat cake sugar plum donut.</p>
-
-<p>Bonbon jujubes bonbon soufflé icing cupcake bear claw bear claw. Jelly cake bonbon jelly beans sweet roll muffin. Topping jujubes bonbon powder. Marshmallow biscuit biscuit fruitcake. I love jelly-o cheesecake sweet roll I love donut sugar plum dragée. Chocolate bar marshmallow liquorice. Wafer chocolate cake lemon drops candy sweet powder soufflé jelly. Gummi bears apple pie lemon drops cake tart tootsie roll. Gummi bears lemon drops jelly-o. Liquorice marzipan chocolate donut pastry. Icing I love lollipop gummi bears danish. Gummies powder danish bonbon cupcake pudding bonbon biscuit chocolate bar. Halvah wafer cupcake I love tootsie roll oat cake.</p>
-
-<p>Soufflé toffee jujubes bonbon jujubes bear claw marshmallow soufflé chocolate. Bear claw candy sweet roll chupa chups. Apple pie macaroon cotton candy I love marzipan. Topping pie brownie. Dessert I love I love. Apple pie chocolate bear claw danish carrot cake bonbon I love. Lollipop jelly beans croissant icing lollipop caramels toffee brownie biscuit. Tootsie roll tootsie roll biscuit croissant ice cream gingerbread jelly beans. Topping pastry I love halvah. Jelly beans candy canes I love macaroon. Topping cake ice cream oat cake bear claw. Toffee ice cream ice cream I love cheesecake liquorice tart I love sweet. Jelly-o lemon drops donut macaroon oat cake I love I love gummies cotton candy.</p>

tests/mentionui.js

@@ -145,6 +145,8 @@ describe( 'MentionUI', () => {
 		} );
 
 		it( 'should properly calculate position data', () => {
+			const editableElement = editingView.document.selection.editableElement;
+
 			setData( model, '<paragraph>foo []</paragraph>' );
 			stubSelectionRects( [ caretRect ] );
 
@@ -157,11 +159,13 @@ describe( 'MentionUI', () => {
 			return waitForDebounce()
 				.then( () => {
 					const pinArgument = pinSpy.firstCall.args[ 0 ];
-					const { target, positions } = pinArgument;
+					const { target, positions, limiter, fitInViewport } = pinArgument;
 
 					expect( positions ).to.have.length( 4 );
 
-					expect( pinArgument.fitInViewport ).to.be.undefined;
+					// Mention UI should set limiter to the editable area.
+					expect( limiter() ).to.equal( editingView.domConverter.mapViewToDom( editableElement ) );
+					expect( fitInViewport ).to.be.undefined;
 
 					expect( editor.model.markers.has( 'mention' ) ).to.be.true;
 					const mentionMarker = editor.model.markers.get( 'mention' );
@@ -191,18 +195,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',
@@ -247,6 +251,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', () => {