Fix triple click issue in paragraph with widget

packages/ckeditor5-widget/src/widget.ts

@@ -207,22 +207,25 @@ export default class Widget extends Plugin {
  // But at least triple click inside nested editable causes broken selection in Safari.
  // For such event, we select the entire nested editable element.
  // See: https://github.com/ckeditor/ckeditor5/issues/1463.
- if ( ( env.isSafari || env.isGecko ) && domEventData.domEvent.detail >= 3 ) {
- const mapper = editor.editing.mapper;
- const viewElement = element.is( 'attributeElement' ) ?
- element.findAncestor( element => !element.is( 'attributeElement' ) )! : element;
- const modelElement = mapper.toModelElement( viewElement )!;
-
- domEventData.preventDefault();
 
- this.editor.model.change( writer => {
- writer.setSelection( modelElement, 'in' );
- } );
+ if ( ( env.isSafari || env.isGecko ) && domEventData.domEvent.detail >= 3 ) {
+ this._setSelectionInAncestorElement( element, domEventData );
  }
 
  return;
  }
 
+ const parentElement = element.parent;
+
+ // If triple click should select entire paragraph.
+ if ( parentElement &&
+ parentElement.is( 'element' ) &&
+ !isWidget( parentElement ) &&
+ domEventData.domEvent.detail >= 3
+ ) {
+ this._setSelectionInAncestorElement( element, domEventData );
+ }
+
  // If target is not a widget element - check if one of the ancestors is.
  if ( !isWidget( element ) ) {
  element = element.findAncestor( isWidget );
@@ -249,6 +252,21 @@ export default class Widget extends Plugin {
  this._setSelectionOverElement( modelElement! );
  }
 
+ private _setSelectionInAncestorElement( element: ViewElement, domEventData: DomEventData<MouseEvent> ): void {
+ if ( element ) {
+ const mapper = this.editor.editing.mapper;
+ const viewElement = element.is( 'attributeElement' ) ?
+ element.findAncestor( element => !element.is( 'attributeElement' ) )! : element;
+ const modelElement = mapper.toModelElement( viewElement )!;
+
+ domEventData.preventDefault();
+
+ this.editor.model.change( writer => {
+ writer.setSelection( modelElement, 'in' );
+ } );
+ }
+ }
+
  /**
  * Handles {@link module:engine/view/document~Document#event:keydown keydown} events and changes
  * the model selection when:

packages/ckeditor5-widget/tests/widget-integration.js

@@ -249,6 +249,27 @@ describe( 'Widget - integration', () => {
  expect( getModelData( model ) ).to.equal( '<widget><nested>foo</nested><nested>[bar]</nested></widget>' );
  } );
 
+ it( 'should select entire paragraph when triple click', () => {
+ setModelData( model, '<paragraph>[]foo bar</paragraph>' );
+
+ const viewRoot = viewDocument.getRoot();
+ const paragraph = viewRoot.getChild( 0 );
+ const preventDefault = sinon.spy();
+ const domEventDataMock = new DomEventData( view, {
+ target: view.domConverter.mapViewToDom( paragraph ),
+ preventDefault,
+ detail: 3
+ } );
+
+ viewDocument.fire( 'mousedown', domEventDataMock );
+
+ sinon.assert.called( preventDefault );
+
+ expect( getViewData( view ) ).to.equal( '<p>{foo bar}</p>' );
+
+ expect( getModelData( model ) ).to.equal( '<paragraph>[foo bar]</paragraph>' );
+ } );
+
  it( 'should select the entire nested editable if quadra clicked', () => {
  setModelData( model, '[]<widget><nested>foo bar</nested></widget>' );