瀏覽代碼

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.
Damian Konopka 6 年之前
父節點
當前提交
c39f9271b1

+ 11 - 11
packages/ckeditor5-list/docs/_snippets/features/todo-list.html

@@ -9,50 +9,50 @@
 
 	<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>

+ 6 - 6
packages/ckeditor5-list/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>

+ 1 - 1
packages/ckeditor5-list/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.

+ 11 - 10
packages/ckeditor5-list/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;
 }
 

+ 0 - 3
packages/ckeditor5-list/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';
 
 /**

+ 22 - 1
packages/ckeditor5-list/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>

+ 8 - 0
packages/ckeditor5-list/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 );

+ 6 - 0
packages/ckeditor5-list/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).

+ 46 - 46
packages/ckeditor5-list/tests/todolistediting.js

@@ -87,7 +87,7 @@ describe( 'TodoListEditing', () => {
 			assertEqualMarkup( getModelData( model ), '<listItem listIndent="0" listType="todo">[]</listItem>' );
 			assertEqualMarkup( getViewData( view ),
 				'<ul class="todo-list">' +
-					'<li><label class="todo-list__checkmark" contenteditable="false"></label>[]</li>' +
+					'<li><label class="todo-list__label" contenteditable="false"></label>[]</li>' +
 				'</ul>'
 			);
 
@@ -96,7 +96,7 @@ describe( 'TodoListEditing', () => {
 			assertEqualMarkup( getModelData( model ), '<listItem listIndent="0" listType="todo">a[]</listItem>' );
 			assertEqualMarkup( getViewData( view ),
 				'<ul class="todo-list">' +
-					'<li><label class="todo-list__checkmark" contenteditable="false"></label>a{}</li>' +
+					'<li><label class="todo-list__label" contenteditable="false"></label>a{}</li>' +
 				'</ul>'
 			);
 
@@ -105,7 +105,7 @@ describe( 'TodoListEditing', () => {
 			assertEqualMarkup( getModelData( model ), '<listItem listIndent="0" listType="todo">ab[]</listItem>' );
 			assertEqualMarkup( getViewData( view ),
 				'<ul class="todo-list">' +
-					'<li><label class="todo-list__checkmark" contenteditable="false"></label>ab{}</li>' +
+					'<li><label class="todo-list__label" contenteditable="false"></label>ab{}</li>' +
 				'</ul>'
 			);
 
@@ -129,8 +129,8 @@ describe( 'TodoListEditing', () => {
 
 			assertEqualMarkup( getViewData( view ),
 				'<ul class="todo-list">' +
-					'<li><label class="todo-list__checkmark" contenteditable="false"></label>{}1</li>' +
-					'<li><label class="todo-list__checkmark todo-list__checkmark_checked" contenteditable="false"></label>2</li>' +
+					'<li><label class="todo-list__label" contenteditable="false"></label>{}1</li>' +
+					'<li><label class="todo-list__label" contenteditable="false"></label>2</li>' +
 				'</ul>'
 			);
 		} );
@@ -148,17 +148,17 @@ describe( 'TodoListEditing', () => {
 			assertEqualMarkup( getViewData( view ),
 				'<ul class="todo-list">' +
 					'<li>' +
-						'<label class="todo-list__checkmark" contenteditable="false"></label>{}1.0' +
+						'<label class="todo-list__label" contenteditable="false"></label>{}1.0' +
 						'<ul class="todo-list">' +
-							'<li><label class="todo-list__checkmark" contenteditable="false"></label>2.1</li>' +
+							'<li><label class="todo-list__label" contenteditable="false"></label>2.1</li>' +
 							'<li>' +
-								'<label class="todo-list__checkmark" contenteditable="false"></label>3.1' +
+								'<label class="todo-list__label" contenteditable="false"></label>3.1' +
 								'<ul class="todo-list">' +
-									'<li><label class="todo-list__checkmark" contenteditable="false"></label>4.2</li>' +
-									'<li><label class="todo-list__checkmark" contenteditable="false"></label>5.2</li>' +
+									'<li><label class="todo-list__label" contenteditable="false"></label>4.2</li>' +
+									'<li><label class="todo-list__label" contenteditable="false"></label>5.2</li>' +
 								'</ul>' +
 							'</li>' +
-							'<li><label class="todo-list__checkmark" contenteditable="false"></label>6.1</li>' +
+							'<li><label class="todo-list__label" contenteditable="false"></label>6.1</li>' +
 						'</ul>' +
 					'</li>' +
 				'</ul>'
@@ -176,18 +176,18 @@ describe( 'TodoListEditing', () => {
 
 			assertEqualMarkup( getViewData( view ),
 				'<ul class="todo-list">' +
-					'<li><label class="todo-list__checkmark" contenteditable="false"></label>{}1.0</li>' +
+					'<li><label class="todo-list__label" contenteditable="false"></label>{}1.0</li>' +
 				'</ul>' +
 				'<ul>' +
 					'<li>2.0' +
 						'<ul class="todo-list">' +
 							'<li>' +
-								'<label class="todo-list__checkmark" contenteditable="false"></label>3.1' +
+								'<label class="todo-list__label" contenteditable="false"></label>3.1' +
 								'<ul>' +
 									'<li>4.2</li>' +
 								'</ul>' +
 							'</li>' +
-							'<li><label class="todo-list__checkmark" contenteditable="false"></label>5.1</li>' +
+							'<li><label class="todo-list__label" contenteditable="false"></label>5.1</li>' +
 						'</ul>' +
 					'</li>' +
 				'</ul>'
@@ -205,18 +205,18 @@ describe( 'TodoListEditing', () => {
 
 			assertEqualMarkup( getViewData( view ),
 				'<ul class="todo-list">' +
-					'<li><label class="todo-list__checkmark" contenteditable="false"></label>{}1.0</li>' +
+					'<li><label class="todo-list__label" contenteditable="false"></label>{}1.0</li>' +
 				'</ul>' +
 				'<ol>' +
 					'<li>2.0' +
 						'<ul class="todo-list">' +
 							'<li>' +
-								'<label class="todo-list__checkmark" contenteditable="false"></label>3.1' +
+								'<label class="todo-list__label" contenteditable="false"></label>3.1' +
 								'<ol>' +
 									'<li>4.2</li>' +
 								'</ol>' +
 							'</li>' +
-							'<li><label class="todo-list__checkmark" contenteditable="false"></label>5.1</li>' +
+							'<li><label class="todo-list__label" contenteditable="false"></label>5.1</li>' +
 						'</ul>' +
 					'</li>' +
 				'</ol>'
@@ -237,7 +237,7 @@ describe( 'TodoListEditing', () => {
 					'<li>1.0</li>' +
 				'</ol>' +
 				'<ul class="todo-list">' +
-					'<li><label class="todo-list__checkmark" contenteditable="false"></label>{}2.0</li>' +
+					'<li><label class="todo-list__label" contenteditable="false"></label>{}2.0</li>' +
 				'</ul>' +
 				'<ol>' +
 					'<li>3.0</li>' +
@@ -256,13 +256,13 @@ describe( 'TodoListEditing', () => {
 
 			assertEqualMarkup( getViewData( view ),
 				'<ul class="todo-list">' +
-					'<li><label class="todo-list__checkmark" contenteditable="false"></label>1.0</li>' +
+					'<li><label class="todo-list__label" contenteditable="false"></label>1.0</li>' +
 				'</ul>' +
 				'<ol>' +
 					'<li>{}2.0</li>' +
 				'</ol>' +
 				'<ul class="todo-list">' +
-					'<li><label class="todo-list__checkmark" contenteditable="false"></label>3.0</li>' +
+					'<li><label class="todo-list__label" contenteditable="false"></label>3.0</li>' +
 				'</ul>'
 			);
 		} );
@@ -278,13 +278,13 @@ describe( 'TodoListEditing', () => {
 
 			assertEqualMarkup( getViewData( view ),
 				'<ul class="todo-list">' +
-					'<li><label class="todo-list__checkmark" contenteditable="false"></label>1.0</li>' +
+					'<li><label class="todo-list__label" contenteditable="false"></label>1.0</li>' +
 				'</ul>' +
 				'<ul>' +
 					'<li>{}2.0</li>' +
 				'</ul>' +
 				'<ul class="todo-list">' +
-					'<li><label class="todo-list__checkmark" contenteditable="false"></label>3.0</li>' +
+					'<li><label class="todo-list__label" contenteditable="false"></label>3.0</li>' +
 				'</ul>'
 			);
 		} );
@@ -330,7 +330,7 @@ describe( 'TodoListEditing', () => {
 
 			assertEqualMarkup( getViewData( view ),
 				'<ul class="todo-list">' +
-					'<li><label class="todo-list__checkmark" contenteditable="false"></label>{}1.0</li>' +
+					'<li><label class="todo-list__label" contenteditable="false"></label>{}1.0</li>' +
 				'</ul>'
 			);
 
@@ -340,7 +340,7 @@ describe( 'TodoListEditing', () => {
 
 			assertEqualMarkup( getViewData( view ),
 				'<ul class="todo-list">' +
-					'<li><label class="todo-list__checkmark todo-list__checkmark_checked" contenteditable="false"></label>{}1.0</li>' +
+					'<li><label class="todo-list__label" contenteditable="false"></label>{}1.0</li>' +
 				'</ul>'
 			);
 
@@ -350,7 +350,7 @@ describe( 'TodoListEditing', () => {
 
 			assertEqualMarkup( getViewData( view ),
 				'<ul class="todo-list">' +
-					'<li><label class="todo-list__checkmark" contenteditable="false"></label>{}1.0</li>' +
+					'<li><label class="todo-list__label" contenteditable="false"></label>{}1.0</li>' +
 				'</ul>'
 			);
 		} );
@@ -418,7 +418,7 @@ describe( 'TodoListEditing', () => {
 
 			assertEqualMarkup( getViewData( view ),
 				'<ul class="todo-list">' +
-					'<li><label class="todo-list__checkmark" contenteditable="false"></label>{}Foo</li>' +
+					'<li><label class="todo-list__label" contenteditable="false"></label>{}Foo</li>' +
 				'</ul>'
 			);
 		} );
@@ -428,7 +428,7 @@ describe( 'TodoListEditing', () => {
 
 			assertEqualMarkup( getViewData( view ),
 				'<ul class="todo-list">' +
-					'<li><label class="todo-list__checkmark" contenteditable="false"></label>[]</li>' +
+					'<li><label class="todo-list__label" contenteditable="false"></label>[]</li>' +
 				'</ul>'
 			);
 		} );
@@ -473,7 +473,7 @@ describe( 'TodoListEditing', () => {
 			assertEqualMarkup( getViewData( view ),
 				'<ul class="todo-list">' +
 					'<li>' +
-						'<label class="todo-list__checkmark" contenteditable="false"></label>' +
+						'<label class="todo-list__label" contenteditable="false"></label>' +
 						'[]<span class="highlight">' +
 							'<element2></element2>' +
 							'<element1></element1>' +
@@ -481,7 +481,7 @@ describe( 'TodoListEditing', () => {
 						'</span>' +
 					'</li>' +
 					'<li>' +
-						'<label class="todo-list__checkmark" contenteditable="false"></label>bar' +
+						'<label class="todo-list__label" contenteditable="false"></label>bar' +
 					'</li>' +
 				'</ul>'
 			);
@@ -502,7 +502,7 @@ describe( 'TodoListEditing', () => {
 			assertEqualMarkup( getViewData( view ),
 				'<ul class="todo-list">' +
 					'<li>' +
-						'<label class="todo-list__checkmark" contenteditable="false"></label>' +
+						'<label class="todo-list__label" contenteditable="false"></label>' +
 						'<strong>b{}foo</strong>' +
 					'</li>' +
 				'</ul>'
@@ -523,7 +523,7 @@ describe( 'TodoListEditing', () => {
 			assertEqualMarkup( getViewData( view ),
 				'<ul class="todo-list">' +
 					'<li>' +
-						'<label class="todo-list__checkmark" contenteditable="false"></label>' +
+						'<label class="todo-list__label" contenteditable="false"></label>' +
 						'<a href="foo"><strong>b{}foo</strong></a>' +
 					'</li>' +
 				'</ul>'
@@ -542,13 +542,13 @@ describe( 'TodoListEditing', () => {
 				'<ul class="todo-list">' +
 					'<li>' +
 						'<label class="todo-list__label">' +
-							'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+							'<input type="checkbox" disabled="disabled">' +
 							'<span class="todo-list__label__description">1</span>' +
 						'</label>' +
 					'</li>' +
 					'<li>' +
-						'<label class="todo-list__label todo-list__label_checked">' +
-							'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled" checked="checked">' +
+						'<label class="todo-list__label">' +
+							'<input type="checkbox" disabled="disabled" checked="checked">' +
 							'<span class="todo-list__label__description">2</span>' +
 						'</label>' +
 					'</li>' +
@@ -566,13 +566,13 @@ describe( 'TodoListEditing', () => {
 				'<ul class="todo-list">' +
 					'<li>' +
 						'<label class="todo-list__label">' +
-							'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+							'<input type="checkbox" disabled="disabled">' +
 							'<span class="todo-list__label__description">1.0</span>' +
 						'</label>' +
 						'<ul class="todo-list">' +
 							'<li>' +
 								'<label class="todo-list__label">' +
-									'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+									'<input type="checkbox" disabled="disabled">' +
 									'<span class="todo-list__label__description">2.1</span>' +
 								'</label>' +
 							'</li>' +
@@ -595,7 +595,7 @@ describe( 'TodoListEditing', () => {
 				'<ul class="todo-list">' +
 					'<li>' +
 						'<label class="todo-list__label">' +
-							'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+							'<input type="checkbox" disabled="disabled">' +
 							'<span class="todo-list__label__description">1.0</span>' +
 						'</label>' +
 					'</li>' +
@@ -605,7 +605,7 @@ describe( 'TodoListEditing', () => {
 						'<ul class="todo-list">' +
 							'<li>' +
 								'<label class="todo-list__label">' +
-									'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+									'<input type="checkbox" disabled="disabled">' +
 									'<span class="todo-list__label__description">3.1</span>' +
 								'</label>' +
 								'<ul>' +
@@ -614,7 +614,7 @@ describe( 'TodoListEditing', () => {
 							'</li>' +
 							'<li>' +
 								'<label class="todo-list__label">' +
-									'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+									'<input type="checkbox" disabled="disabled">' +
 									'<span class="todo-list__label__description">5.1</span>' +
 								'</label>' +
 							'</li>' +
@@ -637,7 +637,7 @@ describe( 'TodoListEditing', () => {
 				'<ul class="todo-list">' +
 					'<li>' +
 						'<label class="todo-list__label">' +
-							'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+							'<input type="checkbox" disabled="disabled">' +
 							'<span class="todo-list__label__description">1.0</span>' +
 						'</label>' +
 					'</li>' +
@@ -647,7 +647,7 @@ describe( 'TodoListEditing', () => {
 						'<ul class="todo-list">' +
 							'<li>' +
 								'<label class="todo-list__label">' +
-									'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+									'<input type="checkbox" disabled="disabled">' +
 									'<span class="todo-list__label__description">3.1</span>' +
 								'</label>' +
 								'<ol>' +
@@ -656,7 +656,7 @@ describe( 'TodoListEditing', () => {
 							'</li>' +
 							'<li>' +
 								'<label class="todo-list__label">' +
-									'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+									'<input type="checkbox" disabled="disabled">' +
 									'<span class="todo-list__label__description">5.1</span>' +
 								'</label>' +
 							'</li>' +
@@ -801,19 +801,19 @@ describe( 'TodoListEditing', () => {
 				'<ul class="todo-list">' +
 					'<li>' +
 						'<label class="todo-list__label">' +
-							'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled" checked="checked">' +
+							'<input type="checkbox" disabled="disabled" checked="checked">' +
 							'<span class="todo-list__label__description">1.1</span>' +
 						'</label>' +
 						'<ul class="todo-list">' +
 							'<li>' +
 								'<label class="todo-list__label">' +
-									'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+									'<input type="checkbox" disabled="disabled">' +
 									'<span class="todo-list__label__description">2.2</span>' +
 								'</label>' +
 							'</li>' +
 							'<li>' +
 								'<label class="todo-list__label">' +
-									'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled" checked="checked">' +
+									'<input type="checkbox" disabled="disabled" checked="checked">' +
 									'<span class="todo-list__label__description">3.2</span>' +
 								'</label>' +
 							'</li>' +
@@ -821,7 +821,7 @@ describe( 'TodoListEditing', () => {
 					'</li>' +
 					'<li>' +
 						'<label class="todo-list__label">' +
-							'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+							'<input type="checkbox" disabled="disabled">' +
 							'<span class="todo-list__label__description">4.1</span>' +
 						'</label>' +
 					'</li>' +

+ 0 - 26
packages/ckeditor5-list/theme/list.css

@@ -1,26 +0,0 @@
-/*
- * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-.ck-editor__editable .todo-list__checkmark {
-	display: inline-block;
-	position: relative;
-
-	&::before {
-		display: block;
-		position: absolute;
-		box-sizing: border-box;
-	}
-
-	&::after {
-		display: block;
-		position: absolute;
-		box-sizing: content-box;
-		pointer-events: none;
-	}
-
-	& input[type='checkbox'] {
-		display: block;
-	}
-}

+ 98 - 0
packages/ckeditor5-list/theme/todolist.css

@@ -0,0 +1,98 @@
+/*
+ * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	--ck-todo-list-checkmark-size: 16px;
+}
+
+.ck-content .todo-list {
+	list-style: none;
+
+	& li {
+		margin-bottom: 5px;
+
+		& .todo-list {
+			margin-top: 5px;
+		}
+	}
+
+	& .todo-list__label {
+		& > input {
+			-webkit-appearance: none;
+			display: inline-block;
+			position: relative;
+			cursor: pointer;
+			width: var(--ck-todo-list-checkmark-size);
+			height: var(--ck-todo-list-checkmark-size);
+			vertical-align: middle;
+
+			/* Needed on iOS */
+			border: 0;
+
+			/* LTR styles */
+			left: -25px;
+			margin-right: -15px;
+			right: 0;
+			margin-left: 0;
+
+			&::before {
+				display: block;
+				position: absolute;
+				box-sizing: border-box;
+				content: '';
+				width: 100%;
+				height: 100%;
+				border: 1px solid hsl(0, 0%, 20%);
+				border-radius: 2px;
+				transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background, 250ms ease-in-out border;
+			}
+
+			&::after {
+				display: block;
+				position: absolute;
+				box-sizing: content-box;
+				pointer-events: none;
+				content: '';
+
+				/* Calculate tick position, size and border-width proportional to the checkmark size. */
+				left: calc( var(--ck-todo-list-checkmark-size) / 3 );
+				top: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
+				width: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
+				height: calc( var(--ck-todo-list-checkmark-size) / 2.6 );
+				border-style: solid;
+				border-color: transparent;
+				border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0;
+				transform: rotate(45deg);
+			}
+
+			&:hover::before {
+				box-shadow: 0 0 0 5px hsla(0, 0%, 0%, 0.1);
+			}
+
+			&[checked] {
+				&::before {
+					background: hsl(126, 64%, 41%);
+					border-color: hsl(126, 64%, 41%);
+				}
+
+				&::after {
+					border-color: hsl(0, 0%, 100%);
+				}
+			}
+		}
+
+		& .todo-list__label__description {
+			vertical-align: middle;
+		}
+	}
+}
+
+/* RTL styles */
+[dir="rtl"] .todo-list .todo-list__label > input {
+	left: 0;
+	margin-right: 0;
+	right: -25px;
+	margin-left: -15px;
+}