Explorar el Código

Added: Initial splitCell dropdown.

Maciej Gołaszewski hace 7 años
padre
commit
81c2b9d841

+ 9 - 0
packages/ckeditor5-table/src/tableui.js

@@ -77,6 +77,15 @@ export default class TableUI extends Plugin {
 
 			return this._prepareDropdown( 'Merge cell', icon, options, locale );
 		} );
+
+		editor.ui.componentFactory.add( 'splitCell', locale => {
+			const options = [
+				{ command: 'splitCellVertically', label: 'Split cell vertically' },
+				{ command: 'splitCellHorizontally', label: 'Split cell horizontally' }
+			];
+
+			return this._prepareDropdown( 'Split cell', icon, options, locale );
+		} );
 	}
 
 	/**

+ 1 - 1
packages/ckeditor5-table/tests/manual/table.js

@@ -13,7 +13,7 @@ ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 		plugins: [ ArticlePluginSet, Table ],
 		toolbar: [
-			'heading', '|', 'insertTable', '|', 'tableColumn', 'tableRow', 'mergeCell',
+			'heading', '|', 'insertTable', '|', 'tableColumn', 'tableRow', 'mergeCell', 'splitCell',
 			'|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
 		]
 	} )

+ 71 - 3
packages/ckeditor5-table/tests/tableui.js

@@ -47,7 +47,7 @@ describe( 'TableUI', () => {
 		return editor.destroy();
 	} );
 
-	describe( 'insertTable button', () => {
+	describe( 'insertTable dropdown', () => {
 		let insertTable;
 
 		beforeEach( () => {
@@ -157,7 +157,7 @@ describe( 'TableUI', () => {
 		} );
 	} );
 
-	describe( 'tableColumn button', () => {
+	describe( 'tableColumn dropdown', () => {
 		let dropdown;
 
 		beforeEach( () => {
@@ -232,7 +232,7 @@ describe( 'TableUI', () => {
 		} );
 	} );
 
-	describe( 'mergeCell button', () => {
+	describe( 'mergeCell dropdown', () => {
 		let dropdown;
 
 		beforeEach( () => {
@@ -313,4 +313,72 @@ describe( 'TableUI', () => {
 			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'mergeCellUp' );
 		} );
 	} );
+
+	describe( 'splitCell dropdown', () => {
+		let dropdown;
+
+		beforeEach( () => {
+			dropdown = editor.ui.componentFactory.create( 'splitCell' );
+		} );
+
+		it( 'have button with proper properties set', () => {
+			expect( dropdown ).to.be.instanceOf( DropdownView );
+
+			const button = dropdown.buttonView;
+
+			expect( button.isOn ).to.be.false;
+			expect( button.tooltip ).to.be.true;
+			expect( button.label ).to.equal( 'Split cell' );
+			expect( button.icon ).to.match( /<svg / );
+		} );
+
+		it( 'should have proper items in panel', () => {
+			const listView = dropdown.listView;
+
+			const labels = listView.items.map( ( { label } ) => label );
+
+			expect( labels ).to.deep.equal( [ 'Split cell vertically', 'Split cell horizontally' ] );
+		} );
+
+		it( 'should bind items in panel to proper commands', () => {
+			const items = dropdown.listView.items;
+
+			const splitCellVerticallyCommand = editor.commands.get( 'splitCellVertically' );
+			const splitCellHorizontallyCommand = editor.commands.get( 'splitCellHorizontally' );
+
+			splitCellVerticallyCommand.isEnabled = true;
+			splitCellHorizontallyCommand.isEnabled = true;
+
+			expect( items.get( 0 ).isEnabled ).to.be.true;
+			expect( items.get( 1 ).isEnabled ).to.be.true;
+			expect( dropdown.buttonView.isEnabled ).to.be.true;
+
+			splitCellVerticallyCommand.isEnabled = false;
+
+			expect( items.get( 0 ).isEnabled ).to.be.false;
+			expect( dropdown.buttonView.isEnabled ).to.be.true;
+
+			splitCellHorizontallyCommand.isEnabled = false;
+
+			expect( items.get( 1 ).isEnabled ).to.be.false;
+			expect( dropdown.buttonView.isEnabled ).to.be.false;
+		} );
+
+		it( 'should focus view after command execution', () => {
+			const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' );
+
+			dropdown.listView.items.get( 0 ).fire( 'execute' );
+
+			sinon.assert.calledOnce( focusSpy );
+		} );
+
+		it( 'executes command when it\'s executed', () => {
+			const spy = sinon.stub( editor, 'execute' );
+
+			dropdown.listView.items.get( 0 ).fire( 'execute' );
+
+			expect( spy.calledOnce ).to.be.true;
+			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'splitCellVertically' );
+		} );
+	} );
 } );