ContextualToolbar doesn't respect viewportTopOffset

[fredck]

Just like the StickyToolbarView, ContextualToolbar should use viewportTopOffset to calculate the position of the toolbar and avoid displaying it above (or bellow) page elements that define top boundaries.

This happens in the documentation, for example:

[Reinmar]

Is this critical enough to fix it in it12?

[fredck]

I don't feel that this is extremely critical. Maybe @oleq consider this an easy fix.

[oleq]

Truth to tell, it's all about setting the ContextualBalloon#positionLimiter to a function that returns a Rect that excludes the top bar's height from the editor.editing.view.selection.editableElement's rect.

[oskarwrobel]

Related https://github.com/ckeditor/ckeditor5-ui/issues/260.

[oleq]

A quick workaround:

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
import ContextualToolbar from '../../../src/toolbar/contextual/contextualtoolbar';
import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';

const offset = 100;

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		plugins: [ ArticlePluginSet, ContextualToolbar ],
		toolbar: {
			items: [ 'bold', 'link' ]
		},
		contextualToolbar: [ 'bold', 'link' ]
	} )
	.then( editor => {
		editor.plugins.get( 'ContextualBalloon' ).positionLimiter = () => {
			const view = editor.editing.view;
			const editableElement = view.selection.editableElement;

			if ( editableElement ) {
				const rect = new Rect( view.domConverter.mapViewToDom( editableElement.root ) );
				const difference = offset - rect.top;

				if ( difference > 0 ) {
					rect.moveBy( 0, difference );
					rect.height -= difference;
					rect.bottom -= difference;
				}

				return rect;
			}

			return null;
		};

		window.editor = editor;
	} )
	.catch( err => {
		console.error( err.stack );
	} );

It will also change the behavior of the link balloon, etc.

[Reinmar]

If it's not critical, why are we spending time on it now :|? All of us have more important things to do and I can see that @oleq already spent on this half an hour.

[dawidurbanski]

It's a duplicate of #9892