Merge pull request #9688 from ckeditor/ck/9325

Fix (list): Fixed a crash when spelling a word inside the list item. Closes #9325.

packages/ckeditor5-list/src/liststyleediting.js

@@ -212,6 +212,13 @@ function upcastListItemStyle() {
 	return dispatcher => {
 		dispatcher.on( 'element:li', ( evt, data, conversionApi ) => {
 			const listParent = data.viewItem.parent;
+
+			// It may happen that the native spell checker fixes a word inside a list item.
+			// When the children mutation is fired, the `<li>` does not have the parent element. See: #9325.
+			if ( !listParent ) {
+				return;
+			}
+
 			const listStyle = listParent.getStyle( 'list-style-type' ) || DEFAULT_LIST_TYPE;
 			const listItem = data.modelRange.start.nodeAfter || data.modelRange.end.nodeBefore;
 

packages/ckeditor5-list/tests/liststyleediting.js

@@ -17,6 +17,7 @@ import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils
 import ListStyleEditing from '../src/liststyleediting';
 import TodoListEditing from '../src/todolistediting';
 import ListStyleCommand from '../src/liststylecommand';
+import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor';
 
 describe( 'ListStyleEditing', () => {
 	let editor, model, view;
@@ -1622,5 +1623,58 @@ describe( 'ListStyleEditing', () => {
 				};
 			}
 		} );
+
+		describe( 'the FontColor feature', () => {
+			let editor, view, container;
+
+			beforeEach( () => {
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				return ClassicTestEditor
+					.create( container, {
+						plugins: [ Paragraph, ListStyleEditing, FontColor, Typing ]
+					} )
+					.then( newEditor => {
+						editor = newEditor;
+						view = editor.editing.view;
+					} );
+			} );
+
+			afterEach( () => {
+				container.remove();
+
+				return editor.destroy();
+			} );
+
+			describe( 'spellchecking integration', () => {
+				it( 'should not throw if a children mutation was fired over colorized text', () => {
+					editor.setData(
+						'<ul>' +
+							'<li><span style="color:hsl(30, 75%, 60%);">helllo</span></li>' +
+						'</ul>'
+					);
+
+					const viewRoot = view.document.getRoot();
+					const viewLi = viewRoot.getChild( 0 ).getChild( 0 );
+
+					// This should not throw. See #9325.
+					view.document.fire( 'mutations',
+						[
+							{
+								type: 'children',
+								oldChildren: [
+									viewLi.getChild( 0 )
+								],
+								newChildren: view.change( writer => [
+									writer.createContainerElement( 'font' )
+								] ),
+								node: viewLi
+							}
+						]
+					);
+				} );
+			} );
+		} );
 	} );
 } );