WIP: recreating #10239 from scratch

package.json

@@ -168,7 +168,8 @@
     "switch-to-dev-dev": "sh ./scripts/switch-to-dev-dev.sh",
     "clean-up-svg-icons": "sh ./scripts/clean-up-svg-icons.sh",
     "dll:build": "node ./scripts/dll/build-dlls.js",
-    "check-dependencies": "ckeditor5-dev-tests-check-dependencies"
+    "check-dependencies": "ckeditor5-dev-tests-check-dependencies",
+    "serve": "http-server ./"
   },
   "lint-staged": {
     "**/*.js": [

packages/ckeditor5-image/src/image/ui/utils.js

@@ -47,7 +47,8 @@ export function getBalloonPositionData( editor ) {
 			defaultPositions.northArrowSouthEast,
 			defaultPositions.southArrowNorth,
 			defaultPositions.southArrowNorthWest,
-			defaultPositions.southArrowNorthEast
+			defaultPositions.southArrowNorthEast,
+			defaultPositions.viewportStickyNorth
 		]
 	};
 }

packages/ckeditor5-table/src/utils/ui/contextualballoon.js

@@ -7,7 +7,6 @@
  * @module table/utils/ui/contextualballoon
  */
 
-import { centeredBalloonPositionForLongWidgets } from 'ckeditor5/src/widget';
 import { Rect } from 'ckeditor5/src/utils';
 import { BalloonPanelView } from 'ckeditor5/src/ui';
 
@@ -21,12 +20,8 @@ const BALLOON_POSITIONS = [
 	DEFAULT_BALLOON_POSITIONS.northArrowSouthEast,
 	DEFAULT_BALLOON_POSITIONS.southArrowNorth,
 	DEFAULT_BALLOON_POSITIONS.southArrowNorthWest,
-	DEFAULT_BALLOON_POSITIONS.southArrowNorthEast
-];
-
-const TABLE_PROPERTIES_BALLOON_POSITIONS = [
-	...BALLOON_POSITIONS,
-	centeredBalloonPositionForLongWidgets
+	DEFAULT_BALLOON_POSITIONS.southArrowNorthEast,
+	DEFAULT_BALLOON_POSITIONS.viewportStickyNorth
 ];
 
 /**
@@ -67,9 +62,11 @@ export function getBalloonTablePositionData( editor ) {
 	const modelTable = firstPosition.findAncestor( 'table' );
 	const viewTable = editor.editing.mapper.toViewElement( modelTable );
 
+	console.log(BALLOON_POSITIONS);
+
 	return {
 		target: editor.editing.view.domConverter.viewToDom( viewTable ),
-		positions: TABLE_PROPERTIES_BALLOON_POSITIONS
+		positions: BALLOON_POSITIONS
 	};
 }
 
@@ -96,6 +93,8 @@ export function getBalloonCellPositionData( editor ) {
 	const modelTableCell = getTableCellAtPosition( selection.getFirstPosition() );
 	const viewTableCell = mapper.toViewElement( modelTableCell );
 
+	console.log(BALLOON_POSITIONS);
+
 	return {
 		target: domConverter.viewToDom( viewTableCell ),
 		positions: BALLOON_POSITIONS

packages/ckeditor5-ui/src/panel/balloon/balloonpanelview.js

@@ -232,14 +232,17 @@ export default class BalloonPanelView extends View {
 				defaultPositions.northArrowSouthMiddleWest,
 				defaultPositions.northArrowSouthMiddleEast,
 				defaultPositions.northArrowSouthWest,
-				defaultPositions.northArrowSouthEast
+				defaultPositions.northArrowSouthEast,
+				defaultPositions.viewportStickyNorth
 			],
 			limiter: defaultLimiterElement,
 			fitInViewport: true
 		}, options );
 
 		const optimalPosition = BalloonPanelView._getOptimalPosition( positionOptions );
 
+		console.log( optimalPosition );
+
 		// Usually browsers make some problems with super accurate values like 104.345px
 		// so it is better to use int values.
 		const left = parseInt( optimalPosition.left );
@@ -425,6 +428,9 @@ BalloonPanelView.arrowHorizontalOffset = 25;
  */
 BalloonPanelView.arrowVerticalOffset = 10;
 
+// TODO
+BalloonPanelView.stickyVerticalOffset = 20;
+
 /**
  * Function used to calculate the optimal position for the balloon.
  *
@@ -702,6 +708,22 @@ BalloonPanelView._getOptimalPosition = getOptimalPosition;
  *		|     Balloon     |
  *		+-----------------+
  *
+ * * `viewportStickyNorth`
+ *
+ *		+---------------------------+
+ *		|		 [ Target ]			|
+ *		|							|
+ *	+-----------------------------------+
+ *	|	|	 +-----------------+	|	|
+ *	|	|	 |     Balloon     |	|	|
+ *	|	|	 +-----------------+	|	|
+ *	|	|        					|	|
+ *	|	|							|	|
+ *	|	|							|	|
+ * 	|	|							|	|
+ *	|	+---------------------------+	|
+ * 	|			  Viewport				|
+ *	+-----------------------------------+
  *
  * See {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView#attachTo}.
  *
@@ -791,6 +813,7 @@ BalloonPanelView.defaultPositions = {
 		left: targetRect.right - ( balloonRect.width * .25 ) - BalloonPanelView.arrowHorizontalOffset,
 		name: 'arrow_smw'
 	} ),
+
 	northEastArrowSouth: ( targetRect, balloonRect ) => ( {
 		top: getNorthTop( targetRect, balloonRect ),
 		left: targetRect.right - balloonRect.width / 2,
@@ -808,6 +831,7 @@ BalloonPanelView.defaultPositions = {
 		left: targetRect.right - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
 		name: 'arrow_se'
 	} ),
+
 	// ------- South west
 
 	southWestArrowNorthWest: ( targetRect, balloonRect ) => ( {
@@ -901,8 +925,22 @@ BalloonPanelView.defaultPositions = {
 		top: getSouthTop( targetRect, balloonRect ),
 		left: targetRect.right - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
 		name: 'arrow_ne'
-	} )
+	} ),
 
+	// ------- Sticky
+
+	viewportStickyNorth: ( targetRect, balloonRect, viewportRect ) => {
+		if ( !targetRect.getIntersection( viewportRect ) ) {
+			return null;
+		}
+
+		return {
+			top: viewportRect.top + BalloonPanelView.stickyVerticalOffset,
+			left: targetRect.left + targetRect.width / 2 - balloonRect.width / 2,
+			name: 'arrowless',
+			withArrow: false
+		};
+	}
 };
 
 // Returns the top coordinate for positions starting with `north*`.

packages/ckeditor5-ui/src/panel/balloon/contextualballoon.js

@@ -498,11 +498,18 @@ export default class ContextualBalloon extends Plugin {
 	_getBalloonPosition() {
 		let position = Array.from( this._visibleStack.values() ).pop().position;
 
-		// Use the default limiter if none has been specified.
-		if ( position && !position.limiter ) {
+		if ( position ) {
+			// Use the default limiter if none has been specified.
+			if ( !position.limiter ) {
+				// Don't modify the original options object.
+				position = Object.assign( {}, position, {
+					limiter: this.positionLimiter
+				} );
+			}
+
 			// Don't modify the original options object.
 			position = Object.assign( {}, position, {
-				limiter: this.positionLimiter
+				viewportOffsetConfig: this.editor.config.get( 'ui.viewportOffset' )
 			} );
 		}
 

packages/ckeditor5-ui/tests/manual/tickets/9892/1.html

@@ -0,0 +1,123 @@
+<div class="sticky-header">
+	Sticky header. Table balloon toolbar should not overlap with this header at any point when scrolling down.
+</div>
+<div class="sticky-footer">
+	Sticky footer.
+</div>
+
+<h1>Other webpage content</h1>
+<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia itaque eum necessitatibus possimus adipisci mollitia dolor quia molestias voluptate dignissimos? Optio architecto dicta dolorum laborum nam nulla minus aspernatur iste.</p>
+<div id="editor">
+	<h2>Short table</h2>
+	<table>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+	</table>
+	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
+	<h2>Very long table</h2>
+	<table>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+		<tr><td></td><td></td></tr>
+	</table>
+	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
+	<h2>Short image</h2>
+	<figure class="image">
+		<img src="./sample.jpg" alt="Autumn fields" />
+	</figure>
+	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
+	<h2>Very tall image table</h2>
+	<figure class="image">
+		<img src="./sample-very-tall.jpg" alt="Very tall image" />
+	</figure>
+	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
+	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
+	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
+</div>
+
+<style>
+	.manual-test-container {
+		padding-top: 100px;
+	}
+
+	#editor {
+		margin: 0 auto;
+		max-width: 800px;
+	}
+
+	.ck-block-toolbar-button {
+		transform: translateX( -10px );
+	}
+
+	.sticky-header,
+	.sticky-footer {
+		display: flex;
+		display: none;
+		opacity: .9;
+		position: fixed;
+		left: 48px;
+		right: 48px;
+		align-items: center;
+		height: 100px;
+		padding-left: 10px;
+		background-color: hsl(0, 0%, 90%);
+		z-index: 999;
+	}
+
+	.sticky-header {
+		top: 0;
+	}
+
+	.sticky-footer {
+		bottom: 0;
+	}
+</style>

packages/ckeditor5-ui/tests/manual/tickets/9892/1.js

@@ -0,0 +1,37 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals window, document, console:false */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
+import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		image: { toolbar: [ 'toggleImageCaption', 'imageTextAlternative' ] },
+		plugins: [ ArticlePluginSet, TableProperties, TableCellProperties ],
+		toolbar: {
+			items: [ 'heading', '|', 'insertTable', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ],
+			viewportTopOffset: 100
+		},
+		table: {
+			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', '|', 'tableProperties', 'tableCellProperties' ],
+			tableToolbar: [ 'bold', 'italic' ]
+		},
+		ui: {
+			viewportOffset: {
+				top: 100,
+				bottom: 100
+			}
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

packages/ckeditor5-ui/tests/manual/tickets/9892/1.md

@@ -0,0 +1,5 @@
+## Table toolbar does not respect viewportTopOffset configuration [#9892](https://github.com/ckeditor/ckeditor5/issues/9892)
+
+- select the long table
+- scroll down when balloon toolbar visible
+- toolbar shouldn't go above the main toolbar and overlap with sticky header