Przeglądaj źródła

Properly remove label from todo list item when changing list item type.

Maciej Gołaszewski 6 lat temu
rodzic
commit
fed0b72763

+ 20 - 2
packages/ckeditor5-list/src/todolistconverters.js

@@ -233,7 +233,7 @@ export function dataViewModelCheckmarkInsertion( evt, data, conversionApi ) {
  * @param {Function} onCheckedChange Callback fired after clicking the checkbox UI element.
  * @returns {Function} Returns a conversion callback.
  */
-export function modelViewChangeType( onCheckedChange ) {
+export function modelViewChangeType( onCheckedChange, view ) {
 	return ( evt, data, conversionApi ) => {
 		const viewItem = conversionApi.mapper.toViewElement( data.item );
 		const viewWriter = conversionApi.writer;
@@ -246,7 +246,12 @@ export function modelViewChangeType( onCheckedChange ) {
 			viewWriter.insert( viewWriter.createPositionAt( viewItem, 0 ), checkmarkElement );
 		} else if ( data.attributeOldValue == 'todo' ) {
 			viewWriter.removeClass( 'todo-list', viewItem.parent );
-			viewWriter.remove( viewItem.getChild( 0 ) );
+
+			const label = findLabel( viewItem, view );
+
+			if ( label ) {
+				viewWriter.remove( label );
+			}
 		}
 	};
 }
@@ -321,3 +326,16 @@ function createCheckmarkElement( modelItem, viewWriter, isChecked, onChange ) {
 
 	return uiElement;
 }
+
+// Helper method to find label element inside li.
+function findLabel( viewItem, view ) {
+	const range = view.createRangeIn( viewItem );
+
+	let label;
+	for ( const value of range ) {
+		if ( value.item.is( 'uiElement', 'label' ) ) {
+			label = value.item;
+		}
+	}
+	return label;
+}

+ 1 - 1
packages/ckeditor5-list/src/todolistediting.js

@@ -79,7 +79,7 @@ export default class TodoListEditing extends Plugin {
 
 		editing.downcastDispatcher.on(
 			'attribute:listType:listItem',
-			modelViewChangeType( listItem => this._handleCheckmarkChange( listItem ) )
+			modelViewChangeType( listItem => this._handleCheckmarkChange( listItem ), editing.view )
 		);
 		editing.downcastDispatcher.on(
 			'attribute:todoListChecked:listItem',

+ 3 - 2
packages/ckeditor5-list/tests/manual/todo-list.js

@@ -17,12 +17,13 @@ import Undo from '@ckeditor/ckeditor5-undo/src/undo';
 import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
 import List from '../../src/list';
 import TodoList from '../../src/todolist';
+import Link from '../../../ckeditor5-link/src/link';
 
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
-		plugins: [ Enter, Typing, Heading, Highlight, Table, Bold, Paragraph, Undo, List, TodoList, Clipboard ],
+		plugins: [ Enter, Typing, Heading, Highlight, Table, Bold, Paragraph, Undo, List, TodoList, Clipboard, Link ],
 		toolbar: [
-			'heading', '|', 'bulletedList', 'numberedList', 'todoList', '|', 'bold', 'highlight', 'insertTable', '|', 'undo', 'redo'
+			'heading', '|', 'bulletedList', 'numberedList', 'todoList', '|', 'bold', 'link', 'highlight', 'insertTable', '|', 'undo', 'redo'
 		],
 		table: {
 			contentToolbar: [

+ 38 - 1
packages/ckeditor5-list/tests/todolistediting.js

@@ -12,6 +12,7 @@ import ListCommand from '../src/listcommand';
 import TodoListCheckCommand from '../src/todolistcheckcommand';
 import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
 import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
+import LinkEditing from '@ckeditor/ckeditor5-link/src/linkediting';
 
 import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
 import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
@@ -27,7 +28,7 @@ describe( 'TodoListEditing', () => {
 	beforeEach( () => {
 		return VirtualTestEditor
 			.create( {
-				plugins: [ TodoListEditing, Typing, BoldEditing, BlockQuoteEditing ]
+				plugins: [ TodoListEditing, Typing, BoldEditing, BlockQuoteEditing, LinkEditing ]
 			} )
 			.then( newEditor => {
 				editor = newEditor;
@@ -287,6 +288,42 @@ describe( 'TodoListEditing', () => {
 			);
 		} );
 
+		it( 'should properly convert list type change - inner text with attribute', () => {
+			setModelData( model,
+				'<listItem listType="todo" listIndent="0">1[.0</listItem>' +
+				'<listItem listType="todo" listIndent="0"><$text bold="true">2.0</$text></listItem>' +
+				'<listItem listType="todo" listIndent="0">3.]0</listItem>'
+			);
+
+			editor.execute( 'bulletedList' );
+
+			expect( getViewData( view ) ).to.equal(
+				'<ul>' +
+				'<li>1{.0</li>' +
+				'<li><strong>2.0</strong></li>' +
+				'<li>3.}0</li>' +
+				'</ul>'
+			);
+		} );
+
+		it( 'should properly convert list type change - inner text with many attributes', () => {
+			setModelData( model,
+				'<listItem listType="todo" listIndent="0">1[.0</listItem>' +
+				'<listItem listType="todo" listIndent="0"><$text bold="true" linkHref="foo">2.0</$text></listItem>' +
+				'<listItem listType="todo" listIndent="0">3.]0</listItem>'
+			);
+
+			editor.execute( 'bulletedList' );
+
+			expect( getViewData( view ) ).to.equal(
+				'<ul>' +
+				'<li>1{.0</li>' +
+				'<li><a href="foo"><strong>2.0</strong></a></li>' +
+				'<li>3.}0</li>' +
+				'</ul>'
+			);
+		} );
+
 		it( 'should convert todoListChecked attribute change', () => {
 			setModelData( model, '<listItem listType="todo" listIndent="0">1.0</listItem>' );