Merge pull request #82 from ckeditor/t/ckeditor5/1677

Internal: The triple-click fix for Safari introduced in ckeditor/ckeditor5#1463 should alter the model to work properly. Closes ckeditor/ckeditor5#1677.

src/widget.js

@@ -121,9 +121,12 @@ export default class Widget extends Plugin {
 			// For such event, we select the entire nested editable element.
 			// See: https://github.com/ckeditor/ckeditor5/issues/1463.
 			if ( env.isSafari && domEventData.domEvent.detail >= 3 ) {
-				this.editor.editing.view.change( writer => {
+				const mapper = editor.editing.mapper;
+				const modelElement = mapper.toModelElement( element );
+
+				this.editor.model.change( writer => {
 					domEventData.preventDefault();
-					writer.setSelection( element, 'in' );
+					writer.setSelection( modelElement, 'in' );
 				} );
 			}
 

tests/widget-integration.js

@@ -11,7 +11,10 @@ import Widget from '../src/widget';
 import DomEventData from '@ckeditor/ckeditor5-engine/src/view/observer/domeventdata';
 
 import { toWidget } from '../src/utils';
-import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+import {
+	setData as setModelData,
+	getData as getModelData
+} from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
 
 import env from '@ckeditor/ckeditor5-utils/src/env';
@@ -118,6 +121,8 @@ describe( 'Widget - integration', () => {
 		expect( getViewData( view ) ).to.equal(
 			'[]<div class="ck-widget" contenteditable="false"><figcaption contenteditable="true">foo bar</figcaption></div>'
 		);
+
+		expect( getModelData( model ) ).to.equal( '[]<widget><nested>foo bar</nested></widget>' );
 	} );
 
 	it( 'should select the entire nested editable if triple clicked', () => {
@@ -137,8 +142,9 @@ describe( 'Widget - integration', () => {
 		sinon.assert.called( preventDefault );
 
 		expect( getViewData( view ) ).to.equal(
-			'<div class="ck-widget" contenteditable="false"><figcaption contenteditable="true">[foo bar]</figcaption></div>'
+			'<div class="ck-widget" contenteditable="false"><figcaption contenteditable="true">{foo bar}</figcaption></div>'
 		);
+		expect( getModelData( model ) ).to.equal( '<widget><nested>[foo bar]</nested></widget>' );
 	} );
 
 	it( 'should select proper nested editable if triple clicked', () => {
@@ -160,9 +166,11 @@ describe( 'Widget - integration', () => {
 		expect( getViewData( view ) ).to.equal(
 			'<div class="ck-widget" contenteditable="false">' +
 				'<figcaption contenteditable="true">foo</figcaption>' +
-				'<figcaption contenteditable="true">[bar]</figcaption>' +
+				'<figcaption contenteditable="true">{bar}</figcaption>' +
 			'</div>'
 		);
+
+		expect( getModelData( model ) ).to.equal( '<widget><nested>foo</nested><nested>[bar]</nested></widget>' );
 	} );
 
 	it( 'should select the entire nested editable if quadra clicked', () => {
@@ -182,8 +190,10 @@ describe( 'Widget - integration', () => {
 		sinon.assert.called( preventDefault );
 
 		expect( getViewData( view ) ).to.equal(
-			'<div class="ck-widget" contenteditable="false"><figcaption contenteditable="true">[foo bar]</figcaption></div>'
+			'<div class="ck-widget" contenteditable="false"><figcaption contenteditable="true">{foo bar}</figcaption></div>'
 		);
+
+		expect( getModelData( model ) ).to.equal( '<widget><nested>[foo bar]</nested></widget>' );
 	} );
 
 	it( 'should select the inline widget if triple clicked', () => {
@@ -205,6 +215,8 @@ describe( 'Widget - integration', () => {
 		expect( getViewData( view ) ).to.equal(
 			'<p>Foo{<span class="ck-widget ck-widget_selected" contenteditable="false">foo bar</span>}Bar</p>'
 		);
+
+		expect( getModelData( model ) ).to.equal( '<paragraph>Foo[<inline-widget>foo bar</inline-widget>]Bar</paragraph>' );
 	} );
 
 	it( 'should does nothing for non-Safari browser', () => {
@@ -228,5 +240,7 @@ describe( 'Widget - integration', () => {
 		expect( getViewData( view ) ).to.equal(
 			'[]<div class="ck-widget" contenteditable="false"><figcaption contenteditable="true">foo bar</figcaption></div>'
 		);
+
+		expect( getModelData( model ) ).to.equal( '[]<widget><nested>foo bar</nested></widget>' );
 	} );
 } );