CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Typedef

PositioningFunction (utils/dom)

@ckeditor/ckeditor5-utils/src/dom/position

typedeffunction
See source

A positioning function which, based on positioned element and target Rects, returns rect coordinates representing the geometrical relation between them. Used by the getOptimalPosition helper.

// This simple position will place the element directly under the target, in the middle:
//
//	    [ Target ]
//	+-----------------+
//	|     Element     |
//	+-----------------+
//
const position = ( targetRect, elementRect, [ viewportRect ] ) => ( {
	top: targetRect.bottom,
	left: targetRect.left + targetRect.width / 2 - elementRect.width / 2,
	name: 'bottomMiddle',

	// Note: The config is optional.
	config: {
		zIndex: '999'
	}
} );

Filtering

Parameters

elementRect : Rect

The rect of the element to be positioned.

targetRect : Rect

The rect of the target the element (its rect) is relatively positioned to.

viewportRect : Rect

The rect of the visual browser viewport.

[ limiterRect ] : Rect

Returns

PositioningFunctionResult | null

When the function returns null, it will not be considered by getOptimalPosition.