浏览代码

Handle delete event handling on selected table cells.

Maciej Gołaszewski 5 年之前
父节点
当前提交
11777c4590

+ 19 - 0
packages/ckeditor5-table/src/tableselection.js

@@ -102,6 +102,14 @@ export default class TableSelection extends Plugin {
 		setupTableSelectionHighlighting( editor, this );
 
 		selection.on( 'change:range', () => this._clearSelectionOnExternalChange( selection ) );
+
+		this.listenTo( editor.editing.view.document, 'delete', evt => {
+			if ( this.hasMultiCellSelection ) {
+				evt.stop();
+
+				this.clearSelectedTableCells();
+			}
+		}, { priority: 'high' } );
 	}
 
 	/**
@@ -243,6 +251,17 @@ export default class TableSelection extends Plugin {
 		} );
 	}
 
+	// TODO: helper function?
+	clearSelectedTableCells() {
+		const model = this.editor.model;
+
+		model.change( writer => {
+			for ( const tableCell of this.getSelectedTableCells() ) {
+				model.deleteContent( writer.createSelection( tableCell, 'in' ) );
+			}
+		} );
+	}
+
 	/**
 	 * Synchronizes the model selection with currently selected table cells.
 	 *

+ 90 - 0
packages/ckeditor5-table/tests/tableselection-integration.js

@@ -0,0 +1,90 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals document */
+
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import { getData as getModelData, setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+
+import TableEditing from '../src/tableediting';
+import TableSelection from '../src/tableselection';
+import { modelTable } from './_utils/utils';
+import { assertEqualMarkup } from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
+import DomEventData from '@ckeditor/ckeditor5-engine/src/view/observer/domeventdata';
+import Delete from '@ckeditor/ckeditor5-typing/src/delete';
+import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
+
+describe( 'table selection', () => {
+	let editor, model, tableSelection, modelRoot, element;
+
+	describe( 'TableSelection - input integration', () => {
+		afterEach( async () => {
+			element.remove();
+			await editor.destroy();
+		} );
+
+		describe( 'on delete', () => {
+			beforeEach( async () => {
+				await setupEditor( [ Delete ] );
+			} );
+
+			it( 'should clear contents of the selected table cells', () => {
+				tableSelection.startSelectingFrom( modelRoot.getNodeByPath( [ 0, 0, 0 ] ) );
+				tableSelection.setSelectingTo( modelRoot.getNodeByPath( [ 0, 1, 1 ] ) );
+
+				const domEventData = new DomEventData( editor.editing.view.document, {
+					preventDefault: sinon.spy()
+				}, {
+					direction: 'backward',
+					unit: 'character',
+					sequence: 1
+				} );
+				editor.editing.view.document.fire( 'delete', domEventData );
+
+				assertEqualMarkup( getModelData( model ), modelTable( [
+					[ { contents: '', isSelected: true }, { contents: '', isSelected: true }, '13' ],
+					[ { contents: '', isSelected: true }, { contents: '', isSelected: true }, '23' ],
+					[ '31', '32', '33' ]
+				] ) );
+			} );
+
+			it( 'should not interfere with default key handler if no table selection', () => {
+				const domEventData = new DomEventData( editor.editing.view.document, {
+					preventDefault: sinon.spy()
+				}, {
+					direction: 'backward',
+					unit: 'character',
+					sequence: 1
+				} );
+				editor.editing.view.document.fire( 'delete', domEventData );
+
+				assertEqualMarkup( getModelData( model ), modelTable( [
+					[ '1[]', '12', '13' ],
+					[ '21', '22', '23' ],
+					[ '31', '32', '33' ]
+				] ) );
+			} );
+		} );
+	} );
+
+	async function setupEditor( plugins ) {
+		element = document.createElement( 'div' );
+		document.body.appendChild( element );
+
+		editor = await ClassicTestEditor.create( element, {
+			plugins: [ TableEditing, TableSelection, Paragraph, ...plugins ]
+		} );
+
+		model = editor.model;
+		modelRoot = model.document.getRoot();
+		tableSelection = editor.plugins.get( TableSelection );
+
+		setModelData( model, modelTable( [
+			[ '11[]', '12', '13' ],
+			[ '21', '22', '23' ],
+			[ '31', '32', '33' ]
+		] ) );
+	}
+} );