Skip to content
This repository was archived by the owner on Jun 26, 2020. It is now read-only.

Commit db1cd82

Browse files
jodatorjodator
authored
Merge pull request #46 from ckeditor/t/24
Feature: Added separators to the table UI drop-downs. Closes #24.
2 parents d4dc54d + 23af545 commit db1cd82

File tree

2 files changed

+39
-26
lines changed

2 files changed

+39
-26
lines changed

‎src/tableui.js

+21-10
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ export default class TableUI extends Plugin {
7575
editor.ui.componentFactory.add( 'tableColumn', locale => {
7676
const options = [
7777
{ commandName: 'setColumnHeader', label: t( 'Header column' ), bindIsActive: true },
78+
'|',
7879
{ commandName: 'insertColumnBefore', label: t( 'Insert column before' ) },
7980
{ commandName: 'insertColumnAfter', label: t( 'Insert column after' ) },
8081
{ commandName: 'removeColumn', label: t( 'Delete column' ) }
@@ -86,6 +87,7 @@ export default class TableUI extends Plugin {
8687
editor.ui.componentFactory.add( 'tableRow', locale => {
8788
const options = [
8889
{ commandName: 'setRowHeader', label: t( 'Header row' ), bindIsActive: true },
90+
'|',
8991
{ commandName: 'insertRowBelow', label: t( 'Insert row below' ) },
9092
{ commandName: 'insertRowAbove', label: t( 'Insert row above' ) },
9193
{ commandName: 'removeRow', label: t( 'Delete row' ) }
@@ -100,6 +102,7 @@ export default class TableUI extends Plugin {
100102
{ commandName: 'mergeCellRight', label: t( 'Merge cell right' ) },
101103
{ commandName: 'mergeCellDown', label: t( 'Merge cell down' ) },
102104
{ commandName: 'mergeCellLeft', label: t( 'Merge cell left' ) },
105+
'|',
103106
{ commandName: 'splitCellVertically', label: t( 'Split cell vertically' ) },
104107
{ commandName: 'splitCellHorizontally', label: t( 'Split cell horizontally' ) }
105108
];
@@ -161,20 +164,28 @@ export default class TableUI extends Plugin {
161164
// @param {Array.<module:core/command~Command>} commands List of commands to update.
162165
// @param {module:utils/collection~Collection} dropdownItems Collection of dropdown items to update with given option.
163166
function addListOption( option, editor, commands, dropdownItems ) {
164-
const { commandName, label, bindIsActive } = option;
165-
const command = editor.commands.get( commandName );
167+
const itemModel = new Model();
166168

167-
commands.push( command );
169+
if ( option === '|' ) {
170+
itemModel.set( {
171+
isSeparator: true
172+
} );
173+
} else {
174+
const { commandName, label, bindIsActive } = option;
175+
const command = editor.commands.get( commandName );
176+
177+
commands.push( command );
168178

169-
const itemModel = new Model( {
170-
commandName,
171-
label
172-
} );
179+
itemModel.set( {
180+
commandName,
181+
label
182+
} );
173183

174-
itemModel.bind( 'isEnabled' ).to( command );
184+
itemModel.bind( 'isEnabled' ).to( command );
175185

176-
if ( bindIsActive ) {
177-
itemModel.bind( 'isActive' ).to( command, 'value' );
186+
if ( bindIsActive ) {
187+
itemModel.bind( 'isActive' ).to( command, 'value' );
188+
}
178189
}
179190

180191
dropdownItems.add( itemModel );

‎tests/tableui.js

+18-16
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
1212
import TableEditing from '../src/tableediting';
1313
import TableUI from '../src/tableui';
1414
import DropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownview';
15+
import ListSeparatorView from '@ckeditor/ckeditor5-ui/src/list/listseparatorview';
1516

1617
testUtils.createSinonSandbox();
1718

@@ -121,9 +122,9 @@ describe( 'TableUI', () => {
121122
it( 'should have proper items in panel', () => {
122123
const listView = dropdown.listView;
123124

124-
const labels = listView.items.map( ( { label } ) => label );
125+
const labels = listView.items.map( item => item instanceof ListSeparatorView ? '|' : item.label );
125126

126-
expect( labels ).to.deep.equal( [ 'Header row', 'Insert row below', 'Insert row above', 'Delete row' ] );
127+
expect( labels ).to.deep.equal( [ 'Header row', '|', 'Insert row below', 'Insert row above', 'Delete row' ] );
127128
} );
128129

129130
it( 'should bind items in panel to proper commands', () => {
@@ -140,9 +141,9 @@ describe( 'TableUI', () => {
140141
removeRowCommand.isEnabled = true;
141142

142143
expect( items.get( 0 ).isEnabled ).to.be.true;
143-
expect( items.get( 1 ).isEnabled ).to.be.true;
144144
expect( items.get( 2 ).isEnabled ).to.be.true;
145145
expect( items.get( 3 ).isEnabled ).to.be.true;
146+
expect( items.get( 4 ).isEnabled ).to.be.true;
146147
expect( dropdown.buttonView.isEnabled ).to.be.true;
147148

148149
setRowHeaderCommand.isEnabled = false;
@@ -152,16 +153,16 @@ describe( 'TableUI', () => {
152153

153154
insertRowBelowCommand.isEnabled = false;
154155

155-
expect( items.get( 1 ).isEnabled ).to.be.false;
156+
expect( items.get( 2 ).isEnabled ).to.be.false;
156157
expect( dropdown.buttonView.isEnabled ).to.be.true;
157158

158159
insertRowAboveCommand.isEnabled = false;
159-
expect( items.get( 2 ).isEnabled ).to.be.false;
160+
expect( items.get( 3 ).isEnabled ).to.be.false;
160161
expect( dropdown.buttonView.isEnabled ).to.be.true;
161162

162163
removeRowCommand.isEnabled = false;
163164

164-
expect( items.get( 3 ).isEnabled ).to.be.false;
165+
expect( items.get( 4 ).isEnabled ).to.be.false;
165166
expect( dropdown.buttonView.isEnabled ).to.be.false;
166167
} );
167168

@@ -216,9 +217,9 @@ describe( 'TableUI', () => {
216217
it( 'should have proper items in panel', () => {
217218
const listView = dropdown.listView;
218219

219-
const labels = listView.items.map( ( { label } ) => label );
220+
const labels = listView.items.map( item => item instanceof ListSeparatorView ? '|' : item.label );
220221

221-
expect( labels ).to.deep.equal( [ 'Header column', 'Insert column before', 'Insert column after', 'Delete column' ] );
222+
expect( labels ).to.deep.equal( [ 'Header column', '|', 'Insert column before', 'Insert column after', 'Delete column' ] );
222223
} );
223224

224225
it( 'should bind items in panel to proper commands', () => {
@@ -235,9 +236,9 @@ describe( 'TableUI', () => {
235236
removeColumnCommand.isEnabled = true;
236237

237238
expect( items.get( 0 ).isEnabled ).to.be.true;
238-
expect( items.get( 1 ).isEnabled ).to.be.true;
239239
expect( items.get( 2 ).isEnabled ).to.be.true;
240240
expect( items.get( 3 ).isEnabled ).to.be.true;
241+
expect( items.get( 4 ).isEnabled ).to.be.true;
241242
expect( dropdown.buttonView.isEnabled ).to.be.true;
242243

243244
setColumnHeaderCommand.isEnabled = false;
@@ -247,14 +248,14 @@ describe( 'TableUI', () => {
247248

248249
insertColumnBeforeCommand.isEnabled = false;
249250

250-
expect( items.get( 1 ).isEnabled ).to.be.false;
251+
expect( items.get( 2 ).isEnabled ).to.be.false;
251252
expect( dropdown.buttonView.isEnabled ).to.be.true;
252253

253254
insertColumnAfterCommand.isEnabled = false;
254-
expect( items.get( 2 ).isEnabled ).to.be.false;
255+
expect( items.get( 3 ).isEnabled ).to.be.false;
255256

256257
removeColumnCommand.isEnabled = false;
257-
expect( items.get( 3 ).isEnabled ).to.be.false;
258+
expect( items.get( 4 ).isEnabled ).to.be.false;
258259
expect( dropdown.buttonView.isEnabled ).to.be.false;
259260
} );
260261

@@ -309,13 +310,14 @@ describe( 'TableUI', () => {
309310
it( 'should have proper items in panel', () => {
310311
const listView = dropdown.listView;
311312

312-
const labels = listView.items.map( ( { label } ) => label );
313+
const labels = listView.items.map( item => item instanceof ListSeparatorView ? '|' : item.label );
313314

314315
expect( labels ).to.deep.equal( [
315316
'Merge cell up',
316317
'Merge cell right',
317318
'Merge cell down',
318319
'Merge cell left',
320+
'|',
319321
'Split cell vertically',
320322
'Split cell horizontally'
321323
] );
@@ -342,8 +344,8 @@ describe( 'TableUI', () => {
342344
expect( items.get( 1 ).isEnabled ).to.be.true;
343345
expect( items.get( 2 ).isEnabled ).to.be.true;
344346
expect( items.get( 3 ).isEnabled ).to.be.true;
345-
expect( items.get( 4 ).isEnabled ).to.be.true;
346347
expect( items.get( 5 ).isEnabled ).to.be.true;
348+
expect( items.get( 6 ).isEnabled ).to.be.true;
347349
expect( dropdown.buttonView.isEnabled ).to.be.true;
348350

349351
mergeCellUpCommand.isEnabled = false;
@@ -363,10 +365,10 @@ describe( 'TableUI', () => {
363365
expect( items.get( 3 ).isEnabled ).to.be.false;
364366

365367
splitCellVerticallyCommand.isEnabled = false;
366-
expect( items.get( 4 ).isEnabled ).to.be.false;
368+
expect( items.get( 5 ).isEnabled ).to.be.false;
367369

368370
splitCellHorizontallyCommand.isEnabled = false;
369-
expect( items.get( 5 ).isEnabled ).to.be.false;
371+
expect( items.get( 6 ).isEnabled ).to.be.false;
370372

371373
expect( dropdown.buttonView.isEnabled ).to.be.false;
372374
} );

0 commit comments

Comments
 (0)