Handling tab and shift+tab keys in document lists and an integration with other plugins

packages/ckeditor5-list/src/list/listediting.js

@@ -171,19 +171,18 @@ export default class ListEditing extends Plugin {
 			evt.stop();
 		}, { context: 'li' } );
 
-		const getCommandExecuter = commandName => {
-			return ( data, cancel ) => {
-				const command = this.editor.commands.get( commandName );
-
-				if ( command.isEnabled ) {
-					this.editor.execute( commandName );
-					cancel();
-				}
-			};
-		};
-
-		editor.keystrokes.set( 'Tab', getCommandExecuter( 'indentList' ) );
-		editor.keystrokes.set( 'Shift+Tab', getCommandExecuter( 'outdentList' ) );
+		this.listenTo( editor.editing.view.document, 'tab', ( evt, data ) => {
+			const commandName = data.shiftKey ? 'outdentList' : 'indentList';
+			const command = this.editor.commands.get( commandName );
+
+			if ( command.isEnabled ) {
+				editor.execute( commandName );
+
+				data.stopPropagation();
+				data.preventDefault();
+				evt.stop();
+			}
+		}, { context: 'li' } );
 	}
 
 	/**

packages/ckeditor5-list/tests/list/listediting.js

@@ -22,8 +22,10 @@ import IndentEditing from '@ckeditor/ckeditor5-indent/src/indentediting';
 
 import { getCode } from '@ckeditor/ckeditor5-utils/src/keyboard';
 import TableEditing from '@ckeditor/ckeditor5-table/src/tableediting';
+import TableKeyboard from '@ckeditor/ckeditor5-table/src/tablekeyboard';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+import { modelTable } from '@ckeditor/ckeditor5-table/tests/_utils/utils';
 
 describe( 'ListEditing', () => {
 	let editor, model, modelDoc, modelRoot, view, viewDoc, viewRoot;
@@ -34,7 +36,7 @@ describe( 'ListEditing', () => {
 		return VirtualTestEditor
 			.create( {
 				plugins: [ Paragraph, IndentEditing, ClipboardPipeline, BoldEditing, ListEditing, UndoEditing, BlockQuoteEditing,
-					TableEditing ]
+					TableEditing, TableKeyboard ]
 			} )
 			.then( newEditor => {
 				editor = newEditor;
@@ -375,7 +377,7 @@ describe( 'ListEditing', () => {
 		} );
 
 		it( 'should execute outdentList command on Shift+Tab keystroke', () => {
-			domEvtDataStub.keyCode += getCode( 'Shift' );
+			domEvtDataStub.shiftKey = true;
 
 			setModelData(
 				model,
@@ -416,6 +418,103 @@ describe( 'ListEditing', () => {
 			sinon.assert.notCalled( domEvtDataStub.preventDefault );
 			sinon.assert.notCalled( domEvtDataStub.stopPropagation );
 		} );
+
+		it( 'should execute list indent command when in a li context and nested in an element that also listens to Tab', () => {
+			const listInputModel = '<listItem listIndent="0" listType="bulleted">foo</listItem>' +
+				'<listItem listIndent="0" listType="bulleted">[]bar</listItem>';
+
+			const listOutputModel = '<listItem listIndent="0" listType="bulleted">foo</listItem>' +
+				'<listItem listIndent="1" listType="bulleted">[]bar</listItem>';
+
+			const input = modelTable( [
+				[ listInputModel, 'bar' ]
+			] );
+
+			const output = modelTable( [
+				[ listOutputModel, 'bar' ]
+			] );
+
+			setModelData( model, input );
+
+			editor.editing.view.document.fire( 'keydown', domEvtDataStub );
+
+			sinon.assert.calledWithExactly( editor.execute, 'indentList' );
+			sinon.assert.calledOnce( domEvtDataStub.preventDefault );
+			sinon.assert.calledOnce( domEvtDataStub.stopPropagation );
+			expect( getModelData( model ) ).to.equalMarkup( output );
+		} );
+
+		it( 'should execute list outdent command when in a li context and nested in an element that also listens to Tab', () => {
+			const listInputModel = '<listItem listIndent="0" listType="bulleted">foo</listItem>' +
+							'<listItem listIndent="1" listType="bulleted">[]bar</listItem>';
+
+			const listOutputModel = '<listItem listIndent="0" listType="bulleted">foo</listItem>' +
+				'<listItem listIndent="0" listType="bulleted">[]bar</listItem>';
+
+			const input = modelTable( [
+				[ listInputModel, 'bar' ]
+			] );
+
+			const output = modelTable( [
+				[ listOutputModel, 'bar' ]
+			] );
+
+			setModelData( model, input );
+
+			domEvtDataStub.shiftKey = true;
+
+			editor.editing.view.document.fire( 'keydown', domEvtDataStub );
+
+			sinon.assert.calledWithExactly( editor.execute, 'outdentList' );
+			sinon.assert.calledOnce( domEvtDataStub.preventDefault );
+			sinon.assert.calledOnce( domEvtDataStub.stopPropagation );
+			expect( getModelData( model ) ).to.equalMarkup( output );
+		} );
+
+		it( 'should not capture event when list cannot be indented and allow other listeners to capture it', () => {
+			const listInputModel = '<listItem listIndent="0" listType="bulleted">bar[]</listItem>';
+			const listOutputModel = '<listItem listIndent="0" listType="bulleted">bar</listItem>';
+
+			const input = modelTable( [
+				[ 'foo', listInputModel ]
+			] );
+
+			const output = modelTable( [
+				[ 'foo', listOutputModel ],
+				[ '[]', '' ]
+			] );
+
+			setModelData( model, input );
+
+			editor.editing.view.document.fire( 'keydown', domEvtDataStub );
+
+			sinon.assert.neverCalledWith( editor.execute, 'indentList' );
+			sinon.assert.neverCalledWith( editor.execute, 'outdentList' );
+			sinon.assert.calledOnce( domEvtDataStub.preventDefault );
+			sinon.assert.calledOnce( domEvtDataStub.stopPropagation );
+			expect( getModelData( model ) ).to.equalMarkup( output );
+		} );
+
+		it( 'should not capture event when not in a list and should allow other listeners to capture it', () => {
+			const input = modelTable( [
+				[ 'foo', 'bar[]' ]
+			] );
+
+			const output = modelTable( [
+				[ 'foo', 'bar' ],
+				[ '[]', '' ]
+			] );
+
+			setModelData( model, input );
+
+			editor.editing.view.document.fire( 'keydown', domEvtDataStub );
+
+			sinon.assert.neverCalledWith( editor.execute, 'indentList' );
+			sinon.assert.neverCalledWith( editor.execute, 'outdentList' );
+			sinon.assert.calledOnce( domEvtDataStub.preventDefault );
+			sinon.assert.calledOnce( domEvtDataStub.stopPropagation );
+			expect( getModelData( model ) ).to.equalMarkup( output );
+		} );
 	} );
 
 	describe( 'flat lists', () => {

packages/ckeditor5-list/tests/manual/documentlist.html

@@ -1,3 +1,8 @@
+<div class="options-container">
+	<input id="chbx-show-borders" type="checkbox" />
+	<label for="chbx-show-borders">Show borders</label>
+</div>
+
 <div id="editor">
 	a
 	<ul>
@@ -100,16 +105,20 @@ <h2>Heading 1</h2>
 </div>
 
 <style>
-	ul, ol {
+	.show-borders ul, ol {
 		border: 2px dashed blue;
 		padding-top: 5px;
 		padding-bottom: 5px;
 		margin: 5px;
 	}
 
-	li {
+	.show-borders li {
 		border: 2px dotted red;
 		padding: 5px;
 		margin: 5px;
 	}
+
+	.options-container {
+		margin-bottom: 16px;
+	}
 </style>

packages/ckeditor5-list/tests/manual/documentlist.js

@@ -108,3 +108,9 @@ ClassicEditor
 	.catch( err => {
 		console.error( err.stack );
 	} );
+
+const onShowBordersChange = () => {
+	document.body.classList.toggle( 'show-borders' );
+};
+
+document.getElementById( 'chbx-show-borders' ).addEventListener( 'change', onShowBordersChange );

packages/ckeditor5-list/tests/manual/documentlist.md

@@ -1,3 +1,5 @@
 ## Document List
 
 TODO
+
+Border colors: Blue for `ul` and `ol`, red for `li`.