Can the Balloon editor toolbar be sized based on the viewport instead of editor width?

[benfosterlitmos]

📝 Ask a question

Is there a way to configure the Balloon editor toolbar to set it's width based on the viewport width rather than the editor instance width?

I have an editor in a dialog which is much narrower than the viewport. The toolbar items collapse into a submenu because they don't fit within the width of the editor, however they would fit within the viewport. I was able to change the positionLimiter so the toolbar can flow outside the dialog, but the width is still an issue when there is plenty of space:

[Reinmar]

I agree. We've tried to limit the editor's floating UI to the editor's area, but I have strong doubts whether it actually makes sense. 

What do integrators expect in generak? Unfortunately, I guess the answer is not that simple and that it's highly context-specific.

But it's clear that in case of small editor areas, probably when the ratio between the editor size / viewport size is small, we should us all the available space. Or perhaps extend what we consider "the editor's space" e.g. 2x in every direction, so the floating UI still gravitates towards the editor and does not extend too much outside it, but has more space than today.

cc @oleq @dagdzi

[Witoso]

[Semi-related]: cutoff of dropdowns in the toolbar: #5514

[oleq]

For the record, here's the code responsible for this logic

ckeditor5/packages/ckeditor5-ui/src/toolbar/balloon/balloontoolbar.ts

Lines 178 to 183 in 9954cb5

	this._resizeObserver = new ResizeObserver( editableElement, entry => {
	// The max-width equals 90% of the editable's width for the best user experience.
	// The value keeps the balloon very close to the boundaries of the editable and limits the cases
	// when the balloon juts out from the editable element it belongs to.
	this.toolbarView.maxWidth = toPx( entry.contentRect.width * .9 );
	} );

and you can hook into this logic and test different approaches, for instance

updateToolbarMaxWidth();

editor.plugins.get( 'BalloonToolbar' ).toolbarView.on( 'change:maxWidth', updateToolbarMaxWidth );

function updateToolbarMaxWidth() {
    editor.plugins.get( 'BalloonToolbar' ).toolbarView.maxWidth = .9 * window.innerWidth  + 'px';
}

The problem is that there's a finite number of balloon tip ("arrow") positions we can use. The BalloonPanelView system has been implemented in such a way that it offers a set of tip positions, and then the positioning logic getOptimalPosition() tries to figure out which position to use so that the balloon remains in the viewport (long story short). There's no reverse logic that prioritizes the fit of the balloon in the viewport and then (fluidly) changes the placement of the tip so that the balloon remains in the context.

This is why, the code snippet that prioritizes viewport width I pasted will fail occasionally:

while it wouldn't be an issue, if the editing root width as used instead (default)

In this way, the current logic is fail-safe although it may not feel perfect in some cases. We could experiment with combined editing root and viewport width but this will consume a considerable amount of time.

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[benfosterlitmos]

I would still like to see this enhancement added to CKEditor, having the toolbar sized based on viewport is still very much relevant to our product where there are many small editors in the UI which aren't the full width of the viewport. We have accepted the current behaviour for now but this would be a great enhancement to our UX.