8
0
Pārlūkot izejas kodu

Merge branch 'master' into t/16

Maciej Gołaszewski 7 gadi atpakaļ
vecāks
revīzija
0d39786fff
46 mainītis faili ar 1645 papildinājumiem un 916 dzēšanām
  1. 8 0
      packages/ckeditor5-table/CHANGELOG.md
  2. 1 1
      packages/ckeditor5-table/LICENSE.md
  3. 2 2
      packages/ckeditor5-table/README.md
  4. 2 2
      packages/ckeditor5-table/docs/_snippets/features/table.js
  5. 3 4
      packages/ckeditor5-table/docs/api/table.md
  6. 29 103
      packages/ckeditor5-table/docs/features/table.md
  7. 20 0
      packages/ckeditor5-table/lang/contexts.json
  8. 78 0
      packages/ckeditor5-table/lang/translations/cs.po
  9. 78 0
      packages/ckeditor5-table/lang/translations/en.po
  10. 78 0
      packages/ckeditor5-table/lang/translations/hr.po
  11. 78 0
      packages/ckeditor5-table/lang/translations/hu.po
  12. 78 0
      packages/ckeditor5-table/lang/translations/it.po
  13. 78 0
      packages/ckeditor5-table/lang/translations/nb.po
  14. 78 0
      packages/ckeditor5-table/lang/translations/tr.po
  15. 78 0
      packages/ckeditor5-table/lang/translations/uk.po
  16. 8 8
      packages/ckeditor5-table/package.json
  17. 18 6
      packages/ckeditor5-table/src/commands/insertcolumncommand.js
  18. 16 5
      packages/ckeditor5-table/src/commands/insertrowcommand.js
  19. 14 4
      packages/ckeditor5-table/src/commands/inserttablecommand.js
  20. 21 8
      packages/ckeditor5-table/src/commands/mergecellcommand.js
  21. 6 0
      packages/ckeditor5-table/src/commands/removecolumncommand.js
  22. 6 0
      packages/ckeditor5-table/src/commands/removerowcommand.js
  23. 13 3
      packages/ckeditor5-table/src/commands/setheadercolumncommand.js
  24. 15 6
      packages/ckeditor5-table/src/commands/setheaderrowcommand.js
  25. 9 2
      packages/ckeditor5-table/src/commands/splitcellcommand.js
  26. 4 4
      packages/ckeditor5-table/src/commands/utils.js
  27. 35 31
      packages/ckeditor5-table/src/converters/downcast.js
  28. 12 11
      packages/ckeditor5-table/src/converters/upcasttable.js
  29. 5 0
      packages/ckeditor5-table/src/table.js
  30. 18 17
      packages/ckeditor5-table/src/tableediting.js
  31. 6 7
      packages/ckeditor5-table/src/tabletoolbar.js
  32. 28 28
      packages/ckeditor5-table/src/tableui.js
  33. 39 35
      packages/ckeditor5-table/src/tableutils.js
  34. 49 47
      packages/ckeditor5-table/src/tablewalker.js
  35. 6 6
      packages/ckeditor5-table/src/ui/inserttableview.js
  36. 1 1
      packages/ckeditor5-table/src/ui/utils.js
  37. 1 1
      packages/ckeditor5-table/src/utils.js
  38. 48 47
      packages/ckeditor5-table/tests/_utils/utils.js
  39. 31 17
      packages/ckeditor5-table/tests/commands/inserttablecommand.js
  40. 297 312
      packages/ckeditor5-table/tests/converters/downcast.js
  41. 38 0
      packages/ckeditor5-table/tests/converters/upcasttable.js
  42. 140 133
      packages/ckeditor5-table/tests/manual/table.html
  43. 1 1
      packages/ckeditor5-table/tests/manual/table.js
  44. 28 24
      packages/ckeditor5-table/tests/tableediting.js
  45. 22 22
      packages/ckeditor5-table/tests/tableui.js
  46. 21 18
      packages/ckeditor5-table/theme/table.css

+ 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/LICENSE.md

@@ -1,7 +1,7 @@
 Software License Agreement
 ==========================
 
-**Table feature for CKEditor 5** – https://github.com/ckeditor/ckeditor5-table <br>
+**CKEditor 5 Table Feature**  – https://github.com/ckeditor/ckeditor5-table <br>
 Copyright (c) 2003-2018, [CKSource](http://cksource.com) Frederico Knabben. All rights reserved.
 
 Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html).

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

@@ -10,11 +10,11 @@ CKEditor 5 table feature
 [![Dependency Status](https://david-dm.org/ckeditor/ckeditor5-table/status.svg)](https://david-dm.org/ckeditor/ckeditor5-table)
 [![devDependency Status](https://david-dm.org/ckeditor/ckeditor5-table/dev-status.svg)](https://david-dm.org/ckeditor/ckeditor5-table?type=dev)
 
-This package implements text table support for CKEditor 5.
+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
 

+ 2 - 2
packages/ckeditor5-table/docs/_snippets/features/table.js

@@ -12,12 +12,12 @@ ClassicEditor
 		cloudServices: CS_CONFIG,
 		toolbar: {
 			items: [
-				'insertTable', '|', 'heading', '|', 'bold', 'italic', 'underline', '|', 'undo', 'redo'
+				'insertTable', '|', 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo'
 			],
 			viewportTopOffset: 60
 		},
 		table: {
-			toolbar: [ 'tableColumn', 'tableRow', 'mergeCell' ]
+			toolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
 		}
 	} )
 	.then( editor => {

+ 3 - 4
packages/ckeditor5-table/docs/api/table.md

@@ -12,10 +12,9 @@ This package implements the table feature for CKEditor 5.
 
 See the {@link features/table Table feature} guide and the documentation for the following plugins:
 
-  * {@link module:table/table~Table}
-  * {@link module:table/tabletoolbar~TableToolbar}
-  * {@link module:table/tableutils~TableUtils}
-
+* {@link module:table/table~Table}
+* {@link module:table/tabletoolbar~TableToolbar}
+* {@link module:table/tableutils~TableUtils}
 
 ## Installation
 

+ 29 - 103
packages/ckeditor5-table/docs/features/table.md

@@ -5,7 +5,7 @@ category: features
 
 {@snippet features/build-table-source}
 
-The {@link module:table/table~Table} feature offers table creation an editing tools that help content authors bring tabular data into their documents.
+The {@link module:table/table~Table} feature offers table creation and editing tools that help content authors bring tabular data into their documents.
 
 ## Demo
 
@@ -13,13 +13,13 @@ The {@link module:table/table~Table} feature offers table creation an editing to
 
 ## Installation
 
-To add this feature to your editor install the [`@ckeditor/ckeditor5-table`](https://www.npmjs.com/package/@ckeditor/ckeditor5-table) package
+To add this feature to your editor, install the [`@ckeditor/ckeditor5-table`](https://www.npmjs.com/package/@ckeditor/ckeditor5-table) package:
 
 ```bash
 npm install --save @ckeditor/ckeditor5-table
 ```
 
-then add `'Table'` and `'TableToolbar'` to your plugin list and the table toolbar configuration:
+Then add `'Table'` and `'TableToolbar'` to your plugin list and configure the table toolbar:
 
 ```js
 import Table from '@ckeditor/ckeditor5-table/src/table';
@@ -30,7 +30,7 @@ ClassicEditor
 		plugins: [ Table, TableToolbar, ... ],
 		toolbar: [ 'insertTable', ... ]
 		table: {
-			toolbar: [ 'tableColumn', 'tableRow', 'mergeCell' ]
+			toolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
 		}
 	} )
 	.then( ... )
@@ -38,111 +38,37 @@ ClassicEditor
 ```
 
 <info-box info>
-	Read more about {@link builds/guides/development/installing-plugins installing plugins}.
+	At the moment by default the table feature is available only in the {@link builds/guides/overview#document-editor document editor build}. Read more about {@link builds/guides/development/installing-plugins installing plugins} if you want to add it to other editor builds.
 </info-box>
 
 ## Common API
 
 The {@link module:table/table~Table} plugin registers the following UI components:
 
-* The `'insertTable'` dropdown,
-* The `'tableColumn'` dropdown,
-* The `'tableRow'` dropdown,
-* The `'mergeCell'` dropdown,
-
-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} as `'insertColumnBefore'` and `'insertColumnAfter'` commands.
-
-	To insert a column before or after the selected cell, execute one of the commands:
-
-	```js
-	editor.execute( 'insertColumnBefore' );
-	```
-
-	or
-
-	```js
-	editor.execute( 'insertColumnAfter' );
-	```
-
-* The {@link module:table/commands/insertrowcommand~InsertRowCommand} as `'insertRowAbove'`and `'insertRowBelow'` commands.
-
-	To insert a row below or above the selected cell, execute one of the commands:
-
-	```js
-	editor.execute( 'insertRowBelow' );
-	```
-
-	or
-
-	```js
-	editor.execute( 'insertRowAbove' );
-	```
-
-* The {@link module:table/commands/removecolumncommand~RemoveColumnCommand `'removeColumn'`} command.
-
-	To remove the column containing the selected cell, execute the command:
-
-	```js
-	editor.execute( 'removeColumn' );
-	```
-
-* The {@link module:table/commands/removerowcommand~RemoveRowCommand `'removeRow'`} command.
-
-	To remove the row containing the selected cell, execute the command:
-
-	```js
-	editor.execute( 'removeRow' );
-	```
-
-* The {@link module:table/commands/setheadercolumncommand~SetHeaderColumnCommand `'setColumnHeader'`} 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( 'setColumnHeader' );
-	```
-
-	**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 following columns).
-
-* The {@link module:table/commands/setheaderrowcommand~SetHeaderRowCommand `'setRowHeader'`} 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( 'setRowHeader' );
-	```
-
-	**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 following rows).
-
-* The {@link module:table/commands/mergecellcommand~MergeCellCommand} as `'mergeCellRight'`, `'mergeCellLeft'`, `'mergeCellUp'` and `'mergeCellDown'` commands.
-
-	To merge a table cell at the current selection with another cell, execute the command corresponding with the preferred direction. E.g. to merge with a cell to the right:
-
-	```js
-	editor.execute( 'mergeCellRight' );
-	```
-
-	**Note**: If a table cell has a different [`rowspan`](https://www.w3.org/TR/html50/tabular-data.html#attr-tdth-rowspan) (for `'mergeCellRight'` and `'mergeCellLeft'`) or [`colspan`](https://www.w3.org/TR/html50/tabular-data.html#attr-tdth-colspan) (for `'mergeCellUp'` and `'mergeCellDown'`), the command will be disabled.
-
-* The {@link module:table/commands/splitcellcommand~SplitCellCommand} as `'splitCellVertically'` and `'splitCellHorizontally'` commands.
-
-	You can split any cell vertically or horizontally by executing this command. E.g. to split the selected table cell vertically:
-
-	```js
-	editor.execute( 'splitCellVertically' );
-	```
-
-The {@link module:table/tabletoolbar~TableToolbar} plugin introduces the balloon toolbar for the tables. The toolbar shows up when a table cell is selected, 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 `'mergeCell'` dropdowns.
+* The `'insertTable'` dropdown.
+* The `'tableColumn'` dropdown.
+* The `'tableRow'` dropdown.
+* The `'mergeTableCells'` dropdown.
+
+And the following commands:
+
+* 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.
 
 ## Contribute
 

+ 20 - 0
packages/ckeditor5-table/lang/contexts.json

@@ -0,0 +1,20 @@
+{
+	"Insert table": "Label for the insert table toolbar button.",
+	"Header column": "Label for the set/unset table header column button.",
+	"Insert column before": "Label for the insert table column before the current one button.",
+	"Insert column after": "Label for the insert table column after the current one button.",
+	"Delete column": "Label for the delete table column button.",
+	"Column": "Label for the table column dropdown button.",
+	"Header row": "Label for the set/unset table header row button.",
+	"Insert row below": "Label for the insert row below button.",
+	"Insert row above": "Label for the insert row above button.",
+	"Delete row": "Label for the delete table row button.",
+	"Row": "Label for the table row dropdown button.",
+	"Merge cell up": "Label for the merge table cell up button.",
+	"Merge cell right": "Label for the merge table cell right button.",
+	"Merge cell down": "Label for the merge table cell down button.",
+	"Merge cell left": "Label for the merge table cell left button.",
+	"Split cell vertically": "Label for the split table cell vertically button.",
+	"Split cell horizontally": "Label for the split table cell horizontally button.",
+	"Merge cells": "Label for the merge table cells button."
+}

+ 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/en.po

@@ -0,0 +1,78 @@
+# Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+msgid ""
+msgstr ""
+"Language: \n"
+"Language-Team: \n"
+"Plural-Forms: \n"
+
+msgctxt "Label for the insert table toolbar button."
+msgid "Insert table"
+msgstr "Insert table"
+
+msgctxt "Label for the set/unset table header column button."
+msgid "Header column"
+msgstr "Header column"
+
+msgctxt "Label for the insert table column before the current one button."
+msgid "Insert column before"
+msgstr "Insert column before"
+
+msgctxt "Label for the insert table column after the current one button."
+msgid "Insert column after"
+msgstr "Insert column after"
+
+msgctxt "Label for the delete table column button."
+msgid "Delete column"
+msgstr "Delete column"
+
+msgctxt "Label for the table column dropdown button."
+msgid "Column"
+msgstr "Column"
+
+msgctxt "Label for the set/unset table header row button."
+msgid "Header row"
+msgstr "Header row"
+
+msgctxt "Label for the insert row below button."
+msgid "Insert row below"
+msgstr "Insert row below"
+
+msgctxt "Label for the insert row above button."
+msgid "Insert row above"
+msgstr "Insert row above"
+
+msgctxt "Label for the delete table row button."
+msgid "Delete row"
+msgstr "Delete row"
+
+msgctxt "Label for the table row dropdown button."
+msgid "Row"
+msgstr "Row"
+
+msgctxt "Label for the merge table cell up button."
+msgid "Merge cell up"
+msgstr "Merge cell up"
+
+msgctxt "Label for the merge table cell right button."
+msgid "Merge cell right"
+msgstr "Merge cell right"
+
+msgctxt "Label for the merge table cell down button."
+msgid "Merge cell down"
+msgstr "Merge cell down"
+
+msgctxt "Label for the merge table cell left button."
+msgid "Merge cell left"
+msgstr "Merge cell left"
+
+msgctxt "Label for the split table cell vertically button."
+msgid "Split cell vertically"
+msgstr "Split cell vertically"
+
+msgctxt "Label for the split table cell horizontally button."
+msgid "Split cell horizontally"
+msgstr "Split cell horizontally"
+
+msgctxt "Label for the merge table cells button."
+msgid "Merge cells"
+msgstr "Merge cells"

+ 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",

+ 18 - 6
packages/ckeditor5-table/src/commands/insertcolumncommand.js

@@ -14,22 +14,33 @@ 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 {
 	/**
-	 * Creates a new `InsertRowCommand` instance.
+	 * Creates a new `InsertColumnCommand` instance.
 	 *
-	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 * @param {module:core/editor/editor~Editor} editor An editor on which this command will be used.
 	 * @param {Object} options
-	 * @param {String} [options.order="after"] The order of insertion relative to a column in which caret is located.
-	 * Possible values: "after" and "before".
+	 * @param {String} [options.order="after"] The order of insertion relative to the column in which the caret is located.
+	 * Possible values: `"after"` and `"before"`.
 	 */
 	constructor( editor, options = {} ) {
 		super( editor );
 
 		/**
-		 * The order of insertion relative to a column in which caret is located.
+		 * The order of insertion relative to the column in which the caret is located.
 		 *
 		 * @readonly
 		 * @member {String} module:table/commands/insertcolumncommand~InsertColumnCommand#order
@@ -51,7 +62,8 @@ export default class InsertColumnCommand extends Command {
 	/**
 	 * Executes the command.
 	 *
-	 * Depending on command's {@link #order} value it inserts a column `'before'` or `'after'` the column in which selection is set.
+	 * Depending on the command's {@link #order} value, it inserts a column `'before'` or `'after'` the column in which the selection is
+	 * set.
 	 *
 	 * @fires execute
 	 */

+ 16 - 5
packages/ckeditor5-table/src/commands/insertrowcommand.js

@@ -14,22 +14,33 @@ 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 {
 	/**
 	 * Creates a new `InsertRowCommand` instance.
 	 *
-	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 * @param {module:core/editor/editor~Editor} editor The editor on which this command will be used.
 	 * @param {Object} options
-	 * @param {String} [options.order="below"] The order of insertion relative to a row in which caret is located.
-	 * Possible values: "above" and "below".
+	 * @param {String} [options.order="below"] The order of insertion relative to the row in which the caret is located.
+	 * Possible values: `"above"` and `"below"`.
 	 */
 	constructor( editor, options = {} ) {
 		super( editor );
 
 		/**
-		 * The order of insertion relative to a row in which caret is located.
+		 * The order of insertion relative to the row in which the caret is located.
 		 *
 		 * @readonly
 		 * @member {String} module:table/commands/insertrowcommand~InsertRowCommand#order
@@ -51,7 +62,7 @@ export default class InsertRowCommand extends Command {
 	/**
 	 * Executes the command.
 	 *
-	 * Depending on command's {@link #order} value it inserts a row `'below'` or `'above'` the row in which selection is set.
+	 * Depending on the command's {@link #order} value, it inserts a row `'below'` or `'above'` the row in which selection is set.
 	 *
 	 * @fires execute
 	 */

+ 14 - 4
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 {
@@ -33,11 +39,11 @@ export default class InsertTableCommand extends Command {
 	/**
 	 * Executes the command.
 	 *
-	 * Inserts table of given rows and columns into the editor.
+	 * Inserts a table with the given number of rows and columns into the editor.
 	 *
 	 * @param {Object} options
-	 * @param {Number} [options.rows=2] Number of rows to create in inserted table.
-	 * @param {Number} [options.columns=2] Number of columns to create in inserted table.
+	 * @param {Number} [options.rows=2] The number of rows to create in the inserted table.
+	 * @param {Number} [options.columns=2] The number of columns to create in the inserted table.
 	 * @fires execute
 	 */
 	execute( options = {} ) {
@@ -53,7 +59,11 @@ export default class InsertTableCommand extends Command {
 		const isRoot = firstPosition.parent === firstPosition.root;
 		const insertPosition = isRoot ? Position.createAt( firstPosition ) : Position.createAfter( firstPosition.parent );
 
-		tableUtils.createTable( insertPosition, rows, columns );
+		model.change( writer => {
+			const table = tableUtils.createTable( insertPosition, rows, columns );
+
+			writer.setSelection( Position.createAt( table.getChild( 0 ).getChild( 0 ) ) );
+		} );
 	}
 }
 

+ 21 - 8
packages/ckeditor5-table/src/commands/mergecellcommand.js

@@ -16,22 +16,35 @@ import { updateNumericAttribute } from './utils';
 /**
  * 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 {
 	/**
 	 * Creates a new `MergeCellCommand` instance.
 	 *
-	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 * @param {module:core/editor/editor~Editor} editor The editor on which this command will be used.
 	 * @param {Object} options
-	 * @param {String} options.direction Indicates which cell merge to currently selected one.
-	 * Possible values are: "left", "right", "up" and "down".
+	 * @param {String} options.direction Indicates which cell to merge with the currently selected one.
+	 * Possible values are: `'left'`, `'right'`, `'up'` and `'down'`.
 	 */
 	constructor( editor, options ) {
 		super( editor );
 
 		/**
-		 * The direction indicates which cell will be merged to currently selected one.
+		 * The direction that indicates which cell will be merged with the currently selected one.
 		 *
 		 * @readonly
 		 * @member {String} #direction
@@ -62,7 +75,7 @@ export default class MergeCellCommand extends Command {
 	/**
 	 * Executes the command.
 	 *
-	 * Depending on command's {@link #direction} value it will merge a cell that is to the `'left'`, `'right'`, `'up'` or `'down'`.
+	 * Depending on the command's {@link #direction} value, it will merge the cell that is to the `'left'`, `'right'`, `'up'` or `'down'`.
 	 *
 	 * @fires execute
 	 */
@@ -117,7 +130,7 @@ export default class MergeCellCommand extends Command {
 	}
 
 	/**
-	 * Returns a cell that is mergeable with current cell depending on command's direction.
+	 * Returns a cell that can be merged with the current cell depending on the command's direction.
 	 *
 	 * @returns {module:engine/model/element|undefined}
 	 * @private
@@ -150,7 +163,7 @@ export default class MergeCellCommand extends Command {
 	}
 }
 
-// Returns horizontally mergeable cell.
+// Returns the cell that can be merged horizontally.
 //
 // @param {module:engine/model/element~Element} tableCell
 // @param {String} direction
@@ -159,7 +172,7 @@ function getHorizontalCell( tableCell, direction ) {
 	return direction == 'right' ? tableCell.nextSibling : tableCell.previousSibling;
 }
 
-// Returns vertically mergeable cell.
+// Returns the cell that can be merged vertically.
 //
 // @param {module:engine/model/element~Element} tableCell
 // @param {String} direction

+ 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 {

+ 13 - 3
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
  */
@@ -46,9 +56,9 @@ export default class SetHeaderColumnCommand extends Command {
 	/**
 	 * Executes the command.
 	 *
-	 * When the selection is non-header column, the command will set `headingColumns` table's attribute to cover that column.
+	 * When the selection is in a non-header column, the command will set the `headingColumns` table attribute to cover that column.
 	 *
-	 * When selection is already in a header column then it will set `headingColumns` so the heading section will end before that column.
+	 * When the selection is already in a header column, it will set `headingColumns` so the heading section will end before that column.
 	 *
 	 * @fires execute
 	 */

+ 15 - 6
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 {
@@ -48,9 +57,9 @@ export default class SetHeaderRowCommand extends Command {
 	/**
 	 * Executes the command.
 	 *
-	 * When the selection is non-header row, the command will set `headingRows` table's attribute to cover that row.
+	 * When the selection is in a non-header row, the command will set the `headingRows` table attribute to cover that row.
 	 *
-	 * When selection is already in a header row then it will set `headingRows` so the heading section will end before that row.
+	 * When the selection is already in a header row, it will set `headingRows` so the heading section will end before that row.
 	 *
 	 * @fires execute
 	 */
@@ -87,7 +96,7 @@ export default class SetHeaderRowCommand extends Command {
 	}
 
 	/**
-	 * Checks if table cell is in heading section.
+	 * Checks if a table cell is in the heading section.
 	 *
 	 * @param {module:engine/model/element~Element} tableCell
 	 * @param {module:engine/model/element~Element} table
@@ -101,9 +110,9 @@ export default class SetHeaderRowCommand extends Command {
 	}
 }
 
-// Returns cells that span beyond new heading section.
+// Returns cells that span beyond the new heading section.
 //
-// @param {module:engine/model/element~Element} table Table to check
+// @param {module:engine/model/element~Element} table The table to check.
 // @param {Number} headingRowsToSet New heading rows attribute.
 // @param {Number} currentHeadingRows Current heading rows attribute.
 // @returns {Array.<module:engine/model/element~Element>}
@@ -125,7 +134,7 @@ function getOverlappingCells( table, headingRowsToSet, currentHeadingRows ) {
 	return cellsToSplit;
 }
 
-// Splits table cell horizontally.
+// Splits the table cell horizontally.
 //
 // @param {module:engine/model/element~Element} tableCell
 // @param {Number} headingRows

+ 9 - 2
packages/ckeditor5-table/src/commands/splitcellcommand.js

@@ -13,13 +13,20 @@ 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 {
 	/**
 	 * Creates a new `SplitCellCommand` instance.
 	 *
-	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 * @param {module:core/editor/editor~Editor} editor The editor on which this command will be used.
 	 * @param {Object} options
 	 * @param {String} options.direction Indicates whether the command should split cells `'horizontally'` or `'vertically'`.
 	 */
@@ -27,7 +34,7 @@ export default class SplitCellCommand extends Command {
 		super( editor );
 
 		/**
-		 * The direction indicates which cell will be split.
+		 * The direction that indicates which cell will be split.
 		 *
 		 * @readonly
 		 * @member {String} #direction

+ 4 - 4
packages/ckeditor5-table/src/commands/utils.js

@@ -8,7 +8,7 @@
  */
 
 /**
- * Returns parent table.
+ * Returns the parent table.
  *
  * @param {module:engine/model/position~Position} position
  * @returns {module:engine/model/element~Element|module:engine/model/documentfragment~DocumentFragment}
@@ -26,13 +26,13 @@ export function getParentTable( position ) {
 }
 
 /**
- * Common method to update numeric value. If value is default one it will be unset.
+ * A common method to update the numeric value. If a value is the default one, it will be unset.
  *
  * @param {String} key Attribute key.
- * @param {*} value Attribute new value.
+ * @param {*} value The new attribute value.
  * @param {module:engine/model/item~Item} item Model item on which the attribute will be set.
  * @param {module:engine/model/writer~Writer} writer
- * @param {*} defaultValue Default attribute value if value is lower or equal then it will be unset.
+ * @param {*} defaultValue Default attribute value. If a value is lower or equal, it will be unset.
  */
 export function updateNumericAttribute( key, value, item, writer, defaultValue = 1 ) {
 	if ( value > defaultValue ) {

+ 35 - 31
packages/ckeditor5-table/src/converters/downcast.js

@@ -16,10 +16,10 @@ import { toTableWidget } from '../utils';
 /**
  * Model table element to view table element conversion helper.
  *
- * This conversion helper creates whole table element with child elements.
+ * This conversion helper creates the whole table element with child elements.
  *
  * @param {Object} options
- * @param {Boolean} options.asWidget If set to true the downcast conversion will produce widget.
+ * @param {Boolean} options.asWidget If set to `true`, the downcast conversion will produce a widget.
  * @returns {Function} Conversion helper.
  */
 export function downcastInsertTable( options = {} ) {
@@ -36,12 +36,14 @@ export function downcastInsertTable( options = {} ) {
 
 		const asWidget = options && options.asWidget;
 
+		const figureElement = conversionApi.writer.createContainerElement( 'figure', { class: 'table' } );
 		const tableElement = conversionApi.writer.createContainerElement( 'table' );
+		conversionApi.writer.insert( ViewPosition.createAt( figureElement ), tableElement );
 
 		let tableWidget;
 
 		if ( asWidget ) {
-			tableWidget = toTableWidget( tableElement, conversionApi.writer );
+			tableWidget = toTableWidget( figureElement, conversionApi.writer );
 		}
 
 		const tableWalker = new TableWalker( table );
@@ -70,15 +72,15 @@ export function downcastInsertTable( options = {} ) {
 
 		const viewPosition = conversionApi.mapper.toViewPosition( data.range.start );
 
-		conversionApi.mapper.bindElements( table, asWidget ? tableWidget : tableElement );
-		conversionApi.writer.insert( viewPosition, asWidget ? tableWidget : tableElement );
+		conversionApi.mapper.bindElements( table, asWidget ? tableWidget : figureElement );
+		conversionApi.writer.insert( viewPosition, asWidget ? tableWidget : figureElement );
 	}, { priority: 'normal' } );
 }
 
 /**
- * Model row element to view <tr> element conversion helper.
+ * Model row element to view `<tr>` element conversion helper.
  *
- * This conversion helper creates whole <tr> element with child elements.
+ * This conversion helper creates the whole `<tr>` element with child elements.
  *
  * @returns {Function} Conversion helper.
  */
@@ -92,7 +94,8 @@ export function downcastInsertRow( options = {} ) {
 
 		const table = tableRow.parent;
 
-		const tableElement = conversionApi.mapper.toViewElement( table );
+		const figureElement = conversionApi.mapper.toViewElement( table );
+		const tableElement = figureElement.getChild( 0 );
 
 		const row = table.getChildIndex( tableRow );
 
@@ -118,10 +121,10 @@ export function downcastInsertRow( options = {} ) {
 }
 
 /**
- * Model tableCEll element to view <td> or <th> element conversion helper.
+ * Model table cell element to view `<td>` or `<th>` element conversion helper.
  *
- * This conversion helper will create proper <th> elements for tableCells that are in heading section (heading row or column)
- * and <td> otherwise.
+ * This conversion helper will create proper `<th>` elements for table cells that are in the heading section (heading row or column)
+ * and `<td>` otherwise.
  *
  * @returns {Function} Conversion helper.
  */
@@ -160,13 +163,13 @@ export function downcastInsertCell( options = {} ) {
 }
 
 /**
- * Conversion helper that acts on headingRows table attribute change.
+ * Conversion helper that acts on heading rows table attribute change.
  *
  * This converter will:
  *
- * * rename <td> to <th> elements or vice versa depending on headings,
- * * create <thead> or <tbody> elements if needed,
- * * remove empty <thead> or <tbody> if needed.
+ * * Rename `<td>` to `<th>` elements or vice versa depending on headings.
+ * * Create `<thead>` or `<tbody>` elements if needed.
+ * * Remove empty `<thead>` or `<tbody>` if needed.
  *
  * @returns {Function} Conversion helper.
  */
@@ -180,7 +183,8 @@ export function downcastTableHeadingRowsChange( options = {} ) {
 			return;
 		}
 
-		const viewTable = conversionApi.mapper.toViewElement( table );
+		const figureElement = conversionApi.mapper.toViewElement( table );
+		const viewTable = figureElement.getChild( 0 );
 
 		const oldRows = data.attributeOldValue;
 		const newRows = data.attributeNewValue;
@@ -236,9 +240,9 @@ export function downcastTableHeadingRowsChange( options = {} ) {
 }
 
 /**
- * Conversion helper that acts on headingColumns table attribute change.
+ * Conversion helper that acts on heading columns table attribute change.
  *
- * Depending on changed attributes this converter will rename <td> to <th> elements or vice versa depending of cell column index.
+ * Depending on changed attributes this converter will rename `<td` to `<th>` elements or vice versa depending of the cell column index.
  *
  * @returns {Function} Conversion helper.
  */
@@ -274,7 +278,7 @@ export function downcastTableHeadingColumnsChange( options = {} ) {
 }
 
 /**
- * Conversion helper that acts on removed row.
+ * Conversion helper that acts on a removed row.
  *
  * @returns {Function} Conversion helper.
  */
@@ -303,7 +307,7 @@ export function downcastRemoveRow() {
 	}, { priority: 'higher' } );
 }
 
-// Renames table cell in the view to given element name.
+// Renames a table cell in the view to a given element name.
 //
 // @param {module:engine/model/element~Element} tableCell
 // @param {String} desiredCellElementName
@@ -328,7 +332,7 @@ function renameViewTableCell( tableCell, desiredCellElementName, conversionApi,
 	conversionApi.mapper.bindElements( tableCell, renamedCell );
 }
 
-// Renames a table cell element in a view according to it's location in table.
+// Renames a table cell element in the view according to its location in the table.
 //
 // @param {module:table/tablewalker~TableWalkerValue} tableWalkerValue
 // @param {{headingColumns, headingRows}} tableAttributes
@@ -349,7 +353,7 @@ function renameViewTableCellIfRequired( tableWalkerValue, tableAttributes, conve
 	}
 }
 
-// Creates a table cell element in a view.
+// Creates a table cell element in the view.
 //
 // @param {module:table/tablewalker~TableWalkerValue} tableWalkerValue
 // @param {module:engine/view/position~Position} insertPosition
@@ -368,7 +372,7 @@ function createViewTableCellElement( tableWalkerValue, tableAttributes, insertPo
 	conversionApi.writer.insert( insertPosition, cellElement );
 }
 
-// Creates or returns an existing tr element from a view.
+// Creates or returns an existing `<tr>` element from the view.
 //
 // @param {module:engine/view/element~Element} tableRow
 // @param {Number} rowIndex
@@ -395,7 +399,7 @@ function getOrCreateTr( tableRow, rowIndex, tableSection, conversionApi ) {
 	return trElement;
 }
 
-// Returns `th` for heading cells and `td` for other cells for current table walker value.
+// Returns `th` for heading cells and `td` for other cells for the current table walker value.
 //
 // @param {module:table/tablewalker~TableWalkerValue} tableWalkerValue
 // @param {{headingColumns, headingRows}} tableAttributes
@@ -418,7 +422,7 @@ function getCellElementName( tableWalkerValue, tableAttributes ) {
 	return isRowHeading ? 'th' : 'td';
 }
 
-// Returns table section name for current table walker value.
+// Returns the table section name for the current table walker value.
 //
 // @param {Number} row
 // @param {{headingColumns, headingRows}} tableAttributes
@@ -427,12 +431,12 @@ function getSectionName( row, tableAttributes ) {
 	return row < tableAttributes.headingRows ? 'thead' : 'tbody';
 }
 
-// Creates or returns an existing <tbody> or <thead> element witch caching.
+// Creates or returns an existing `<tbody>` or `<thead>` element witch caching.
 //
 // @param {String} sectionName
 // @param {module:engine/view/element~Element} viewTable
 // @param {Object} conversionApi
-// @param {Object} cachedTableSection An object on which store cached elements.
+// @param {Object} cachedTableSection An object that stores cached elements.
 // @returns {module:engine/view/containerelement~ContainerElement}
 function getOrCreateTableSection( sectionName, viewTable, conversionApi ) {
 	const viewTableSection = getExistingTableSectionElement( sectionName, viewTable );
@@ -440,7 +444,7 @@ function getOrCreateTableSection( sectionName, viewTable, conversionApi ) {
 	return viewTableSection ? viewTableSection : createTableSection( sectionName, viewTable, conversionApi );
 }
 
-// Finds an existing <tbody> or <thead> element or returns undefined.
+// Finds an existing `<tbody>` or `<thead>` element or returns undefined.
 //
 // @param {String} sectionName
 // @param {module:engine/view/element~Element} tableElement
@@ -453,7 +457,7 @@ function getExistingTableSectionElement( sectionName, tableElement ) {
 	}
 }
 
-// Creates table section at the end of a table.
+// Creates a table section at the end of the table.
 //
 // @param {String} sectionName
 // @param {module:engine/view/element~Element} tableElement
@@ -467,7 +471,7 @@ function createTableSection( sectionName, tableElement, conversionApi ) {
 	return tableChildElement;
 }
 
-// Removes an existing <tbody> or <thead> element if it is empty.
+// Removes an existing `<tbody>` or `<thead>` element if it is empty.
 //
 // @param {String} sectionName
 // @param {module:engine/view/element~Element} tableElement
@@ -480,7 +484,7 @@ function removeTableSectionIfEmpty( sectionName, tableElement, conversionApi ) {
 	}
 }
 
-// Moves view table rows associated with passed model rows to provided table section element.
+// Moves view table rows associated with passed model rows to the provided table section element.
 //
 // @param {Array.<module:engine/model/element~Element>} rowsToMove
 // @param {module:engine/view/element~Element} viewTableSection

+ 12 - 11
packages/ckeditor5-table/src/converters/upcasttable.js

@@ -13,7 +13,7 @@ import ModelPosition from '@ckeditor/ckeditor5-engine/src/model/position';
 /**
  * View table element to model table element conversion helper.
  *
- * This conversion helper convert table element as well as tableRows.
+ * This conversion helper converts the table element as well as table rows.
  *
  * @returns {Function} Conversion helper.
  */
@@ -85,11 +85,11 @@ export default function upcastTable() {
 	};
 }
 
-// Scans table rows & extracts required metadata from table:
+// Scans table rows and extracts required metadata from the table:
 //
-// headingRows    - number of rows that goes as table header.
+// headingRows    - the number of rows that goes as table header.
 // headingColumns - max number of row headings.
-// rows           - sorted trs as they should go into the model - ie if <thead> is inserted after <tbody> in the view.
+// rows           - sorted `<tr>`s as they should go into the model - ie. if `<thead>` is inserted after `<tbody>` in the view.
 //
 // @param {module:engine/view/element~Element} viewTable
 // @returns {{headingRows, headingColumns, rows}}
@@ -99,9 +99,10 @@ function scanTable( viewTable ) {
 		headingColumns: 0
 	};
 
-	// The <tbody> and <thead> sections in the DOM doesn't have to be in order <thead> -> <tbody> and there might be more then one of them.
-	// As the model doesn't have those sections rows from different sections must be sorted.
-	// Ie below is a valid HTML table:
+	// The `<tbody>` and <thead> sections in the DOM do not have to be in order `<thead>` -> `<tbody>` and there might be more then one of
+	// them.
+	// As the model does not have those sections, rows from different sections must be sorted.
+	// For example, below is a valid HTML table:
 	//
 	//		<table>
 	//			<tbody><tr><td>2</td></tr></tbody>
@@ -109,7 +110,7 @@ function scanTable( viewTable ) {
 	//			<tbody><tr><td>3</td></tr></tbody>
 	//		</table>
 	//
-	// But browsers will render rows in order as : 1 as heading and 2 & 3 as (body).
+	// But browsers will render rows in order as: 1 as heading and 2 and 3 as (body).
 	const headRows = [];
 	const bodyRows = [];
 
@@ -150,12 +151,12 @@ function scanTable( viewTable ) {
 	return tableMeta;
 }
 
-// Scans <tr> and it's children for metadata:
+// Scans `<tr>` and its children for metadata:
 // - For heading row:
-//     - either add this row to heading or body rows.
+//     - either adds this row to heading or body rows.
 //     - updates number of heading rows.
 // - For body rows:
-//     - calculates number of column headings.
+//     - calculates the number of column headings.
 //
 // @param {module:engine/view/element~Element} tr
 // @returns {Number}

+ 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 {

+ 18 - 17
packages/ckeditor5-table/src/tableediting.js

@@ -100,24 +100,24 @@ export default class TableEditing extends Plugin {
 
 		// Define all the commands.
 		editor.commands.add( 'insertTable', new InsertTableCommand( editor ) );
-		editor.commands.add( 'insertRowAbove', new InsertRowCommand( editor, { order: 'above' } ) );
-		editor.commands.add( 'insertRowBelow', new InsertRowCommand( editor, { order: 'below' } ) );
-		editor.commands.add( 'insertColumnBefore', new InsertColumnCommand( editor, { order: 'before' } ) );
-		editor.commands.add( 'insertColumnAfter', new InsertColumnCommand( editor, { order: 'after' } ) );
+		editor.commands.add( 'insertTableRowAbove', new InsertRowCommand( editor, { order: 'above' } ) );
+		editor.commands.add( 'insertTableRowBelow', new InsertRowCommand( editor, { order: 'below' } ) );
+		editor.commands.add( 'insertTableColumnBefore', new InsertColumnCommand( editor, { order: 'before' } ) );
+		editor.commands.add( 'insertTableColumnAfter', new InsertColumnCommand( editor, { order: 'after' } ) );
 
-		editor.commands.add( 'removeRow', new RemoveRowCommand( editor ) );
-		editor.commands.add( 'removeColumn', new RemoveColumnCommand( editor ) );
+		editor.commands.add( 'removeTableRow', new RemoveRowCommand( editor ) );
+		editor.commands.add( 'removeTableColumn', new RemoveColumnCommand( editor ) );
 
-		editor.commands.add( 'splitCellVertically', new SplitCellCommand( editor, { direction: 'vertically' } ) );
-		editor.commands.add( 'splitCellHorizontally', new SplitCellCommand( editor, { direction: 'horizontally' } ) );
+		editor.commands.add( 'splitTableCellVertically', new SplitCellCommand( editor, { direction: 'vertically' } ) );
+		editor.commands.add( 'splitTableCellHorizontally', new SplitCellCommand( editor, { direction: 'horizontally' } ) );
 
-		editor.commands.add( 'mergeCellRight', new MergeCellCommand( editor, { direction: 'right' } ) );
-		editor.commands.add( 'mergeCellLeft', new MergeCellCommand( editor, { direction: 'left' } ) );
-		editor.commands.add( 'mergeCellDown', new MergeCellCommand( editor, { direction: 'down' } ) );
-		editor.commands.add( 'mergeCellUp', new MergeCellCommand( editor, { direction: 'up' } ) );
+		editor.commands.add( 'mergeTableCellRight', new MergeCellCommand( editor, { direction: 'right' } ) );
+		editor.commands.add( 'mergeTableCellLeft', new MergeCellCommand( editor, { direction: 'left' } ) );
+		editor.commands.add( 'mergeTableCellDown', new MergeCellCommand( editor, { direction: 'down' } ) );
+		editor.commands.add( 'mergeTableCellUp', new MergeCellCommand( editor, { direction: 'up' } ) );
 
-		editor.commands.add( 'setColumnHeader', new SetHeaderColumnCommand( editor ) );
-		editor.commands.add( 'setRowHeader', new SetHeaderRowCommand( editor ) );
+		editor.commands.add( 'setTableColumnHeader', new SetHeaderColumnCommand( editor ) );
+		editor.commands.add( 'setTableRowHeader', new SetHeaderRowCommand( editor ) );
 
 		// Handle tab key navigation.
 		this.listenTo( editor.editing.view.document, 'keydown', ( ...args ) => this._handleTabOnSelectedTable( ...args ) );
@@ -132,8 +132,8 @@ export default class TableEditing extends Plugin {
 	}
 
 	/**
-	 * Handles {@link module:engine/view/document~Document#event:keydown keydown} events for 'Tab' key executed
-	 * when table widget is selected.
+	 * Handles {@link module:engine/view/document~Document#event:keydown keydown} events for the <kbd>Tab</kbd> key executed
+	 * when the table widget is selected.
 	 *
 	 * @private
 	 * @param {module:utils/eventinfo~EventInfo} eventInfo
@@ -168,7 +168,8 @@ export default class TableEditing extends Plugin {
 	}
 
 	/**
-	 * Handles {@link module:engine/view/document~Document#event:keydown keydown} events for 'Tab' key executed inside table cell.
+	 * Handles {@link module:engine/view/document~Document#event:keydown keydown} events for the <kbd>Tab</kbd> key executed inside table
+	 * cell.
 	 *
 	 * @private
 	 * @param {module:utils/eventinfo~EventInfo} eventInfo

+ 6 - 7
packages/ckeditor5-table/src/tabletoolbar.js

@@ -16,7 +16,7 @@ import { repositionContextualBalloon, getBalloonPositionData } from './ui/utils'
 const balloonClassName = 'ck-toolbar-container';
 
 /**
- * The table toolbar class. Creates a table toolbar that shows up when the table widget is selected.
+ * The table toolbar class. It creates a table toolbar that shows up when the table widget is selected.
  *
  * Toolbar components are created using the editor {@link module:ui/componentfactory~ComponentFactory ComponentFactory}
  * based on the {@link module:core/editor/editor~Editor#config configuration} stored under `table.toolbar`.
@@ -80,7 +80,7 @@ export default class TableToolbar extends Plugin {
 		this._balloon = this.editor.plugins.get( 'ContextualBalloon' );
 
 		/**
-		 * A `ToolbarView` instance used to display the buttons specific for table editing.
+		 * A toolbar view instance used to display the buttons specific for table editing.
 		 *
 		 * @protected
 		 * @type {module:ui/toolbar/toolbarview~ToolbarView}
@@ -171,18 +171,17 @@ export default class TableToolbar extends Plugin {
  * Items to be placed in the table toolbar.
  * This option is used by the {@link module:table/tabletoolbar~TableToolbar} feature.
  *
- * Assuming that you use the {@link module:table/tableui~TableUI} feature the following toolbar items will be available
+ * Assuming that you use the {@link module:table/tableui~TableUI} feature, the following toolbar items will be available
  * in {@link module:ui/componentfactory~ComponentFactory}:
  *
  * * `'tableRow'`,
  * * `'tableColumn'`,
- * * `'mergeCell'`,
- * * `'splitCell'`,
+ * * `'mergeTableCells'`.
  *
- * so you can configure the toolbar like this:
+ * You can thus configure the toolbar like this:
  *
  *		const tableConfig = {
- *			toolbar: [ 'tableRow', 'tableColumn', 'mergeCell', 'splitCell' ]
+ *			toolbar: [ 'tableRow', 'tableColumn', 'mergeTableCells' ]
  *		};
  *
  * Of course, the same buttons can also be used in the

+ 28 - 28
packages/ckeditor5-table/src/tableui.js

@@ -25,9 +25,9 @@ import tableMergeCellIcon from './../theme/icons/table-merge-cell.svg';
  * * The `'insertTable'` dropdown,
  * * The `'tableColumn'` dropdown,
  * * The `'tableRow'` dropdown,
- * * The `'mergeCell'` dropdown.
+ * * The `'mergeTableCells'` dropdown.
  *
- * The `'tableColumn'`, `'tableRow'`, `'mergeCell'` work best with {@link module:table/tabletoolbar~TableToolbar}.
+ * The `'tableColumn'`, `'tableRow'`, `'mergeTableCells'` dropdowns work best with {@link module:table/tabletoolbar~TableToolbar}.
  *
  * @extends module:core/plugin~Plugin
  */
@@ -74,54 +74,54 @@ export default class TableUI extends Plugin {
 
 		editor.ui.componentFactory.add( 'tableColumn', locale => {
 			const options = [
-				{ commandName: 'setColumnHeader', label: t( 'Header column' ), bindIsActive: true },
+				{ commandName: 'setTableColumnHeader', label: t( 'Header column' ), bindIsActive: true },
 				'|',
-				{ commandName: 'insertColumnBefore', label: t( 'Insert column before' ) },
-				{ commandName: 'insertColumnAfter', label: t( 'Insert column after' ) },
-				{ commandName: 'removeColumn', label: t( 'Delete column' ) }
+				{ commandName: 'insertTableColumnBefore', label: t( 'Insert column before' ) },
+				{ commandName: 'insertTableColumnAfter', label: t( 'Insert column after' ) },
+				{ commandName: 'removeTableColumn', label: t( 'Delete column' ) }
 			];
 
-			return this._prepareDropdown( 'Column', tableColumnIcon, options, locale );
+			return this._prepareDropdown( t( 'Column' ), tableColumnIcon, options, locale );
 		} );
 
 		editor.ui.componentFactory.add( 'tableRow', locale => {
 			const options = [
-				{ commandName: 'setRowHeader', label: t( 'Header row' ), bindIsActive: true },
+				{ commandName: 'setTableRowHeader', label: t( 'Header row' ), bindIsActive: true },
 				'|',
-				{ commandName: 'insertRowBelow', label: t( 'Insert row below' ) },
-				{ commandName: 'insertRowAbove', label: t( 'Insert row above' ) },
-				{ commandName: 'removeRow', label: t( 'Delete row' ) }
+				{ commandName: 'insertTableRowBelow', label: t( 'Insert row below' ) },
+				{ commandName: 'insertTableRowAbove', label: t( 'Insert row above' ) },
+				{ commandName: 'removeTableRow', label: t( 'Delete row' ) }
 			];
 
-			return this._prepareDropdown( 'Row', tableRowIcon, options, locale );
+			return this._prepareDropdown( t( 'Row' ), tableRowIcon, options, locale );
 		} );
 
-		editor.ui.componentFactory.add( 'mergeCell', locale => {
+		editor.ui.componentFactory.add( 'mergeTableCells', locale => {
 			const options = [
-				{ commandName: 'mergeCellUp', label: t( 'Merge cell up' ) },
-				{ commandName: 'mergeCellRight', label: t( 'Merge cell right' ) },
-				{ commandName: 'mergeCellDown', label: t( 'Merge cell down' ) },
-				{ commandName: 'mergeCellLeft', label: t( 'Merge cell left' ) },
+				{ 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: 'splitCellVertically', label: t( 'Split cell vertically' ) },
-				{ commandName: 'splitCellHorizontally', label: t( 'Split cell horizontally' ) }
+				{ commandName: 'splitTableCellVertically', label: t( 'Split cell vertically' ) },
+				{ commandName: 'splitTableCellHorizontally', label: t( 'Split cell horizontally' ) }
 			];
 
-			return this._prepareDropdown( 'Merge cell', tableMergeCellIcon, options, locale );
+			return this._prepareDropdown( t( 'Merge cells' ), tableMergeCellIcon, options, locale );
 		} );
 	}
 
 	/**
-	 * Creates dropdown view from set of options.
+	 * Creates a dropdown view from the set of options.
 	 *
 	 * @private
-	 * @param {String} buttonName Dropdown button name.
-	 * @param {String} icon Icon for dropdown button.
-	 * @param {Array.<module:table/tableui~DropdownOption>} options List of options for dropdown.
+	 * @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 {module:utils/locale~Locale} locale
 	 * @returns {module:ui/dropdown/dropdownview~DropdownView}
 	 */
-	_prepareDropdown( buttonName, icon, options, locale ) {
+	_prepareDropdown( label, icon, options, locale ) {
 		const editor = this.editor;
 
 		const dropdownView = createDropdown( locale );
@@ -138,7 +138,7 @@ export default class TableUI extends Plugin {
 
 		// Decorate dropdown's button.
 		dropdownView.buttonView.set( {
-			label: buttonName,
+			label,
 			icon,
 			tooltip: true
 		} );
@@ -192,11 +192,11 @@ function addListOption( option, editor, commands, dropdownItems ) {
 }
 
 /**
- * Object describing table dropdowns' items.
+ * 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` will bind command's value to `isActive` dropdown item property.
+ * @property {Boolean} bindIsActive If `true`, it will bind the command's value to the `isActive` dropdown item property.
  */

+ 39 - 35
packages/ckeditor5-table/src/tableutils.js

@@ -14,7 +14,7 @@ import TableWalker from './tablewalker';
 import { getParentTable, updateNumericAttribute } from './commands/utils';
 
 /**
- * The table utils plugin.
+ * The table utilities plugin.
  *
  * @extends module:core/plugin~Plugin
  */
@@ -27,9 +27,9 @@ export default class TableUtils extends Plugin {
 	}
 
 	/**
-	 * Returns table cell location as an object with table row and table column indexes.
+	 * Returns the table cell location as an object with table row and table column indexes.
 	 *
-	 * For instance in a table below:
+	 * For instance in the table below:
 	 *
 	 *		    0   1   2   3
 	 *		  +---+---+---+---+
@@ -69,26 +69,29 @@ export default class TableUtils extends Plugin {
 	}
 
 	/**
-	 * Creates an empty table at given position.
+	 * Creates an empty table at a given position.
 	 *
-	 * @param {module:engine/model/position~Position} position Position at which insert a table.
-	 * @param {Number} rows Number of rows to create.
-	 * @param {Number} columns Number of columns to create.
+	 * @param {module:engine/model/position~Position} position The position where the table will be inserted.
+	 * @param {Number} rows The number of rows to create.
+	 * @param {Number} columns The number of columns to create.
+	 * @returns {module:engine/model/element~Element} The created table element.
 	 */
 	createTable( position, rows, columns ) {
 		const model = this.editor.model;
 
-		model.change( writer => {
+		return model.change( writer => {
 			const table = writer.createElement( 'table' );
 
 			writer.insert( table, position );
 
 			createEmptyRows( writer, table, 0, rows, columns );
+
+			return table;
 		} );
 	}
 
 	/**
-	 * Insert rows into a table.
+	 * Inserts rows into a table.
 	 *
 	 *		editor.plugins.get( 'TableUtils' ).insertRows( table, { at: 1, rows: 2 } );
 	 *
@@ -107,10 +110,10 @@ export default class TableUtils extends Plugin {
 	 *		                                       +   + f | g |
 	 *		                                       +---+---+---+ 5
 	 *
-	 * @param {module:engine/model/element~Element} table Table model element to which insert rows.
+	 * @param {module:engine/model/element~Element} table The table model element where the rows will be inserted.
 	 * @param {Object} options
-	 * @param {Number} [options.at=0] Row index at which insert rows.
-	 * @param {Number} [options.rows=1] Number of rows to insert.
+	 * @param {Number} [options.at=0] Row index at which the rows will be inserted.
+	 * @param {Number} [options.rows=1] The number of rows to insert.
 	 */
 	insertRows( table, options = {} ) {
 		const model = this.editor.model;
@@ -182,10 +185,10 @@ export default class TableUtils extends Plugin {
 	 *		+---+---+---+                   +---+---+---+---+---+
 	 *		    ^---- insert here, `at` = 1, `columns` = 2
 	 *
-	 * @param {module:engine/model/element~Element} table Table model element to which insert columns.
+	 * @param {module:engine/model/element~Element} table The table model element where the columns will be inserted.
 	 * @param {Object} options
-	 * @param {Number} [options.at=0] Column index at which insert columns.
-	 * @param {Number} [options.columns=1] Number of columns to insert.
+	 * @param {Number} [options.at=0] Column index at which the columns will be inserted.
+	 * @param {Number} [options.columns=1] The number of columns to insert.
 	 */
 	insertColumns( table, options = {} ) {
 		const model = this.editor.model;
@@ -246,9 +249,9 @@ export default class TableUtils extends Plugin {
 	}
 
 	/**
-	 * Divides table cell vertically into several ones.
+	 * Divides a table cell vertically into several ones.
 	 *
-	 * The cell will visually split to more cells by updating colspans of other cells in a column
+	 * The cell will be visually split into more cells by updating colspans of other cells in a column
 	 * and inserting cells (columns) after that cell.
 	 *
 	 * In the table below, if cell "a" is split to 3 cells:
@@ -267,10 +270,10 @@ export default class TableUtils extends Plugin {
 	 *		| d         | e | f |
 	 *		+---+---+---+---+---+
 	 *
-	 * So cell d will get updated `colspan` to 3 and 2 cells will be added (2 columns created).
+	 * So cell "d" will get its `colspan` updated to `3` and 2 cells will be added (2 columns will be created).
 	 *
-	 * Splitting cell that already has a colspan attribute set will distribute cell's colspan evenly and a reminder
-	 * will be left to original cell:
+	 * Splitting a cell that already has a `colspan` attribute set will distribute the cell `colspan` evenly and the remainder
+	 * will be left to the original cell:
 	 *
 	 *		+---+---+---+
 	 *		| a         |
@@ -278,7 +281,7 @@ export default class TableUtils extends Plugin {
 	 *		| b | c | d |
 	 *		+---+---+---+
 	 *
-	 * Splitting cell a with colspan=3 to a 2 cells will create 1 cell with colspan=2 and cell a will have colspan=1:
+	 * Splitting cell "a" with `colspan=3` to 2 cells will create 1 cell with a `colspan=a` and cell "a" that will have `colspan=2`:
 	 *
 	 *		+---+---+---+
 	 *		| a     |   |
@@ -369,11 +372,12 @@ export default class TableUtils extends Plugin {
 	}
 
 	/**
-	 * Divides table cell horizontally into several ones.
+	 * Divides a table cell horizontally into several ones.
 	 *
-	 * The cell will visually split to more cells by updating rowspans of other cells in a row and inserting rows with single cell below.
+	 * The cell will be visually split into more cells by updating rowspans of other cells in the row and inserting rows with a single cell
+	 * below.
 	 *
-	 * If in a table below cell b will be split to a 3 cells:
+	 * If in the table below cell "b" is split to 3 cells:
 	 *
 	 *		+---+---+---+
 	 *		| a | b | c |
@@ -381,7 +385,7 @@ export default class TableUtils extends Plugin {
 	 *		| d | e | f |
 	 *		+---+---+---+
 	 *
-	 * will result in a table below:
+	 * It will result in the table below:
 	 *
 	 *		+---+---+---+
 	 *		| a | b | c |
@@ -393,10 +397,10 @@ export default class TableUtils extends Plugin {
 	 *		| d | e | f |
 	 *		+---+---+---+
 	 *
-	 * So cells a & b will get updated `rowspan` to 3 and 2 rows with single cell will be added.
+	 * So cells "a" and "b" will get their `rowspan` updated to `3` and 2 rows with a single cell will be added.
 	 *
-	 * Splitting cell that has already a rowspan attribute set will distribute cell's rowspan evenly and a reminder
-	 * will be left to original cell:
+	 * Splitting a cell that already has a `rowspan` attribute set will distribute the cell `rowspan` evenly and the remainder
+	 * will be left to the original cell:
 	 *
 	 *		+---+---+---+
 	 *		| a | b | c |
@@ -408,7 +412,7 @@ export default class TableUtils extends Plugin {
 	 *		|   | h | i |
 	 *		+---+---+---+
 	 *
-	 * Splitting cell a with rowspan=4 to a 3 cells will create 2 cells with rowspan=1 and cell a will have rowspan=2:
+	 * Splitting cell "a" with `rowspan=4` to 3 cells will create 2 cells with a `rowspan=1` and cell "a" will have `rowspan=2`:
 	 *
 	 *		+---+---+---+
 	 *		| a | b | c |
@@ -522,11 +526,11 @@ export default class TableUtils extends Plugin {
 	}
 
 	/**
-	 * Returns number of columns for given table.
+	 * Returns the number of columns for a given table.
 	 *
 	 *		editor.plugins.get( 'TableUtils' ).getColumns( table );
 	 *
-	 * @param {module:engine/model/element~Element} table Table to analyze.
+	 * @param {module:engine/model/element~Element} table The table to analyze.
 	 * @returns {Number}
 	 */
 	getColumns( table ) {
@@ -541,7 +545,7 @@ export default class TableUtils extends Plugin {
 	}
 }
 
-// Creates empty rows at given index in an existing table.
+// Creates empty rows at the given index in an existing table.
 //
 // @param {module:engine/model/writer~Writer} writer
 // @param {module:engine/model/element~Element} table
@@ -558,7 +562,7 @@ function createEmptyRows( writer, table, insertAt, rows, tableCellToInsert, attr
 	}
 }
 
-// Creates cells at given position.
+// Creates cells at a given position.
 //
 // @param {Number} columns Number of columns to create
 // @param {module:engine/model/writer~Writer} writer
@@ -569,14 +573,14 @@ function createCells( cells, writer, insertPosition, attributes = {} ) {
 	}
 }
 
-// Evenly distributes span of a cell to a number of provided cells.
+// Evenly distributes the span of a cell to a number of provided cells.
 // The resulting spans will always be integer values.
 //
 // For instance breaking a span of 7 into 3 cells will return:
 //
 //		{ newCellsSpan: 2, updatedSpan: 3 }
 //
-// as two cells will have span of 2 and the reminder will go the first cell so it's span will change to 3.
+// as two cells will have a span of 2 and the remainder will go the first cell so its span will change to 3.
 //
 // @param {Number} span Span value do break.
 // @param {Number} numberOfCells Number of resulting spans.

+ 49 - 47
packages/ckeditor5-table/src/tablewalker.js

@@ -8,22 +8,22 @@
  */
 
 /**
- * Table iterator class. It allows to iterate over a table cells. For each cell the iterator yields
+ * Table iterator class. It allows to iterate over table cells. For each cell the iterator yields
  * {@link module:table/tablewalker~TableWalkerValue} with proper table cell attributes.
  */
 export default class TableWalker {
 	/**
-	 * Creates an instance of table walker.
+	 * Creates an instance of the table walker.
 	 *
 	 *
-	 * The TableWalker iterates internally by traversing table from row index = 0 and column index = 0.
-	 * It walks row by row and column by column in order to output values defined in constructor.
-	 * By default it will output only those locations that are occupied by a cell to include also a spanned rows & columns
-	 * pass `includeSpanned` option to a constructor.
+	 * The table walker iterates internally by traversing the table from row index = 0 and column index = 0.
+	 * It walks row by row and column by column in order to output values defined in the constructor.
+	 * By default it will output only those locations that are occupied by a cell. To include also spanned rows and columns,
+	 * pass the `includeSpanned` option to the constructor.
 	 *
-	 * The most important values of iterator values are column & row indexes of a cell.
+	 * The most important values of the iterator are column and row indexes of a cell.
 	 *
-	 * To iterate over given row:
+	 * To iterate over a given row:
 	 *
 	 *		const tableWalker = new TableWalker( table, { startRow: 1, endRow: 2 } );
 	 *
@@ -31,7 +31,7 @@ export default class TableWalker {
 	 *			console.log( 'A cell at row ' + cellInfo.row + ' and column ' + cellInfo.column );
 	 *		}
 	 *
-	 * For instance the above code for a table:
+	 * For instance the code above for the following table:
 	 *
 	 *		+----+----+----+----+----+----+
 	 *		| 00      | 02 | 03      | 05 |
@@ -50,7 +50,7 @@ export default class TableWalker {
 	 *		'A cell at row 1 and column 5'
 	 *		'A cell at row 2 and column 2'
 	 *
-	 * To iterate over spanned cells also:
+	 * To also iterate over spanned cells:
 	 *
 	 *		const tableWalker = new TableWalker( table, { startRow: 1, endRow: 1, includeSpanned: true } );
 	 *
@@ -68,8 +68,8 @@ export default class TableWalker {
 	 *		'Cell at 1 x 5 : has data'
 	 *
 	 * @constructor
-	 * @param {module:engine/model/element~Element} table A table over which iterate.
-	 * @param {Object} [options={}] Object with configuration.
+	 * @param {module:engine/model/element~Element} table A table over which the walker iterates.
+	 * @param {Object} [options={}] An object with configuration.
 	 * @param {Number} [options.column] A column index for which this iterator will output cells.
 	 * @param {Number} [options.startRow=0] A row index for which this iterator should start.
 	 * @param {Number} [options.endRow] A row index for which this iterator should end.
@@ -109,7 +109,7 @@ export default class TableWalker {
 		this.includeSpanned = !!options.includeSpanned;
 
 		/**
-		 * If set table walker will only output cells of given column or cells that overlaps it.
+		 * If set, the table walker will only output cells of a given column or cells that overlap it.
 		 *
 		 * @readonly
 		 * @member {Number}
@@ -117,7 +117,7 @@ export default class TableWalker {
 		this.column = typeof options.column == 'number' ? options.column : undefined;
 
 		/**
-		 * Row indexes to skip from iteration.
+		 * Row indexes to skip from the iteration.
 		 *
 		 * @readonly
 		 * @member {Set<Number>}
@@ -126,7 +126,7 @@ export default class TableWalker {
 		this._skipRows = new Set();
 
 		/**
-		 * A current row index.
+		 * The current row index.
 		 *
 		 * @readonly
 		 * @member {Number}
@@ -135,7 +135,7 @@ export default class TableWalker {
 		this._row = 0;
 
 		/**
-		 * A current column index.
+		 * The current column index.
 		 *
 		 * @readonly
 		 * @member {Number}
@@ -144,8 +144,8 @@ export default class TableWalker {
 		this._column = 0;
 
 		/**
-		 * A cell index in a parent row. For spanned cells when {@link #includeSpanned} is set to true
-		 * this represents the index of next table cell.
+		 * The cell index in a parent row. For spanned cells when {@link #includeSpanned} is set to `true`,
+		 * this represents the index of the next table cell.
 		 *
 		 * @readonly
 		 * @member {Number}
@@ -154,7 +154,7 @@ export default class TableWalker {
 		this._cell = 0;
 
 		/**
-		 * Holds map of spanned cells in a table.
+		 * Holds a map of spanned cells in a table.
 		 *
 		 * @readonly
 		 * @member {Map<Number, Map.<Number, Number>>}
@@ -175,7 +175,7 @@ export default class TableWalker {
 	/**
 	 * Gets the next table walker's value.
 	 *
-	 * @returns {module:table/tablewalker~TableWalkerValue} Next table walker's value.
+	 * @returns {module:table/tablewalker~TableWalkerValue} The next table walker's value.
 	 */
 	next() {
 		const row = this.table.getChild( this._row );
@@ -240,7 +240,8 @@ export default class TableWalker {
 	}
 
 	/**
-	 * Mark a row to skip on next iteration - will skip also cells from current row if any.
+	 * Marks a row to skip in the next iteration. It will also skip cells from the current row if there are any cells from the current row
+	 * to output.
 	 *
 	 * @param {Number} row Row index to skip.
 	 */
@@ -249,23 +250,24 @@ export default class TableWalker {
 	}
 
 	/**
-	 * Check if current row is over {@link #endRow}.
+	 * Checks if the current row is over {@link #endRow}.
 	 *
 	 * @returns {Boolean}
 	 * @private
 	 */
 	_isOverEndRow() {
-		// If {@link #endRow) is defined skipp all rows above it.
+		// If {@link #endRow) is defined skip all rows above it.
 		return this.endRow !== undefined && this._row > this.endRow;
 	}
 
 	/**
-	 * Common method for formatting iterator's out value.
+	 * A common method for formatting the iterator's output value.
 	 *
-	 * @param {module:engine/model/element~Element|undefined} cell Table cell to output. Might be undefined for spanned cell locations.
-	 * @param {Number} column Column index (use cached value)
-	 * @param {Number} rowspan Rowspan of current cell.
-	 * @param {Number} colspan Colspan of current cell.
+	 * @param {module:engine/model/element~Element|undefined} cell The table cell to output. It might be undefined for spanned cell
+	 * locations.
+	 * @param {Number} column Column index (use the cached value)
+	 * @param {Number} rowspan Rowspan of the current cell.
+	 * @param {Number} colspan Colspan of the current cell.
 	 * @returns {{done: boolean, value: {cell: *, row: Number, column: *, rowspan: *, colspan: *, cellIndex: Number}}}
 	 * @private
 	 */
@@ -284,7 +286,7 @@ export default class TableWalker {
 	}
 
 	/**
-	 * Checks if current row should be skipped.
+	 * Checks if the current row should be skipped.
 	 *
 	 * @returns {Boolean}
 	 * @private
@@ -297,7 +299,7 @@ export default class TableWalker {
 	}
 
 	/**
-	 * Checks if current column should be skipped.
+	 * Checks if the current column should be skipped.
 	 *
 	 * @param {Number} column
 	 * @param {Number} colspan
@@ -320,7 +322,7 @@ export default class TableWalker {
 	}
 
 	/**
-	 * Checks if current cell location - row x column - is spanned by other cell.
+	 * Checks if the current cell location (row x column) is spanned by another cell.
 	 *
 	 * @param {Number} row Row index of a cell location to check.
 	 * @param {Number} column Column index of a cell location to check.
@@ -340,12 +342,12 @@ export default class TableWalker {
 	}
 
 	/**
-	 * Updates spanned cells map relative to current cell location and it's span dimensions.
+	 * Updates spanned cells map relative to the current cell location and its span dimensions.
 	 *
 	 * @param {Number} row Row index of a cell.
 	 * @param {Number} column Column index of a cell.
-	 * @param {Number} rowspan Cell's height.
-	 * @param {Number} colspan Cell's width.
+	 * @param {Number} rowspan Cell height.
+	 * @param {Number} colspan Cell width.
 	 * @private
 	 */
 	_recordSpans( row, column, rowspan, colspan ) {
@@ -363,10 +365,10 @@ export default class TableWalker {
 	}
 
 	/**
-	 * Marks cell location as spanned by other cell.
+	 * Marks the cell location as spanned by another cell.
 	 *
-	 * @param {Number} row Row index of cell location.
-	 * @param {Number} column Column index of cell location.
+	 * @param {Number} row Row index of the cell location.
+	 * @param {Number} column Column index of the cell location.
 	 * @private
 	 */
 	_markSpannedCell( row, column ) {
@@ -381,17 +383,17 @@ export default class TableWalker {
 }
 
 /**
- * Object returned by {@link module:table/tablewalker~TableWalker} when traversing table cells.
+ * An object returned by {@link module:table/tablewalker~TableWalker} when traversing table cells.
  *
  * @typedef {Object} module:table/tablewalker~TableWalkerValue
- * @property {module:engine/model/element~Element} [cell] Current table cell. Might be empty if
- * {@link module:table/tablewalker~TableWalker#includeSpanned} is set to true.
+ * @property {module:engine/model/element~Element} [cell] The current table cell. Might be empty if
+ * {@link module:table/tablewalker~TableWalker#includeSpanned} is set to `true`.
  * @property {Number} row The row index of a cell.
- * @property {Number} column The column index of a cell. Column index is adjusted to widths & heights of previous cells.
- * @property {Number} [colspan] The colspan attribute of a cell - always defined even if model attribute is not present. Not set if
- * {@link module:table/tablewalker~TableWalker#includeSpanned} is set to true.
- * @property {Number} [rowspan] The rowspan attribute of a cell - always defined even if model attribute is not present. Not set if
- * {@link module:table/tablewalker~TableWalker#includeSpanned} is set to true.
- * @property {Number} cellIndex The index of a current cell in a parent row. When using `includeSpanned` option it will indicate next child
- * index if #cell is empty (which indicates that cell is spanned by other cell).
+ * @property {Number} column The column index of a cell. Column index is adjusted to widths and heights of previous cells.
+ * @property {Number} [colspan] The `colspan` attribute of a cell. It is always defined even if the model attribute is not present. Not
+ * set if {@link module:table/tablewalker~TableWalker#includeSpanned} is set to `true`.
+ * @property {Number} [rowspan] The `rowspan` attribute of a cell. It is always defined even if the model attribute is not present. Not
+ * set if {@link module:table/tablewalker~TableWalker#includeSpanned} is set to `true`.
+ * @property {Number} cellIndex The index of the current cell in a parent row. When using the `includeSpanned` option it will indicate the
+ * next child index if #cell is empty (which indicates that the cell is spanned by another cell).
  */

+ 6 - 6
packages/ckeditor5-table/src/ui/inserttableview.js

@@ -14,7 +14,7 @@ import './../../theme/inserttable.css';
 /**
  * The table size view.
  *
- * It renders a 10x10 grid to choose inserted table size.
+ * It renders a 10x10 grid to choose the inserted table size.
  *
  * @extends module:ui/view~View
  * @implements module:ui/dropdown/dropdownpanelfocusable~DropdownPanelFocusable
@@ -29,7 +29,7 @@ export default class InsertTableView extends View {
 		const bind = this.bindTemplate;
 
 		/**
-		 * Collection of the table size box items.
+		 * A collection of table size box items.
 		 *
 		 * @readonly
 		 * @member {module:ui/viewcollection~ViewCollection}
@@ -37,7 +37,7 @@ export default class InsertTableView extends View {
 		this.items = this.createCollection();
 
 		/**
-		 * Currently selected number of rows of a new table.
+		 * The currently selected number of rows of the new table.
 		 *
 		 * @observable
 		 * @member {Number} #rows
@@ -45,7 +45,7 @@ export default class InsertTableView extends View {
 		this.set( 'rows', 0 );
 
 		/**
-		 * Currently selected number of columns of a new table.
+		 * The currently selected number of columns of the new table.
 		 *
 		 * @observable
 		 * @member {Number} #columns
@@ -143,7 +143,7 @@ export default class InsertTableView extends View {
 	}
 
 	/**
-	 * Highlights grid boxes depending on rows & columns selected.
+	 * Highlights grid boxes depending on rows and columns selected.
 	 *
 	 * @private
 	 */
@@ -167,7 +167,7 @@ export default class InsertTableView extends View {
 /**
  * A single grid box view element.
  *
- * This class is used to render table size selection grid in {@link module:table/ui/inserttableview~InsertTableView}
+ * This class is used to render the table size selection grid in {@link module:table/ui/inserttableview~InsertTableView}.
  *
  * @private
  */

+ 1 - 1
packages/ckeditor5-table/src/ui/utils.js

@@ -24,7 +24,7 @@ export function repositionContextualBalloon( editor ) {
 }
 
 /**
- * Returns the positioning options that controls the geometry of the
+ * Returns the positioning options that control the geometry of the
  * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon} with respect
  * to the selected element in the editor content.
  *

+ 1 - 1
packages/ckeditor5-table/src/utils.js

@@ -59,5 +59,5 @@ export function isTableWidgetSelected( selection ) {
 export function isTableContentSelected( selection ) {
 	const parentTable = getParentTable( selection.getFirstPosition() );
 
-	return !!( parentTable && isTableWidget( parentTable ) );
+	return !!( parentTable && isTableWidget( parentTable.parent ) );
 }

+ 48 - 47
packages/ckeditor5-table/tests/_utils/utils.js

@@ -3,51 +3,6 @@
  * For licensing, see LICENSE.md.
  */
 
-function formatAttributes( attributes ) {
-	let attributesString = '';
-
-	if ( attributes ) {
-		const entries = Object.entries( attributes );
-
-		if ( entries.length ) {
-			attributesString = ' ' + entries.map( entry => `${ entry[ 0 ] }="${ entry[ 1 ] }"` ).join( ' ' );
-		}
-	}
-	return attributesString;
-}
-
-function makeRows( tableData, cellElement, rowElement, headingElement = 'th' ) {
-	const tableRows = tableData
-		.reduce( ( previousRowsString, tableRow ) => {
-			const tableRowString = tableRow.reduce( ( tableRowString, tableCellData ) => {
-				let tableCell = tableCellData;
-
-				const isObject = typeof tableCellData === 'object';
-
-				let resultingCellElement = cellElement;
-
-				if ( isObject ) {
-					tableCell = tableCellData.contents;
-
-					if ( tableCellData.isHeading ) {
-						resultingCellElement = headingElement;
-					}
-
-					delete tableCellData.contents;
-					delete tableCellData.isHeading;
-				}
-
-				const formattedAttributes = formatAttributes( isObject ? tableCellData : '' );
-				tableRowString += `<${ resultingCellElement }${ formattedAttributes }>${ tableCell }</${ resultingCellElement }>`;
-
-				return tableRowString;
-			}, '' );
-
-			return `${ previousRowsString }<${ rowElement }>${ tableRowString }</${ rowElement }>`;
-		}, '' );
-	return tableRows;
-}
-
 /**
  * @param {Number} columns
  * @param {Array.<String>} tableData
@@ -74,7 +29,7 @@ export function viewTable( tableData, attributes = {} ) {
 	const thead = headingRows > 0 ? `<thead>${ makeRows( tableData.slice( 0, headingRows ), 'th', 'tr' ) }</thead>` : '';
 	const tbody = tableData.length > headingRows ? `<tbody>${ makeRows( tableData.slice( headingRows ), 'td', 'tr' ) }</tbody>` : '';
 
-	return `<table>${ thead }${ tbody }</table>`;
+	return `<figure class="table"><table>${ thead }${ tbody }</table></figure>`;
 }
 
 /**
@@ -93,7 +48,8 @@ export function formatTable( tableString ) {
 		.replace( /<\/thead>/g, '\n</thead>' )
 		.replace( /<\/tbody>/g, '\n</tbody>' )
 		.replace( /<\/tr>/g, '\n</tr>' )
-		.replace( /<\/table>/g, '\n</table>' );
+		.replace( /<\/table>/g, '\n</table>' )
+		.replace( /<\/figure>/g, '\n</figure>' );
 }
 
 /**
@@ -119,3 +75,48 @@ export function formattedModelTable( tableData, attributes ) {
 export function formattedViewTable( tableData, attributes ) {
 	return formatTable( viewTable( tableData, attributes ) );
 }
+
+function formatAttributes( attributes ) {
+	let attributesString = '';
+
+	if ( attributes ) {
+		const entries = Object.entries( attributes );
+
+		if ( entries.length ) {
+			attributesString = ' ' + entries.map( entry => `${ entry[ 0 ] }="${ entry[ 1 ] }"` ).join( ' ' );
+		}
+	}
+	return attributesString;
+}
+
+function makeRows( tableData, cellElement, rowElement, headingElement = 'th' ) {
+	const tableRows = tableData
+		.reduce( ( previousRowsString, tableRow ) => {
+			const tableRowString = tableRow.reduce( ( tableRowString, tableCellData ) => {
+				let tableCell = tableCellData;
+
+				const isObject = typeof tableCellData === 'object';
+
+				let resultingCellElement = cellElement;
+
+				if ( isObject ) {
+					tableCell = tableCellData.contents;
+
+					if ( tableCellData.isHeading ) {
+						resultingCellElement = headingElement;
+					}
+
+					delete tableCellData.contents;
+					delete tableCellData.isHeading;
+				}
+
+				const formattedAttributes = formatAttributes( isObject ? tableCellData : '' );
+				tableRowString += `<${ resultingCellElement }${ formattedAttributes }>${ tableCell }</${ resultingCellElement }>`;
+
+				return tableRowString;
+			}, '' );
+
+			return `${ previousRowsString }<${ rowElement }>${ tableRowString }</${ rowElement }>`;
+		}, '' );
+	return tableRows;
+}

+ 31 - 17
packages/ckeditor5-table/tests/commands/inserttablecommand.js

@@ -19,6 +19,8 @@ import {
 import upcastTable from '../../src/converters/upcasttable';
 import TableUtils from '../../src/tableutils';
 
+import { formatTable, formattedModelTable } from '../_utils/utils';
+
 describe( 'InsertTableCommand', () => {
 	let editor, model, command;
 
@@ -94,18 +96,28 @@ describe( 'InsertTableCommand', () => {
 	} );
 
 	describe( 'execute()', () => {
+		it( 'should create a single batch', () => {
+			setData( model, '<p>foo[]</p>' );
+
+			const spy = sinon.spy();
+
+			model.document.on( 'change', spy );
+
+			command.execute( { rows: 3, columns: 4 } );
+
+			sinon.assert.calledOnce( spy );
+		} );
+
 		describe( 'collapsed selection', () => {
 			it( 'should insert table in empty root', () => {
 				setData( model, '[]' );
 
 				command.execute();
 
-				expect( getData( model ) ).to.equal(
-					'<table>' +
-					'<tableRow><tableCell></tableCell><tableCell></tableCell></tableRow>' +
-					'<tableRow><tableCell></tableCell><tableCell></tableCell></tableRow>' +
-					'</table>[]'
-				);
+				expect( formatTable( getData( model ) ) ).to.equal( formattedModelTable( [
+					[ '[]', '' ],
+					[ '', '' ]
+				] ) );
 			} );
 
 			it( 'should insert table with two rows and two columns after non-empty paragraph', () => {
@@ -113,11 +125,12 @@ describe( 'InsertTableCommand', () => {
 
 				command.execute();
 
-				expect( getData( model ) ).to.equal( '<p>foo[]</p>' +
-					'<table>' +
-					'<tableRow><tableCell></tableCell><tableCell></tableCell></tableRow>' +
-					'<tableRow><tableCell></tableCell><tableCell></tableCell></tableRow>' +
-					'</table>'
+				expect( formatTable( getData( model ) ) ).to.equal(
+					'<p>foo</p>' +
+					formattedModelTable( [
+						[ '[]', '' ],
+						[ '', '' ]
+					] )
 				);
 			} );
 
@@ -126,12 +139,13 @@ describe( 'InsertTableCommand', () => {
 
 				command.execute( { rows: 3, columns: 4 } );
 
-				expect( getData( model ) ).to.equal( '<p>foo[]</p>' +
-					'<table>' +
-					'<tableRow><tableCell></tableCell><tableCell></tableCell><tableCell></tableCell><tableCell></tableCell></tableRow>' +
-					'<tableRow><tableCell></tableCell><tableCell></tableCell><tableCell></tableCell><tableCell></tableCell></tableRow>' +
-					'<tableRow><tableCell></tableCell><tableCell></tableCell><tableCell></tableCell><tableCell></tableCell></tableRow>' +
-					'</table>'
+				expect( formatTable( getData( model ) ) ).to.equal(
+					'<p>foo</p>' +
+					formattedModelTable( [
+						[ '[]', '', '', '' ],
+						[ '', '', '', '' ],
+						[ '', '', '', '' ]
+					] )
 				);
 			} );
 		} );

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 297 - 312
packages/ckeditor5-table/tests/converters/downcast.js


+ 38 - 0
packages/ckeditor5-table/tests/converters/upcasttable.js

@@ -58,6 +58,22 @@ describe( 'upcastTable()', () => {
 		expect( getModelData( model, { withoutSelection: true } ) ).to.equal( data );
 	}
 
+	it( 'should convert table figure', () => {
+		editor.setData(
+			'<figure class="table">' +
+			'<table>' +
+			'<tr><td>1</td></tr>' +
+			'</table>' +
+			'</figure>'
+		);
+
+		expectModel(
+			'<table>' +
+			'<tableRow><tableCell>1</tableCell></tableRow>' +
+			'</table>'
+		);
+	} );
+
 	it( 'should create table model from table without thead', () => {
 		editor.setData(
 			'<table>' +
@@ -72,6 +88,28 @@ describe( 'upcastTable()', () => {
 		);
 	} );
 
+	it( 'should not convert empty figure', () => {
+		'<figure class="table"></figure>';
+
+		expectModel( '' );
+	} );
+
+	it( 'should convert if figure do not have class="table" attribute', () => {
+		editor.setData(
+			'<figure>' +
+			'<table>' +
+			'<tr><td>1</td></tr>' +
+			'</table>' +
+			'</figure>'
+		);
+
+		expectModel(
+			'<table>' +
+			'<tableRow><tableCell>1</tableCell></tableRow>' +
+			'</table>'
+		);
+	} );
+
 	it( 'should create table model from table with one thead with one row', () => {
 		editor.setData(
 			'<table>' +

+ 140 - 133
packages/ckeditor5-table/tests/manual/table.html

@@ -7,142 +7,147 @@
 
 <div id="editor">
 	<p>Table with everything:</p>
-	<table>
-		<caption>Data about the planets of our solar system (Planetary facts taken from <a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">Nasa's Planetary Fact Sheet - Metric</a>.</caption>
-		<thead>
-		<tr>
-			<td colspan="2">&nbsp;</td>
-			<th scope="col">Name</th>
-			<th scope="col">Mass (10<sup>24</sup>kg)</th>
-			<th scope="col">Diameter (km)</th>
-			<th scope="col">Density (kg/m<sup>3</sup>)</th>
-			<th scope="col">Gravity (m/s<sup>2</sup>)</th>
-			<th scope="col">Length of day (hours)</th>
-			<th scope="col">Distance from Sun (10<sup>6</sup>km)</th>
-			<th scope="col">Mean temperature (°C)</th>
-			<th scope="col">Number of moons</th>
-			<th scope="col">Notes</th>
-		</tr>
-		</thead>
-		<tbody>
-		<tr>
-			<th colspan="2" rowspan="4" scope="rowgroup">Terrestrial planets</th>
-			<th scope="row">Mercury</th>
-			<td>0.330</td>
-			<td>4,879</td>
-			<td>5427</td>
-			<td>3.7</td>
-			<td>4222.6</td>
-			<td>57.9</td>
-			<td>167</td>
-			<td>0</td>
-			<td>Closest to the Sun</td>
-		</tr>
-		<tr>
-			<th scope="row">Venus</th>
-			<td>4.87</td>
-			<td>12,104</td>
-			<td>5243</td>
-			<td>8.9</td>
-			<td>2802.0</td>
-			<td>108.2</td>
-			<td>464</td>
-			<td>0</td>
-			<td>&nbsp;</td>
-		</tr>
-		<tr>
-			<th scope="row">Earth</th>
-			<td>5.97</td>
-			<td>12,756</td>
-			<td>5514</td>
-			<td>9.8</td>
-			<td>24.0</td>
-			<td>149.6</td>
-			<td>15</td>
-			<td>1</td>
-			<td>Our world</td>
-		</tr>
-		<tr>
-			<th scope="row">Mars</th>
-			<td>0.642</td>
-			<td>6,792</td>
-			<td>3933</td>
-			<td>3.7</td>
-			<td>24.7</td>
-			<td>227.9</td>
-			<td>-65</td>
-			<td>2</td>
-			<td>The red planet</td>
-		</tr>
-		<tr>
-			<th scope="rowgroup" rowspan="4">Jovian planets</th>
-			<th scope="rowgroup" rowspan="2">Gas giants</th>
-			<th scope="row">Jupiter</th>
-			<td>1898</td>
-			<td>142,984</td>
-			<td>1326</td>
-			<td>23.1</td>
-			<td>9.9</td>
-			<td>778.6</td>
-			<td>-110</td>
-			<td>67</td>
-			<td>The largest planet</td>
-		</tr>
-		<tr>
-			<th scope="row">Saturn</th>
-			<td>568</td>
-			<td>120,536</td>
-			<td>687</td>
-			<td>9.0</td>
-			<td>10.7</td>
-			<td>1433.5</td>
-			<td>-140</td>
-			<td>62</td>
-			<td>&nbsp;</td>
-		</tr>
-		<tr>
-			<th scope="rowgroup" rowspan="2">Ice giants</th>
-			<th scope="row">Uranus</th>
-			<td>86.8</td>
-			<td>51,118</td>
-			<td>1271</td>
-			<td>8.7</td>
-			<td>17.2</td>
-			<td>2872.5</td>
-			<td>-195</td>
-			<td>27</td>
-			<td>&nbsp;</td>
-		</tr>
-		<tr>
-			<th scope="row">Neptune</th>
-			<td>102</td>
-			<td>49,528</td>
-			<td>1638</td>
-			<td>11.0</td>
-			<td>16.1</td>
-			<td>4495.1</td>
-			<td>-200</td>
-			<td>14</td>
-			<td>&nbsp;</td>
-		</tr>
-		<tr>
-			<th colspan="2" scope="rowgroup">Dwarf planets</th>
-			<th scope="row">Pluto</th>
-			<td>0.0146</td>
-			<td>2,370</td>
-			<td>2095</td>
-			<td>0.7</td>
-			<td>153.3</td>
-			<td>5906.4</td>
-			<td>-225</td>
-			<td>5</td>
-			<td>Declassified as a planet in 2006, but this <a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">remains controversial</a>.</td>
-		</tr>
-		</tbody>
-	</table>
 
+	<figure>
+		<figcaption>Data about the planets of our solar system (Planetary facts taken from <a
+			href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">Nasa's Planetary Fact Sheet - Metric</a>.
+		</figcaption>
+		<table>
+			<thead>
+			<tr>
+				<td colspan="2">&nbsp;</td>
+				<th scope="col">Name</th>
+				<th scope="col">Mass (10<sup>24</sup>kg)</th>
+				<th scope="col">Diameter (km)</th>
+				<th scope="col">Density (kg/m<sup>3</sup>)</th>
+				<th scope="col">Gravity (m/s<sup>2</sup>)</th>
+				<th scope="col">Length of day (hours)</th>
+				<th scope="col">Distance from Sun (10<sup>6</sup>km)</th>
+				<th scope="col">Mean temperature (°C)</th>
+				<th scope="col">Number of moons</th>
+				<th scope="col">Notes</th>
+			</tr>
+			</thead>
+			<tbody>
+			<tr>
+				<th colspan="2" rowspan="4" scope="rowgroup">Terrestrial planets</th>
+				<th scope="row">Mercury</th>
+				<td>0.330</td>
+				<td>4,879</td>
+				<td>5427</td>
+				<td>3.7</td>
+				<td>4222.6</td>
+				<td>57.9</td>
+				<td>167</td>
+				<td>0</td>
+				<td>Closest to the Sun</td>
+			</tr>
+			<tr>
+				<th scope="row">Venus</th>
+				<td>4.87</td>
+				<td>12,104</td>
+				<td>5243</td>
+				<td>8.9</td>
+				<td>2802.0</td>
+				<td>108.2</td>
+				<td>464</td>
+				<td>0</td>
+				<td>&nbsp;</td>
+			</tr>
+			<tr>
+				<th scope="row">Earth</th>
+				<td>5.97</td>
+				<td>12,756</td>
+				<td>5514</td>
+				<td>9.8</td>
+				<td>24.0</td>
+				<td>149.6</td>
+				<td>15</td>
+				<td>1</td>
+				<td>Our world</td>
+			</tr>
+			<tr>
+				<th scope="row">Mars</th>
+				<td>0.642</td>
+				<td>6,792</td>
+				<td>3933</td>
+				<td>3.7</td>
+				<td>24.7</td>
+				<td>227.9</td>
+				<td>-65</td>
+				<td>2</td>
+				<td>The red planet</td>
+			</tr>
+			<tr>
+				<th scope="rowgroup" rowspan="4">Jovian planets</th>
+				<th scope="rowgroup" rowspan="2">Gas giants</th>
+				<th scope="row">Jupiter</th>
+				<td>1898</td>
+				<td>142,984</td>
+				<td>1326</td>
+				<td>23.1</td>
+				<td>9.9</td>
+				<td>778.6</td>
+				<td>-110</td>
+				<td>67</td>
+				<td>The largest planet</td>
+			</tr>
+			<tr>
+				<th scope="row">Saturn</th>
+				<td>568</td>
+				<td>120,536</td>
+				<td>687</td>
+				<td>9.0</td>
+				<td>10.7</td>
+				<td>1433.5</td>
+				<td>-140</td>
+				<td>62</td>
+				<td>&nbsp;</td>
+			</tr>
+			<tr>
+				<th scope="rowgroup" rowspan="2">Ice giants</th>
+				<th scope="row">Uranus</th>
+				<td>86.8</td>
+				<td>51,118</td>
+				<td>1271</td>
+				<td>8.7</td>
+				<td>17.2</td>
+				<td>2872.5</td>
+				<td>-195</td>
+				<td>27</td>
+				<td>&nbsp;</td>
+			</tr>
+			<tr>
+				<th scope="row">Neptune</th>
+				<td>102</td>
+				<td>49,528</td>
+				<td>1638</td>
+				<td>11.0</td>
+				<td>16.1</td>
+				<td>4495.1</td>
+				<td>-200</td>
+				<td>14</td>
+				<td>&nbsp;</td>
+			</tr>
+			<tr>
+				<th colspan="2" scope="rowgroup">Dwarf planets</th>
+				<th scope="row">Pluto</th>
+				<td>0.0146</td>
+				<td>2,370</td>
+				<td>2095</td>
+				<td>0.7</td>
+				<td>153.3</td>
+				<td>5906.4</td>
+				<td>-225</td>
+				<td>5</td>
+				<td>Declassified as a planet in 2006, but this <a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">remains controversial</a>.</td>
+			</tr>
+			</tbody>
+		</table>
+	</figure>
 
 	<p>Table with 2 tbody:</p>
+
 	<table>
 		<tbody>
 		<tr>
@@ -161,6 +166,7 @@
 	</table>
 
 	<p>Table with no tbody:</p>
+
 	<table>
 		<tr>
 			<td>a</td>
@@ -175,6 +181,7 @@
 	</table>
 
 	<p>Table with thead section between two tbody sections</p>
+
 	<table>
 		<tbody>
 		<tr>

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

@@ -17,7 +17,7 @@ ClassicEditor
 			'heading', '|', 'insertTable', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
 		],
 		table: {
-			toolbar: [ 'tableColumn', 'tableRow', 'mergeCell' ]
+			toolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
 		}
 	} )
 	.then( editor => {

+ 28 - 24
packages/ckeditor5-table/tests/tableediting.js

@@ -47,59 +47,59 @@ describe( 'TableEditing', () => {
 	} );
 
 	it( 'adds insertRowAbove command', () => {
-		expect( editor.commands.get( 'insertRowAbove' ) ).to.be.instanceOf( InsertRowCommand );
+		expect( editor.commands.get( 'insertTableRowAbove' ) ).to.be.instanceOf( InsertRowCommand );
 	} );
 
 	it( 'adds insertRowBelow command', () => {
-		expect( editor.commands.get( 'insertRowBelow' ) ).to.be.instanceOf( InsertRowCommand );
+		expect( editor.commands.get( 'insertTableRowBelow' ) ).to.be.instanceOf( InsertRowCommand );
 	} );
 
 	it( 'adds insertColumnBefore command', () => {
-		expect( editor.commands.get( 'insertColumnBefore' ) ).to.be.instanceOf( InsertColumnCommand );
+		expect( editor.commands.get( 'insertTableColumnBefore' ) ).to.be.instanceOf( InsertColumnCommand );
 	} );
 
 	it( 'adds insertColumnAfter command', () => {
-		expect( editor.commands.get( 'insertColumnAfter' ) ).to.be.instanceOf( InsertColumnCommand );
+		expect( editor.commands.get( 'insertTableColumnAfter' ) ).to.be.instanceOf( InsertColumnCommand );
 	} );
 
 	it( 'adds removeRow command', () => {
-		expect( editor.commands.get( 'removeRow' ) ).to.be.instanceOf( RemoveRowCommand );
+		expect( editor.commands.get( 'removeTableRow' ) ).to.be.instanceOf( RemoveRowCommand );
 	} );
 
 	it( 'adds removeColumn command', () => {
-		expect( editor.commands.get( 'removeColumn' ) ).to.be.instanceOf( RemoveColumnCommand );
+		expect( editor.commands.get( 'removeTableColumn' ) ).to.be.instanceOf( RemoveColumnCommand );
 	} );
 
 	it( 'adds splitCellVertically command', () => {
-		expect( editor.commands.get( 'splitCellVertically' ) ).to.be.instanceOf( SplitCellCommand );
+		expect( editor.commands.get( 'splitTableCellVertically' ) ).to.be.instanceOf( SplitCellCommand );
 	} );
 
 	it( 'adds splitCellHorizontally command', () => {
-		expect( editor.commands.get( 'splitCellHorizontally' ) ).to.be.instanceOf( SplitCellCommand );
+		expect( editor.commands.get( 'splitTableCellHorizontally' ) ).to.be.instanceOf( SplitCellCommand );
 	} );
 
 	it( 'adds mergeCellRight command', () => {
-		expect( editor.commands.get( 'mergeCellRight' ) ).to.be.instanceOf( MergeCellCommand );
+		expect( editor.commands.get( 'mergeTableCellRight' ) ).to.be.instanceOf( MergeCellCommand );
 	} );
 
 	it( 'adds mergeCellLeft command', () => {
-		expect( editor.commands.get( 'mergeCellLeft' ) ).to.be.instanceOf( MergeCellCommand );
+		expect( editor.commands.get( 'mergeTableCellLeft' ) ).to.be.instanceOf( MergeCellCommand );
 	} );
 
 	it( 'adds mergeCellDown command', () => {
-		expect( editor.commands.get( 'mergeCellDown' ) ).to.be.instanceOf( MergeCellCommand );
+		expect( editor.commands.get( 'mergeTableCellDown' ) ).to.be.instanceOf( MergeCellCommand );
 	} );
 
 	it( 'adds mergeCellUp command', () => {
-		expect( editor.commands.get( 'mergeCellUp' ) ).to.be.instanceOf( MergeCellCommand );
+		expect( editor.commands.get( 'mergeTableCellUp' ) ).to.be.instanceOf( MergeCellCommand );
 	} );
 
 	it( 'adds setColumnHeader command', () => {
-		expect( editor.commands.get( 'setColumnHeader' ) ).to.be.instanceOf( SetHeaderColumnCommand );
+		expect( editor.commands.get( 'setTableColumnHeader' ) ).to.be.instanceOf( SetHeaderColumnCommand );
 	} );
 
 	it( 'adds setRowHeader command', () => {
-		expect( editor.commands.get( 'setRowHeader' ) ).to.be.instanceOf( SetHeaderRowCommand );
+		expect( editor.commands.get( 'setTableRowHeader' ) ).to.be.instanceOf( SetHeaderRowCommand );
 	} );
 
 	describe( 'conversion in data pipeline', () => {
@@ -108,11 +108,13 @@ describe( 'TableEditing', () => {
 				setModelData( model, '<table><tableRow><tableCell>foo[]</tableCell></tableRow></table>' );
 
 				expect( editor.getData() ).to.equal(
-					'<table>' +
-					'<tbody>' +
-					'<tr><td>foo</td></tr>' +
-					'</tbody>' +
-					'</table>'
+					'<figure class="table">' +
+						'<table>' +
+							'<tbody>' +
+								'<tr><td>foo</td></tr>' +
+							'</tbody>' +
+						'</table>' +
+					'</figure>'
 				);
 			} );
 
@@ -120,11 +122,13 @@ describe( 'TableEditing', () => {
 				setModelData( model, '<table headingRows="1"><tableRow><tableCell>foo[]</tableCell></tableRow></table>' );
 
 				expect( editor.getData() ).to.equal(
-					'<table>' +
-					'<thead>' +
-					'<tr><th>foo</th></tr>' +
-					'</thead>' +
-					'</table>'
+					'<figure class="table">' +
+						'<table>' +
+							'<thead>' +
+								'<tr><th>foo</th></tr>' +
+							'</thead>' +
+						'</table>' +
+					'</figure>'
 				);
 			} );
 		} );

+ 22 - 22
packages/ckeditor5-table/tests/tableui.js

@@ -130,10 +130,10 @@ describe( 'TableUI', () => {
 		it( 'should bind items in panel to proper commands', () => {
 			const items = dropdown.listView.items;
 
-			const setRowHeaderCommand = editor.commands.get( 'setRowHeader' );
-			const insertRowBelowCommand = editor.commands.get( 'insertRowBelow' );
-			const insertRowAboveCommand = editor.commands.get( 'insertRowAbove' );
-			const removeRowCommand = editor.commands.get( 'removeRow' );
+			const setRowHeaderCommand = editor.commands.get( 'setTableRowHeader' );
+			const insertRowBelowCommand = editor.commands.get( 'insertTableRowBelow' );
+			const insertRowAboveCommand = editor.commands.get( 'insertTableRowAbove' );
+			const removeRowCommand = editor.commands.get( 'removeTableRow' );
 
 			setRowHeaderCommand.isEnabled = true;
 			insertRowBelowCommand.isEnabled = true;
@@ -180,13 +180,13 @@ describe( 'TableUI', () => {
 			dropdown.listView.items.get( 0 ).fire( 'execute' );
 
 			expect( spy.calledOnce ).to.be.true;
-			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'setRowHeader' );
+			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'setTableRowHeader' );
 		} );
 
 		it( 'should bind set header row command value to dropdown item', () => {
 			const items = dropdown.listView.items;
 
-			const setRowHeaderCommand = editor.commands.get( 'setRowHeader' );
+			const setRowHeaderCommand = editor.commands.get( 'setTableRowHeader' );
 
 			setRowHeaderCommand.value = false;
 			expect( items.get( 0 ).isActive ).to.be.false;
@@ -225,10 +225,10 @@ describe( 'TableUI', () => {
 		it( 'should bind items in panel to proper commands', () => {
 			const items = dropdown.listView.items;
 
-			const setColumnHeaderCommand = editor.commands.get( 'setColumnHeader' );
-			const insertColumnBeforeCommand = editor.commands.get( 'insertColumnBefore' );
-			const insertColumnAfterCommand = editor.commands.get( 'insertColumnAfter' );
-			const removeColumnCommand = editor.commands.get( 'removeColumn' );
+			const setColumnHeaderCommand = editor.commands.get( 'setTableColumnHeader' );
+			const insertColumnBeforeCommand = editor.commands.get( 'insertTableColumnBefore' );
+			const insertColumnAfterCommand = editor.commands.get( 'insertTableColumnAfter' );
+			const removeColumnCommand = editor.commands.get( 'removeTableColumn' );
 
 			setColumnHeaderCommand.isEnabled = true;
 			insertColumnBeforeCommand.isEnabled = true;
@@ -273,13 +273,13 @@ describe( 'TableUI', () => {
 			dropdown.listView.items.get( 0 ).fire( 'execute' );
 
 			expect( spy.calledOnce ).to.be.true;
-			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'setColumnHeader' );
+			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'setTableColumnHeader' );
 		} );
 
 		it( 'should bind set header column command value to dropdown item', () => {
 			const items = dropdown.listView.items;
 
-			const setColumnHeaderCommand = editor.commands.get( 'setColumnHeader' );
+			const setColumnHeaderCommand = editor.commands.get( 'setTableColumnHeader' );
 
 			setColumnHeaderCommand.value = false;
 			expect( items.get( 0 ).isActive ).to.be.false;
@@ -289,11 +289,11 @@ describe( 'TableUI', () => {
 		} );
 	} );
 
-	describe( 'mergeCell dropdown', () => {
+	describe( 'mergeTableCell dropdown', () => {
 		let dropdown;
 
 		beforeEach( () => {
-			dropdown = editor.ui.componentFactory.create( 'mergeCell' );
+			dropdown = editor.ui.componentFactory.create( 'mergeTableCells' );
 		} );
 
 		it( 'have button with proper properties set', () => {
@@ -303,7 +303,7 @@ describe( 'TableUI', () => {
 
 			expect( button.isOn ).to.be.false;
 			expect( button.tooltip ).to.be.true;
-			expect( button.label ).to.equal( 'Merge cell' );
+			expect( button.label ).to.equal( 'Merge cells' );
 			expect( button.icon ).to.match( /<svg / );
 		} );
 
@@ -326,12 +326,12 @@ describe( 'TableUI', () => {
 		it( 'should bind items in panel to proper commands', () => {
 			const items = dropdown.listView.items;
 
-			const mergeCellUpCommand = editor.commands.get( 'mergeCellUp' );
-			const mergeCellRightCommand = editor.commands.get( 'mergeCellRight' );
-			const mergeCellDownCommand = editor.commands.get( 'mergeCellDown' );
-			const mergeCellLeftCommand = editor.commands.get( 'mergeCellLeft' );
-			const splitCellVerticallyCommand = editor.commands.get( 'splitCellVertically' );
-			const splitCellHorizontallyCommand = editor.commands.get( 'splitCellHorizontally' );
+			const mergeCellUpCommand = editor.commands.get( 'mergeTableCellUp' );
+			const mergeCellRightCommand = editor.commands.get( 'mergeTableCellRight' );
+			const mergeCellDownCommand = editor.commands.get( 'mergeTableCellDown' );
+			const mergeCellLeftCommand = editor.commands.get( 'mergeTableCellLeft' );
+			const splitCellVerticallyCommand = editor.commands.get( 'splitTableCellVertically' );
+			const splitCellHorizontallyCommand = editor.commands.get( 'splitTableCellHorizontally' );
 
 			mergeCellUpCommand.isEnabled = true;
 			mergeCellRightCommand.isEnabled = true;
@@ -387,7 +387,7 @@ describe( 'TableUI', () => {
 			dropdown.listView.items.get( 0 ).fire( 'execute' );
 
 			expect( spy.calledOnce ).to.be.true;
-			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'mergeCellUp' );
+			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'mergeTableCellUp' );
 		} );
 	} );
 } );

+ 21 - 18
packages/ckeditor5-table/theme/table.css

@@ -3,28 +3,31 @@
  * For licensing, see LICENSE.md.
  */
 
-.ck.ck-content table {
-	/* Give the table some air and center it horizontally */
+.ck-content .table {
+	/* Give the table widget some air and center it horizontally */
 	margin: 1em auto;
+	display: table;
 
-	/* The table cells should have slight borders */
-	border-collapse: collapse;
-	border-spacing: 0;
+	& table {
+		/* The table cells should have slight borders */
+		border-collapse: collapse;
+		border-spacing: 0;
 
-	/* The outer border of the table should be slightly darker than the inner lines.
-	Also see https://github.com/ckeditor/ckeditor5-table/issues/50. */
-	border: 1px double hsl(0, 0%, 70%);
+		/* The outer border of the table should be slightly darker than the inner lines.
+		Also see https://github.com/ckeditor/ckeditor5-table/issues/50. */
+		border: 1px double hsl(0, 0%, 70%);
 
-	& td,
-	& th {
-		min-width: 2em;
-		padding: .4em;
-		text-align: center;
-		border-color: hsl(0, 0%, 85%);
-	}
+		& td,
+		& th {
+			min-width: 2em;
+			padding: .4em;
+			text-align: center;
+			border-color: hsl(0, 0%, 85%);
+		}
 
-	& th {
-		font-weight: bold;
-		background: hsl(0, 0%, 98%);
+		& th {
+			font-weight: bold;
+			background: hsl(0, 0%, 98%);
+		}
 	}
 }