Browse Source

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

Aleksander Nowodzinski 6 years ago
parent
commit
1ca56b80d5

+ 5 - 2
packages/ckeditor5-widget/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' );
 				} );
 			}
 

+ 17 - 4
packages/ckeditor5-widget/tests/widget-integration.js

@@ -11,7 +11,9 @@ 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 +120,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 +141,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 +165,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 +189,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 +214,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 +239,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>' );
 	} );
 } );