[Safari] Triple-click in a nested editable selects the whole widget

[Reinmar]

Is this a bug report or feature request? (choose one)

🐞 Bug report

💻 Version of CKEditor

Master

📋 Steps to reproduce

1. Open https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html in Safari
2. Scroll the content to the image.
3. Place the caret in the caption.
4. Triple click there.

✅ Expected result

❎ Actual result

📃 Other details that might be useful

Which is even/also very uncool – this leads to excessive scroll jump.

[Reinmar]

I'm adding it to the next iteration because this is very annoying. Actually, it was frustrating for me when I tried to edit the content.

[Reinmar]

cc @jodator

[pomek]

The MouseEvent (for the click event) defines the detail property which describes how many clicks a user did.

https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent

We could observe the whole editable area and prevent the event if details value is higher than 2.

[pomek]

Unfortunately, preventing the event or/and stopping propagation didn't work. Seems like the selection is being modified before firing the click event.

[Reinmar]

Unfortunately, preventing the event or/and stopping propagation didn't work. Seems like the selection is being modified before firing the click event.

Can't we simply handle this event and set selection ourselves? We know the event target, right? So we know where the user was clicking so we can select the right content. Am I right?

[pomek]

Because I don't have an idea on how to select a line which was triple clicked by a user, I selected the whole figcaption element. Unfortunately, it blinks. Safari modifies selection earlier than me. It looks very weird. See the attached GIF.

[Reinmar]

I selected the whole figcaption elemen

The selection should be put inside the <figcaption> element. In fact, inside the <caption> element because this should be done on the model.

[pomek]

I changed it but it still blinks. The worst thing is that is blinks randomly.

[Reinmar]

No code, no comments.

[pomek]

ckeditor/ckeditor5-image@6819f4b

[oleq]

I did a quick research and this is what I found:

• listening to click makes little sense as the selection is made upon mousedown
• the issue also happens when domEvent.detail > 3

I created a solution draft which is as simple as

view.addObserver( MouseObserver );

view.document.on( 'mousedown', ( evt, data ) => {
	console.log( 'mousedown', data.domEvent.detail );

	if ( data.domEvent.detail >= 3 && data.target.is( 'figcaption' ) ) {
		data.domEvent.preventDefault();

		view.change( writer => {
			writer.setSelection( data.target, 'in' );
		} );
	}
} );

and it seems to be working. All we need now is:

• a check that makes sure this covers affected browsers
• more general element discovery, probably it concerns all nested editables, not just <figcaptions>,
• tests

[oleq]

This issue must be fixed at the widget–level (not image–level) so I'm afraid ckeditor/ckeditor5-image#280 will not do.