瀏覽代碼

Merge branch 'master' into t/115

Maciej Gołaszewski 6 年之前
父節點
當前提交
37b93d7741

+ 19 - 3
packages/ckeditor5-list/CHANGELOG.md

@@ -1,6 +1,22 @@
 Changelog
 =========
 
+## [12.1.0](https://github.com/ckeditor/ckeditor5-list/compare/v12.0.4...v12.1.0) (2019-08-26)
+
+### Features
+
+* Introduced to-do lists. Closes [ckeditor/ckeditor5#1434](https://github.com/ckeditor/ckeditor5/issues/1434). ([56a7a7a](https://github.com/ckeditor/ckeditor5-list/commit/56a7a7a))
+
+### Bug fixes
+
+* The UI buttons should be marked as toggleable for better assistive technologies support (see [ckeditor/ckeditor5#1403](https://github.com/ckeditor/ckeditor5/issues/1403)). ([bb12325](https://github.com/ckeditor/ckeditor5-list/commit/bb12325))
+
+### Other changes
+
+* The issue tracker for this package was moved to https://github.com/ckeditor/ckeditor5/issues. See [ckeditor/ckeditor5#1988](https://github.com/ckeditor/ckeditor5/issues/1988). ([5507ac6](https://github.com/ckeditor/ckeditor5-list/commit/5507ac6))
+* Updated translations. ([10e296d](https://github.com/ckeditor/ckeditor5-list/commit/10e296d))
+
+
 ## [12.0.4](https://github.com/ckeditor/ckeditor5-list/compare/v12.0.3...v12.0.4) (2019-07-10)
 
 Internal changes only (updated dependencies, documentation, etc.).
@@ -13,21 +29,21 @@ Internal changes only (updated dependencies, documentation, etc.).
 * Attach `'indentList'` and `'outdentList'` commands to `'indent'` and `'outdent'` commands. ([3a67531](https://github.com/ckeditor/ckeditor5-list/commit/3a67531))
 
   The `@ckeditor/ckeditor5-indent` feature introduces the "indent" and "outdent" buttons which can be used to manipulate lists and other blocks.
-* Updated translations. ([6c4b520](https://github.com/ckeditor/ckeditor5-list/commit/6c4b520)) 
+* Updated translations. ([6c4b520](https://github.com/ckeditor/ckeditor5-list/commit/6c4b520))
 
 
 ## [12.0.2](https://github.com/ckeditor/ckeditor5-list/compare/v12.0.1...v12.0.2) (2019-06-05)
 
 ### Other changes
 
-* Updated translations. ([b7f3abc](https://github.com/ckeditor/ckeditor5-list/commit/b7f3abc)) 
+* Updated translations. ([b7f3abc](https://github.com/ckeditor/ckeditor5-list/commit/b7f3abc))
 
 
 ## [12.0.1](https://github.com/ckeditor/ckeditor5-list/compare/v12.0.0...v12.0.1) (2019-04-10)
 
 ### Other changes
 
-* Updated translations. ([d595449](https://github.com/ckeditor/ckeditor5-list/commit/d595449)) 
+* Updated translations. ([d595449](https://github.com/ckeditor/ckeditor5-list/commit/d595449))
 
 
 ## [12.0.0](https://github.com/ckeditor/ckeditor5-list/compare/v11.0.3...v12.0.0) (2019-02-28)

+ 3 - 3
packages/ckeditor5-list/docs/_snippets/features/todo-list.js

@@ -9,9 +9,9 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
 
 import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
 
-// import TodoList from '@ckeditor/ckeditor5-list/src/todolist';
+import TodoList from '@ckeditor/ckeditor5-list/src/todolist';
 
-// ClassicEditor.builtinPlugins.push( TodoList );
+ClassicEditor.builtinPlugins.push( TodoList );
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-todo-list' ), {
@@ -22,7 +22,7 @@ ClassicEditor
 				'|',
 				'bulletedList',
 				'numberedList',
-				// 'todoList',
+				'todoList',
 				'|',
 				'link',
 				'insertTable',

+ 3 - 3
packages/ckeditor5-list/docs/features/todo-lists.md

@@ -4,7 +4,7 @@ category: features
 
 # To-do lists
 
-The to-do list feature lets you create a list of interactive checkboxes with labels. It supports all features of regular lists so you can nest a to-do list together with bulleted and numbered lists in any combination.
+The {@link module:list/todolist~TodoList to-do list} feature lets you create a list of interactive checkboxes with labels. It supports all features of regular lists so you can nest a to-do list together with bulleted and numbered lists in any combination.
 
 ## Demo
 
@@ -12,7 +12,7 @@ The to-do list feature lets you create a list of interactive checkboxes with lab
 
 ## Keyboard support
 
-You can check and uncheck a list item by using the <kbd>Ctrl</kbd> + <kbd>Space</kbd> (or <kbd>⌘</kbd> + <kbd>Space</kbd> if you are using macOS) shortcut when the selection is in that item.
+You can check and uncheck a list item by using the <kbd>Ctrl</kbd> + <kbd>Space</kbd> shortcut when the selection is in that item.
 
 ## Installation
 
@@ -78,7 +78,7 @@ For nested lists:
 
 ### Model representation
 
-From the technical point of view, to-do lists are built on top of the list feature. In the CKEditor 5 data model they are represented as a special `listType`, with an optional `todoListChecked` attribute:
+From the technical point of view, to-do lists are built on top of the {@link module:list/list~List list feature}. In the CKEditor 5 data model they are represented as a special `listType`, with an optional `todoListChecked` attribute:
 
 ```html
 <listItem listType="todo">Foo</listItem>

+ 3 - 2
packages/ckeditor5-list/lang/contexts.json

@@ -1,4 +1,5 @@
 {
 	"Numbered List": "Toolbar button tooltip for the Numbered List feature.",
-	"Bulleted List": "Toolbar button tooltip for the Bulleted List feature."
-}
+	"Bulleted List": "Toolbar button tooltip for the Bulleted List feature.",
+	"To-do List": "Toolbar button tooltip for the To-do List feature."
+}

+ 25 - 0
packages/ckeditor5-list/lang/translations/en-gb.po

@@ -0,0 +1,25 @@
+# Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+#
+#                                     !!! IMPORTANT !!!
+#
+#         Before you edit this file, please keep in mind that contributing to the project
+#                translations is possible ONLY via the Transifex online service.
+#
+#         To submit your translations, visit https://www.transifex.com/ckeditor/ckeditor5.
+#
+#                   To learn more, check out the official contributor's guide:
+#     https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html
+#
+msgid ""
+msgstr ""
+"Language-Team: English (United Kingdom) (https://www.transifex.com/ckeditor/teams/11143/en_GB/)\n"
+"Language: en_GB\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgctxt "Toolbar button tooltip for the Numbered List feature."
+msgid "Numbered List"
+msgstr "Numbered List"
+
+msgctxt "Toolbar button tooltip for the Bulleted List feature."
+msgid "Bulleted List"
+msgstr "Bulleted List"

+ 19 - 19
packages/ckeditor5-list/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-list",
-  "version": "12.0.4",
+  "version": "12.1.0",
   "description": "Ordered and unordered lists feature to CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -10,25 +10,25 @@
     "ckeditor5-plugin"
   ],
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^12.2.1",
-    "@ckeditor/ckeditor5-engine": "^13.2.1",
-    "@ckeditor/ckeditor5-paragraph": "^11.0.4",
-    "@ckeditor/ckeditor5-ui": "^13.0.2",
-    "@ckeditor/ckeditor5-utils": "^13.0.1"
+    "@ckeditor/ckeditor5-core": "^12.3.0",
+    "@ckeditor/ckeditor5-engine": "^14.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^11.0.5",
+    "@ckeditor/ckeditor5-ui": "^14.0.0",
+    "@ckeditor/ckeditor5-utils": "^14.0.0"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^11.1.3",
-    "@ckeditor/ckeditor5-block-quote": "^11.1.2",
-    "@ckeditor/ckeditor5-clipboard": "^12.0.1",
-    "@ckeditor/ckeditor5-editor-classic": "^12.1.3",
-    "@ckeditor/ckeditor5-enter": "^11.0.4",
-    "@ckeditor/ckeditor5-heading": "^11.0.4",
-    "@ckeditor/ckeditor5-highlight": "^11.0.4",
-    "@ckeditor/ckeditor5-indent": "^10.0.1",
-    "@ckeditor/ckeditor5-link": "^11.1.1",
-    "@ckeditor/ckeditor5-table": "^13.0.2",
-    "@ckeditor/ckeditor5-typing": "^12.1.1",
-    "@ckeditor/ckeditor5-undo": "^11.0.4",
+    "@ckeditor/ckeditor5-basic-styles": "^11.1.4",
+    "@ckeditor/ckeditor5-block-quote": "^11.1.3",
+    "@ckeditor/ckeditor5-clipboard": "^12.0.2",
+    "@ckeditor/ckeditor5-editor-classic": "^12.1.4",
+    "@ckeditor/ckeditor5-enter": "^11.1.0",
+    "@ckeditor/ckeditor5-heading": "^11.0.5",
+    "@ckeditor/ckeditor5-highlight": "^11.0.5",
+    "@ckeditor/ckeditor5-indent": "^10.1.0",
+    "@ckeditor/ckeditor5-link": "^11.1.2",
+    "@ckeditor/ckeditor5-table": "^14.0.0",
+    "@ckeditor/ckeditor5-typing": "^12.2.0",
+    "@ckeditor/ckeditor5-undo": "^11.0.5",
     "eslint": "^5.5.0",
     "eslint-config-ckeditor5": "^2.0.0",
     "husky": "^1.3.1",
@@ -41,7 +41,7 @@
   "author": "CKSource (http://cksource.com/)",
   "license": "GPL-2.0-or-later",
   "homepage": "https://ckeditor.com/ckeditor-5",
-  "bugs": "https://github.com/ckeditor/ckeditor5-list/issues",
+  "bugs": "https://github.com/ckeditor/ckeditor5/issues",
   "repository": {
     "type": "git",
     "url": "https://github.com/ckeditor/ckeditor5-list.git"

+ 3 - 3
packages/ckeditor5-list/src/converters.js

@@ -95,8 +95,8 @@ export function modelViewRemove( model ) {
  * A model-to-view converter for the `type` attribute change on the `listItem` model element.
  *
  * This change means that the `<li>` element parent changes from `<ul>` to `<ol>` (or vice versa). This is accomplished
- * by breaking view elements and changing their name. Next {@link module:list/converters~modelViewMergeAfterChangeType}
- * converter will try to merge split nodes.
+ * by breaking view elements and changing their name. The next {@link module:list/converters~modelViewMergeAfterChangeType}
+ * converter will attempt to merge split nodes.
  *
  * Splitting this conversion into 2 steps makes it possible to add an additional conversion in the middle.
  * Check {@link module:list/todolistconverters~modelViewChangeType} to see an example of it.
@@ -128,7 +128,7 @@ export function modelViewChangeType( evt, data, conversionApi ) {
 }
 
 /**
- * A model-to-view converter that try to merge nodes split by {@link module:list/converters~modelViewChangeType}.
+ * A model-to-view converter that attempts to merge nodes split by {@link module:list/converters~modelViewChangeType}.
  *
  * @see module:engine/conversion/downcastdispatcher~DowncastDispatcher#event:attribute
  * @param {module:utils/eventinfo~EventInfo} evt An object containing information about the fired event.

+ 4 - 4
packages/ckeditor5-list/src/todolist.js

@@ -13,14 +13,14 @@ import TodoListUI from './todolistui';
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 
 /**
- * The todo list feature.
+ * The to-do list feature.
  *
- * This is a "glue" plugin which loads the {@link module:list/todolistediting~TodoListEditing todo list editing feature}
- * and {@link module:list/todolistui~TodoListUI list UI feature}.
+ * This is a "glue" plugin that loads the {@link module:list/todolistediting~TodoListEditing to-do list editing feature}
+ * and the {@link module:list/todolistui~TodoListUI to-do list UI feature}.
  *
  * @extends module:core/plugin~Plugin
  */
-export default class List extends Plugin {
+export default class TodoList extends Plugin {
 	/**
 	 * @inheritDoc
 	 */

+ 17 - 10
packages/ckeditor5-list/src/todolistcheckcommand.js

@@ -22,8 +22,8 @@ export default class TodoListCheckCommand extends Command {
 		super( editor );
 
 		/**
-		 * Flag indicating whether the command is active. The command is active when at least one of
-		 * {@link module:engine/model/selection~Selection selected} elements is a todo list item.
+		 * A flag indicating whether the command is active. The command is active when at least one of
+		 * {@link module:engine/model/selection~Selection selected} elements is a to-do list item.
 		 *
 		 * @observable
 		 * @readonly
@@ -31,7 +31,7 @@ export default class TodoListCheckCommand extends Command {
 		 */
 
 		/**
-		 * A List of todo list item selected by the {@link module:engine/model/selection~Selection}.
+		 * A list of to-do list items selected by the {@link module:engine/model/selection~Selection}.
 		 *
 		 * @observable
 		 * @readonly
@@ -39,10 +39,10 @@ export default class TodoListCheckCommand extends Command {
 		 */
 
 		/**
-		 * List of todo list items selected by the {@link module:engine/model/selection~Selection}.
+		 * A list of to-do list items selected by the {@link module:engine/model/selection~Selection}.
 		 *
+		 * @protected
 		 * @type {Array.<module:engine/model/element~Element>}
-		 * @private
 		 */
 		this._selectedElements = [];
 
@@ -54,7 +54,7 @@ export default class TodoListCheckCommand extends Command {
 	}
 
 	/**
-	 * Updates the command's {@link #value} and {@link #isEnabled} based on the current selection.
+	 * Updates the command's {@link #value} and {@link #isEnabled} properties based on the current selection.
 	 */
 	refresh() {
 		this._selectedElements = this._getSelectedItems();
@@ -63,7 +63,7 @@ export default class TodoListCheckCommand extends Command {
 	}
 
 	/**
-	 * Gets all todo list items selected by the {@link module:engine/model/selection~Selection}.
+	 * Gets all to-do list items selected by the {@link module:engine/model/selection~Selection}.
 	 *
 	 * @private
 	 * @returns {Array.<module:engine/model/element~Element>}
@@ -90,12 +90,19 @@ export default class TodoListCheckCommand extends Command {
 	}
 
 	/**
-	 * @inheritDoc
+	 * Executes the command.
+	 *
+	 * @param {Object} [options]
+	 * @param {Boolean} [options.forceValue] If set, it will force the command behavior. If `true`, the command will apply
+	 * the attribute. Otherwise, the command will remove the attribute. If not set, the command will look for its current
+	 * value to decide what it should do.
 	 */
-	execute() {
+	execute( options = {} ) {
 		this.editor.model.change( writer => {
 			for ( const element of this._selectedElements ) {
-				if ( !this.value ) {
+				const value = ( options.forceValue === undefined ) ? !this.value : options.forceValue;
+
+				if ( value ) {
 					writer.setAttribute( attributeKey, true, element );
 				} else {
 					writer.removeAttribute( attributeKey, element );

+ 24 - 22
packages/ckeditor5-list/src/todolistconverters.js

@@ -13,9 +13,9 @@ import { generateLiInUl, injectViewList, findInRange } from './utils';
 import createElement from '@ckeditor/ckeditor5-utils/src/dom/createelement';
 
 /**
- * A model-to-view converter for `listItem` model element insertion.
+ * A model-to-view converter for the `listItem` model element insertion.
  *
- * It converts `listItem` model element to an unordered list with {@link module:engine/view/uielement~UIElement checkbox element}
+ * It converts the `listItem` model element to an unordered list with a {@link module:engine/view/uielement~UIElement checkbox element}
  * at the beginning of each list item. It also merges the list with surrounding lists (if available).
  *
  * It is used by {@link module:engine/controller/editingcontroller~EditingController}.
@@ -60,7 +60,7 @@ export function modelViewInsertion( model, onCheckboxChecked ) {
 }
 
 /**
- * A model-to-view converter for model `$text` element inside a todo list item.
+ * A model-to-view converter for the model `$text` element inside a to-do list item.
  *
  * It takes care of creating text after the {@link module:engine/view/uielement~UIElement checkbox UI element}.
  *
@@ -95,7 +95,7 @@ export function modelViewTextInsertion( evt, data, conversionApi ) {
 }
 
 /**
- * A model-to-view converter for `listItem` model element insertion.
+ * A model-to-view converter for the `listItem` model element insertion.
  *
  * It is used by {@link module:engine/controller/datacontroller~DataController}.
  *
@@ -128,15 +128,16 @@ export function dataModelViewInsertion( model ) {
 
 		viewWriter.addClass( 'todo-list', viewItem.parent );
 
-		const label = viewWriter.createAttributeElement( 'label' );
+		const label = viewWriter.createAttributeElement( 'label', { class: 'todo-list__label' } );
 		const checkbox = viewWriter.createEmptyElement( 'input', {
 			type: 'checkbox',
 			disabled: 'disabled',
-			class: 'todo-list__checkmark'
+			class: 'todo-list__label__checkmark'
 		} );
 
 		if ( data.item.getAttribute( 'todoListChecked' ) ) {
 			viewWriter.setAttribute( 'checked', 'checked', checkbox );
+			viewWriter.addClass( 'todo-list__label_checked', label );
 		}
 
 		viewWriter.insert( viewWriter.createPositionAt( viewItem, 0 ), checkbox );
@@ -147,7 +148,7 @@ export function dataModelViewInsertion( model ) {
 }
 
 /**
- * A model-to-view converter for model `$text` element inside a todo list item.
+ * A model-to-view converter for the model `$text` element inside a to-do list item.
  *
  * It is used by {@link module:engine/controller/datacontroller~DataController}.
  *
@@ -170,8 +171,9 @@ export function dataModelViewTextInsertion( evt, data, conversionApi ) {
 	const viewWriter = conversionApi.writer;
 	const viewPosition = conversionApi.mapper.toViewPosition( data.range.start );
 	const viewText = viewWriter.createText( data.item.data );
-	const span = viewWriter.createAttributeElement( 'span', { class: 'todo-list__label' } );
-	const label = viewWriter.createAttributeElement( 'label' );
+
+	const span = viewWriter.createAttributeElement( 'span', { class: 'todo-list__label__description' } );
+	const label = viewPosition.parent.getChild( 0 );
 
 	viewWriter.insert( viewWriter.createPositionAt( viewPosition.parent, 'end' ), viewText );
 	viewWriter.wrap( viewWriter.createRangeOn( viewText ), span );
@@ -179,16 +181,16 @@ export function dataModelViewTextInsertion( evt, data, conversionApi ) {
 }
 
 /**
- * A view-to-model converter for checkbox element inside a view list item.
+ * A view-to-model converter for the checkbox element inside a view list item.
  *
- * It changes `listType` of model `listItem` to a `todo` value.
- * When view checkbox is marked as checked the additional `todoListChecked="true"` attribute is added to model item.
+ * It changes the `listType` of the model `listItem` to a `todo` value.
+ * When a view checkbox element is marked as checked, an additional `todoListChecked="true"` attribute is added to the model item.
  *
  * It is used by {@link module:engine/controller/datacontroller~DataController}.
  *
  * @see module:engine/conversion/upcastdispatcher~UpcastDispatcher#event:element
  * @param {module:utils/eventinfo~EventInfo} evt An object containing information about the fired event.
- * @param {Object} data An object containing conversion input and a placeholder for conversion output and possibly other values.
+ * @param {Object} data An object containing conversion input, a placeholder for conversion output and possibly other values.
  * @param {module:engine/conversion/upcastdispatcher~UpcastConversionApi} conversionApi Conversion interface to be used by the callback.
  */
 export function dataViewModelCheckmarkInsertion( evt, data, conversionApi ) {
@@ -208,7 +210,7 @@ export function dataViewModelCheckmarkInsertion( evt, data, conversionApi ) {
 
 	writer.setAttribute( 'listType', 'todo', modelItem );
 
-	if ( data.viewItem.getAttribute( 'checked' ) == 'checked' ) {
+	if ( data.viewItem.hasAttribute( 'checked' ) ) {
 		writer.setAttribute( 'todoListChecked', true, modelItem );
 	}
 
@@ -216,9 +218,9 @@ export function dataViewModelCheckmarkInsertion( evt, data, conversionApi ) {
 }
 
 /**
- * A model-to-view converter for `listType` attribute change on `listItem` model element.
+ * A model-to-view converter for the `listType` attribute change on the `listItem` model element.
  *
- * This change means that `<li>` elements parent changes to `<ul class="todo-list">` and
+ * This change means that the `<li>` element parent changes to `<ul class="todo-list">` and a
  * {@link module:engine/view/uielement~UIElement checkbox UI element} is added at the beginning
  * of the list item element (or vice versa).
  *
@@ -228,7 +230,7 @@ export function dataViewModelCheckmarkInsertion( evt, data, conversionApi ) {
  * It is used by {@link module:engine/controller/editingcontroller~EditingController}.
  *
  * @see module:engine/conversion/downcastdispatcher~DowncastDispatcher#event:attribute
- * @param {Function} onCheckedChange Callback fired after clicking on checkmark element.
+ * @param {Function} onCheckedChange Callback fired after clicking the checkbox UI element.
  * @returns {Function} Returns a conversion callback.
  */
 export function modelViewChangeType( onCheckedChange ) {
@@ -250,19 +252,19 @@ export function modelViewChangeType( onCheckedChange ) {
 }
 
 /**
- * A model-to-view converter for `todoListChecked` attribute change on `listItem` model element.
+ * A model-to-view converter for the `todoListChecked` attribute change on the `listItem` model element.
  *
- * It marks {@link module:engine/view/uielement~UIElement checkbox UI element} as checked.
+ * It marks the {@link module:engine/view/uielement~UIElement checkbox UI element} as checked.
  *
  * It is used by {@link module:engine/controller/editingcontroller~EditingController}.
  *
  * @see module:engine/conversion/downcastdispatcher~DowncastDispatcher#event:attribute
- * @param {Function} onCheckedChange Callback fired after clicking on checkmark element.
+ * @param {Function} onCheckedChange Callback fired after clicking the checkbox UI element.
  * @returns {Function} Returns a conversion callback.
  */
 export function modelViewChangeChecked( onCheckedChange ) {
 	return ( evt, data, conversionApi ) => {
-		// Do not convert `todoListChecked` attribute when todo list item has changed to other list item.
+		// Do not convert `todoListChecked` attribute when to-do list item has changed to other list item.
 		// This attribute will be removed by the model post fixer.
 		if ( data.item.getAttribute( 'listType' ) != 'todo' ) {
 			return;
@@ -284,7 +286,7 @@ export function modelViewChangeChecked( onCheckedChange ) {
 	};
 }
 
-// Creates checkbox UI element.
+// Creates a checkbox UI element.
 //
 // @private
 // @param {module:engine/model/item~Item} modelItem

+ 19 - 19
packages/ckeditor5-list/src/todolistediting.js

@@ -26,10 +26,10 @@ import {
 import { findInRange } from './utils';
 
 /**
- * The engine of the todo list feature. It handles creating, editing and removing todo lists and its items.
+ * The engine of the to-do list feature. It handles creating, editing and removing to-do lists and their items.
  *
- * It registers all functionalities of {@link module:list/listediting~ListEditing list editing plugin} and extends
- * it by `'todoList'` command.
+ * It registers the entire functionality of the {@link module:list/listediting~ListEditing list editing plugin} and extends
+ * it with the `'todoList'` command.
  *
  * @extends module:core/plugin~Plugin
  */
@@ -54,7 +54,7 @@ export default class TodoListEditing extends Plugin {
 			allowAttributes: [ 'todoListChecked' ]
 		} );
 
-		// Disallow todoListChecked attribute on other nodes than listItem with todo listType.
+		// Disallow todoListChecked attribute on other nodes than listItem with to-do listType.
 		model.schema.addAttributeCheck( ( context, attributeName ) => {
 			const item = context.last;
 
@@ -88,7 +88,7 @@ export default class TodoListEditing extends Plugin {
 
 		data.upcastDispatcher.on( 'element:input', dataViewModelCheckmarkInsertion, { priority: 'high' } );
 
-		// Collect all view nodes that have changed and use it to check if checkmark UI element is going to
+		// Collect all view nodes that have changed and use it to check if the checkbox UI element is going to
 		// be re-rendered. If yes than view post-fixer should verify view structure.
 		const changedViewNodes = new Set();
 
@@ -99,7 +99,7 @@ export default class TodoListEditing extends Plugin {
 			viewRoot.on( 'change:children', ( evt, node ) => changedViewNodes.add( node ) );
 		}
 
-		// Move all uiElements after a checkmark element.
+		// Move all uiElements after a checkbox element.
 		viewDocument.registerPostFixer( writer => {
 			const changedCheckmarkElements = getChangedCheckmarkElements( writer, changedViewNodes );
 
@@ -108,7 +108,7 @@ export default class TodoListEditing extends Plugin {
 			return moveUIElementsAfterCheckmark( writer, changedCheckmarkElements );
 		} );
 
-		// Move selection after a checkmark element.
+		// Move selection after a checkbox element.
 		viewDocument.registerPostFixer( writer => moveSelectionAfterCheckmark( writer, viewDocument.selection ) );
 
 		// Jump at the end of the previous node on left arrow key press, when selection is after the checkbox.
@@ -122,10 +122,10 @@ export default class TodoListEditing extends Plugin {
 		// <ul><li><checkbox/>Bar</li></ul>
 		editor.keystrokes.set( 'arrowleft', ( evt, stop ) => jumpOverCheckmarkOnLeftArrowKeyPress( stop, model ) );
 
-		// Toggle check state of selected todo list items on keystroke.
+		// Toggle check state of selected to-do list items on keystroke.
 		editor.keystrokes.set( 'Ctrl+space', () => editor.execute( 'todoListCheck' ) );
 
-		// Remove `todoListChecked` attribute when a host element is no longer a todo list item.
+		// Remove `todoListChecked` attribute when a host element is no longer a to-do list item.
 		const listItemsToFix = new Set();
 
 		this.listenTo( model, 'applyOperation', ( evt, args ) => {
@@ -161,11 +161,11 @@ export default class TodoListEditing extends Plugin {
 	}
 
 	/**
-	 * Handles checkmark element change, moves selection to the corresponding model item to makes it possible
-	 * to toggle `todoListChecked` attribute using command and restore the selection position.
+	 * Handles the checkbox element change, moves the selection to the corresponding model item to make it possible
+	 * to toggle the `todoListChecked` attribute using the command, and restores the selection position.
 	 *
-	 * Some say it's a hack :) Moving selection only for executing the command on a certain node and restoring it after,
-	 * it's not a clear solution. We need to design an API for using commands beyond the selection range.
+	 * Some say it's a hack :) Moving the selection only for executing the command on a certain node and restoring it after,
+	 * is not a clear solution. We need to design an API for using commands beyond the selection range.
 	 * See https://github.com/ckeditor/ckeditor5/issues/1954.
 	 *
 	 * @private
@@ -184,7 +184,7 @@ export default class TodoListEditing extends Plugin {
 	}
 }
 
-// Moves all uiElements in the todo list item after the checkmark element.
+// Moves all UI elements in the to-do list item after the checkbox element.
 //
 // @private
 // @param {module:engine/view/downcastwriter~DowncastWriter} writer
@@ -215,7 +215,7 @@ function moveUIElementsAfterCheckmark( writer, uiElements ) {
 	return hasChanged;
 }
 
-// Moves selection in the todo list item after the checkmark element.
+// Moves the selection in the to-do list item after the checkbox element.
 //
 // @private
 // @param {module:engine/view/downcastwriter~DowncastWriter} writer
@@ -249,8 +249,8 @@ function moveSelectionAfterCheckmark( writer, selection ) {
 	return false;
 }
 
-// Handles left arrow key and move selection at the end of the previous block element if the selection is just after
-// the checkmark element. In other words, it jumps over the checkmark element when moving the selection to the left.
+// Handles the left arrow key and moves the selection at the end of the previous block element if the selection is just after
+// the checkbox element. In other words, it jumps over the checkbox element when moving the selection to the left.
 //
 // @private
 // @param {Function} stopKeyEvent
@@ -276,7 +276,7 @@ function jumpOverCheckmarkOnLeftArrowKeyPress( stopKeyEvent, model ) {
 	}
 }
 
-// Gets list of all checkmark elements that are going to be rendered.
+// Gets the list of all checkbox elements that are going to be rendered.
 //
 // @private
 // @param {module:engine/view/view~View>} editingView
@@ -296,7 +296,7 @@ function getChangedCheckmarkElements( editingView, changedViewNodes ) {
 	return elements;
 }
 
-// Returns list item ancestor of given element.
+// Returns the list item ancestor of a given element.
 //
 // @private
 // @param {module:engine/view/item~Item} item

+ 3 - 3
packages/ckeditor5-list/src/todolistui.js

@@ -15,8 +15,8 @@ import '../theme/list.css';
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 
 /**
- * The todo list UI feature. It introduces the `'todoList'` button that
- * allow to convert elements to and from list items and indent or outdent them.
+ * The to-do list UI feature. It introduces the `'todoList'` button that
+ * allows to convert elements to and from to-do list items and to indent or outdent them.
  *
  * @extends module:core/plugin~Plugin
  */
@@ -27,6 +27,6 @@ export default class TodoListUI extends Plugin {
 	init() {
 		const t = this.editor.t;
 
-		createUIComponent( this.editor, 'todoList', t( 'Todo List' ), todoListIcon );
+		createUIComponent( this.editor, 'todoList', t( 'To-do List' ), todoListIcon );
 	}
 }

+ 34 - 34
packages/ckeditor5-list/src/utils.js

@@ -25,9 +25,9 @@ export function createViewListItemElement( writer ) {
 }
 
 /**
- * Helper function that creates a `<ul><li></li></ul>` or (`<ol>`) structure out of given `modelItem` model `listItem` element.
- * Then, it binds created view list item (<li>) with model `listItem` element.
- * The function then returns created view list item (<li>).
+ * Helper function that creates a `<ul><li></li></ul>` or (`<ol>`) structure out of the given `modelItem` model `listItem` element.
+ * Then, it binds the created view list item (<li>) with the model `listItem` element.
+ * The function then returns the created view list item (<li>).
  *
  * @param {module:engine/model/item~Item} modelItem Model list item.
  * @param {module:engine/conversion/upcastdispatcher~UpcastConversionApi} conversionApi Conversion interface.
@@ -49,9 +49,9 @@ export function generateLiInUl( modelItem, conversionApi ) {
 }
 
 /**
- * Helper function that takes model list item element `modelItem`, corresponding view list item element `injectedItem`
- * that is not added to the view and is inside a view list element (`ul` or `ol`) and is that's list only child.
- * The list is inserted at correct position (element breaking may be needed) and then merged with it's siblings.
+ * Helper function that inserts a view list at a correct place and merges it with its siblings.
+ * It takes a model list item element (`modelItem`) and a corresponding view list item element (`injectedItem`). The view list item
+ * should be in a view list element (`<ul>` or `<ol>`) and should be its only child.
  * See comments below to better understand the algorithm.
  *
  * @param {module:engine/view/item~Item} modelItem Model list item.
@@ -64,12 +64,12 @@ export function injectViewList( modelItem, injectedItem, conversionApi, model )
 	const mapper = conversionApi.mapper;
 	const viewWriter = conversionApi.writer;
 
-	// Position where view list will be inserted.
+	// The position where the view list will be inserted.
 	let insertPosition = mapper.toViewPosition( model.createPositionBefore( modelItem ) );
 
-	// 1. Find previous list item that has same or smaller indent. Basically we are looking for a first model item
-	// that is "parent" or "sibling" of injected model item.
-	// If there is no such list item, it means that injected list item is the first item in "its list".
+	// 1. Find the previous list item that has the same or smaller indent. Basically we are looking for the first model item
+	// that is a "parent" or "sibling" of the injected model item.
+	// If there is no such list item, it means that the injected list item is the first item in "its list".
 	const refItem = getSiblingListItem( modelItem.previousSibling, {
 		sameIndent: true,
 		smallerIndent: true,
@@ -78,19 +78,19 @@ export function injectViewList( modelItem, injectedItem, conversionApi, model )
 	const prevItem = modelItem.previousSibling;
 
 	if ( refItem && refItem.getAttribute( 'listIndent' ) == modelItem.getAttribute( 'listIndent' ) ) {
-		// There is a list item with same indent - we found same-level sibling.
-		// Break the list after it. Inserted view item will be inserted in the broken space.
+		// There is a list item with the same indent - we found the same-level sibling.
+		// Break the list after it. The inserted view item will be added in the broken space.
 		const viewItem = mapper.toViewElement( refItem );
 		insertPosition = viewWriter.breakContainer( viewWriter.createPositionAfter( viewItem ) );
 	} else {
-		// There is no list item with same indent. Check previous model item.
+		// There is no list item with the same indent. Check the previous model item.
 		if ( prevItem && prevItem.name == 'listItem' ) {
-			// If it is a list item, it has to have lower indent.
-			// It means that inserted item should be added to it as its nested item.
+			// If it is a list item, it has to have a lower indent.
+			// It means that the inserted item should be added to it as its nested item.
 			insertPosition = mapper.toViewPosition( model.createPositionAt( prevItem, 'end' ) );
 		} else {
-			// Previous item is not a list item (or does not exist at all).
-			// Just map the position and insert the view item at mapped position.
+			// The previous item is not a list item (or does not exist at all).
+			// Just map the position and insert the view item at the mapped position.
 			insertPosition = mapper.toViewPosition( model.createPositionBefore( modelItem ) );
 		}
 	}
@@ -100,7 +100,7 @@ export function injectViewList( modelItem, injectedItem, conversionApi, model )
 	// Insert the view item.
 	viewWriter.insert( insertPosition, injectedList );
 
-	// 2. Handle possible children of injected model item.
+	// 2. Handle possible children of the injected model item.
 	if ( prevItem && prevItem.name == 'listItem' ) {
 		const prevView = mapper.toViewElement( prevItem );
 
@@ -142,19 +142,19 @@ export function injectViewList( modelItem, injectedItem, conversionApi, model )
 		}
 	}
 
-	// Merge inserted view list with its possible neighbour lists.
+	// Merge the inserted view list with its possible neighbor lists.
 	mergeViewLists( viewWriter, injectedList, injectedList.nextSibling );
 	mergeViewLists( viewWriter, injectedList.previousSibling, injectedList );
 }
 
 /**
- * Helper function that takes two parameters, that are expected to be view list elements, and merges them.
- * The merge happen only if both parameters are list elements of the same types (the same element name and the same class attributes).
+ * Helper function that takes two parameters that are expected to be view list elements, and merges them.
+ * The merge happens only if both parameters are list elements of the same type (the same element name and the same class attributes).
  *
  * @param {module:engine/view/downcastwriter~DowncastWriter} viewWriter The writer instance.
- * @param {module:engine/view/item~Item} firstList First element o compare.
- * @param {module:engine/view/item~Item} secondList Second parameter to compare.
- * @returns {module:engine/view/position~Position|null} Position after merge or `null` when there was no merge.
+ * @param {module:engine/view/item~Item} firstList The first element to compare.
+ * @param {module:engine/view/item~Item} secondList The second element to compare.
+ * @returns {module:engine/view/position~Position|null} The position after merge or `null` when there was no merge.
  */
 export function mergeViewLists( viewWriter, firstList, secondList ) {
 	// Check if two lists are going to be merged.
@@ -171,12 +171,12 @@ export function mergeViewLists( viewWriter, firstList, secondList ) {
 }
 
 /**
- * Helper function that for given `view.Position`, returns a `view.Position` that is after all `view.UIElement`s that
- * are after given position.
+ * Helper function that for a given `view.Position`, returns a `view.Position` that is after all `view.UIElement`s that
+ * are after the given position.
  *
  * For example:
  * `<container:p>foo^<ui:span></ui:span><ui:span></ui:span>bar</container:p>`
- * For position ^, a position before "bar" will be returned.
+ * For position ^, the position before "bar" will be returned.
  *
  * @param {module:engine/view/position~Position} viewPosition
  * @returns {module:engine/view/position~Position}
@@ -186,14 +186,14 @@ export function positionAfterUiElements( viewPosition ) {
 }
 
 /**
- * Helper function that seeks for a previous list item sibling of given model item which meets given criteria
- * passed by an options object.
+ * Helper function that searches for a previous list item sibling of a given model item that meets the given criteria
+ * passed by the options object.
  *
  * @param {module:engine/model/item~Item} modelItem
  * @param {Object} options Search criteria.
- * @param {Boolean} [options.sameIndent=false] Whether sought sibling should have same indent.
- * @param {Boolean} [options.smallerIndent=false] Whether sought sibling should have smaller indent.
- * @param {Number} [options.listIndent] The reference indent.
+ * @param {Boolean} [options.sameIndent=false] Whether the sought sibling should have the same indentation.
+ * @param {Boolean} [options.smallerIndent=false] Whether the sought sibling should have a smaller indentation.
+ * @param {Number} [options.listIndent] The reference indentation.
  * @returns {module:engine/model/item~Item|null}
  */
 export function getSiblingListItem( modelItem, options ) {
@@ -227,10 +227,10 @@ export function findInRange( range, comparator ) {
 }
 
 /**
- * Helper method for creating an UI button and linking it with an appropriate command.
+ * Helper method for creating a UI button and linking it with an appropriate command.
  *
  * @private
- * @param {module:core/editor/editor~Editor} editor The editor instance to which UI component will be added.
+ * @param {module:core/editor/editor~Editor} editor The editor instance to which the UI component will be added.
  * @param {String} commandName The name of the command.
  * @param {Object} label The button label.
  * @param {String} icon The source of the icon.

+ 9 - 9
packages/ckeditor5-list/tests/manual/todo-list.html

@@ -2,14 +2,14 @@
 	<p>This is a test for list feature.</p>
 	<p>Some more text for testing.</p>
 	<ul>
-		<li><input type="checkbox">Todo list item 1</li>
-		<li><input type="checkbox" checked="checked">Todo list item 2</li>
-		<li><input type="checkbox">Todo list item 3</li>
-		<li><input type="checkbox" checked="checked">Todo list item 4</li>
-		<li><input type="checkbox">Todo list item 5</li>
-		<li><input type="checkbox">Todo list item 6</li>
-		<li><input type="checkbox" checked="checked">Todo list item 7</li>
-		<li><input type="checkbox">Todo list item 8</li>
+		<li><input type="checkbox">To-do list item 1</li>
+		<li><input type="checkbox" checked="checked">To-do list item 2</li>
+		<li><input type="checkbox">To-do list item 3</li>
+		<li><input type="checkbox" checked="checked">To-do list item 4</li>
+		<li><input type="checkbox">To-do list item 5</li>
+		<li><input type="checkbox">To-do list item 6</li>
+		<li><input type="checkbox" checked="checked">To-do list item 7</li>
+		<li><input type="checkbox">To-do list item 8</li>
 	</ul>
 	<p>Paragraph.</p>
 	<p>Another testing paragraph.</p>
@@ -17,7 +17,7 @@
 		<li>Numbered list item</li>
 	</ol>
 	<ul>
-		<li><input type="checkbox">Todo list item</li>
+		<li><input type="checkbox">To-do list item</li>
 	</ul>
 	<ul>
 		<li>Bullet list</li>

+ 21 - 21
packages/ckeditor5-list/tests/manual/todo-list.md

@@ -2,19 +2,19 @@
 
 1. The data should be loaded with:
   * two paragraphs,
-  * todo list with eight items, where 2,4 and 7 are checked,
+  * to-do list with eight items, where 2,4 and 7 are checked,
   * two paragraphs,
   * numbered list with one item,
-  * todo list with one unchecked item,
+  * to-do list with one unchecked item,
   * bullet list with one item.
-2. Toolbar should have three buttons: for bullet, numbered and todo list.
+2. Toolbar should have three buttons: for bullet, numbered and to-do list.
 
 ## Testing
 
 ### Creating:
 
-1. Convert first paragraph to todo list item
-2. Create empty paragraph and convert to todo list item
+1. Convert first paragraph to to-do list item
+2. Create empty paragraph and convert to to-do list item
 3. Press `Enter` in the middle of item
 4. Press `Enter` at the start of item
 5. Press `Enter` at the end of item
@@ -33,32 +33,32 @@
 
 ### Merging:
 
-1. Convert paragraph before todo list to same type of list
-2. Convert paragraph after todo list to same type of list
-3. Convert paragraph before todo list to different type of list
-4. Convert paragraph after todo list to different type of list
-5. Convert first paragraph to todo list, then convert second paragraph to todo list
+1. Convert paragraph before to-do list to same type of list
+2. Convert paragraph after to-do list to same type of list
+3. Convert paragraph before to-do list to different type of list
+4. Convert paragraph after to-do list to different type of list
+5. Convert first paragraph to to-do list, then convert second paragraph to to-do list
 6. Convert multiple items and paragraphs at once
 
 ### Toggling check state:
 
-1. Put selection in the middle of unchecked the todo list item
+1. Put selection in the middle of unchecked the to-do list item
 2. Check list item (selection should not move)
 
 ---
 
-1. Select multiple todo list items
-2. Check or uncheck todo list item (selection should not move)
+1. Select multiple to-do list items
+2. Check or uncheck to-do list item (selection should not move)
 
 ---
 
-1. Check todo list item
+1. Check to-do list item
 2. Convert checked list item to other list item
-3. Convert this list item once again to todo list item ()should be unchecked)
+3. Convert this list item once again to to-do list item ()should be unchecked)
 
 ---
 
-1. Put collapsed selection to todo list item
+1. Put collapsed selection to to-do list item
 2. Press `Ctrl+Space` (check state should toggle)
 
 ### Toggling check state for multiple items:
@@ -75,12 +75,12 @@
 ---
 
 1. Select the entire content
-2. Press `Ctrl+Space` (all todo list items should be checked)
-3. Press `Ctrl+Space` once again (all todo list items should be unchecked)
+2. Press `Ctrl+Space` (all to-do list items should be checked)
+3. Press `Ctrl+Space` once again (all to-do list items should be unchecked)
 
 ### Integration with attribute elements:
 
-1. Select multiple todo list items
+1. Select multiple to-do list items
 2. Highlight selected text
-3. Check or uncheck highlighted todo list item
-4. Type inside highlighted todo list item
+3. Check or uncheck highlighted to-do list item
+4. Type inside highlighted to-do list item

+ 27 - 7
packages/ckeditor5-list/tests/todolistcheckcommand.js

@@ -61,19 +61,19 @@ describe( 'TodoListCheckCommand', () => {
 	} );
 
 	describe( 'isEnabled', () => {
-		it( 'should be enabled when selection is inside todo list item', () => {
+		it( 'should be enabled when selection is inside to-do list item', () => {
 			setModelData( model, '<listItem listIndent="0" listType="todo">a[b]c</listItem>' );
 
 			expect( command.isEnabled ).to.equal( true );
 		} );
 
-		it( 'should be disabled when selection is not inside todo list item', () => {
+		it( 'should be disabled when selection is not inside to-do list item', () => {
 			setModelData( model, '<paragraph>a[b]c</paragraph>' );
 
 			expect( command.isEnabled ).to.equal( false );
 		} );
 
-		it( 'should be enabled when at least one todo list item is selected', () => {
+		it( 'should be enabled when at least one to-do list item is selected', () => {
 			setModelData( model,
 				'<paragraph>a[bc</paragraph>' +
 				'<listItem listIndent="0" listType="todo">abc</listItem>' +
@@ -83,7 +83,7 @@ describe( 'TodoListCheckCommand', () => {
 			expect( command.isEnabled ).to.equal( true );
 		} );
 
-		it( 'should be enabled when none todo list item is selected', () => {
+		it( 'should be enabled when none to-do list item is selected', () => {
 			setModelData( model,
 				'<paragraph>a[bc</paragraph>' +
 				'<paragraph>abc</paragraph>' +
@@ -95,7 +95,7 @@ describe( 'TodoListCheckCommand', () => {
 	} );
 
 	describe( 'execute()', () => {
-		it( 'should toggle checked state on todo list item when collapsed selection is inside this item', () => {
+		it( 'should toggle checked state on to-do list item when collapsed selection is inside this item', () => {
 			setModelData( model, '<listItem listIndent="0" listType="todo">b[]ar</listItem>' );
 
 			command.execute();
@@ -111,7 +111,7 @@ describe( 'TodoListCheckCommand', () => {
 			);
 		} );
 
-		it( 'should toggle checked state on todo list item when non-collapsed selection is inside this item', () => {
+		it( 'should toggle checked state on to-do list item when non-collapsed selection is inside this item', () => {
 			setModelData( model, '<listItem listIndent="0" listType="todo">b[a]r</listItem>' );
 
 			command.execute();
@@ -151,7 +151,7 @@ describe( 'TodoListCheckCommand', () => {
 			);
 		} );
 
-		it( 'should toggle state on multiple items mixed with none todo list items', () => {
+		it( 'should toggle state on multiple items mixed with none to-do list items', () => {
 			setModelData( model,
 				'<paragraph>a[bc</paragraph>' +
 				'<listItem listIndent="0" listType="todo">def</listItem>' +
@@ -216,5 +216,25 @@ describe( 'TodoListCheckCommand', () => {
 				command.execute();
 			} );
 		} );
+
+		it( 'should set attribute if `forceValue` parameter is set to `true`', () => {
+			setModelData( model, '<listItem listIndent="0" listType="todo" todoListChecked="true">b[]ar</listItem>' );
+
+			command.execute( { forceValue: true } );
+
+			expect( getModelData( model ) ).to.equal(
+				'<listItem listIndent="0" listType="todo" todoListChecked="true">b[]ar</listItem>'
+			);
+		} );
+
+		it( 'should remove attribute if `forceValue` parameter is set to `false`', () => {
+			setModelData( model, '<listItem listIndent="0" listType="todo">b[]ar</listItem>' );
+
+			command.execute( { forceValue: false } );
+
+			expect( getModelData( model ) ).to.equal(
+				'<listItem listIndent="0" listType="todo">b[]ar</listItem>'
+			);
+		} );
 	} );
 } );

+ 66 - 58
packages/ckeditor5-list/tests/todolistediting.js

@@ -76,7 +76,7 @@ describe( 'TodoListEditing', () => {
 			expect( command ).to.have.property( 'type', 'todo' );
 		} );
 
-		it( 'should create todo list item and change to paragraph in normal usage flow', () => {
+		it( 'should create to-do list item and change to paragraph in normal usage flow', () => {
 			expect( getViewData( view ) ).to.equal( '<p>[]</p>' );
 			expect( getModelData( model ) ).to.equal( '<paragraph>[]</paragraph>' );
 
@@ -119,7 +119,7 @@ describe( 'TodoListEditing', () => {
 	} );
 
 	describe( 'editing pipeline', () => {
-		it( 'should convert todo list item', () => {
+		it( 'should convert to-do list item', () => {
 			setModelData( model,
 				'<listItem listType="todo" listIndent="0">1</listItem>' +
 				'<listItem listType="todo" listIndent="0" todoListChecked="true">2</listItem>'
@@ -133,7 +133,7 @@ describe( 'TodoListEditing', () => {
 			);
 		} );
 
-		it( 'should convert nested todo list items', () => {
+		it( 'should convert nested to-do list items', () => {
 			setModelData( model,
 				'<listItem listType="todo" listIndent="0">1.0</listItem>' +
 				'<listItem listType="todo" listIndent="1">2.1</listItem>' +
@@ -163,7 +163,7 @@ describe( 'TodoListEditing', () => {
 			);
 		} );
 
-		it( 'should convert todo list items mixed with bulleted list items', () => {
+		it( 'should convert to-do list items mixed with bulleted list items', () => {
 			setModelData( model,
 				'<listItem listType="todo" listIndent="0">1.0</listItem>' +
 				'<listItem listType="bulleted" listIndent="0">2.0</listItem>' +
@@ -192,7 +192,7 @@ describe( 'TodoListEditing', () => {
 			);
 		} );
 
-		it( 'should convert todo list items mixed with numbered list items', () => {
+		it( 'should convert to-do list items mixed with numbered list items', () => {
 			setModelData( model,
 				'<listItem listType="todo" listIndent="0">1.0</listItem>' +
 				'<listItem listType="numbered" listIndent="0">2.0</listItem>' +
@@ -377,7 +377,7 @@ describe( 'TodoListEditing', () => {
 	} );
 
 	describe( 'data pipeline m -> v', () => {
-		it( 'should convert todo list item', () => {
+		it( 'should convert to-do list item', () => {
 			setModelData( model,
 				'<listItem listType="todo" listIndent="0">1</listItem>' +
 				'<listItem listType="todo" listIndent="0" todoListChecked="true">2</listItem>'
@@ -386,22 +386,22 @@ describe( 'TodoListEditing', () => {
 			expect( editor.getData() ).to.equal(
 				'<ul class="todo-list">' +
 					'<li>' +
-						'<label>' +
-							'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
-							'<span class="todo-list__label">1</span>' +
+						'<label class="todo-list__label">' +
+							'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+							'<span class="todo-list__label__description">1</span>' +
 						'</label>' +
 					'</li>' +
 					'<li>' +
-						'<label>' +
-							'<input class="todo-list__checkmark" type="checkbox" disabled="disabled" checked="checked">' +
-							'<span class="todo-list__label">2</span>' +
+						'<label class="todo-list__label todo-list__label_checked">' +
+							'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled" checked="checked">' +
+							'<span class="todo-list__label__description">2</span>' +
 						'</label>' +
 					'</li>' +
 				'</ul>'
 			);
 		} );
 
-		it( 'should convert nested todo list item', () => {
+		it( 'should convert nested to-do list item', () => {
 			setModelData( model,
 				'<listItem listType="todo" listIndent="0">1.0</listItem>' +
 				'<listItem listType="todo" listIndent="1">2.1</listItem>'
@@ -410,15 +410,15 @@ describe( 'TodoListEditing', () => {
 			expect( editor.getData() ).to.equal(
 				'<ul class="todo-list">' +
 					'<li>' +
-						'<label>' +
-							'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
-							'<span class="todo-list__label">1.0</span>' +
+						'<label class="todo-list__label">' +
+							'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+							'<span class="todo-list__label__description">1.0</span>' +
 						'</label>' +
 						'<ul class="todo-list">' +
 							'<li>' +
-								'<label>' +
-									'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
-									'<span class="todo-list__label">2.1</span>' +
+								'<label class="todo-list__label">' +
+									'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+									'<span class="todo-list__label__description">2.1</span>' +
 								'</label>' +
 							'</li>' +
 						'</ul>' +
@@ -427,7 +427,7 @@ describe( 'TodoListEditing', () => {
 			);
 		} );
 
-		it( 'should convert todo list item mixed with bulleted list items', () => {
+		it( 'should convert to-do list item mixed with bulleted list items', () => {
 			setModelData( model,
 				'<listItem listType="todo" listIndent="0">1.0</listItem>' +
 				'<listItem listType="bulleted" listIndent="0">2.0</listItem>' +
@@ -439,9 +439,9 @@ describe( 'TodoListEditing', () => {
 			expect( editor.getData() ).to.equal(
 				'<ul class="todo-list">' +
 					'<li>' +
-						'<label>' +
-							'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
-							'<span class="todo-list__label">1.0</span>' +
+						'<label class="todo-list__label">' +
+							'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+							'<span class="todo-list__label__description">1.0</span>' +
 						'</label>' +
 					'</li>' +
 				'</ul>' +
@@ -449,18 +449,18 @@ describe( 'TodoListEditing', () => {
 					'<li>2.0' +
 						'<ul class="todo-list">' +
 							'<li>' +
-								'<label>' +
-									'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
-									'<span class="todo-list__label">3.1</span>' +
+								'<label class="todo-list__label">' +
+									'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+									'<span class="todo-list__label__description">3.1</span>' +
 								'</label>' +
 								'<ul>' +
 									'<li>4.2</li>' +
 								'</ul>' +
 							'</li>' +
 							'<li>' +
-								'<label>' +
-									'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
-									'<span class="todo-list__label">5.1</span>' +
+								'<label class="todo-list__label">' +
+									'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+									'<span class="todo-list__label__description">5.1</span>' +
 								'</label>' +
 							'</li>' +
 						'</ul>' +
@@ -469,7 +469,7 @@ describe( 'TodoListEditing', () => {
 			);
 		} );
 
-		it( 'should convert todo list item mixed with numbered list items', () => {
+		it( 'should convert to-do list item mixed with numbered list items', () => {
 			setModelData( model,
 				'<listItem listType="todo" listIndent="0">1.0</listItem>' +
 				'<listItem listType="numbered" listIndent="0">2.0</listItem>' +
@@ -481,9 +481,9 @@ describe( 'TodoListEditing', () => {
 			expect( editor.getData() ).to.equal(
 				'<ul class="todo-list">' +
 					'<li>' +
-						'<label>' +
-							'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
-							'<span class="todo-list__label">1.0</span>' +
+						'<label class="todo-list__label">' +
+							'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+							'<span class="todo-list__label__description">1.0</span>' +
 						'</label>' +
 					'</li>' +
 				'</ul>' +
@@ -491,18 +491,18 @@ describe( 'TodoListEditing', () => {
 					'<li>2.0' +
 						'<ul class="todo-list">' +
 							'<li>' +
-								'<label>' +
-									'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
-									'<span class="todo-list__label">3.1</span>' +
+								'<label class="todo-list__label">' +
+									'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+									'<span class="todo-list__label__description">3.1</span>' +
 								'</label>' +
 								'<ol>' +
 									'<li>4.2</li>' +
 								'</ol>' +
 							'</li>' +
 							'<li>' +
-								'<label>' +
-									'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
-									'<span class="todo-list__label">5.1</span>' +
+								'<label class="todo-list__label">' +
+									'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+									'<span class="todo-list__label__description">5.1</span>' +
 								'</label>' +
 							'</li>' +
 						'</ul>' +
@@ -545,17 +545,25 @@ describe( 'TodoListEditing', () => {
 	} );
 
 	describe( 'data pipeline v -> m', () => {
-		it( 'should convert li with checkbox inside before the first text node as todo list item', () => {
-			editor.setData( '<ul><li><span><input type="checkbox">Foo</span></li></ul>' );
+		it( 'should convert li with checkbox before the first text node as to-do list item', () => {
+			editor.setData( '<ul><li><input type="checkbox">foo</li></ul>' );
 
-			expect( getModelData( model ) ).to.equal( '<listItem listIndent="0" listType="todo">[]Foo</listItem>' );
+			expect( getModelData( model ) ).to.equal( '<listItem listIndent="0" listType="todo">[]foo</listItem>' );
 		} );
 
-		it( 'should convert li with checked checkbox inside as checked todo list item', () => {
-			editor.setData( '<ul><li><span><input type="checkbox" checked="checked">Foo</span></li></ul>' );
+		it( 'should convert li with checked checkbox as checked to-do list item', () => {
+			editor.setData(
+				'<ul>' +
+					'<li><input type="checkbox" checked="checked">a</li>' +
+					'<li><input type="checkbox" checked="anything">b</li>' +
+					'<li><input type="checkbox" checked>c</li>' +
+				'</ul>'
+			);
 
 			expect( getModelData( model ) ).to.equal(
-				'<listItem listIndent="0" listType="todo" todoListChecked="true">[]Foo</listItem>'
+				'<listItem listIndent="0" listType="todo" todoListChecked="true">[]a</listItem>' +
+				'<listItem listIndent="0" listType="todo" todoListChecked="true">b</listItem>' +
+				'<listItem listIndent="0" listType="todo" todoListChecked="true">c</listItem>'
 			);
 		} );
 
@@ -633,33 +641,33 @@ describe( 'TodoListEditing', () => {
 			);
 		} );
 
-		it( 'should convert todo list returned by m -> v data pipeline conversion', () => {
+		it( 'should convert to-do list returned by m -> v data pipeline conversion', () => {
 			editor.setData(
 				'<ul class="todo-list">' +
 					'<li>' +
-						'<label>' +
-							'<input class="todo-list__checkmark" type="checkbox" disabled="disabled" checked="checked">' +
-							'<span class="todo-list__label">1.1</span>' +
+						'<label class="todo-list__label">' +
+							'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled" checked="checked">' +
+							'<span class="todo-list__label__description">1.1</span>' +
 						'</label>' +
 						'<ul class="todo-list">' +
 							'<li>' +
-								'<label>' +
-									'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
-									'<span class="todo-list__label">2.2</span>' +
+								'<label class="todo-list__label">' +
+									'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+									'<span class="todo-list__label__description">2.2</span>' +
 								'</label>' +
 							'</li>' +
 							'<li>' +
-								'<label>' +
-									'<input class="todo-list__checkmark" type="checkbox" disabled="disabled" checked="checked">' +
-									'<span class="todo-list__label">3.2</span>' +
+								'<label class="todo-list__label">' +
+									'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled" checked="checked">' +
+									'<span class="todo-list__label__description">3.2</span>' +
 								'</label>' +
 							'</li>' +
 						'</ul>' +
 					'</li>' +
 					'<li>' +
-						'<label>' +
-							'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
-							'<span class="todo-list__label">4.1</span>' +
+						'<label class="todo-list__label">' +
+							'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+							'<span class="todo-list__label__description">4.1</span>' +
 						'</label>' +
 					'</li>' +
 				'</ul>'

+ 1 - 1
packages/ckeditor5-list/theme/list.css

@@ -6,7 +6,6 @@
 
 .ck .todo-list {
 	list-style: none;
-	position: relative;
 }
 
 .ck .todo-list > li {
@@ -55,6 +54,7 @@
 }
 
 .ck .todo-list__checkmark::after {
+	box-sizing: content-box;
 	pointer-events: none;
 	content: '';
 	position: absolute;