Merge pull request #158 from ckeditor/t/147

Feature: Introduces content styles for to–do lists. Unified to–do list representation in the editing and data. Extracted feature styles to a todolist.css file. Closes #147. Closes ckeditor/ckeditor5#2063. BREAKING CHANGE: The structure of the to–do list has changed (both in the editing and in the data). Please refer to the documentation for the information about used class names as it can impact the existing styles of your application.
ckeditor · Oct 7, 2019 · 5605663 · 5605663
2 parents ff460f8 + daa9f57
commit 5605663
Show file tree

Hide file tree

Showing 11 changed files with 209 additions and 104 deletions.
diff --git a/docs/_snippets/features/todo-list.html b/docs/_snippets/features/todo-list.html
@@ -9,50 +9,50 @@ <h3>Ingredients</h3>
 
 	<ul>
 		<li>
-			<label class="todo-list__label todo-list__label_checked">
-				<input class="todo-list__label__checkmark" type="checkbox" disabled checked />
+			<label class="todo-list__label">
+				<input 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 />
+			<label class="todo-list__label">
+				<input 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 />
+			<label class="todo-list__label">
+				<input 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 />
+				<input 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 />
+				<input 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 />
+				<input 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 />
+				<input 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 />
+				<input type="checkbox" disabled />
 				<span class="todo-list__label__description">1/2 teaspoon vanilla extract</span>
 			</label>
 		</li>

diff --git a/docs/features/todo-lists.md b/docs/features/todo-lists.md
@@ -47,8 +47,8 @@ When you call {@link module:core/editor/utils/dataapimixin~DataApi#function-getD
 ```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] />
+		<label class="todo-list__label">
+			<input type="checkbox" disabled [checked] />
 			<span class="todo-list__label__description">Foo</span>
 		</label>
 	</li>
@@ -60,14 +60,14 @@ 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] />
+		<label class="todo-list__label">
+			<input 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] />
+				<label class="todo-list__label">
+					<input type="checkbox" disabled [checked] />
 					<span class="todo-list__label__description">Bar</span>
 				</label>
 			</li>

diff --git a/src/todolist.js b/src/todolist.js
@@ -9,8 +9,8 @@
 
 import TodoListEditing from './todolistediting';
 import TodoListUI from './todolistui';
-
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import '../theme/todolist.css';
 
 /**
  * The to-do list feature.

diff --git a/src/todolistconverters.js b/src/todolistconverters.js
@@ -93,16 +93,18 @@ export function dataModelViewInsertion( model ) {
 
 		viewWriter.addClass( 'todo-list', viewItem.parent );
 
-		const label = viewWriter.createAttributeElement( 'label', { class: 'todo-list__label' } );
+		const label = viewWriter.createAttributeElement( 'label', {
+			class: 'todo-list__label'
+		} );
+
 		const checkbox = viewWriter.createEmptyElement( 'input', {
 			type: 'checkbox',
 			disabled: 'disabled',
-			class: 'todo-list__label__checkmark'
 		} );
 
 		if ( data.item.getAttribute( 'todoListChecked' ) ) {
 			viewWriter.setAttribute( 'checked', 'checked', checkbox );
-			viewWriter.addClass( 'todo-list__label_checked', label );
+			viewWriter.addClass( 'todo-list__label', label );
 		}
 
 		viewWriter.insert( viewWriter.createPositionAt( viewItem, 0 ), checkbox );
@@ -303,13 +305,16 @@ function createCheckmarkElement( modelItem, viewWriter, isChecked, onChange ) {
 	const uiElement = viewWriter.createUIElement(
 		'label',
 		{
-			class: 'todo-list__checkmark',
+			class: 'todo-list__label',
 			contenteditable: false
 		},
 		function( domDocument ) {
-			const checkbox = createElement( document, 'input', { type: 'checkbox', } );
+			const checkbox = createElement( document, 'input', { type: 'checkbox' } );
+
+			if ( isChecked ) {
+				checkbox.setAttribute( 'checked', 'checked' );
+			}
 
-			checkbox.checked = isChecked;
 			checkbox.addEventListener( 'change', () => onChange( modelItem ) );
 
 			const domElement = this.toDomElement( domDocument );
@@ -320,10 +325,6 @@ function createCheckmarkElement( modelItem, viewWriter, isChecked, onChange ) {
 		}
 	);
 
-	if ( isChecked ) {
-		viewWriter.addClass( 'todo-list__checkmark_checked', uiElement );
-	}
-
 	return uiElement;
 }
 

diff --git a/src/todolistui.js b/src/todolistui.js
@@ -8,10 +8,7 @@
  */
 
 import { createUIComponent } from './utils';
-
 import todoListIcon from '../theme/icons/todolist.svg';
-import '../theme/list.css';
-
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 
 /**

diff --git a/tests/manual/todo-list.html b/tests/manual/todo-list.html
@@ -1,3 +1,4 @@
+<h2>Editor</h2>
 <div id="editor">
 	<p>This is a test for list feature.</p>
 	<p>Some more text for testing.</p>
@@ -7,7 +8,17 @@
 		<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">To-do list item 6
+			<ul class="todo-list">
+					<li>
+						<label class="todo-list__label">
+							<input type="checkbox" disabled="disabled" checked="checked">
+							Nested item
+						</label>
+					</li>
+			</ul>
+		</li>
 		<li><input type="checkbox" checked="checked">To-do list item 7</li>
 		<li><input type="checkbox">To-do list item 8</li>
 	</ul>
@@ -23,3 +34,13 @@
 		<li>Bullet list</li>
 	</ul>
 </div>
+
+<h2>Editor content preview</h2>
+<div id="preview" class="ck-content"></div>
+
+<style>
+	#preview {
+		outline: 1px solid red;
+		padding: 10px;
+	}
+</style>
diff --git a/tests/manual/todo-list.js b/tests/manual/todo-list.js
@@ -42,6 +42,14 @@ ClassicEditor
 	} )
 	.then( editor => {
 		window.editor = editor;
+
+		const contentPreviewBox = document.getElementById( 'preview' );
+
+		contentPreviewBox.innerHTML = editor.getData();
+
+		editor.model.document.on( 'change:data', () => {
+			contentPreviewBox.innerHTML = editor.getData();
+		} );
 	} )
 	.catch( err => {
 		console.error( err.stack );

diff --git a/tests/manual/todo-list.md b/tests/manual/todo-list.md
@@ -84,3 +84,9 @@
 2. Highlight selected text
 3. Check or uncheck highlighted to-do list item
 4. Type inside highlighted to-do list item
+
+### Content styles
+
+1. Inspect list styles in the editor and in the content preview (below).
+2. There should be no major visual difference between them.
+3. Check marks in the content preview should be rich custom components (no native checkboxes).