Merge pull request #1244 from ckeditor/t/ckeditor5/721

Fix: Fixed a bug where Firefox would throw an `NS_ERROR_FAILURE` error when moving selection from a nested editable to the root editable. Closes ckeditor/ckeditor5#721.

Author: Reinmar

src/view/renderer.js

@@ -628,6 +628,10 @@ export default class Renderer {
 		const anchor = this.domConverter.viewPositionToDom( this.selection.anchor );
 		const focus = this.domConverter.viewPositionToDom( this.selection.focus );
 
+		// Focus the new editing host.
+		// Otherwise, FF may throw an error (https://github.com/ckeditor/ckeditor5/issues/721).
+		domRoot.focus();
+
 		domSelection.collapse( anchor.parent, anchor.offset );
 		domSelection.extend( focus.parent, focus.offset );
 	}

tests/manual/tickets/ckeditor5-721/1.html

@@ -0,0 +1,9 @@
+<style>
+	.ck-widget {
+		border: solid 3px blue;
+	}
+</style>
+
+<div id="editor">
+	<p>This is an <strong>editor</strong> instance.</p>
+</div>

tests/manual/tickets/ckeditor5-721/1.js

@@ -0,0 +1,68 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console, window, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
+import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
+import Widget from '@ckeditor/ckeditor5-widget/src/widget';
+
+import AttributeContainer from '../../../../src/view/attributeelement';
+import ViewContainer from '../../../../src/view/containerelement';
+import { downcastElementToElement } from '../../../../src/conversion/downcast-converters';
+import { setData } from '../../../../src/dev-utils/model';
+import ViewEditable from '../../../../src/view/editableelement';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ Essentials, Paragraph, Bold, Widget ],
+		toolbar: [ 'undo', 'redo' ]
+	} )
+	.then( editor => {
+		window.editor = editor;
+
+		const model = editor.model;
+
+		model.schema.register( 'widget', {
+			inheritAllFrom: '$block',
+			isObject: true
+		} );
+
+		model.schema.extend( '$text', {
+			allowIn: 'nested'
+		} );
+
+		model.schema.register( 'nested', {
+			allowIn: 'widget',
+			isLimit: true
+		} );
+
+		editor.conversion.for( 'downcast' )
+			.add( downcastElementToElement( {
+				model: 'widget',
+				view: () => {
+					const b = new AttributeContainer( 'b' );
+					const div = new ViewContainer( 'div', null, b );
+
+					return toWidget( div, { label: 'element label' } );
+				}
+			} ) )
+			.add( downcastElementToElement( {
+				model: 'nested',
+				view: () => new ViewEditable( 'figcaption', { contenteditable: true } )
+			} ) );
+
+		setData( editor.model,
+			'<paragraph>foo[]</paragraph>' +
+			'<widget><nested>bar</nested></widget>' +
+			'<widget><nested>bom</nested></widget>'
+		);
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

tests/manual/tickets/ckeditor5-721/1.md

@@ -0,0 +1,16 @@
+## Renderer should handle nested editables [FF] <a href="https://github.com/ckeditor/ckeditor5/issues/721">ckeditor5#721</a>
+
+### TC1
+
+1. Put the caret in the first paragraph and type something.
+1. Put the caret inside the widget (in "bar").
+1. Click "Undo" or press <kbd>Ctrl</kbd>+<kbd>Z</kbd> (check both).
+
+**Expected**:
+
+No error in the console.
+
+### TC2
+
+Try the same TC as above but use both nested editables. See if the focus is correctly moved between them.
+