Procházet zdrojové kódy

Merge pull request #142 from ckeditor/t/140

Internal: Improved markup of todo list returned by data pipeline. Closes #140.
Piotr Jasiun před 6 roky
rodič
revize
cb40c76328

+ 6 - 4
packages/ckeditor5-list/src/todolistconverters.js

@@ -128,15 +128,16 @@ export function dataModelViewInsertion( model ) {
 
 		viewWriter.addClass( 'todo-list', viewItem.parent );
 
-		const label = viewWriter.createAttributeElement( 'label' );
+		const label = viewWriter.createAttributeElement( 'label', { class: 'todo-list__label' } );
 		const checkbox = viewWriter.createEmptyElement( 'input', {
 			type: 'checkbox',
 			disabled: 'disabled',
-			class: 'todo-list__checkmark'
+			class: 'todo-list__label__checkmark'
 		} );
 
 		if ( data.item.getAttribute( 'todoListChecked' ) ) {
 			viewWriter.setAttribute( 'checked', 'checked', checkbox );
+			viewWriter.addClass( 'todo-list__label_checked', label );
 		}
 
 		viewWriter.insert( viewWriter.createPositionAt( viewItem, 0 ), checkbox );
@@ -170,8 +171,9 @@ export function dataModelViewTextInsertion( evt, data, conversionApi ) {
 	const viewWriter = conversionApi.writer;
 	const viewPosition = conversionApi.mapper.toViewPosition( data.range.start );
 	const viewText = viewWriter.createText( data.item.data );
-	const span = viewWriter.createAttributeElement( 'span', { class: 'todo-list__label' } );
-	const label = viewWriter.createAttributeElement( 'label' );
+
+	const span = viewWriter.createAttributeElement( 'span', { class: 'todo-list__label__description' } );
+	const label = viewPosition.parent.getChild( 0 );
 
 	viewWriter.insert( viewWriter.createPositionAt( viewPosition.parent, 'end' ), viewText );
 	viewWriter.wrap( viewWriter.createRangeOn( viewText ), span );

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

@@ -386,15 +386,15 @@ describe( 'TodoListEditing', () => {
 			expect( editor.getData() ).to.equal(
 				'<ul class="todo-list">' +
 					'<li>' +
-						'<label>' +
-							'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
-							'<span class="todo-list__label">1</span>' +
+						'<label class="todo-list__label">' +
+							'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+							'<span class="todo-list__label__description">1</span>' +
 						'</label>' +
 					'</li>' +
 					'<li>' +
-						'<label>' +
-							'<input class="todo-list__checkmark" type="checkbox" disabled="disabled" checked="checked">' +
-							'<span class="todo-list__label">2</span>' +
+						'<label class="todo-list__label todo-list__label_checked">' +
+							'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled" checked="checked">' +
+							'<span class="todo-list__label__description">2</span>' +
 						'</label>' +
 					'</li>' +
 				'</ul>'
@@ -410,15 +410,15 @@ describe( 'TodoListEditing', () => {
 			expect( editor.getData() ).to.equal(
 				'<ul class="todo-list">' +
 					'<li>' +
-						'<label>' +
-							'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
-							'<span class="todo-list__label">1.0</span>' +
+						'<label class="todo-list__label">' +
+							'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+							'<span class="todo-list__label__description">1.0</span>' +
 						'</label>' +
 						'<ul class="todo-list">' +
 							'<li>' +
-								'<label>' +
-									'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
-									'<span class="todo-list__label">2.1</span>' +
+								'<label class="todo-list__label">' +
+									'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+									'<span class="todo-list__label__description">2.1</span>' +
 								'</label>' +
 							'</li>' +
 						'</ul>' +
@@ -439,9 +439,9 @@ describe( 'TodoListEditing', () => {
 			expect( editor.getData() ).to.equal(
 				'<ul class="todo-list">' +
 					'<li>' +
-						'<label>' +
-							'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
-							'<span class="todo-list__label">1.0</span>' +
+						'<label class="todo-list__label">' +
+							'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+							'<span class="todo-list__label__description">1.0</span>' +
 						'</label>' +
 					'</li>' +
 				'</ul>' +
@@ -449,18 +449,18 @@ describe( 'TodoListEditing', () => {
 					'<li>2.0' +
 						'<ul class="todo-list">' +
 							'<li>' +
-								'<label>' +
-									'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
-									'<span class="todo-list__label">3.1</span>' +
+								'<label class="todo-list__label">' +
+									'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+									'<span class="todo-list__label__description">3.1</span>' +
 								'</label>' +
 								'<ul>' +
 									'<li>4.2</li>' +
 								'</ul>' +
 							'</li>' +
 							'<li>' +
-								'<label>' +
-									'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
-									'<span class="todo-list__label">5.1</span>' +
+								'<label class="todo-list__label">' +
+									'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+									'<span class="todo-list__label__description">5.1</span>' +
 								'</label>' +
 							'</li>' +
 						'</ul>' +
@@ -481,9 +481,9 @@ describe( 'TodoListEditing', () => {
 			expect( editor.getData() ).to.equal(
 				'<ul class="todo-list">' +
 					'<li>' +
-						'<label>' +
-							'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
-							'<span class="todo-list__label">1.0</span>' +
+						'<label class="todo-list__label">' +
+							'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+							'<span class="todo-list__label__description">1.0</span>' +
 						'</label>' +
 					'</li>' +
 				'</ul>' +
@@ -491,18 +491,18 @@ describe( 'TodoListEditing', () => {
 					'<li>2.0' +
 						'<ul class="todo-list">' +
 							'<li>' +
-								'<label>' +
-									'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
-									'<span class="todo-list__label">3.1</span>' +
+								'<label class="todo-list__label">' +
+									'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+									'<span class="todo-list__label__description">3.1</span>' +
 								'</label>' +
 								'<ol>' +
 									'<li>4.2</li>' +
 								'</ol>' +
 							'</li>' +
 							'<li>' +
-								'<label>' +
-									'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
-									'<span class="todo-list__label">5.1</span>' +
+								'<label class="todo-list__label">' +
+									'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+									'<span class="todo-list__label__description">5.1</span>' +
 								'</label>' +
 							'</li>' +
 						'</ul>' +
@@ -645,29 +645,29 @@ describe( 'TodoListEditing', () => {
 			editor.setData(
 				'<ul class="todo-list">' +
 					'<li>' +
-						'<label>' +
-							'<input class="todo-list__checkmark" type="checkbox" disabled="disabled" checked="checked">' +
-							'<span class="todo-list__label">1.1</span>' +
+						'<label class="todo-list__label">' +
+							'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled" checked="checked">' +
+							'<span class="todo-list__label__description">1.1</span>' +
 						'</label>' +
 						'<ul class="todo-list">' +
 							'<li>' +
-								'<label>' +
-									'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
-									'<span class="todo-list__label">2.2</span>' +
+								'<label class="todo-list__label">' +
+									'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+									'<span class="todo-list__label__description">2.2</span>' +
 								'</label>' +
 							'</li>' +
 							'<li>' +
-								'<label>' +
-									'<input class="todo-list__checkmark" type="checkbox" disabled="disabled" checked="checked">' +
-									'<span class="todo-list__label">3.2</span>' +
+								'<label class="todo-list__label">' +
+									'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled" checked="checked">' +
+									'<span class="todo-list__label__description">3.2</span>' +
 								'</label>' +
 							'</li>' +
 						'</ul>' +
 					'</li>' +
 					'<li>' +
-						'<label>' +
-							'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
-							'<span class="todo-list__label">4.1</span>' +
+						'<label class="todo-list__label">' +
+							'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
+							'<span class="todo-list__label__description">4.1</span>' +
 						'</label>' +
 					'</li>' +
 				'</ul>'