Detect if mention panel goes beyond window borders

CHANGES.md

@@ -7,6 +7,7 @@ New Features:
 
 * [#2800](https://github.com/ckeditor/ckeditor4/issues/2800): Unsupported image formats are now gracefully handled by the [Paste from Word](https://ckeditor.com/cke4/addon/pastefromword) plugin on paste, additionally showing descriptive error messages.
 * [#2800](https://github.com/ckeditor/ckeditor4/issues/2800): Unsupported image formats are now gracefully handled by the [Paste from LibreOffice](https://ckeditor.com/cke4/addon/pastefromlibreoffice) plugin on paste, additionally showing descriptive error messages.
+* [#3582](https://github.com/ckeditor/ckeditor4/issues/3582): Introduced smart positioning of [Autocomplete](https://ckeditor.com/cke4/addon/autocomplete) panel used by [Mentions](https://ckeditor.com/cke4/addon/mentions) and [Emoji](https://ckeditor.com/cke4/addon/emoji) plugins. The panel will now be additionally positioned related to browser viewport to be always fully visible.
 
 Fixed Issues:
 

plugins/autocomplete/plugin.js

@@ -857,94 +857,165 @@
 		 * For example, the position of the bottom end of the caret.
 		 */
 		setPosition: function( rect ) {
-			var editor = this.editor,
-				viewHeight = this.element.getSize( 'height' ),
-				editable = editor.editable(),
-				// Bounding rect where the view should fit (visible editor viewport).
-				editorViewportRect;
+			var documentWindow = this.element.getWindow(),
+				windowRect = documentWindow.getViewPaneSize(),
+				top = getVerticalPosition( {
+					editorViewportRect: getEditorViewportRect( this.editor ),
+					caretRect: rect,
+					viewHeight: this.element.getSize( 'height' ),
+					scrollPositionY: documentWindow.getScrollPosition().y,
+					windowHeight: windowRect.height
+				} ),
+				left = getHorizontalPosition( {
+					leftPosition: rect.left,
+					viewWidth: this.element.getSize( 'width' ),
+					windowWidth: windowRect.width
+				} );
 
-			// iOS classic editor has different viewport element (#1910).
-			if ( CKEDITOR.env.iOS && !editable.isInline() ) {
-				editorViewportRect = iOSViewportElement( editor ).getClientRect( true );
-			} else {
-				editorViewportRect = editable.isInline() ? editable.getClientRect( true ) : editor.window.getFrame().getClientRect( true );
-			}
+			this.element.setStyles( {
+				left: left + 'px',
+				top: top + 'px'
+			} );
 
-			// How much space is there for the view above and below the specified rect.
-			var spaceAbove = rect.top - editorViewportRect.top,
-				spaceBelow = editorViewportRect.bottom - rect.bottom,
-				top;
-
-			// As a default, keep the view inside the editor viewport.
-			// +---------------------------------------------+
-			// |       editor viewport                       |
-			// |                                             |
-			// |                                             |
-			// |                                             |
-			// |     █ - caret position                      |
-			// |     +--------------+                        |
-			// |     |     view     |                        |
-			// |     +--------------+                        |
-			// |                                             |
-			// |                                             |
-			// +---------------------------------------------+
-			top = rect.top < editorViewportRect.top ? editorViewportRect.top : Math.min( editorViewportRect.bottom, rect.bottom );
-
-			// If the view doesn't fit below the caret position and fits above, set it there.
-			// This means that the position below the caret is preferred.
-			// +---------------------------------------------+
-			// |                                             |
-			// |       editor viewport                       |
-			// |     +--------------+                        |
-			// |     |              |                        |
-			// |     |     view     |                        |
-			// |     |              |                        |
-			// |     +--------------+                        |
-			// |     █ - caret position                      |
-			// |                                             |
-			// +---------------------------------------------+
-			if ( viewHeight > spaceBelow && viewHeight < spaceAbove ) {
-				top = rect.top - viewHeight;
-			}
+			function getVerticalPosition( options ) {
+				var editorViewportRect = options.editorViewportRect,
+					caretRect = options.caretRect,
+					viewHeight = options.viewHeight,
+					scrollPositionY = options.scrollPositionY,
+					windowHeight = options.windowHeight;
+
+				// If the caret position is below the view - keep it at the bottom edge.
+				// +---------------------------------------------+
+				// |       editor viewport                       |
+				// |                                             |
+				// |     +--------------+                        |
+				// |     |              |                        |
+				// |     |     view     |                        |
+				// |     |              |                        |
+				// +-----+==============+------------------------+
+				// |                                             |
+				// |     █ - caret position                      |
+				// |                                             |
+				// +---------------------------------------------+
+				if ( editorViewportRect.bottom < caretRect.bottom ) {
+					return Math.min( caretRect.top, editorViewportRect.bottom ) - viewHeight;
+				}
+
+				// If the view doesn't fit below the caret position and fits above, set it there.
+				// This means that the position below the caret is preferred.
+				// +---------------------------------------------+
+				// |                                             |
+				// |       editor viewport                       |
+				// |     +--------------+                        |
+				// |     |              |                        |
+				// |     |     view     |                        |
+				// |     |              |                        |
+				// |     +--------------+                        |
+				// |     █ - caret position                      |
+				// |                                             |
+				// |                                             |
+				// +---------------------------------------------+
+				// How much space is there for the view above and below the specified rect.
+				var spaceAbove = caretRect.top - editorViewportRect.top,
+					spaceBelow = editorViewportRect.bottom - caretRect.bottom,
+					viewExceedsTopViewport = ( caretRect.top - viewHeight ) < scrollPositionY;
+
+				if ( viewHeight > spaceBelow && viewHeight < spaceAbove && !viewExceedsTopViewport ) {
+					return caretRect.top - viewHeight;
+				}
 
-			// If the caret position is below the view - keep it at the bottom edge.
-			// +---------------------------------------------+
-			// |       editor viewport                       |
-			// |                                             |
-			// |     +--------------+                        |
-			// |     |              |                        |
-			// |     |     view     |                        |
-			// |     |              |                        |
-			// +-----+==============+------------------------+
-			// |																						 |
-			// |     █ - caret position                      |
-			// |                                             |
-			// +---------------------------------------------+
-			if ( editorViewportRect.bottom < rect.bottom ) {
-				top = Math.min( rect.top - viewHeight, editorViewportRect.bottom - viewHeight );
+				// If the caret position is above the view - keep it at the top edge.
+				// +---------------------------------------------+
+				// |                                             |
+				// |     █ - caret position                      |
+				// |                                             |
+				// +-----+==============+------------------------+
+				// |     |              |                        |
+				// |     |     view     |                        |
+				// |     |              |                        |
+				// |     +--------------+                        |
+				// |                                             |
+				// |       editor viewport                       |
+				// +---------------------------------------------+
+				if ( editorViewportRect.top > caretRect.top ) {
+					return Math.max( caretRect.bottom, editorViewportRect.top );
+				}
+
+				// (#3582)
+				// If the view goes beyond bottom window border - reverse view position, even if it fits editor viewport.
+				// +---------------------------------------------+
+				// |               editor viewport               |
+				// |                                             |
+				// |                                             |
+				// |                  +--------------+           |
+				// |                  |     view     |           |
+				// |                  +--------------+           |
+				// | caret position - █                          |
+				// |                                             |
+				// =============================================== - bottom window border
+				// |                                             |
+				// |                                             |
+				// +---------------------------------------------+
+				var viewExceedsBottomViewport = ( caretRect.bottom + viewHeight ) > ( windowHeight + scrollPositionY );
+
+				if ( !( viewHeight > spaceBelow && viewHeight < spaceAbove ) && viewExceedsBottomViewport ) {
+					return caretRect.top - viewHeight;
+				}
+
+				// As a default, keep the view inside the editor viewport.
+				// +---------------------------------------------+
+				// |       editor viewport                       |
+				// |                                             |
+				// |                                             |
+				// |                                             |
+				// |     █ - caret position                      |
+				// |     +--------------+                        |
+				// |     |     view     |                        |
+				// |     +--------------+                        |
+				// |                                             |
+				// |                                             |
+				// +---------------------------------------------+
+				return Math.min( editorViewportRect.bottom, caretRect.bottom );
 			}
 
-			// If the caret position is above the view - keep it at the top edge.
-			// +---------------------------------------------+
-			// |																						 |
-			// |     █ - caret position                      |
-			// |                                             |
-			// +-----+==============+------------------------+
-			// |     |              |                        |
-			// |     |     view     |                        |
-			// |     |              |                        |
-			// |     +--------------+                        |
-			// |																						 |
-			// |       editor viewport                       |
-			// +---------------------------------------------+
-			if ( editorViewportRect.top > rect.top ) {
-				top = Math.max( rect.bottom, editorViewportRect.top );
+			function getHorizontalPosition( options ) {
+				var caretLeftPosition = options.leftPosition,
+					viewWidth = options.viewWidth,
+					windowWidth = options.windowWidth;
+
+				// (#3582)
+				// If the view goes beyond right window border - stick it to the edge of the available viewport.
+				// +---------------------------------------------+   ||
+				// |               editor viewport               |   ||
+				// |                                             |   ||
+				// |                                             |   ||
+				// |                         caret position - █  |   || - right window border
+				// |                                 +--------------+||
+				// |                                 |              |||
+				// |                                 |     view     |||
+				// |                                 |              |||
+				// |                                 +--------------+||
+				// |                                             |   ||
+				// +---------------------------------------------+   ||
+				if ( caretLeftPosition + viewWidth > windowWidth ) {
+					return windowWidth - viewWidth;
+				}
+
+				// Otherwise inherit the horizontal position from caret.
+				return caretLeftPosition;
 			}
 
-			this.element.setStyles( {
-				left: rect.left + 'px',
-				top: top + 'px'
-			} );
+			// Bounding rect where the view should fit (visible editor viewport).
+			function getEditorViewportRect( editor ) {
+				var editable = editor.editable();
+
+				// iOS classic editor has different viewport element (#1910).
+				if ( CKEDITOR.env.iOS && !editable.isInline() ) {
+					return iOSViewportElement( editor ).getClientRect( true );
+				} else {
+					return editable.isInline() ? editable.getClientRect( true ) : editor.window.getFrame().getClientRect( true );
+				}
+			}
 		},
 
 		/**

tests/plugins/autocomplete/autocomplete.js

@@ -398,7 +398,7 @@
 			// |     |     view     |                        |
 			// |     |              |                        |
 			// |     +--------------+                        |
-			// |																						 |
+			// |                                             |
 			// |       editor viewport                       |
 			// +---------------------------------------------+
 			viewport.fire( 'scroll' );

tests/plugins/autocomplete/integration/emoji/manual/emoji.html

@@ -0,0 +1,111 @@
+<style>
+	body {
+		margin: 0;
+		padding-left: 350px;
+		position: static;
+	}
+
+	.wrapper {
+		position: absolute;
+	}
+
+	.wrapper.horizontal > div:not(:last-of-type) {
+		margin-right: 15px;
+	}
+
+	.wrapper.vertical > div:not(:last-of-type) {
+		margin-bottom: 15px;
+	}
+
+	.wrapper.horizontal {
+		display: inline-flex;
+	}
+
+	.wrapper.vertical {
+		flex-direction: column;
+	}
+
+	.wrapper.left {
+		left: 0;
+	}
+
+	.wrapper.right {
+		right: 0;
+	}
+
+	.wrapper.bottom {
+		bottom: 0;
+	}
+
+	.inline {
+		width: 300px;
+		height: 194px;
+	}
+</style>
+
+<div>
+	<p>Select mode</p>
+	<button type="button" id="left-button">Left</button>
+	<button type="button" id="right-button">Right</button>
+	<button type="button" id="bottom-button">Bottom</button>
+
+	<button type="button" id="reset-button">Reset</button>
+</div>
+
+<div class="wrapper" id="wrapper">
+	<div id="classic">
+		<h3>Classic editor</h3>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, veritatis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, veritatis.</p>
+	</div>
+
+	<div id="divarea">
+		<h3>Divarea editor</h3>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, veritatis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, veritatis.</p>
+	</div>
+
+	<div id="inline" class="inline" contenteditable="true">
+		<p style="padding-top: 40px;">Fake toolbar</p>
+		<h3>Inline editor</h3>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, veritatis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, veritatis.</p>
+	</div>
+</div>
+
+<script>
+	bender.tools.ignoreUnsupportedEnvironment( 'emoji' );
+
+	if ( bender.tools.env.mobile ) {
+		bender.ignore();
+	}
+
+	var wrapper = CKEDITOR.document.getById( 'wrapper' ),
+		leftButton = CKEDITOR.document.getById( 'left-button' ),
+		rightButton = CKEDITOR.document.getById( 'right-button' ),
+		bottomButton = CKEDITOR.document.getById( 'bottom-button' ),
+		resetButton = CKEDITOR.document.getById( 'reset-button' );
+
+	leftButton.on( 'click', function() {
+		wrapper.setAttribute( 'class', 'wrapper vertical left' );
+	} );
+
+	rightButton.on( 'click', function() {
+		wrapper.setAttribute( 'class', 'wrapper vertical right' );
+	} );
+
+	bottomButton.on( 'click', function() {
+		wrapper.setAttribute( 'class', 'wrapper horizontal bottom' );
+	} );
+
+	resetButton.on( 'click', function() {
+		wrapper.setAttribute( 'class', 'wrapper' );
+	} );
+
+	var config = {
+		width: 300,
+		height: 180,
+		language: 'en'
+	};
+
+	CKEDITOR.replace( 'classic', config );
+	CKEDITOR.replace( 'divarea', CKEDITOR.tools.extend( { extraPlugins: 'divarea' }, config ) );
+	CKEDITOR.inline( 'inline', config );
+</script>

tests/plugins/autocomplete/integration/emoji/manual/emoji.md

@@ -0,0 +1,17 @@
+@bender-tags: 4.16.0, feature, 3582
+@bender-ckeditor-plugins: wysiwygarea, toolbar, elementspath, sourcearea, emoji, clipboard, undo
+@bender-ui: collapsed
+
+1. Select mode (Left / Right / Bottom).
+1. Place selection inside editor content as close as possible to window border.
+1. Type `:da`.
+
+  ### Expected:
+
+  Emoji panel should appear inside browser viewport and be fully visible.
+
+  ### Unexpected:
+
+  Emoji panel appears outside browser borders and is not fully visible.
+
+1. Play around with different caret placements to check if the panel is always visible and accessible.