Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Docs for to-do list feature #132

Merged
merged 4 commits into from
Aug 8, 2019
Merged

Docs for to-do list feature #132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7e444e3
Docs: Todo list docs initials version.
Aug 5, 2019
b3e34cd
Added waffles demo.
Aug 6, 2019
5272a11
Random fixes in to-do list docs.
Aug 6, 2019
4a8f91e
Formatting and other minor fixes.
Reinmar Aug 8, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 87 additions & 0 deletions docs/_snippets/features/todo-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
41 changes: 41 additions & 0 deletions docs/_snippets/features/todo-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 );
} );
4 changes: 2 additions & 2 deletions docs/api/list.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
Binary file added docs/assets/img/waffles.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
93 changes: 93 additions & 0 deletions docs/features/todo-lists.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 <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.

## 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( ... );
```

<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` attribute:

```html
<listItem listType="todo">Foo</listItem>
```

```html
<listItem listType="todo" todoListChecked="true">Bar</listItem>
```

## Contribute

The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-list.