Moved helpers from todolistutils to todolistconverters.

src/todolistconverters.js

@@ -7,7 +7,8 @@
  * @module list/todolistconverters
  */
 
-import { addTodoElementsToListItem, createCheckMarkElement, removeTodoElementsFromListItem } from './todolistutils';
+/* global document */
+
 import { generateLiInUl, injectViewList } from './utils';
 
 /**
@@ -189,6 +190,52 @@ export function modelViewChangeChecked( model ) {
 	};
 }
 
+function addTodoElementsToListItem( viewWriter, viewItem, modelItem, model ) {
+	const isChecked = !!modelItem.getAttribute( 'listChecked' );
+
+	viewWriter.addClass( 'todo-list', viewItem.parent );
+
+	viewWriter.insert(
+		viewWriter.createPositionAt( viewItem, 0 ),
+		createCheckMarkElement( isChecked, viewWriter, isChecked => {
+			model.change( writer => writer.setAttribute( 'listChecked', isChecked, modelItem ) );
+		} )
+	);
+}
+
+function removeTodoElementsFromListItem( viewWriter, viewItem, modelItem, model ) {
+	viewWriter.removeClass( 'todo-list', viewItem.parent );
+	viewWriter.remove( viewItem.getChild( 0 ) );
+	model.change( writer => writer.removeAttribute( 'listChecked', modelItem ) );
+}
+
+function createCheckMarkElement( isChecked, viewWriter, onChange ) {
+	const uiElement = viewWriter.createUIElement(
+		'label',
+		{
+			class: 'todo-list__checkmark',
+			contenteditable: false
+		},
+		function( domDocument ) {
+			const domElement = this.toDomElement( domDocument );
+			const checkbox = document.createElement( 'input' );
+
+			checkbox.type = 'checkbox';
+			checkbox.checked = isChecked;
+			checkbox.addEventListener( 'change', evt => onChange( evt.target.checked ) );
+			domElement.appendChild( checkbox );
+
+			return domElement;
+		}
+	);
+
+	if ( isChecked ) {
+		viewWriter.addClass( 'todo-list__checkmark_checked', uiElement );
+	}
+
+	return uiElement;
+}
+
 function findCheckmarkElement( viewWriter, parent ) {
 	for ( const item of viewWriter.createRangeIn( parent ).getItems() ) {
 		if ( item.is( 'uiElement' ) && item.hasClass( 'todo-list__checkmark' ) ) {

src/todolistediting.js

@@ -14,8 +14,8 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 
 import {
 	modelViewInsertion,
-	dataModelViewInsertion,
 	modelViewTextInsertion,
+	dataModelViewInsertion,
 	dataModelViewTextInsertion,
 	modelViewChangeChecked,
 	modelViewChangeType
@@ -51,6 +51,7 @@ export default class TodoListEditing extends Plugin {
 		data.downcastDispatcher.on( 'insert:$text', dataModelViewTextInsertion, { priority: 'high' } );
 
 		editing.downcastDispatcher.on( 'attribute:listType:listItem', modelViewChangeType( editor.model ) );
+
 		editing.downcastDispatcher.on( 'attribute:listChecked:listItem', modelViewChangeChecked( editor.model ) );
 
 		// Register command for todo list.
@@ -172,7 +173,7 @@ function moveSelectionAfterCheckmark( writer, selection ) {
 // @private
 // @param {module:engine/view/uielement~UIElement} element
 function getListItemAncestor( element ) {
-	for ( const parent of element.getAncestors() ) {
+	for ( const parent of element.getAncestors( { parentFirst: true } ) ) {
 		if ( parent.name == 'li' ) {
 			return parent;
 		}