Table selection is active during image resize

[Mgsy]

📝 Provide detailed reproduction steps (if any)

1. Insert a table with an image.
2. Start the image resize and move the selection to the next cell.

✔️ Expected result

Cells are not selected.

❌ Actual result

Cells are selected, resizing fails.

📃 Other details

• Browser: All browsers

GIF

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[niegowski]

While checking this issue I noticed that table selection and widget resize dragging handling listens for mousedown on view document but this makes it impossible to stopPropagation for nested handlers. Image resize should stop the propagation of mousedown event so that the table handler will not start dragging. I think that we should listen to mousedown on specific objects (image, table) to use DOM event bubbling. mousemove and mouseup should still listen on the document.

[pomek]

While checking this issue I noticed that table selection and widget resize dragging handling listens for mousedown on view document but this makes it impossible to stopPropagation for nested handlers.

Is not true at all. The resizing mechanism attaches its events to DOM document.

ckeditor5/packages/ckeditor5-widget/src/widgetresize.js

Lines 68 to 80 in de8316f

	const domDocument = global.window.document;
	this.editor.model.schema.setAttributeProperties( 'width', {
	isFormatting: true
	} );
	this._observer = Object.create( DomEmitterMixin );
	this._observer.listenTo( domDocument, 'mousedown', this._mouseDownListener.bind( this ) );
	this._observer.listenTo( domDocument, 'mousemove', this._mouseMoveListener.bind( this ) );
	this._observer.listenTo( domDocument, 'mouseup', this._mouseUpListener.bind( this ) );

That's why we can't use stopPropagation(). I tried to use different priorities for those events but with no luck.

I guess the fix must land to TableMouse plugin instead of WidgetResize. WDYT?

[jodator]

That's interesting. I wonder why there's Object.create() instead of direct implementation. Similar functionality in tables was created using custom MouseObserver class:

ckeditor5/packages/ckeditor5-table/src/tablemouse.js

Lines 45 to 47 in b362e24

	// Currently the MouseObserver only handles `mouseup` events.
	// TODO move to the engine?
	editor.editing.view.addObserver( MouseEventsObserver );

It might be worth checking if table & widget resize mouse handlers could not be merged together into existing MouseHandler.

But before that maybe @mlewand or @Reinmar have some insights why this observer is "detached" from editor view document.

[mlewand]

Honestly, at this point I don't really remember why we went with Object.create() I recall there were some problems using observers, but unfortunately I don't remember what precisely has been an issue.

Joining observers, as suggested by @jodator, might be beneficial as both should work pretty much the same way. With this we should be able to to prioritize the image resize event listener over table's one.

That's fine for a workaround, but in the grand schema of things we should be able to solve it without relying on priority.