Position table cell properties balloon in relation to multiple-cell

[Reinmar]

📝 Provide a description of the improvement

Right now we position the balloon relatively to the first selected cell (getTableCellAtPosition() in ui/utils.js). Position utils accept rects, DOM elements or DOM ranges. We can easily create a DOM range which starts before the first selected cell and ends after the last selected cell.

---

If you'd like to see this improvement implemented, add a 👍 reaction to this post.

[remigasas]

A welcome improvement.

Could this "Table properties" balloon be improved ? Right now, when clicked at the top of table it will be displayed on top, and in case, when table is first thing inside page it will overflow.

Also, in large tables ( when table top/bottom is not visible ) it is not possible to change cell properties without scrolling ( it is also not clear from user perspective, how to, as controls are not visible )

[oleq]

Cake recipe

export function getBalloonCellPositionData( editor ) {
	const modelRanges = [ ...editor.model.document.selection.getRanges() ];

	// Multi-cell selection.
	if ( modelRanges.length > 1 ) {
		// A range enclosing all cells.
		const scopeRange = editor.model.createRange( modelRanges[ 0 ].start, modelRanges[ modelRanges.length - 1 ].end );
		const viewRange = editor.editing.mapper.toViewRange( scopeRange );
		const domRange = editor.editing.view.domConverter.viewRangeToDom( viewRange );

		return {
			target: () => {
				const domRangeRect = domRange.getBoundingClientRect();
				const rect = new Rect( domRangeRect );

				return rect;
			},
			positions: BALLOON_POSITIONS
		};
	}

	// Selection in a table cell.
	else {
		const modelTableCell = getTableCellAtPosition( editor.model.document.selection.getFirstPosition() );
		const viewTableCell = editor.editing.mapper.toViewElement( modelTableCell );

		return {
			target: editor.editing.view.domConverter.viewToDom( viewTableCell ),
			positions: BALLOON_POSITIONS
		};
	}
}

[oleq]

The recipe works but it's not elegant. The thing is that instead of

const domRange = editor.editing.view.domConverter.viewRangeToDom( viewRange );

return {
	target: () => {
		const domRangeRect = domRange.getBoundingClientRect();
		const rect = new Rect( domRangeRect );

		return rect;
	},
	positions: BALLOON_POSITIONS
};

it should be

const domRange = editor.editing.view.domConverter.viewRangeToDom( viewRange );

return {
	target: domRange,
	positions: BALLOON_POSITIONS
};

but ATM the Rect class that would normally accept the DOMRange does it in a wrong way, which results in a Rect of (most likely) the first cell only (because there are multiple DOMRects in domRect.getClientRects()).

It's been year since I wrote this Rect.getDomRangeRects( source )[ 0 ] in Rect#constrcutor() and something tells me that it had something to do with Safari which didn't support DOMRange#getBoundingClientRect() back then (or was it Edge?). Anyway, maybe it's time we finally figured it out in this issue because to me copyRectProperties( this, source.getBoundingClientRect() ); sounds like a natural choice.