Merge 5272a11 into 345b977

docs/_snippets/features/todo-list.html

@@ -0,0 +1,87 @@
+<div id="snippet-todo-list">
+	<h2>Waffles</h2>
+
+	<figure class="image image-style-side">
+		<img src="../assets/img/waffles.png" alt="waffles with raspberries and whipped cream">
+	</figure>
+
+	<h3>Ingredients</h3>
+
+	<ul>
+		<li>
+			<label class="todo-list__label todo-list__label_checked">
+				<input class="todo-list__label__checkmark" type="checkbox" disabled checked />
+				<span class="todo-list__label__description">2 eggs</span>
+			</label>
+		</li>
+		<li>
+			<label class="todo-list__label todo-list__label_checked">
+				<input class="todo-list__label__checkmark" type="checkbox" disabled checked />
+				<span class="todo-list__label__description">2 cups all-purpose flour</span>
+			</label>
+		</li>
+		<li>
+			<label class="todo-list__label todo-list__label_checked">
+				<input class="todo-list__label__checkmark" type="checkbox" disabled checked />
+				<span class="todo-list__label__description">1 3/4 cups milk</span>
+			</label>
+		</li>
+		<li>
+			<label class="todo-list__label">
+				<input class="todo-list__label__checkmark" type="checkbox" disabled />
+				<span class="todo-list__label__description">1/2 cup vegetable oil</span>
+			</label>
+		</li>
+		<li>
+			<label class="todo-list__label">
+				<input class="todo-list__label__checkmark" type="checkbox" disabled />
+				<span class="todo-list__label__description">1 tablespoon white sugar</span>
+			</label>
+		</li>
+		<li>
+			<label class="todo-list__label">
+				<input class="todo-list__label__checkmark" type="checkbox" disabled />
+				<span class="todo-list__label__description">4 teaspoons baking powder</span>
+			</label>
+		</li>
+		<li>
+			<label class="todo-list__label">
+				<input class="todo-list__label__checkmark" type="checkbox" disabled />
+				<span class="todo-list__label__description">1/4 teaspoon salt</span>
+			</label>
+		</li>
+		<li>
+			<label class="todo-list__label">
+				<input class="todo-list__label__checkmark" type="checkbox" disabled />
+				<span class="todo-list__label__description">1/2 teaspoon vanilla extract</span>
+			</label>
+		</li>
+	</ul>
+
+	<h3>Directions</h3>
+
+	<figure class="table">
+		<table>
+			<thead>
+				<tr>
+					<th>Prep</th>
+					<th>Cook</th>
+					<th>Ready In</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>5 m</td>
+					<td>15 m</td>
+					<td>20 m</td>
+				</tr>
+			</tbody>
+		</table>
+	</figure>
+
+	<p>Preheat waffle iron. Beat eggs in large bowl with hand beater until fluffy. Beat in flour, milk, vegetable oil, sugar, baking powder, salt and vanilla, just until smooth.</p>
+
+	<p>Spray preheated waffle iron with non-stick cooking spray. Pour mix onto hot waffle iron. Cook until golden brown. Serve hot.</p>
+
+	<p>Source: <a href="https://www.allrecipes.com/recipe/22180/waffles-i/?fbclid=IwAR1g8NdUx6fm0aYit4Wwi2J1yQdx9WnnGqE23SVgvxr9XVRyooYMjvHq-yE">allrecipes</a></p>
+</div>

docs/_snippets/features/todo-list.js

@@ -0,0 +1,41 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals console, window, document */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
+
+// import TodoList from '@ckeditor/ckeditor5-list/src/todolist';
+
+// ClassicEditor.builtinPlugins.push( TodoList );
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-todo-list' ), {
+		cloudServices: CS_CONFIG,
+		toolbar: {
+			items: [
+				'heading',
+				'|',
+				'bulletedList',
+				'numberedList',
+				// 'todoList',
+				'|',
+				'link',
+				'insertTable',
+				'|',
+				'undo',
+				'redo'
+			],
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

docs/api/list.md

@@ -6,11 +6,11 @@ category: api-reference
 
 [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-list.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-list)
 
-This package implements bulleted and numbered list feature for CKEditor 5.
+This package implements bulleted, numbered and to-do list feature for CKEditor 5.
 
 ## Documentation
 
-See the {@link module:list/list~List} plugin documentation.
+See the {@link module:list/list~List} plugin documentation and {@link features/todo-list to-do list feature} guide.
 
 ## Installation
 

docs/features/todo-list.md

@@ -0,0 +1,95 @@
+---
+title: To-do list
+category: features
+---
+
+The to-do list feature let you create lists of interactive unordered checkbooks with labels. They support all features of regular lists so you can nest to-do list together with bullet and numbered list in any combination.
+
+## Demo
+
+{@snippet features/todo-list}
+
+## Keyboard support
+
+You can check/uncheck item using <kbd>Ctrl</kbd> + <kbd>Space</kbd> shortcut whenever the selection is in that item.
+
+## Installation
+
+<info-box info>
+    The list package is installed as a dependency of all builds, so as long as you do not build your own, custom rich text editor, you do not need to install npm packages. However, to-do list feature is not included and you need to rebuild the editor with the custom configuration.
+</info-box>
+
+To add this feature to your editor, install the [`@ckeditor/ckeditor5-list`](https://www.npmjs.com/package/@ckeditor/ckeditor5-list) package:
+
+```bash
+npm install --save @ckeditor/ckeditor5-list
+```
+
+Then add `TodoList` plugin to your plugin list and the toolbar configuration:
+
+```js
+import TodoList from '@ckeditor/ckeditor5-list/src/todolist';
+
+ClassicEditor
+    .create( document.querySelector( '#editor' ), {
+        plugins: [ TodoList, ... ],
+        toolbar: [ 'todoList', ... ],
+    } )
+    .then( ... )
+    .catch( ... );
+```
+
+<info-box info>
+    Read more about {@link builds/guides/integration/installing-plugins installing plugins}.
+</info-box>
+
+## HTML structure
+
+When you call {@link module:core/editor/utils/dataapimixin~DataApi#function-getData `editor.getData()`} to-do list will be represented as the following HTML:
+
+```html
+<ul class="todo-list">
+  <li>
+     <label class="todo-list__label [todo-list__label_checked]">
+        <input class="todo-list__label__checkmark" type="checkbox" disabled [checked] />
+        <span class="todo-list__label__description">Foo</span>  
+     </label>
+  </li>
+</ul>
+```
+
+For nested lists:
+
+```html
+<ul class="todo-list">
+  <li>
+     <label class="todo-list__label [todo-list__label_checked]">
+        <input class="todo-list__label__checkmark" type="checkbox" disabled [checked] />
+        <span class="todo-list__label__description">Foo</span>  
+     </label>
+      <ul class="todo-list">
+        <li>
+           <label class="todo-list__label [todo-list__label_checked]">
+              <input class="todo-list__label__checkmark" type="checkbox" disabled [checked] />
+              <span class="todo-list__label__description">Bar</span>  
+           </label>
+        </li>
+      </ul>
+  </li>
+</ul>
+```
+### 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 optional `todoListChecked` attributes:
+
+```html
+<listItem listType="todo">bom</listItem>
+```
+
+```html
+<listItem listType="todo" todoListChecked="true">foo</listItem>
+```
+
+## Contribute
+
+The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-list.