diff --git a/docs/_snippets/features/todo-list.html b/docs/_snippets/features/todo-list.html index 541e769..a15005e 100644 --- a/docs/_snippets/features/todo-list.html +++ b/docs/_snippets/features/todo-list.html @@ -2,7 +2,7 @@

Waffles

- waffles with raspberries and whipped cream + Waffles with raspberries and whipped cream.

Ingredients

diff --git a/docs/features/todo-list.md b/docs/features/todo-list.md deleted file mode 100644 index 0f6a3b5..0000000 --- a/docs/features/todo-list.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -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 Ctrl + Space shortcut whenever the selection is in that item. - -## Installation - - - 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. - - -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( ... ); -``` - - - Read more about {@link builds/guides/integration/installing-plugins installing plugins}. - - -## 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 - -``` - -For nested lists: - -```html - -``` -### 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 -bom -``` - -```html -foo -``` - -## Contribute - -The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-list. diff --git a/docs/features/todo-lists.md b/docs/features/todo-lists.md new file mode 100644 index 0000000..f005620 --- /dev/null +++ b/docs/features/todo-lists.md @@ -0,0 +1,93 @@ +--- +category: features +--- + +# To-do lists + +The to-do list feature lets you create lists of interactive checkboxes with labels. They support all features of regular lists so you can nest to-do list together with bulleted and numbered lists in any combination. + +## Demo + +{@snippet features/todo-list} + +## Keyboard support + +You can check/uncheck an item by using the Ctrl + Space (or + Space if you are using macOS) shortcut when the selection is in that item. + +## Installation + +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 the `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( ... ); +``` + + + Read more about {@link builds/guides/integration/installing-plugins installing plugins}. + + +## 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 + +``` + +For nested lists: + +```html + +``` + +### 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` attribute: + +```html +Foo +``` + +```html +Bar +``` + +## Contribute + +The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-list.