Przeglądaj źródła

Merge branch 'master' into t/ckeditor5-widget/40

Aleksander Nowodzinski 7 lat temu
rodzic
commit
25ef9e3734

+ 8 - 0
packages/ckeditor5-table/CHANGELOG.md

@@ -0,0 +1,8 @@
+Changelog
+=========
+
+## 10.0.0 (2018-06-21)
+
+### Features
+
+* Introduced the table feature. See [#1](https://github.com/ckeditor/ckeditor5-table/issues/1) and [#3](https://github.com/ckeditor/ckeditor5-table/issues/3).

+ 1 - 1
packages/ckeditor5-table/README.md

@@ -14,7 +14,7 @@ This package implements table support for CKEditor 5.
 
 ## Documentation
 
-See the [`@ckeditor/ckeditor5-table` package](https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/api/table.html) page in [CKEditor 5 documentation](https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/).
+See the [`@ckeditor/ckeditor5-table` package](https://docs.ckeditor.com/ckeditor5/latest/api/table.html) page in [CKEditor 5 documentation](https://docs.ckeditor.com/ckeditor5/latest/).
 
 ## License
 

+ 15 - 89
packages/ckeditor5-table/docs/features/table.md

@@ -52,95 +52,21 @@ The {@link module:table/table~Table} plugin registers the following UI component
 
 And the following commands:
 
-* The {@link module:table/commands/inserttablecommand~InsertTableCommand `'insertTable'`} command.
-
-	To insert a table at the current selection, execute the command and specify the dimensions:
-
-	```js
-	editor.execute( 'insertTable', { rows: 20, columns: 5 } );
-	```
-
-* The {@link module:table/commands/insertcolumncommand~InsertColumnCommand} in a form of `'insertTableColumnBefore'` and `'insertTableColumnAfter'` commands.
-
-	To insert a column before the selected cell, execute the following command:
-
-	```js
-	editor.execute( 'insertTableColumnBefore' );
-	```
-
-	To insert a column after the selected cell, execute the following command:
-
-	```js
-	editor.execute( 'insertTableColumnAfter' );
-	```
-
-* The {@link module:table/commands/insertrowcommand~InsertRowCommand} in a form of `'insertTableRowAbove'` and `'insertTableRowBelow'` commands.
-
-	To insert a row below the selected cell, execute the following command:
-
-	```js
-	editor.execute( 'insertTableRowBelow' );
-	```
-
-	To insert a row above the selected cell, execute the following command:
-
-	```js
-	editor.execute( 'insertTableRowAbove' );
-	```
-
-* The {@link module:table/commands/removecolumncommand~RemoveColumnCommand `'removeTableColumn'`} command.
-
-	To remove the column containing the selected cell, execute the command:
-
-	```js
-	editor.execute( 'removeTableColumn' );
-	```
-
-* The {@link module:table/commands/removerowcommand~RemoveRowCommand `'removeTableRow'`} command.
-
-	To remove the row containing the selected cell, execute the command:
-
-	```js
-	editor.execute( 'removeTableRow' );
-	```
-
-* The {@link module:table/commands/setheadercolumncommand~SetHeaderColumnCommand `'setTableColumnHeader'`} command.
-
-	You can make the column containing the selected cell a [header](https://www.w3.org/TR/html50/tabular-data.html#the-th-element) by executing:
-
-	```js
-	editor.execute( 'setTableColumnHeader' );
-	```
-
-	**Note:** All preceding columns will also become headers. If the current column is already a header, executing this command will make it a regular column back again (including the following columns).
-
-* The {@link module:table/commands/setheaderrowcommand~SetHeaderRowCommand `'setTableRowHeader'`} command.
-
-	You can make the row containing the selected cell a [header](https://www.w3.org/TR/html50/tabular-data.html#the-th-element) by executing:
-
-	```js
-	editor.execute( 'setTableRowHeader' );
-	```
-
-	**Note:** All preceding rows will also become headers. If the current row is already a header, executing this command will make it a regular row back again (including the following rows).
-
-* The {@link module:table/commands/mergecellcommand~MergeCellCommand} in a form of `'mergeTableCellRight'`, `'mergeTableCellLeft'`, `'mergeTableCellUp'` and `'mergeTableCellDown'` commands.
-
-	To merge a table cell at the current selection with another cell, execute the command corresponding with the preferred direction. For example, to merge with a cell to the right:
-
-	```js
-	editor.execute( 'mergeTableCellRight' );
-	```
-
-	**Note**: If a table cell has a different [`rowspan`](https://www.w3.org/TR/html50/tabular-data.html#attr-tdth-rowspan) (for `'mergeTableCellRight'` and `'mergeTableCellLeft'`) or [`colspan`](https://www.w3.org/TR/html50/tabular-data.html#attr-tdth-colspan) (for `'mergeTableCellUp'` and `'mergeTableCellDown'`), the command will be disabled.
-
-* The {@link module:table/commands/splitcellcommand~SplitCellCommand} as `'splitTableCellVertically'` and `'splitTableCellHorizontally'` commands.
-
-	You can split any cell vertically or horizontally by executing this command. For example, to split the selected table cell vertically:
-
-	```js
-	editor.execute( 'splitTableCellVertically' );
-	```
+* The `'insertTable'` command implemented by {@link module:table/commands/inserttablecommand~InsertTableCommand}.
+* The `'insertTableColumnBefore'` command implemented by {@link module:table/commands/insertcolumncommand~InsertColumnCommand}.
+* The `'insertTableColumnAfter'` command implemented by {@link module:table/commands/insertcolumncommand~InsertColumnCommand}.
+* The `'insertTableRowAbove'` command implemented by {@link module:table/commands/insertrowcommand~InsertRowCommand}.
+* The `'insertTableRowBelow'` command implemented by {@link module:table/commands/insertrowcommand~InsertRowCommand}.
+* The `'removeTableColumn'` command implemented by {@link module:table/commands/removecolumncommand~RemoveColumnCommand}.
+* The `'removeTableRow'` command implemented by {@link module:table/commands/removerowcommand~RemoveRowCommand}.
+* The `'setTableColumnHeader'` command implemented by {@link module:table/commands/setheadercolumncommand~SetHeaderColumnCommand}.
+* The `'setTableRowHeader'` command implemented by {@link module:table/commands/setheaderrowcommand~SetHeaderRowCommand}.
+* The `'mergeTableCellRight'` command implemented by {@link module:table/commands/mergecellcommand~MergeCellCommand}.
+* The `'mergeTableCellLeft'` command implemented by {@link module:table/commands/mergecellcommand~MergeCellCommand}.
+* The `'mergeTableCellUp'` command implemented by {@link module:table/commands/mergecellcommand~MergeCellCommand}.
+* The `'mergeTableCellDown'` command implemented by {@link module:table/commands/mergecellcommand~MergeCellCommand}.
+* The `'splitTableCellVertically'` command implemented by {@link module:table/commands/splitcellcommand~SplitCellCommand}.
+* The `'splitTableCellHorizontally'` command implemented by {@link module:table/commands/splitcellcommand~SplitCellCommand}.
 
 The {@link module:table/tabletoolbar~TableToolbar} plugin introduces the balloon toolbar for tables. The toolbar shows up when a table cell is selected and is anchored to the table. It is possible to {@link module:table/table~TableConfig#toolbar configure} its content. Normally, it contains the table-related tools such as `'tableColumn'`, `'tableRow'`, and `'mergeTableCells'` dropdowns.
 

+ 78 - 0
packages/ckeditor5-table/lang/translations/cs.po

@@ -0,0 +1,78 @@
+# Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language: cs\n"
+"Language-Team: Czech (https://www.transifex.com/ckeditor/teams/11143/cs/)\n"
+"Plural-Forms: nplurals=4; plural=(n == 1 && n % 1 == 0) ? 0 : (n >= 2 && n <= 4 && n % 1 == 0) ? 1: (n % 1 != 0 ) ? 2 : 3;\n"
+
+msgctxt "Label for the insert table toolbar button."
+msgid "Insert table"
+msgstr "Vložit tabulku"
+
+msgctxt "Label for the set/unset table header column button."
+msgid "Header column"
+msgstr "Sloupec záhlaví"
+
+msgctxt "Label for the insert table column before the current one button."
+msgid "Insert column before"
+msgstr "Vložit sloupec před"
+
+msgctxt "Label for the insert table column after the current one button."
+msgid "Insert column after"
+msgstr "Vložit sloupec za"
+
+msgctxt "Label for the delete table column button."
+msgid "Delete column"
+msgstr "Smazat sloupec"
+
+msgctxt "Label for the table column dropdown button."
+msgid "Column"
+msgstr "Sloupec"
+
+msgctxt "Label for the set/unset table header row button."
+msgid "Header row"
+msgstr "Řádek záhlaví"
+
+msgctxt "Label for the insert row below button."
+msgid "Insert row below"
+msgstr "Vložit řádek pod"
+
+msgctxt "Label for the insert row above button."
+msgid "Insert row above"
+msgstr "Vložit řádek před"
+
+msgctxt "Label for the delete table row button."
+msgid "Delete row"
+msgstr "Smazat řádek"
+
+msgctxt "Label for the table row dropdown button."
+msgid "Row"
+msgstr "Řádek"
+
+msgctxt "Label for the merge table cell up button."
+msgid "Merge cell up"
+msgstr "Sloučit s buňkou nad"
+
+msgctxt "Label for the merge table cell right button."
+msgid "Merge cell right"
+msgstr "Sloučit s buňkou vpravo"
+
+msgctxt "Label for the merge table cell down button."
+msgid "Merge cell down"
+msgstr "Sloučit s buňkou pod"
+
+msgctxt "Label for the merge table cell left button."
+msgid "Merge cell left"
+msgstr "Sloučit s buňkou vlevo"
+
+msgctxt "Label for the split table cell vertically button."
+msgid "Split cell vertically"
+msgstr "Rozdělit buňky vertikálně"
+
+msgctxt "Label for the split table cell horizontally button."
+msgid "Split cell horizontally"
+msgstr "Rozdělit buňky horizontálně"
+
+msgctxt "Label for the merge table cells button."
+msgid "Merge cells"
+msgstr "Sloučit buňky"

+ 78 - 0
packages/ckeditor5-table/lang/translations/hr.po

@@ -0,0 +1,78 @@
+# Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language: hr\n"
+"Language-Team: Croatian (https://www.transifex.com/ckeditor/teams/11143/hr/)\n"
+"Plural-Forms: nplurals=3; plural=n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2;\n"
+
+msgctxt "Label for the insert table toolbar button."
+msgid "Insert table"
+msgstr "Ubaci tablicu"
+
+msgctxt "Label for the set/unset table header column button."
+msgid "Header column"
+msgstr "Kolona zaglavlja"
+
+msgctxt "Label for the insert table column before the current one button."
+msgid "Insert column before"
+msgstr "Ubaci kolonu prije"
+
+msgctxt "Label for the insert table column after the current one button."
+msgid "Insert column after"
+msgstr "Ubaci kolonu nakon"
+
+msgctxt "Label for the delete table column button."
+msgid "Delete column"
+msgstr "Obriši kolonu"
+
+msgctxt "Label for the table column dropdown button."
+msgid "Column"
+msgstr "Kolona"
+
+msgctxt "Label for the set/unset table header row button."
+msgid "Header row"
+msgstr "Red zaglavlja"
+
+msgctxt "Label for the insert row below button."
+msgid "Insert row below"
+msgstr "Ubaci red ispod"
+
+msgctxt "Label for the insert row above button."
+msgid "Insert row above"
+msgstr "Ubaci red iznad"
+
+msgctxt "Label for the delete table row button."
+msgid "Delete row"
+msgstr "Obriši red"
+
+msgctxt "Label for the table row dropdown button."
+msgid "Row"
+msgstr "Red"
+
+msgctxt "Label for the merge table cell up button."
+msgid "Merge cell up"
+msgstr "Spoji ćelije prema gore"
+
+msgctxt "Label for the merge table cell right button."
+msgid "Merge cell right"
+msgstr "Spoji ćelije prema desno"
+
+msgctxt "Label for the merge table cell down button."
+msgid "Merge cell down"
+msgstr "Spoji ćelije prema dolje"
+
+msgctxt "Label for the merge table cell left button."
+msgid "Merge cell left"
+msgstr "Spoji ćelije prema lijevo"
+
+msgctxt "Label for the split table cell vertically button."
+msgid "Split cell vertically"
+msgstr "Razdvoji ćeliju okomito"
+
+msgctxt "Label for the split table cell horizontally button."
+msgid "Split cell horizontally"
+msgstr "Razdvoji ćeliju vodoravno"
+
+msgctxt "Label for the merge table cells button."
+msgid "Merge cells"
+msgstr "Spoji ćelije"

+ 78 - 0
packages/ckeditor5-table/lang/translations/hu.po

@@ -0,0 +1,78 @@
+# Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language: hu\n"
+"Language-Team: Hungarian (https://www.transifex.com/ckeditor/teams/11143/hu/)\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgctxt "Label for the insert table toolbar button."
+msgid "Insert table"
+msgstr "Táblázat beszúrása"
+
+msgctxt "Label for the set/unset table header column button."
+msgid "Header column"
+msgstr "Oszlop fejléc"
+
+msgctxt "Label for the insert table column before the current one button."
+msgid "Insert column before"
+msgstr "Oszlop beszúrása elé"
+
+msgctxt "Label for the insert table column after the current one button."
+msgid "Insert column after"
+msgstr "Oszlop beszúrása mögé"
+
+msgctxt "Label for the delete table column button."
+msgid "Delete column"
+msgstr "Oszlop törlése"
+
+msgctxt "Label for the table column dropdown button."
+msgid "Column"
+msgstr "Oszlop"
+
+msgctxt "Label for the set/unset table header row button."
+msgid "Header row"
+msgstr "Sor fejléc"
+
+msgctxt "Label for the insert row below button."
+msgid "Insert row below"
+msgstr "Sor beszúrása alá"
+
+msgctxt "Label for the insert row above button."
+msgid "Insert row above"
+msgstr "Sor beszúrása fölé"
+
+msgctxt "Label for the delete table row button."
+msgid "Delete row"
+msgstr "Sor törlése"
+
+msgctxt "Label for the table row dropdown button."
+msgid "Row"
+msgstr "Sor"
+
+msgctxt "Label for the merge table cell up button."
+msgid "Merge cell up"
+msgstr "Cellák egyesítése felfelé"
+
+msgctxt "Label for the merge table cell right button."
+msgid "Merge cell right"
+msgstr "Cellák egyesítése jobbra"
+
+msgctxt "Label for the merge table cell down button."
+msgid "Merge cell down"
+msgstr "Cellák egyesítése lefelé"
+
+msgctxt "Label for the merge table cell left button."
+msgid "Merge cell left"
+msgstr "Cellák egyesítése balra"
+
+msgctxt "Label for the split table cell vertically button."
+msgid "Split cell vertically"
+msgstr "Cella felosztása függőlegesen"
+
+msgctxt "Label for the split table cell horizontally button."
+msgid "Split cell horizontally"
+msgstr "Cella felosztása vízszintesen"
+
+msgctxt "Label for the merge table cells button."
+msgid "Merge cells"
+msgstr "Cellaegyesítés"

+ 78 - 0
packages/ckeditor5-table/lang/translations/it.po

@@ -0,0 +1,78 @@
+# Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language: it\n"
+"Language-Team: Italian (https://www.transifex.com/ckeditor/teams/11143/it/)\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgctxt "Label for the insert table toolbar button."
+msgid "Insert table"
+msgstr "Inserisci tabella"
+
+msgctxt "Label for the set/unset table header column button."
+msgid "Header column"
+msgstr "Intestazione colonna"
+
+msgctxt "Label for the insert table column before the current one button."
+msgid "Insert column before"
+msgstr "Inserisci colonna prima"
+
+msgctxt "Label for the insert table column after the current one button."
+msgid "Insert column after"
+msgstr "Inserisci colonna dopo"
+
+msgctxt "Label for the delete table column button."
+msgid "Delete column"
+msgstr "Elimina colonna"
+
+msgctxt "Label for the table column dropdown button."
+msgid "Column"
+msgstr "Colonna"
+
+msgctxt "Label for the set/unset table header row button."
+msgid "Header row"
+msgstr "Riga d'intestazione"
+
+msgctxt "Label for the insert row below button."
+msgid "Insert row below"
+msgstr "Inserisci riga sotto"
+
+msgctxt "Label for the insert row above button."
+msgid "Insert row above"
+msgstr "Inserisci riga sopra"
+
+msgctxt "Label for the delete table row button."
+msgid "Delete row"
+msgstr "Elimina riga"
+
+msgctxt "Label for the table row dropdown button."
+msgid "Row"
+msgstr "Riga"
+
+msgctxt "Label for the merge table cell up button."
+msgid "Merge cell up"
+msgstr "Unisci cella sopra"
+
+msgctxt "Label for the merge table cell right button."
+msgid "Merge cell right"
+msgstr "Unisci cella a destra"
+
+msgctxt "Label for the merge table cell down button."
+msgid "Merge cell down"
+msgstr "Unisci cella sotto"
+
+msgctxt "Label for the merge table cell left button."
+msgid "Merge cell left"
+msgstr "Unisci cella a sinistra"
+
+msgctxt "Label for the split table cell vertically button."
+msgid "Split cell vertically"
+msgstr "Dividi cella verticalmente"
+
+msgctxt "Label for the split table cell horizontally button."
+msgid "Split cell horizontally"
+msgstr "Dividi cella orizzontalmente"
+
+msgctxt "Label for the merge table cells button."
+msgid "Merge cells"
+msgstr "Unisci celle"

+ 78 - 0
packages/ckeditor5-table/lang/translations/nb.po

@@ -0,0 +1,78 @@
+# Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language: nb\n"
+"Language-Team: Norwegian Bokmål (https://www.transifex.com/ckeditor/teams/11143/nb/)\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgctxt "Label for the insert table toolbar button."
+msgid "Insert table"
+msgstr "Sett inn tabell"
+
+msgctxt "Label for the set/unset table header column button."
+msgid "Header column"
+msgstr "Overskriftkolonne"
+
+msgctxt "Label for the insert table column before the current one button."
+msgid "Insert column before"
+msgstr "Sett inn kolonne før"
+
+msgctxt "Label for the insert table column after the current one button."
+msgid "Insert column after"
+msgstr "Sett inn kolonne etter"
+
+msgctxt "Label for the delete table column button."
+msgid "Delete column"
+msgstr "Slett kolonne"
+
+msgctxt "Label for the table column dropdown button."
+msgid "Column"
+msgstr "Kolonne"
+
+msgctxt "Label for the set/unset table header row button."
+msgid "Header row"
+msgstr "Overskriftrad"
+
+msgctxt "Label for the insert row below button."
+msgid "Insert row below"
+msgstr "Sett inn rad under"
+
+msgctxt "Label for the insert row above button."
+msgid "Insert row above"
+msgstr "Sett inn rad over"
+
+msgctxt "Label for the delete table row button."
+msgid "Delete row"
+msgstr "Slett rad"
+
+msgctxt "Label for the table row dropdown button."
+msgid "Row"
+msgstr "Rad"
+
+msgctxt "Label for the merge table cell up button."
+msgid "Merge cell up"
+msgstr "Slå sammen celle opp"
+
+msgctxt "Label for the merge table cell right button."
+msgid "Merge cell right"
+msgstr "Slå sammen celle til høyre"
+
+msgctxt "Label for the merge table cell down button."
+msgid "Merge cell down"
+msgstr "Slå sammen celle ned"
+
+msgctxt "Label for the merge table cell left button."
+msgid "Merge cell left"
+msgstr "Slå sammen celle til venstre"
+
+msgctxt "Label for the split table cell vertically button."
+msgid "Split cell vertically"
+msgstr "Del celle vertikalt"
+
+msgctxt "Label for the split table cell horizontally button."
+msgid "Split cell horizontally"
+msgstr "Del celle horisontalt"
+
+msgctxt "Label for the merge table cells button."
+msgid "Merge cells"
+msgstr "Slå sammen celler"

+ 78 - 0
packages/ckeditor5-table/lang/translations/tr.po

@@ -0,0 +1,78 @@
+# Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language: tr\n"
+"Language-Team: Turkish (https://www.transifex.com/ckeditor/teams/11143/tr/)\n"
+"Plural-Forms: nplurals=2; plural=(n > 1);\n"
+
+msgctxt "Label for the insert table toolbar button."
+msgid "Insert table"
+msgstr "Tablo Ekle"
+
+msgctxt "Label for the set/unset table header column button."
+msgid "Header column"
+msgstr "Başlık kolonu"
+
+msgctxt "Label for the insert table column before the current one button."
+msgid "Insert column before"
+msgstr "Öncesine kolon ekle"
+
+msgctxt "Label for the insert table column after the current one button."
+msgid "Insert column after"
+msgstr "Sonrasına kolon ekle"
+
+msgctxt "Label for the delete table column button."
+msgid "Delete column"
+msgstr "Kolonu sil"
+
+msgctxt "Label for the table column dropdown button."
+msgid "Column"
+msgstr "Kolon"
+
+msgctxt "Label for the set/unset table header row button."
+msgid "Header row"
+msgstr "Başlık satırı"
+
+msgctxt "Label for the insert row below button."
+msgid "Insert row below"
+msgstr "Alta satır ekle"
+
+msgctxt "Label for the insert row above button."
+msgid "Insert row above"
+msgstr "Üste satır ekle"
+
+msgctxt "Label for the delete table row button."
+msgid "Delete row"
+msgstr "Satırı sil"
+
+msgctxt "Label for the table row dropdown button."
+msgid "Row"
+msgstr "Satır"
+
+msgctxt "Label for the merge table cell up button."
+msgid "Merge cell up"
+msgstr "Yukarı doğru birleştir"
+
+msgctxt "Label for the merge table cell right button."
+msgid "Merge cell right"
+msgstr "Sağa doğru birleştir"
+
+msgctxt "Label for the merge table cell down button."
+msgid "Merge cell down"
+msgstr "Aşağıya doğru birleştir"
+
+msgctxt "Label for the merge table cell left button."
+msgid "Merge cell left"
+msgstr "Sola doğru birleştir"
+
+msgctxt "Label for the split table cell vertically button."
+msgid "Split cell vertically"
+msgstr "Hücreyi dikey böl"
+
+msgctxt "Label for the split table cell horizontally button."
+msgid "Split cell horizontally"
+msgstr "Hücreyi yatay böl"
+
+msgctxt "Label for the merge table cells button."
+msgid "Merge cells"
+msgstr "Hücreleri birleştir"

+ 78 - 0
packages/ckeditor5-table/lang/translations/uk.po

@@ -0,0 +1,78 @@
+# Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language: uk\n"
+"Language-Team: Ukrainian (https://www.transifex.com/ckeditor/teams/11143/uk/)\n"
+"Plural-Forms: nplurals=4; plural=(n % 1 == 0 && n % 10 == 1 && n % 100 != 11 ? 0 : n % 1 == 0 && n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 12 || n % 100 > 14) ? 1 : n % 1 == 0 && (n % 10 ==0 || (n % 10 >=5 && n % 10 <=9) || (n % 100 >=11 && n % 100 <=14 )) ? 2: 3);\n"
+
+msgctxt "Label for the insert table toolbar button."
+msgid "Insert table"
+msgstr "Вставити таблицю"
+
+msgctxt "Label for the set/unset table header column button."
+msgid "Header column"
+msgstr "Заголовок стовпця"
+
+msgctxt "Label for the insert table column before the current one button."
+msgid "Insert column before"
+msgstr "Вставити стовпець перед"
+
+msgctxt "Label for the insert table column after the current one button."
+msgid "Insert column after"
+msgstr "Вставити стовпець після"
+
+msgctxt "Label for the delete table column button."
+msgid "Delete column"
+msgstr "Видалити стовпець"
+
+msgctxt "Label for the table column dropdown button."
+msgid "Column"
+msgstr "Стовпець"
+
+msgctxt "Label for the set/unset table header row button."
+msgid "Header row"
+msgstr "Заголовок рядка"
+
+msgctxt "Label for the insert row below button."
+msgid "Insert row below"
+msgstr "Вставити рядок зверху"
+
+msgctxt "Label for the insert row above button."
+msgid "Insert row above"
+msgstr "Вставити рядок знизу"
+
+msgctxt "Label for the delete table row button."
+msgid "Delete row"
+msgstr "Видалити рядок"
+
+msgctxt "Label for the table row dropdown button."
+msgid "Row"
+msgstr "Рядок"
+
+msgctxt "Label for the merge table cell up button."
+msgid "Merge cell up"
+msgstr "Поєднати комірки вгору"
+
+msgctxt "Label for the merge table cell right button."
+msgid "Merge cell right"
+msgstr "Поєднати комірки праворуч"
+
+msgctxt "Label for the merge table cell down button."
+msgid "Merge cell down"
+msgstr "Поєднати комірки внизу"
+
+msgctxt "Label for the merge table cell left button."
+msgid "Merge cell left"
+msgstr "Поєднати комірки ліворуч"
+
+msgctxt "Label for the split table cell vertically button."
+msgid "Split cell vertically"
+msgstr "Розділити комірки вертикально"
+
+msgctxt "Label for the split table cell horizontally button."
+msgid "Split cell horizontally"
+msgstr "Розділити комірки горизонтально"
+
+msgctxt "Label for the merge table cells button."
+msgid "Merge cells"
+msgstr "Поєднати комірки"

+ 8 - 8
packages/ckeditor5-table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-table",
-  "version": "0.0.1",
+  "version": "10.0.0",
   "description": "Table feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -9,15 +9,15 @@
     "ckeditor5-feature"
   ],
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^10.0.0",
-    "@ckeditor/ckeditor5-engine": "^10.0.0",
-    "@ckeditor/ckeditor5-ui": "^10.0.0",
-    "@ckeditor/ckeditor5-widget": "^10.0.0"
+    "@ckeditor/ckeditor5-core": "^10.1.0",
+    "@ckeditor/ckeditor5-engine": "^10.1.0",
+    "@ckeditor/ckeditor5-ui": "^10.1.0",
+    "@ckeditor/ckeditor5-widget": "^10.1.0"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-editor-classic": "^10.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^10.0.0",
-    "@ckeditor/ckeditor5-utils": "^10.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^10.0.1",
+    "@ckeditor/ckeditor5-paragraph": "^10.0.1",
+    "@ckeditor/ckeditor5-utils": "^10.1.0",
     "eslint": "^4.15.0",
     "eslint-config-ckeditor5": "^1.0.7",
     "husky": "^0.14.3",

+ 11 - 0
packages/ckeditor5-table/src/commands/insertcolumncommand.js

@@ -14,6 +14,17 @@ import TableUtils from '../tableutils';
 /**
  * The insert column command.
  *
+ * The command is registered by {@link module:table/tableediting~TableEditing} as `'insertTableColumnBefore'` and
+ * `'insertTableColumnAfter'` editor commands.
+ *
+ * To insert a column before the selected cell, execute the following command:
+ *
+ *		editor.execute( 'insertTableColumnBefore' );
+ *
+ * To insert a column after the selected cell, execute the following command:
+ *
+ *		editor.execute( 'insertTableColumnAfter' );
+ *
  * @extends module:core/command~Command
  */
 export default class InsertColumnCommand extends Command {

+ 11 - 0
packages/ckeditor5-table/src/commands/insertrowcommand.js

@@ -14,6 +14,17 @@ import TableUtils from '../tableutils';
 /**
  * The insert row command.
  *
+ * The command is registered by {@link module:table/tableediting~TableEditing} as `'insertTableRowBelow'` and
+ * `'insertTableRowAbove'` editor commands.
+ *
+ * To insert a row below the selected cell, execute the following command:
+ *
+ *		editor.execute( 'insertTableRowBelow' );
+ *
+ * To insert a row above the selected cell, execute the following command:
+ *
+ *		editor.execute( 'insertTableRowAbove' );
+ *
  * @extends module:core/command~Command
  */
 export default class InsertRowCommand extends Command {

+ 6 - 0
packages/ckeditor5-table/src/commands/inserttablecommand.js

@@ -14,6 +14,12 @@ import TableUtils from '../tableutils';
 /**
  * The insert table command.
  *
+ * The command is registered by {@link module:table/tableediting~TableEditing} as `'insertTable'` editor command.
+ *
+ * To insert a table at the current selection, execute the command and specify the dimensions:
+ *
+ *		editor.execute( 'insertTable', { rows: 20, columns: 5 } );
+ *
  * @extends module:core/command~Command
  */
 export default class InsertTableCommand extends Command {

+ 13 - 0
packages/ckeditor5-table/src/commands/mergecellcommand.js

@@ -15,6 +15,19 @@ import TableWalker from '../tablewalker';
 /**
  * The merge cell command.
  *
+ * The command is registered by {@link module:table/tableediting~TableEditing} as `'mergeTableCellRight'`, `'mergeTableCellLeft'`,
+ * `'mergeTableCellUp'` and `'mergeTableCellDown'` editor commands.
+ *
+ * To merge a table cell at the current selection with another cell, execute the command corresponding with the preferred direction.
+ *
+ * For example, to merge with a cell to the right:
+ *
+ *		editor.execute( 'mergeTableCellRight' );
+ *
+ * **Note**: If a table cell has a different [`rowspan`](https://www.w3.org/TR/html50/tabular-data.html#attr-tdth-rowspan)
+ * (for `'mergeTableCellRight'` and `'mergeTableCellLeft'`) or [`colspan`](https://www.w3.org/TR/html50/tabular-data.html#attr-tdth-colspan)
+ * (for `'mergeTableCellUp'` and `'mergeTableCellDown'`), the command will be disabled.
+ *
  * @extends module:core/command~Command
  */
 export default class MergeCellCommand extends Command {

+ 6 - 0
packages/ckeditor5-table/src/commands/removecolumncommand.js

@@ -16,6 +16,12 @@ import { updateNumericAttribute } from './utils';
 /**
  * The remove column command.
  *
+ * The command is registered by {@link module:table/tableediting~TableEditing} as `'removeTableColumn'` editor command.
+ *
+ * To remove the column containing the selected cell, execute the command:
+ *
+ *		editor.execute( 'removeTableColumn' );
+ *
  * @extends module:core/command~Command
  */
 export default class RemoveColumnCommand extends Command {

+ 6 - 0
packages/ckeditor5-table/src/commands/removerowcommand.js

@@ -17,6 +17,12 @@ import { updateNumericAttribute } from './utils';
 /**
  * The remove row command.
  *
+ * The command is registered by {@link module:table/tableediting~TableEditing} as `'removeTableRow'` editor command.
+ *
+ * To remove the row containing the selected cell, execute the command:
+ *
+ *		editor.execute( 'removeTableRow' );
+ *
  * @extends module:core/command~Command
  */
 export default class RemoveRowCommand extends Command {

+ 11 - 1
packages/ckeditor5-table/src/commands/setheadercolumncommand.js

@@ -12,7 +12,17 @@ import Command from '@ckeditor/ckeditor5-core/src/command';
 import { getParentTable, updateNumericAttribute } from './utils';
 
 /**
- * The header coloumn command.
+ * The header column command.
+ *
+ * The command is registered by {@link module:table/tableediting~TableEditing} as `'setTableColumnHeader'` editor command.
+ *
+ * You can make the column containing the selected cell a [header](https://www.w3.org/TR/html50/tabular-data.html#the-th-element)
+ * by executing:
+ *
+ *		editor.execute( 'setTableColumnHeader' );
+ *
+ * **Note:** All preceding columns will also become headers. If the current column is already a header, executing this command
+ * will make it a regular column back again (including the following columns).
  *
  * @extends module:core/command~Command
  */

+ 9 - 0
packages/ckeditor5-table/src/commands/setheaderrowcommand.js

@@ -16,6 +16,15 @@ import TableWalker from '../tablewalker';
 /**
  * The header row command.
  *
+ * The command is registered by {@link module:table/tableediting~TableEditing} as `'setTableColumnHeader'` editor command.
+ *
+ * You can make the row containing the selected cell a [header](https://www.w3.org/TR/html50/tabular-data.html#the-th-element) by executing:
+ *
+ *		editor.execute( 'setTableRowHeader' );
+ *
+ * **Note:** All preceding rows will also become headers. If the current row is already a header, executing this command
+ * will make it a regular row back again (including the following rows).
+ *
  * @extends module:core/command~Command
  */
 export default class SetHeaderRowCommand extends Command {

+ 7 - 0
packages/ckeditor5-table/src/commands/splitcellcommand.js

@@ -13,6 +13,13 @@ import TableUtils from '../tableutils';
 /**
  * The split cell command.
  *
+ * The command is registered by {@link module:table/tableediting~TableEditing} as `'splitTableCellVertically'`
+ * and `'splitTableCellHorizontally'`  editor commands.
+ *
+ * You can split any cell vertically or horizontally by executing this command. For example, to split the selected table cell vertically:
+ *
+ *		editor.execute( 'splitTableCellVertically' );
+ *
  * @extends module:core/command~Command
  */
 export default class SplitCellCommand extends Command {

+ 5 - 0
packages/ckeditor5-table/src/table.js

@@ -18,6 +18,11 @@ import '../theme/table.css';
 /**
  * The table plugin.
  *
+ * It loads the {@link module:table/tableediting~TableEditing table editing feature}
+ * and {@link module:table/tableui~TableUI table UI feature}.
+ *
+ * For a detailed overview, check the {@glink features/table Table feature documentation}.
+ *
  * @extends module:core/plugin~Plugin
  */
 export default class Table extends Plugin {

+ 122 - 48
packages/ckeditor5-table/src/tableui.js

@@ -74,11 +74,36 @@ export default class TableUI extends Plugin {
 
 		editor.ui.componentFactory.add( 'tableColumn', locale => {
 			const options = [
-				{ commandName: 'setTableColumnHeader', label: t( 'Header column' ), bindIsActive: true },
-				'|',
-				{ commandName: 'insertTableColumnBefore', label: t( 'Insert column before' ) },
-				{ commandName: 'insertTableColumnAfter', label: t( 'Insert column after' ) },
-				{ commandName: 'removeTableColumn', label: t( 'Delete column' ) }
+				{
+					type: 'switchbutton',
+					model: {
+						commandName: 'setTableColumnHeader',
+						label: t( 'Header column' ),
+						bindIsOn: true
+					}
+				},
+				{ type: 'separator' },
+				{
+					type: 'button',
+					model: {
+						commandName: 'insertTableColumnBefore',
+						label: t( 'Insert column before' )
+					}
+				},
+				{
+					type: 'button',
+					model: {
+						commandName: 'insertTableColumnAfter',
+						label: t( 'Insert column after' )
+					}
+				},
+				{
+					type: 'button',
+					model: {
+						commandName: 'removeTableColumn',
+						label: t( 'Delete column' )
+					}
+				}
 			];
 
 			return this._prepareDropdown( t( 'Column' ), tableColumnIcon, options, locale );
@@ -86,11 +111,36 @@ export default class TableUI extends Plugin {
 
 		editor.ui.componentFactory.add( 'tableRow', locale => {
 			const options = [
-				{ commandName: 'setTableRowHeader', label: t( 'Header row' ), bindIsActive: true },
-				'|',
-				{ commandName: 'insertTableRowBelow', label: t( 'Insert row below' ) },
-				{ commandName: 'insertTableRowAbove', label: t( 'Insert row above' ) },
-				{ commandName: 'removeTableRow', label: t( 'Delete row' ) }
+				{
+					type: 'switchbutton',
+					model: {
+						commandName: 'setTableRowHeader',
+						label: t( 'Header row' ),
+						bindIsOn: true
+					}
+				},
+				{ type: 'separator' },
+				{
+					type: 'button',
+					model: {
+						commandName: 'insertTableRowBelow',
+						label: t( 'Insert row below' )
+					}
+				},
+				{
+					type: 'button',
+					model: {
+						commandName: 'insertTableRowAbove',
+						label: t( 'Insert row above' )
+					}
+				},
+				{
+					type: 'button',
+					model: {
+						commandName: 'removeTableRow',
+						label: t( 'Delete row' )
+					}
+				}
 			];
 
 			return this._prepareDropdown( t( 'Row' ), tableRowIcon, options, locale );
@@ -98,13 +148,49 @@ export default class TableUI extends Plugin {
 
 		editor.ui.componentFactory.add( 'mergeTableCells', locale => {
 			const options = [
-				{ commandName: 'mergeTableCellUp', label: t( 'Merge cell up' ) },
-				{ commandName: 'mergeTableCellRight', label: t( 'Merge cell right' ) },
-				{ commandName: 'mergeTableCellDown', label: t( 'Merge cell down' ) },
-				{ commandName: 'mergeTableCellLeft', label: t( 'Merge cell left' ) },
-				'|',
-				{ commandName: 'splitTableCellVertically', label: t( 'Split cell vertically' ) },
-				{ commandName: 'splitTableCellHorizontally', label: t( 'Split cell horizontally' ) }
+				{
+					type: 'button',
+					model: {
+						commandName: 'mergeTableCellUp',
+						label: t( 'Merge cell up' )
+					}
+				},
+				{
+					type: 'button',
+					model: {
+						commandName: 'mergeTableCellRight',
+						label: t( 'Merge cell right' )
+					}
+				},
+				{
+					type: 'button',
+					model: {
+						commandName: 'mergeTableCellDown',
+						label: t( 'Merge cell down' )
+					}
+				},
+				{
+					type: 'button',
+					model: {
+						commandName: 'mergeTableCellLeft',
+						label: t( 'Merge cell left' )
+					}
+				},
+				{ type: 'separator' },
+				{
+					type: 'button',
+					model: {
+						commandName: 'splitTableCellVertically',
+						label: t( 'Split cell vertically' )
+					}
+				},
+				{
+					type: 'button',
+					model: {
+						commandName: 'splitTableCellHorizontally',
+						label: t( 'Split cell horizontally' )
+					}
+				}
 			];
 
 			return this._prepareDropdown( t( 'Merge cells' ), tableMergeCellIcon, options, locale );
@@ -117,7 +203,7 @@ export default class TableUI extends Plugin {
 	 * @private
 	 * @param {String} label The dropdown button label.
 	 * @param {String} icon An icon for the dropdown button.
-	 * @param {Array.<module:table/tableui~DropdownOption>} options The list of options for the dropdown.
+	 * @param {Array.<module:ui/dropdown/utils~ListDropdownItemDefinition>} options The list of options for the dropdown.
 	 * @param {module:utils/locale~Locale} locale
 	 * @returns {module:ui/dropdown/dropdownview~DropdownView}
 	 */
@@ -128,13 +214,13 @@ export default class TableUI extends Plugin {
 		const commands = [];
 
 		// Prepare dropdown list items for list dropdown.
-		const dropdownItems = new Collection();
+		const itemDefinitions = new Collection();
 
 		for ( const option of options ) {
-			addListOption( option, editor, commands, dropdownItems );
+			addListOption( option, editor, commands, itemDefinitions );
 		}
 
-		addListToDropdown( dropdownView, dropdownItems );
+		addListToDropdown( dropdownView, itemDefinitions );
 
 		// Decorate dropdown's button.
 		dropdownView.buttonView.set( {
@@ -162,41 +248,29 @@ export default class TableUI extends Plugin {
 // @param {module:table/tableui~DropdownOption} option Configuration option.
 // @param {module:core/editor/editor~Editor} editor
 // @param {Array.<module:core/command~Command>} commands List of commands to update.
-// @param {module:utils/collection~Collection} dropdownItems Collection of dropdown items to update with given option.
-function addListOption( option, editor, commands, dropdownItems ) {
-	const itemModel = new Model();
+// @param {Iterable.<module:ui/dropdown/utils~ListDropdownItemDefinition>} itemDefinitions
+// Collection of dropdown items to update with given option.
+function addListOption( option, editor, commands, itemDefinitions ) {
+	const model = option.model = new Model( option.model );
+	const { commandName, bindIsOn } = option.model;
 
-	if ( option === '|' ) {
-		itemModel.set( {
-			isSeparator: true
-		} );
-	} else {
-		const { commandName, label, bindIsActive } = option;
+	if ( option.type !== 'separator' ) {
 		const command = editor.commands.get( commandName );
 
 		commands.push( command );
 
-		itemModel.set( {
-			commandName,
-			label
-		} );
+		model.set( { commandName } );
 
-		itemModel.bind( 'isEnabled' ).to( command );
+		model.bind( 'isEnabled' ).to( command );
 
-		if ( bindIsActive ) {
-			itemModel.bind( 'isActive' ).to( command, 'value' );
+		if ( bindIsOn ) {
+			model.bind( 'isOn' ).to( command, 'value' );
 		}
 	}
 
-	dropdownItems.add( itemModel );
-}
+	model.set( {
+		withText: true
+	} );
 
-/**
- * An object describing the table dropdown items.
- *
- * @typedef {Object} module:table/tableui~DropdownOption
- * @private
- * @property {String} commandName A command name to execute for that option.
- * @property {String} label A dropdown item label.
- * @property {Boolean} bindIsActive If `true`, it will bind the command's value to the `isActive` dropdown item property.
- */
+	itemDefinitions.add( option );
+}

+ 56 - 43
packages/ckeditor5-table/tests/tableui.js

@@ -11,6 +11,7 @@ import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 
 import TableEditing from '../src/tableediting';
 import TableUI from '../src/tableui';
+import SwitchButtonView from '@ckeditor/ckeditor5-ui/src/button/switchbuttonview';
 import DropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownview';
 import ListSeparatorView from '@ckeditor/ckeditor5-ui/src/list/listseparatorview';
 
@@ -74,7 +75,7 @@ describe( 'TableUI', () => {
 		it( 'should execute insertTable command on button execute event', () => {
 			const executeSpy = testUtils.sinon.spy( editor, 'execute' );
 
-			const tableSizeView = insertTable.panelView.children.get( 0 );
+			const tableSizeView = insertTable.panelView.children.first;
 
 			tableSizeView.rows = 2;
 			tableSizeView.columns = 7;
@@ -86,7 +87,7 @@ describe( 'TableUI', () => {
 		} );
 
 		it( 'should reset rows & columns on dropdown open', () => {
-			const tableSizeView = insertTable.panelView.children.get( 0 );
+			const tableSizeView = insertTable.panelView.children.first;
 
 			expect( tableSizeView.rows ).to.equal( 0 );
 			expect( tableSizeView.columns ).to.equal( 0 );
@@ -122,7 +123,7 @@ describe( 'TableUI', () => {
 		it( 'should have proper items in panel', () => {
 			const listView = dropdown.listView;
 
-			const labels = listView.items.map( item => item instanceof ListSeparatorView ? '|' : item.label );
+			const labels = listView.items.map( item => item instanceof ListSeparatorView ? '|' : item.children.first.label );
 
 			expect( labels ).to.deep.equal( [ 'Header row', '|', 'Insert row below', 'Insert row above', 'Delete row' ] );
 		} );
@@ -140,36 +141,36 @@ describe( 'TableUI', () => {
 			insertRowAboveCommand.isEnabled = true;
 			removeRowCommand.isEnabled = true;
 
-			expect( items.get( 0 ).isEnabled ).to.be.true;
-			expect( items.get( 2 ).isEnabled ).to.be.true;
-			expect( items.get( 3 ).isEnabled ).to.be.true;
-			expect( items.get( 4 ).isEnabled ).to.be.true;
+			expect( items.first.children.first.isEnabled ).to.be.true;
+			expect( items.get( 2 ).children.first.isEnabled ).to.be.true;
+			expect( items.get( 3 ).children.first.isEnabled ).to.be.true;
+			expect( items.get( 4 ).children.first.isEnabled ).to.be.true;
 			expect( dropdown.buttonView.isEnabled ).to.be.true;
 
 			setRowHeaderCommand.isEnabled = false;
 
-			expect( items.get( 0 ).isEnabled ).to.be.false;
+			expect( items.first.children.first.isEnabled ).to.be.false;
 			expect( dropdown.buttonView.isEnabled ).to.be.true;
 
 			insertRowBelowCommand.isEnabled = false;
 
-			expect( items.get( 2 ).isEnabled ).to.be.false;
+			expect( items.get( 2 ).children.first.isEnabled ).to.be.false;
 			expect( dropdown.buttonView.isEnabled ).to.be.true;
 
 			insertRowAboveCommand.isEnabled = false;
-			expect( items.get( 3 ).isEnabled ).to.be.false;
+			expect( items.get( 3 ).children.first.isEnabled ).to.be.false;
 			expect( dropdown.buttonView.isEnabled ).to.be.true;
 
 			removeRowCommand.isEnabled = false;
 
-			expect( items.get( 4 ).isEnabled ).to.be.false;
+			expect( items.get( 4 ).children.first.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' );
+			dropdown.listView.items.first.children.first.fire( 'execute' );
 
 			sinon.assert.calledOnce( focusSpy );
 		} );
@@ -177,22 +178,28 @@ describe( 'TableUI', () => {
 		it( 'executes command when it\'s executed', () => {
 			const spy = sinon.stub( editor, 'execute' );
 
-			dropdown.listView.items.get( 0 ).fire( 'execute' );
+			dropdown.listView.items.first.children.first.fire( 'execute' );
 
 			expect( spy.calledOnce ).to.be.true;
 			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'setTableRowHeader' );
 		} );
 
+		it( 'should use a toggle switch for the setTableRowHeader item', () => {
+			const items = dropdown.listView.items;
+
+			expect( items.first.children.first ).to.be.instanceOf( SwitchButtonView );
+		} );
+
 		it( 'should bind set header row command value to dropdown item', () => {
 			const items = dropdown.listView.items;
 
 			const setRowHeaderCommand = editor.commands.get( 'setTableRowHeader' );
 
 			setRowHeaderCommand.value = false;
-			expect( items.get( 0 ).isActive ).to.be.false;
+			expect( items.first.children.first.isOn ).to.be.false;
 
 			setRowHeaderCommand.value = true;
-			expect( items.get( 0 ).isActive ).to.be.true;
+			expect( items.first.children.first.isOn ).to.be.true;
 		} );
 	} );
 
@@ -217,7 +224,7 @@ describe( 'TableUI', () => {
 		it( 'should have proper items in panel', () => {
 			const listView = dropdown.listView;
 
-			const labels = listView.items.map( item => item instanceof ListSeparatorView ? '|' : item.label );
+			const labels = listView.items.map( item => item instanceof ListSeparatorView ? '|' : item.children.first.label );
 
 			expect( labels ).to.deep.equal( [ 'Header column', '|', 'Insert column before', 'Insert column after', 'Delete column' ] );
 		} );
@@ -235,34 +242,34 @@ describe( 'TableUI', () => {
 			insertColumnAfterCommand.isEnabled = true;
 			removeColumnCommand.isEnabled = true;
 
-			expect( items.get( 0 ).isEnabled ).to.be.true;
-			expect( items.get( 2 ).isEnabled ).to.be.true;
-			expect( items.get( 3 ).isEnabled ).to.be.true;
-			expect( items.get( 4 ).isEnabled ).to.be.true;
+			expect( items.first.children.first.isEnabled ).to.be.true;
+			expect( items.get( 2 ).children.first.isEnabled ).to.be.true;
+			expect( items.get( 3 ).children.first.isEnabled ).to.be.true;
+			expect( items.get( 4 ).children.first.isEnabled ).to.be.true;
 			expect( dropdown.buttonView.isEnabled ).to.be.true;
 
 			setColumnHeaderCommand.isEnabled = false;
 
-			expect( items.get( 0 ).isEnabled ).to.be.false;
+			expect( items.first.children.first.isEnabled ).to.be.false;
 			expect( dropdown.buttonView.isEnabled ).to.be.true;
 
 			insertColumnBeforeCommand.isEnabled = false;
 
-			expect( items.get( 2 ).isEnabled ).to.be.false;
+			expect( items.get( 2 ).children.first.isEnabled ).to.be.false;
 			expect( dropdown.buttonView.isEnabled ).to.be.true;
 
 			insertColumnAfterCommand.isEnabled = false;
-			expect( items.get( 3 ).isEnabled ).to.be.false;
+			expect( items.get( 3 ).children.first.isEnabled ).to.be.false;
 
 			removeColumnCommand.isEnabled = false;
-			expect( items.get( 4 ).isEnabled ).to.be.false;
+			expect( items.get( 4 ).children.first.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' );
+			dropdown.listView.items.first.children.first.fire( 'execute' );
 
 			sinon.assert.calledOnce( focusSpy );
 		} );
@@ -270,22 +277,28 @@ describe( 'TableUI', () => {
 		it( 'executes command when it\'s executed', () => {
 			const spy = sinon.stub( editor, 'execute' );
 
-			dropdown.listView.items.get( 0 ).fire( 'execute' );
+			dropdown.listView.items.first.children.first.fire( 'execute' );
 
 			expect( spy.calledOnce ).to.be.true;
 			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'setTableColumnHeader' );
 		} );
 
+		it( 'should use a toggle switch for the setTableColumnHeader item', () => {
+			const items = dropdown.listView.items;
+
+			expect( items.first.children.first ).to.be.instanceOf( SwitchButtonView );
+		} );
+
 		it( 'should bind set header column command value to dropdown item', () => {
 			const items = dropdown.listView.items;
 
 			const setColumnHeaderCommand = editor.commands.get( 'setTableColumnHeader' );
 
 			setColumnHeaderCommand.value = false;
-			expect( items.get( 0 ).isActive ).to.be.false;
+			expect( items.first.children.first.isOn ).to.be.false;
 
 			setColumnHeaderCommand.value = true;
-			expect( items.get( 0 ).isActive ).to.be.true;
+			expect( items.first.children.first.isOn ).to.be.true;
 		} );
 	} );
 
@@ -310,7 +323,7 @@ describe( 'TableUI', () => {
 		it( 'should have proper items in panel', () => {
 			const listView = dropdown.listView;
 
-			const labels = listView.items.map( item => item instanceof ListSeparatorView ? '|' : item.label );
+			const labels = listView.items.map( item => item instanceof ListSeparatorView ? '|' : item.children.first.label );
 
 			expect( labels ).to.deep.equal( [
 				'Merge cell up',
@@ -340,35 +353,35 @@ describe( 'TableUI', () => {
 			splitCellVerticallyCommand.isEnabled = true;
 			splitCellHorizontallyCommand.isEnabled = true;
 
-			expect( items.get( 0 ).isEnabled ).to.be.true;
-			expect( items.get( 1 ).isEnabled ).to.be.true;
-			expect( items.get( 2 ).isEnabled ).to.be.true;
-			expect( items.get( 3 ).isEnabled ).to.be.true;
-			expect( items.get( 5 ).isEnabled ).to.be.true;
-			expect( items.get( 6 ).isEnabled ).to.be.true;
+			expect( items.first.children.first.isEnabled ).to.be.true;
+			expect( items.get( 1 ).children.first.isEnabled ).to.be.true;
+			expect( items.get( 2 ).children.first.isEnabled ).to.be.true;
+			expect( items.get( 3 ).children.first.isEnabled ).to.be.true;
+			expect( items.get( 5 ).children.first.isEnabled ).to.be.true;
+			expect( items.get( 6 ).children.first.isEnabled ).to.be.true;
 			expect( dropdown.buttonView.isEnabled ).to.be.true;
 
 			mergeCellUpCommand.isEnabled = false;
 
-			expect( items.get( 0 ).isEnabled ).to.be.false;
+			expect( items.first.children.first.isEnabled ).to.be.false;
 			expect( dropdown.buttonView.isEnabled ).to.be.true;
 
 			mergeCellRightCommand.isEnabled = false;
 
-			expect( items.get( 1 ).isEnabled ).to.be.false;
+			expect( items.get( 1 ).children.first.isEnabled ).to.be.false;
 			expect( dropdown.buttonView.isEnabled ).to.be.true;
 
 			mergeCellDownCommand.isEnabled = false;
-			expect( items.get( 2 ).isEnabled ).to.be.false;
+			expect( items.get( 2 ).children.first.isEnabled ).to.be.false;
 
 			mergeCellLeftCommand.isEnabled = false;
-			expect( items.get( 3 ).isEnabled ).to.be.false;
+			expect( items.get( 3 ).children.first.isEnabled ).to.be.false;
 
 			splitCellVerticallyCommand.isEnabled = false;
-			expect( items.get( 5 ).isEnabled ).to.be.false;
+			expect( items.get( 5 ).children.first.isEnabled ).to.be.false;
 
 			splitCellHorizontallyCommand.isEnabled = false;
-			expect( items.get( 6 ).isEnabled ).to.be.false;
+			expect( items.get( 6 ).children.first.isEnabled ).to.be.false;
 
 			expect( dropdown.buttonView.isEnabled ).to.be.false;
 		} );
@@ -376,7 +389,7 @@ describe( 'TableUI', () => {
 		it( 'should focus view after command execution', () => {
 			const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' );
 
-			dropdown.listView.items.get( 0 ).fire( 'execute' );
+			dropdown.listView.items.first.children.first.fire( 'execute' );
 
 			sinon.assert.calledOnce( focusSpy );
 		} );
@@ -384,7 +397,7 @@ describe( 'TableUI', () => {
 		it( 'executes command when it\'s executed', () => {
 			const spy = sinon.stub( editor, 'execute' );
 
-			dropdown.listView.items.get( 0 ).fire( 'execute' );
+			dropdown.listView.items.first.children.first.fire( 'execute' );
 
 			expect( spy.calledOnce ).to.be.true;
 			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'mergeTableCellUp' );