8
0
Эх сурвалжийг харах

Merge branch 'master' into i/6118

# Conflicts:
#	src/tableselection.js
#	tests/manual/tableselection.html
#	tests/manual/tableselection.md
Maciej Gołaszewski 6 жил өмнө
parent
commit
fe0679b278
66 өөрчлөгдсөн 1117 нэмэгдсэн , 477 устгасан
  1. 16 1
      packages/ckeditor5-table/CHANGELOG.md
  2. 40 0
      packages/ckeditor5-table/docs/_snippets/features/table-styling-colors.html
  3. 123 0
      packages/ckeditor5-table/docs/_snippets/features/table-styling-colors.js
  4. 73 51
      packages/ckeditor5-table/docs/_snippets/features/table-styling.html
  5. 93 1
      packages/ckeditor5-table/docs/_snippets/features/table-styling.js
  6. 19 19
      packages/ckeditor5-table/docs/_snippets/features/table.html
  7. 1 1
      packages/ckeditor5-table/docs/api/table.md
  8. 339 38
      packages/ckeditor5-table/docs/features/table.md
  9. 17 17
      packages/ckeditor5-table/package.json
  10. 1 1
      packages/ckeditor5-table/src/commands/insertcolumncommand.js
  11. 1 1
      packages/ckeditor5-table/src/commands/insertrowcommand.js
  12. 1 1
      packages/ckeditor5-table/src/commands/inserttablecommand.js
  13. 6 6
      packages/ckeditor5-table/src/commands/mergecellcommand.js
  14. 1 1
      packages/ckeditor5-table/src/commands/removecolumncommand.js
  15. 2 2
      packages/ckeditor5-table/src/commands/removerowcommand.js
  16. 3 3
      packages/ckeditor5-table/src/commands/setheadercolumncommand.js
  17. 3 3
      packages/ckeditor5-table/src/commands/setheaderrowcommand.js
  18. 1 1
      packages/ckeditor5-table/src/commands/splitcellcommand.js
  19. 12 12
      packages/ckeditor5-table/src/commands/utils.js
  20. 9 9
      packages/ckeditor5-table/src/converters/downcast.js
  21. 7 7
      packages/ckeditor5-table/src/converters/table-cell-paragraph-post-fixer.js
  22. 8 8
      packages/ckeditor5-table/src/converters/table-cell-refresh-post-fixer.js
  23. 39 39
      packages/ckeditor5-table/src/converters/table-layout-post-fixer.js
  24. 4 4
      packages/ckeditor5-table/src/converters/tableproperties.js
  25. 11 11
      packages/ckeditor5-table/src/converters/upcasttable.js
  26. 3 3
      packages/ckeditor5-table/src/table.js
  27. 5 5
      packages/ckeditor5-table/src/tablecellproperties.js
  28. 2 2
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellbackgroundcolorcommand.js
  29. 3 3
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellbordercolorcommand.js
  30. 3 3
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellborderstylecommand.js
  31. 2 2
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellborderwidthcommand.js
  32. 2 2
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellheightcommand.js
  33. 2 2
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellhorizontalalignmentcommand.js
  34. 3 2
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellpaddingcommand.js
  35. 3 3
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellpropertycommand.js
  36. 5 5
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellverticalalignmentcommand.js
  37. 4 4
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellwidthcommand.js
  38. 8 8
      packages/ckeditor5-table/src/tablecellproperties/tablecellpropertiesediting.js
  39. 7 7
      packages/ckeditor5-table/src/tablecellproperties/tablecellpropertiesui.js
  40. 4 4
      packages/ckeditor5-table/src/tableediting.js
  41. 5 5
      packages/ckeditor5-table/src/tableproperties.js
  42. 2 2
      packages/ckeditor5-table/src/tableproperties/commands/tablealignmentcommand.js
  43. 2 2
      packages/ckeditor5-table/src/tableproperties/commands/tablebackgroundcolorcommand.js
  44. 2 2
      packages/ckeditor5-table/src/tableproperties/commands/tablebordercolorcommand.js
  45. 2 2
      packages/ckeditor5-table/src/tableproperties/commands/tableborderstylecommand.js
  46. 3 3
      packages/ckeditor5-table/src/tableproperties/commands/tableborderwidthcommand.js
  47. 4 4
      packages/ckeditor5-table/src/tableproperties/commands/tableheightcommand.js
  48. 3 3
      packages/ckeditor5-table/src/tableproperties/commands/tablepropertycommand.js
  49. 4 4
      packages/ckeditor5-table/src/tableproperties/commands/tablewidthcommand.js
  50. 30 24
      packages/ckeditor5-table/src/tableselection.js
  51. 3 3
      packages/ckeditor5-table/src/tableselection/converters.js
  52. 13 13
      packages/ckeditor5-table/src/tableselection/mouseeventsobserver.js
  53. 11 13
      packages/ckeditor5-table/src/tableselection/mouseselectionhandler.js
  54. 6 6
      packages/ckeditor5-table/src/tabletoolbar.js
  55. 5 5
      packages/ckeditor5-table/src/tableui.js
  56. 16 16
      packages/ckeditor5-table/src/tableutils.js
  57. 28 28
      packages/ckeditor5-table/src/tablewalker.js
  58. 3 3
      packages/ckeditor5-table/src/ui/colorinputview.js
  59. 1 1
      packages/ckeditor5-table/src/ui/formheaderview.js
  60. 2 2
      packages/ckeditor5-table/src/ui/formrowview.js
  61. 13 13
      packages/ckeditor5-table/src/ui/utils.js
  62. 1 1
      packages/ckeditor5-table/src/utils.js
  63. 10 2
      packages/ckeditor5-table/tests/_utils/utils.js
  64. 45 21
      packages/ckeditor5-table/tests/tableselection/mouseselectionhandler.js
  65. 0 7
      packages/ckeditor5-table/theme/tableediting.css
  66. 17 0
      packages/ckeditor5-table/theme/tableselection.css

+ 16 - 1
packages/ckeditor5-table/CHANGELOG.md

@@ -1,6 +1,21 @@
 Changelog
 =========
 
+## [17.0.0](https://github.com/ckeditor/ckeditor5-table/compare/v16.0.0...v17.0.0) (2020-02-19)
+
+### Features
+
+* Implemented the table and table cell properties forms. Closes [ckeditor/ckeditor5#3287](https://github.com/ckeditor/ckeditor5/issues/3287).
+
+### Bug fixes
+
+* Fixed a bug with spellchecking or pasting via the context menu into a table cell crashing the editor. Closes [ckeditor/ckeditor5#6062](https://github.com/ckeditor/ckeditor5/issues/6062). ([be0d759](https://github.com/ckeditor/ckeditor5-table/commit/be0d759))
+
+### Other changes
+
+* Implemented lazy loading for the table dropdown. This will reduce editor initialization time. Closes [ckeditor/ckeditor5#6193](https://github.com/ckeditor/ckeditor5/issues/6193). ([5daa487](https://github.com/ckeditor/ckeditor5-table/commit/5daa487))
+
+
 ## [16.0.0](https://github.com/ckeditor/ckeditor5-table/compare/v15.0.0...v16.0.0) (2019-12-04)
 
 ### Bug fixes
@@ -9,7 +24,7 @@ Changelog
 
 ### Other changes
 
-* Updated translations. ([7b2df5c](https://github.com/ckeditor/ckeditor5-table/commit/7b2df5c)) 
+* Updated translations. ([7b2df5c](https://github.com/ckeditor/ckeditor5-table/commit/7b2df5c))
 
 
 ## [15.0.0](https://github.com/ckeditor/ckeditor5-table/compare/v14.0.0...v15.0.0) (2019-10-23)

+ 40 - 0
packages/ckeditor5-table/docs/_snippets/features/table-styling-colors.html

@@ -0,0 +1,40 @@
+<div id="snippet-table-styling-colors">
+	<h3>A beautiful color palette</h3>
+	<figure class="table">
+		<table>
+			<tbody>
+				<tr>
+					<td style="width:120px;text-align:center;background-color:hsl(4,90%,58%)">Red</td>
+					<td style="width:120px;text-align:center;background-color:hsl(340,82%,52%)">Pink</td>
+					<td style="width:120px;text-align:center;background-color:hsl(291,64%,42%)">Purple</td>
+					<td style="width:120px;text-align:center;background-color:hsl(262,52%,47%)">Deep Purple</td>
+				</tr>
+				<tr>
+					<td style="width:120px;text-align:center;background-color:hsl(231,48%,48%)">Indigo</td>
+					<td style="width:120px;text-align:center;background-color:hsl(207,90%,54%)">Blue</td>
+					<td style="width:120px;text-align:center;background-color:hsl(199,98%,48%)">Light Blue</td>
+					<td style="width:120px;text-align:center;background-color:hsl(187,100%,42%)">Cyan</td>
+				</tr>
+				<tr>
+					<td style="width:120px;text-align:center;background-color:hsl(174,100%,29%)">Teal</td>
+					<td style="width:120px;text-align:center;background-color:hsl(122,39%,49%)">Green</td>
+					<td style="width:120px;text-align:center;background-color:hsl(88,50%,53%)">Light Green</td>
+					<td style="width:120px;text-align:center;background-color:hsl(66,70%,54%)">Lime</td>
+				</tr>
+				<tr>
+					<td style="width:120px;text-align:center;background-color:hsl(49,98%,60%)">Yellow</td>
+					<td style="width:120px;text-align:center;background-color:hsl(45,100%,51%)">Amber</td>
+					<td style="width:120px;text-align:center;background-color:hsl(36,100%,50%)">Orange</td>
+					<td style="width:120px;text-align:center;background-color:hsl(14,91%,54%)">Deep Orange</td>
+				</tr>
+				<tr>
+					<td style="width:120px;text-align:center;background-color:hsl(15,25%,34%)">Brown</td>
+					<td style="width:120px;text-align:center;background-color:hsl(0,0%,62%)">Grey</td>
+					<td style="width:120px;text-align:center;background-color:hsl(200,18%,46%)">Blue Grey</td>
+					<td style="width:120px;text-align:center;background-color:hsl(200,18%,100%)">White</td>
+				</tr>
+			</tbody>
+		</table>
+	</figure>
+</div>
+

+ 123 - 0
packages/ckeditor5-table/docs/_snippets/features/table-styling-colors.js

@@ -0,0 +1,123 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals ClassicEditor, CKEditorPlugins, console, window, document */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+const customColorPalette = [
+	{
+		color: 'hsl(4, 90%, 58%)',
+		label: 'Red'
+	},
+	{
+		color: 'hsl(340, 82%, 52%)',
+		label: 'Pink'
+	},
+	{
+		color: 'hsl(291, 64%, 42%)',
+		label: 'Purple'
+	},
+	{
+		color: 'hsl(262, 52%, 47%)',
+		label: 'Deep Purple'
+	},
+	{
+		color: 'hsl(231, 48%, 48%)',
+		label: 'Indigo'
+	},
+	{
+		color: 'hsl(207, 90%, 54%)',
+		label: 'Blue'
+	},
+	{
+		color: 'hsl(199, 98%, 48%)',
+		label: 'Light Blue'
+	},
+	{
+		color: 'hsl(187, 100%, 42%)',
+		label: 'Cyan'
+	},
+	{
+		color: 'hsl(174, 100%, 29%)',
+		label: 'Teal'
+	},
+	{
+		color: 'hsl(122, 39%, 49%)',
+		label: 'Green'
+	},
+	{
+		color: 'hsl(88, 50%, 53%)',
+		label: 'Light Green'
+	},
+	{
+		color: 'hsl(66, 70%, 54%)',
+		label: 'Lime'
+	},
+	{
+		color: 'hsl(49, 98%, 60%)',
+		label: 'Yellow'
+	},
+	{
+		color: 'hsl(45, 100%, 51%)',
+		label: 'Amber'
+	},
+	{
+		color: 'hsl(36, 100%, 50%)',
+		label: 'Orange'
+	},
+	{
+		color: 'hsl(14, 91%, 54%)',
+		label: 'Deep Orange'
+	},
+	{
+		color: 'hsl(15, 25%, 34%)',
+		label: 'Brown'
+	},
+	{
+		color: 'hsl(0, 0%, 62%)',
+		label: 'Grey'
+	},
+	{
+		color: 'hsl(200, 18%, 46%)',
+		label: 'Blue Grey'
+	},
+	{
+		color: 'hsl(200, 18%, 100%)',
+		label: 'White'
+	},
+];
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-table-styling-colors' ), {
+		extraPlugins: [
+			CKEditorPlugins.TableProperties,
+			CKEditorPlugins.TableCellProperties,
+		],
+		cloudServices: CS_CONFIG,
+		toolbar: {
+			items: [
+				'insertTable', '|', 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo'
+			],
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		},
+		table: {
+			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties' ],
+			tableProperties: {
+				borderColors: customColorPalette,
+				backgroundColors: customColorPalette
+			},
+			tableCellProperties: {
+				borderColors: customColorPalette,
+				backgroundColors: customColorPalette
+			}
+		}
+	} )
+	.then( editor => {
+		window.editorStyling = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 73 - 51
packages/ckeditor5-table/docs/_snippets/features/table-styling.html

@@ -1,54 +1,76 @@
 <div id="snippet-table-styling">
-	<p>The ultimate table of <a href="https://en.wikipedia.org/wiki/List_of_coffee_drinks">coffee drinks</a>:</p>
-	<table>
-		<thead>
-			<tr>
-				<th rowspan="2"></th>
-				<th scope="col" rowspan="2">Espresso</th>
-				<th scope="colgroup" colspan="2">Milk</th>
-				<th scope="col" rowspan="2">Water</th>
-			</tr>
-			<tr>
-				<th scope="col">Steamed</th>
-				<th scope="col">Foam</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr>
-				<th scope="row">Cappuccino</th>
-				<td>yes</td>
-				<td>yes</td>
-				<td>yes</td>
-				<td>no</td>
-			</tr>
-			<tr>
-				<th scope="row">Macchiato</th>
-				<td>yes</td>
-				<td>no</td>
-				<td>yes</td>
-				<td>no</td>
-			</tr>
-			<tr>
-				<th scope="row">Latte</th>
-				<td>yes</td>
-				<td>yes</td>
-				<td>no</td>
-				<td>no</td>
-			</tr>
-			<tr>
-				<th scope="row">Americano</th>
-				<td>yes</td>
-				<td>no</td>
-				<td>no</td>
-				<td>yes</td>
-			</tr>
-		</tbody>
-	</table>
+	<h3>Balance Sheet &amp; Cash Flow Statement Information</h3>
+	<figure class="table">
+		<table style="border-bottom:1px solid;border-left:1px solid;border-right:1px solid;border-top:1px solid;">
+			<thead>
+				<tr>
+					<th style="background-color:hsl(0,0%,90%);width:317px;" colspan="1" rowspan="2"><p>&nbsp;</p><p>&nbsp;</p></th>
+					<th style="background-color:hsl(180,97%,31%);text-align:center;width:224px;" colspan="3">Full Year (unaudited)</th>
+					<th style="background-color:hsl(180,97%,31%);text-align:center;width:360px;" colspan="4">2013 (unaudited)</th>
+				</tr>
+				<tr>
+					<th style="background-color:hsl(180,52%,58%);width:75px;">2011</th>
+					<th style="background-color:hsl(180,52%,58%);width:75px;">2012</th>
+					<th style="background-color:hsl(180,52%,58%);width:75px;">2013</th>
+					<th style="background-color:hsl(180,52%,58%);width:75px;">Q1</th>
+					<th style="background-color:hsl(180,52%,58%);width:75px;">Q2</th>
+					<th style="background-color:hsl(180,52%,58%);width:75px;">Q3</th>
+					<th style="background-color:hsl(180,52%,58%);width:75px;">Q4</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<th style="background-color:hsl(27,100%,85%);text-align:center;width:317px;"><strong>Cash, Cash Equivalents&nbsp;</strong></th>
+					<td style="width:75px;">$44,626</td>
+					<td style="width:75px;">$48,088</td>
+					<td style="width:75px;">$58,717</td>
+					<td style="width:75px;">$50,098</td>
+					<td style="background-color:hsl(90,75%,60%);border-bottom:2px solid hsl(120,100%,25%);border-left:2px solid hsl(120,100%,25%);border-right:2px solid hsl(120,100%,25%);border-top:2px solid hsl(120,100%,25%);width:75px;">$54,432</td>
+					<td style="width:75px;">$56,523</td>
+					<td style="width:75px;">$58,717</td>
+				</tr>
+				<tr>
+					<th style="background-color:hsl(27,100%,85%);text-align:center;width:317px;"><strong>Accounts Receivable</strong></th>
+					<td style="width:75px;">$5,427</td>
+					<td style="width:75px;">$6,769</td>
+					<td style="background-color:hsl(0,100%,89%);border-bottom:2px solid hsl(0,75%,60%);border-left:2px solid hsl(0,75%,60%);border-right:2px solid hsl(0,75%,60%);border-top:2px solid hsl(0,75%,60%);width:75px;">$8,098</td>
+					<td style="width:75px;">$6,526</td>
+					<td style="width:75px;">$6,792</td>
+					<td style="width:75px;">$7,083</td>
+					<td style="width:75px;">$8,098</td>
+				</tr>
+				<tr>
+					<th style="background-color:hsl(27,100%,85%);text-align:center;width:317px;"><strong>Property and Equipment, Net</strong></th>
+					<td style="width:75px;">$9,603</td>
+					<td style="width:75px;">$11,854</td>
+					<td style="width:75px;">$16,524</td>
+					<td style="width:75px;">$12,300</td>
+					<td style="width:75px;">$12,912</td>
+					<td style="width:75px;">$14,867</td>
+					<td style="width:75px;">$16,524</td>
+				</tr>
+				<tr>
+					<th style="background-color:hsl(27,100%,85%);text-align:center;width:317px;"><strong>Total Assets</strong></th>
+					<td style="background-color:hsl(0,100%,89%);border-bottom:2px solid hsl(0,75%,60%);border-left:2px solid hsl(0,75%,60%);border-right:2px solid hsl(0,75%,60%);border-top:2px solid hsl(0,75%,60%);width:75px;">$72,574</td>
+					<td style="width:75px;">$93,798</td>
+					<td style="width:75px;">$110,920</td>
+					<td style="width:75px;">$96,692</td>
+					<td style="width:75px;">$101,182</td>
+					<td style="background-color:hsl(90,75%,60%);border-bottom:2px solid hsl(120,100%,25%);border-left:2px solid hsl(120,100%,25%);border-right:2px solid hsl(120,100%,25%);border-top:2px solid hsl(120,100%,25%);width:75px;">$105,068</td>
+					<td style="width:75px;">$110,920</td>
+				</tr>
+				<tr>
+					<th style="background-color:hsl(27,100%,85%);text-align:center;width:317px;"><strong>Cash Flow from Operations</strong></th>
+					<td style="width:75px;">$14,565</td>
+					<td style="width:75px;">$16,619</td>
+					<td style="width:75px;">$18,659</td>
+					<td style="width:75px;">$3,633</td>
+					<td style="width:75px;">$4,705</td>
+					<td style="width:75px;">$5,083</td>
+					<td style="width:75px;">$5,238</td>
+				</tr>
+			</tbody>
+		</table>
+	</figure>
 </div>
 
-<style>
-	.ck.ck-content table td,
-	.ck.ck-content table th {
-		vertical-align: middle;
-	}
-</style>

+ 93 - 1
packages/ckeditor5-table/docs/_snippets/features/table-styling.js

@@ -7,6 +7,90 @@
 
 import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
 
+const COLOR_PALETTE = [
+	{
+		color: 'hsl(0, 0%, 0%)',
+		label: 'Black'
+	},
+	{
+		color: 'hsl(0, 0%, 30%)',
+		label: 'Dim grey'
+	},
+	{
+		color: 'hsl(0, 0%, 60%)',
+		label: 'Grey'
+	},
+	{
+		color: 'hsl(0, 0%, 90%)',
+		label: 'Light grey'
+	},
+	{
+		color: 'hsl(0, 0%, 100%)',
+		label: 'White',
+		hasBorder: true
+	},
+	{
+		color: 'hsl(0, 100%, 89%)',
+		label: 'Pink'
+	},
+	{
+		color: 'hsl(0, 75%, 60%)',
+		label: 'Red'
+	},
+	{
+		color: 'hsl(60, 75%, 60%)',
+		label: 'Yellow'
+	},
+	{
+		color: 'hsl(27, 100%, 85%)',
+		label: 'Light Orange'
+	},
+	{
+		color: 'hsl(30, 75%, 60%)',
+		label: 'Orange'
+	},
+	{
+		color: 'hsl(90, 75%, 60%)',
+		label: 'Light green'
+	},
+	{
+		color: 'hsl(120, 75%, 60%)',
+		label: 'Green'
+	},
+	{
+		color: 'hsl(150, 75%, 60%)',
+		label: 'Aquamarine'
+	},
+	{
+		color: 'hsl(120, 100%, 25%)',
+		label: 'Dark green'
+	},
+	{
+		color: 'hsl(180, 75%, 60%)',
+		label: 'Turquoise'
+	},
+	{
+		color: 'hsl(180, 52%, 58%)',
+		label: 'Light Aqua',
+	},
+	{
+		color: 'hsl(180, 97%, 31%)',
+		label: 'Aqua'
+	},
+	{
+		color: 'hsl(210, 75%, 60%)',
+		label: 'Light blue'
+	},
+	{
+		color: 'hsl(240, 75%, 60%)',
+		label: 'Blue'
+	},
+	{
+		color: 'hsl(270, 75%, 60%)',
+		label: 'Purple'
+	}
+];
+
 ClassicEditor
 	.create( document.querySelector( '#snippet-table-styling' ), {
 		extraPlugins: [
@@ -21,7 +105,15 @@ ClassicEditor
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 		},
 		table: {
-			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties' ]
+			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties' ],
+			tableProperties: {
+				borderColors: COLOR_PALETTE,
+				backgroundColors: COLOR_PALETTE
+			},
+			tableCellProperties: {
+				borderColors: COLOR_PALETTE,
+				backgroundColors: COLOR_PALETTE
+			}
 		}
 	} )
 	.then( editor => {

+ 19 - 19
packages/ckeditor5-table/docs/_snippets/features/table.html

@@ -4,9 +4,9 @@
 		<thead>
 			<tr>
 				<th rowspan="2"></th>
-				<th scope="col" rowspan="2">Espresso</th>
-				<th scope="colgroup" colspan="2">Milk</th>
-				<th scope="col" rowspan="2">Water</th>
+				<th scope="col" rowspan="2">☕️ Espresso</th>
+				<th scope="colgroup" colspan="2">🥛 Milk</th>
+				<th scope="col" rowspan="2">🚰 Water</th>
 			</tr>
 			<tr>
 				<th scope="col">Steamed</th>
@@ -16,31 +16,31 @@
 		<tbody>
 			<tr>
 				<th scope="row">Cappuccino</th>
-				<td>yes</td>
-				<td>yes</td>
-				<td>yes</td>
-				<td>no</td>
+				<td>yes</td>
+				<td>yes</td>
+				<td>yes</td>
+				<td>no</td>
 			</tr>
 			<tr>
 				<th scope="row">Macchiato</th>
-				<td>yes</td>
-				<td>no</td>
-				<td>yes</td>
-				<td>no</td>
+				<td>yes</td>
+				<td>no</td>
+				<td>yes</td>
+				<td>no</td>
 			</tr>
 			<tr>
 				<th scope="row">Latte</th>
-				<td>yes</td>
-				<td>yes</td>
-				<td>no</td>
-				<td>no</td>
+				<td>yes</td>
+				<td>yes</td>
+				<td>no</td>
+				<td>no</td>
 			</tr>
 			<tr>
 				<th scope="row">Americano</th>
-				<td>yes</td>
-				<td>no</td>
-				<td>no</td>
-				<td>yes</td>
+				<td>yes</td>
+				<td>no</td>
+				<td>no</td>
+				<td>yes</td>
 			</tr>
 		</tbody>
 	</table>

+ 1 - 1
packages/ckeditor5-table/docs/api/table.md

@@ -10,7 +10,7 @@ This package implements the table feature for CKEditor 5.
 
 ## Demo
 
-Check out the {@link features/table#demo demo in the Table feature} guide.
+Check out the {@link features/table#demos demos in the Table feature} guide.
 
 ## Documentation
 

+ 339 - 38
packages/ckeditor5-table/docs/features/table.md

@@ -7,27 +7,45 @@ category: features
 
 The {@link module:table/table~Table} feature offers table creation and editing tools that help content authors bring tabular data into their documents.
 
-## Demo
+## Demos
+
+### Basic table features
+
+The editor bellow shows the basic set of table features focusing on the **structure and semantics**. These features allow users to insert new tables into the content, add or remove columns and rows, define headers, and merge multiple cells. It is also worth noting that you will find them out–of–the–box in all {@link builds/guides/overview ready–to–use editor builds}.
 
 {@snippet features/table}
 
-## Styling tables
+Use the **"Insert table"** button in the toolbar to create new tables. Focus any cell in the table to display the toolbar with buttons that will help you further shape the structure of the table.
+
+### Table and cell styling tools
+
+In addition to the default table features described in the [previous section](#basic-table-features), the editor below comes with some additional tools that will help you modify **the look of tables and table cells**, for instance, their border color and style, background color, padding, or text alignment.
 
 {@snippet features/table-styling}
 
+Put the caret anywhere inside the table and click the **"Table properties"** button in the toolbar to open a pop–up with multiple options that will allow you to shape the look of the entire table. If you click the **"Cell properties"** button, a similar interface will appear with styling options for individual table cells.
+
+[Learn more](#configuring-styling-tools) about configuring color palettes in the table styling pop–up interfaces.
+
+<info-box>
+	By default, table styling tools are not included in the {@link builds/guides/overview ready–to–use editor builds} and must be installed separately. See the [installation](#table-and-cell-styling-tools-2) section to learn how to enable them in your editor.
+</info-box>
+
 ## Installation
 
+### Basic table features
+
 <info-box info>
-	This feature is enabled by default in all builds. The installation instructions are for developers interested in building their own, custom rich text editor.
+	The basic table features are enabled by default in all builds. The installation instructions are for developers interested in building their own, custom rich text editor.
 </info-box>
 
-To add this feature to your editor, install the [`@ckeditor/ckeditor5-table`](https://www.npmjs.com/package/@ckeditor/ckeditor5-table) package:
+To add only the basic table features 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` plugins to your plugin list and configure the table toolbar:
+Then add the `Table` and `TableToolbar` plugins to your plugin list and configure the table toolbar:
 
 ```js
 import Table from '@ckeditor/ckeditor5-table/src/table';
@@ -45,14 +63,147 @@ ClassicEditor
 	.catch( ... );
 ```
 
+### Table and cell styling tools
+
+To enable not only the [basic table features](#basic-table-features-2) but also the rich table and cell styling tools in your editor, install the [`@ckeditor/ckeditor5-table`](https://www.npmjs.com/package/@ckeditor/ckeditor5-table) package:
+
+```
+npm install --save @ckeditor/ckeditor5-table
+```
+
+Then add the `Table`, `TableToolbar`, **`TableProperties`**, and **`TableCellProperties`** plugins to your plugin list and configure the table toolbar:
+
+```js
+import Table from '@ckeditor/ckeditor5-table/src/table';
+import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
+import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
+import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ Table, TableToolbar, TableProperties, TableCellProperties, Bold, ... ],
+		toolbar: [ 'insertTable', ... ],
+		table: {
+			contentToolbar: [
+				'tableColumn', 'tableRow', 'mergeTableCells',
+				'tableProperties', 'tableCellProperties'
+			],
+
+			// Configuration of the TableProperties plugin.
+			tableProperties: {
+				// ...
+			},
+
+			// Configuration of the TableCellProperties plugin.
+			tableCellProperties: {
+				// ...
+			}
+		}
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+<info-box info>
+	Learn more about [configuring color palettes](#configuring-styling-tools) in the table and table cell property pop–ups.
+</info-box>
+
+<info-box info>
+	Read more about {@link builds/guides/integration/installing-plugins installing plugins}.
+</info-box>
+
+## Configuring styling tools
+
+<info-box>
+	By default, table styling tools are not included in {@link builds/guides/overview ready–to–use editor builds} and must be installed separately. See the [installation](#table-and-cell-styling-tools-2) section to learn how to enable them in your editor.
+</info-box>
+
+Among other formatting options, table and cell styling tools allow users to create tables with colorful backgrounds and borders. These colors can be easily picked using color palettes in the **"Table properties"** and **"Cell properties"** pop–ups. To help users choose the right colors for the content, the color palettes can be pre–configured, like in the editor below:
+
+{@snippet features/table-styling-colors}
+
+With the selection inside any table cell, use the **"Table properties"** and **"Cell properties"** buttons in the toolbar to inspect available styling and color options.
+
+### Customizing color palettes
+
+You can use these specific configuration options to define customized color palettes for background and border colors to match your document:
+
+* {@link module:table/table~TableConfig#tableProperties `tableProperties.borderColors`} &ndash; Defines the color palette for table borders.
+* {@link module:table/table~TableConfig#tableProperties `tableProperties.backgroundColors`} &ndash; Defines the color palette for table background.
+* {@link module:table/table~TableConfig#tableCellProperties `tableCellProperties.borderColors`} &ndash; Defines the color palette for cell borders.
+* {@link module:table/table~TableConfig#tableCellProperties `tableCellProperties.backgroundColors`} &ndash; Defines the color palette for cell background.
+
+<info-box>
+	The above configurations **do not** impact the {@link builds/guides/integration/basic-api#setting-the-editor-data data loaded into the editor}, i.e. they do not limit or filter the colors in the data. They are used only in the user interface allowing users to pick colors in a more convenient way.
+</info-box>
+
+For instance, to define the same color palette for all border and background configurations, use the following code snippet:
+
+```js
+const customColorPalette = [
+	{
+		color: 'hsl(4, 90%, 58%)',
+		label: 'Red'
+	},
+	{
+		color: 'hsl(340, 82%, 52%)',
+		label: 'Pink'
+	},
+	{
+		color: 'hsl(291, 64%, 42%)',
+		label: 'Purple'
+	},
+	{
+		color: 'hsl(262, 52%, 47%)',
+		label: 'Deep Purple'
+	},
+	{
+		color: 'hsl(231, 48%, 48%)',
+		label: 'Indigo'
+	},
+	{
+		color: 'hsl(207, 90%, 54%)',
+		label: 'Blue'
+	},
+
+	// ...
+];
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ Table, TableToolbar, TableProperties, TableCellProperties, Bold, ... ],
+		toolbar: [ 'insertTable', ... ],
+		table: {
+			contentToolbar: [
+				'tableColumn', 'tableRow', 'mergeTableCells',
+				'tableProperties', 'tableCellProperties'
+			],
+
+			// Set the palettes for tables.
+			tableProperties: {
+				borderColors: customColorPalette,
+				backgroundColors: customColorPalette
+			},
+
+			// Set the palettes for table cells.
+			tableCellProperties: {
+				borderColors: customColorPalette,
+				backgroundColors: customColorPalette
+			}
+		}
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
 ## Block vs inline content in table cells
 
-The table feature allows creating block content (like paragraphs, lists, headings, etc.) in table cells. However, if a table cell contains just one paragraph and this paragraph has no special attributes (like text alignment), this cell content is considered "inline" and the paragraph is not rendered.
+The table feature allows creating block content (like paragraphs, lists, headings, etc.) in table cells. However, if a table cell contains just one paragraph and this paragraph has no special attributes (like text alignment), the cell content is considered "inline" and the paragraph is not rendered.
 
-This means that a table cell can be in two states: with inline content or with block content. The reason for this differentiation is that most tables contain only inline content (e.g. in the [demo](#demo) above) and it is common for "data tables" to not contain any block content. In such scenario, printing out `<p>` elements would be semantically incorrect and also unnecessary. There are, however, scenarios where the user wants to create, for example, a list inside the table and then support for block content is necessary, too.
+This means that a table cell can be in two states: with inline content or with block content. The reason for this differentiation is that most tables contain only inline content (e.g. in the [demo](#demos) above) and it is common for "data tables" to not contain any block content. In such scenario, printing out `<p>` elements would be semantically incorrect and also unnecessary. There are, however, scenarios where the user wants to create, for example, a list inside the table and then support for block content is necessary, too.
 
 <info-box>
-	"Rendering" here means the view layer. In the model a cell is always filled with at least a `<paragraph>`. It is because of consistency, as since a cell always has some block content, the text is never directly inside `<tableCell>`. This also allows features like <kbd>Enter</kbd> support to work out of the box (since a `<paragraph>` exists in the model, it can be split despite the fact that it is not present in the view).
+	"Rendering" here means the view layer. In the model a cell is always filled with at least a `<paragraph>`. This is because of consistency, as &mdash; since a cell always has some block content &mdash; the text is never directly inside `<tableCell>`. This also allows features like <kbd>Enter</kbd> support to work out of the box (since a `<paragraph>` exists in the model, it can be split despite the fact that it is not present in the view).
 </info-box>
 
 ### Inline content
@@ -87,7 +238,7 @@ The above model structure will be rendered to the {@link module:editor-classic/c
 </figure>
 ```
 
-In the editing view (the editable container in which the user edits the content) additional `<span>` elements are created to compensate for the hidden `<paragraph>` elements:
+In the editing view (the editable container in which the user edits the content), additional `<span>` elements are created to compensate for the hidden `<paragraph>` elements:
 
 ```html
 <figure class="table">
@@ -149,42 +300,192 @@ The above model structure will be rendered to the data and to the editing view a
 ```
 
 <info-box info>
-	At the moment it is not possible to completely disallow block content in tables. See the [discussion on GitHub](https://github.com/ckeditor/ckeditor5-table/issues/101) about adding a configuration option that would enable that. 👍 if you need this feature.
+	At the moment it is not possible to completely disallow block content in tables. See the [discussion on GitHub](https://github.com/ckeditor/ckeditor5-table/issues/101) about adding a configuration option that would enable that. Add a 👍 if you need this feature.
 </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 `'mergeTableCells'` dropdown.
-
-And the following commands:
-
-| {@link framework/guides/architecture/core-editor-architecture#commands Command} name | Implemented by |
-|----------------------------------|-----------------------------------------------------------------------------|
-| `'insertTable'`                  | {@link module:table/commands/inserttablecommand~InsertTableCommand}         |
-| `'insertTableColumnLeft'`        | {@link module:table/commands/insertcolumncommand~InsertColumnCommand}       |
-| `'insertTableColumnRight'`       | {@link module:table/commands/insertcolumncommand~InsertColumnCommand}       |
-| `'insertTableRowAbove'`          | {@link module:table/commands/insertrowcommand~InsertRowCommand}             |
-| `'insertTableRowBelow'`          | {@link module:table/commands/insertrowcommand~InsertRowCommand}             |
-| `'removeTableColumn'`            | {@link module:table/commands/removecolumncommand~RemoveColumnCommand}       |
-| `'removeTableRow'`               | {@link module:table/commands/removerowcommand~RemoveRowCommand}             |
-| `'setTableColumnHeader'`         | {@link module:table/commands/setheadercolumncommand~SetHeaderColumnCommand} |
-| `'setTableRowHeader'`            | {@link module:table/commands/setheaderrowcommand~SetHeaderRowCommand}       |
-| `'mergeTableCellRight'`          | {@link module:table/commands/mergecellcommand~MergeCellCommand}             |
-| `'mergeTableCellLeft'`           | {@link module:table/commands/mergecellcommand~MergeCellCommand}             |
-| `'mergeTableCellUp'`             | {@link module:table/commands/mergecellcommand~MergeCellCommand}             |
-| `'mergeTableCellDown'`           | {@link module:table/commands/mergecellcommand~MergeCellCommand}             |
-| `'splitTableCellVertically'`     | {@link module:table/commands/splitcellcommand~SplitCellCommand}             |
-| `'splitTableCellHorizontally'`   | {@link module:table/commands/splitcellcommand~SplitCellCommand}             |
+### UI components
+
+The table plugins register the following UI components:
+
+<table>
+	<thead>
+		<th>{@link builds/guides/integration/configuration#toolbar-setup Component} name</th>
+		<th>Registered by</th>
+	</thead>
+	<tbody>
+		<tr>
+			<td>The <code>'insertTable'</code> dropdown</td>
+			<td rowspan="4">{@link module:table/table~Table}</td>
+		</tr>
+		<tr>
+			<td>The <code>'tableColumn'</code> dropdown</td>
+		</tr>
+		<tr>
+			<td>The <code>'tableRow'</code> dropdown</td>
+		</tr>
+		<tr>
+			<td>The <code>'mergeTableCells'</code> dropdown</td>
+		</tr>
+		<tr>
+			<td>The <code>'tableProperties'</code> button</td>
+			<td>{@link module:table/tableproperties~TableProperties}</td>
+		</tr>
+		<tr>
+			<td>The <code>'tableCellProperties'</code> button</td>
+			<td>{@link module:table/tablecellproperties~TableCellProperties}</td>
+		</tr>
+	</tbody>
+</table>
+
+#### Toolbars
 
 The {@link module:table/tabletoolbar~TableToolbar} plugin introduces two balloon toolbars for tables.
-* The content toolbar shows up when table cell is selected and is anchored to the table. It is possible to {@link module:table/table~TableConfig#contentToolbar configure} its content. Normally, it contains the table-related tools such as `'tableColumn'`, `'tableRow'`, and `'mergeTableCells'` dropdowns.
+* The content toolbar shows up when a table cell is selected and it is anchored to the table. It is possible to {@link module:table/table~TableConfig#contentToolbar configure} its content. Normally, the toolbar contains the table-related tools such as `'tableColumn'`, `'tableRow'`, and `'mergeTableCells'` dropdowns.
 * The table toolbar shows up when the whole table is selected, for instance using the widget handler. It is possible to {@link module:table/table~TableConfig#tableToolbar configure} its content.
 
+### Editor commands
+
+<table>
+	<thead>
+		<tr>
+			<th>{@link framework/guides/architecture/core-editor-architecture#commands Command} name</th>
+			<th>Command class</th>
+			<th>Belongs to (top–level plugin)</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td><code>'insertTable'</code></td>
+			<td>{@link module:table/commands/inserttablecommand~InsertTableCommand}</td>
+			<td rowspan="15">{@link module:table/table~Table}</td>
+		</tr>
+		<tr>
+			<td><code>'insertTableColumnLeft'</code></td>
+			<td>{@link module:table/commands/insertcolumncommand~InsertColumnCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'insertTableColumnRight'</code></td>
+			<td>{@link module:table/commands/insertcolumncommand~InsertColumnCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'insertTableRowAbove'</code></td>
+			<td>{@link module:table/commands/insertrowcommand~InsertRowCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'insertTableRowBelow'</code></td>
+			<td>{@link module:table/commands/insertrowcommand~InsertRowCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'removeTableColumn'</code></td>
+			<td>{@link module:table/commands/removecolumncommand~RemoveColumnCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'removeTableRow'</code></td>
+			<td>{@link module:table/commands/removerowcommand~RemoveRowCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'setTableColumnHeader'</code></td>
+			<td>{@link module:table/commands/setheadercolumncommand~SetHeaderColumnCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'setTableRowHeader'</code></td>
+			<td>{@link module:table/commands/setheaderrowcommand~SetHeaderRowCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'mergeTableCellRight'</code></td>
+			<td>{@link module:table/commands/mergecellcommand~MergeCellCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'mergeTableCellLeft'</code></td>
+			<td>{@link module:table/commands/mergecellcommand~MergeCellCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'mergeTableCellUp'</code></td>
+			<td>{@link module:table/commands/mergecellcommand~MergeCellCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'mergeTableCellDown'</code></td>
+			<td>{@link module:table/commands/mergecellcommand~MergeCellCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'splitTableCellVertically'</code></td>
+			<td>{@link module:table/commands/splitcellcommand~SplitCellCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'splitTableCellHorizontally'</code></td>
+			<td>{@link module:table/commands/splitcellcommand~SplitCellCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'tableBorderColor'</code></td>
+			<td>{@link module:table/tableproperties/commands/tablebordercolorcommand~TableBorderColorCommand}</td>
+			<td rowspan="7">{@link module:table/tableproperties~TableProperties}</td>
+		</tr>
+		<tr>
+			<td><code>'tableBorderStyle'</code></td>
+			<td>{@link module:table/tableproperties/commands/tableborderstylecommand~TableBorderStyleCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'tableBorderWidth'</code></td>
+			<td>{@link module:table/tableproperties/commands/tableborderwidthcommand~TableBorderWidthCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'tableAlignment'</code></td>
+			<td>{@link module:table/tableproperties/commands/tablealignmentcommand~TableAlignmentCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'tableWidth'</code></td>
+			<td>{@link module:table/tableproperties/commands/tablewidthcommand~TableWidthCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'tableHeight'</code></td>
+			<td>{@link module:table/tableproperties/commands/tableheightcommand~TableHeightCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'tableBackgroundColor'</code></td>
+			<td>{@link module:table/tableproperties/commands/tablebackgroundcolorcommand~TableBackgroundColorCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'tableCellBorderStyle'</code></td>
+			<td>{@link module:table/tablecellproperties/commands/tablecellborderstylecommand~TableCellBorderStyleCommand}</td>
+			<td rowspan="9">{@link module:table/tablecellproperties~TableCellProperties}</td>
+		</tr>
+		<tr>
+			<td><code>'tableCellBorderColor'</code></td>
+			<td>{@link module:table/tablecellproperties/commands/tablecellbordercolorcommand~TableCellBorderColorCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'tableCellBorderWidth'</code></td>
+			<td>{@link module:table/tablecellproperties/commands/tablecellborderwidthcommand~TableCellBorderWidthCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'tableCellHorizontalAlignment'</code></td>
+			<td>{@link module:table/tablecellproperties/commands/tablecellhorizontalalignmentcommand~TableCellHorizontalAlignmentCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'tableCellWidth'</code></td>
+			<td>{@link module:table/tablecellproperties/commands/tablecellwidthcommand~TableCellWidthCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'tableCellHeight'</code></td>
+			<td>{@link module:table/tablecellproperties/commands/tablecellheightcommand~TableCellHeightCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'tableCellPadding'</code></td>
+			<td>{@link module:table/tablecellproperties/commands/tablecellpaddingcommand~TableCellPaddingCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'tableCellBackgroundColor'</code></td>
+			<td>{@link module:table/tablecellproperties/commands/tablecellbackgroundcolorcommand~TableCellBackgroundColorCommand}</td>
+		</tr>
+		<tr>
+			<td><code>'tableCellVerticalAlignment'</code></td>
+			<td>{@link module:table/tablecellproperties/commands/tablecellverticalalignmentcommand~TableCellVerticalAlignmentCommand}</td>
+		</tr>
+	</tbody>
+</table>
+
 <info-box>
 	We recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector CKEditor 5 inspector} for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.
 </info-box>

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

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-table",
-  "version": "16.0.0",
+  "version": "17.0.0",
   "description": "Table feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -10,25 +10,25 @@
     "ckeditor5-plugin"
   ],
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^16.0.0",
-    "@ckeditor/ckeditor5-ui": "^16.0.0",
-    "@ckeditor/ckeditor5-widget": "^16.0.0",
+    "@ckeditor/ckeditor5-core": "^17.0.0",
+    "@ckeditor/ckeditor5-ui": "^17.0.0",
+    "@ckeditor/ckeditor5-widget": "^17.0.0",
     "lodash-es": "^4.17.10"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-alignment": "^16.0.0",
-    "@ckeditor/ckeditor5-block-quote": "^16.0.0",
-    "@ckeditor/ckeditor5-clipboard": "^16.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^16.0.0",
-    "@ckeditor/ckeditor5-engine": "^16.0.0",
-    "@ckeditor/ckeditor5-image": "^16.0.0",
-    "@ckeditor/ckeditor5-indent": "^16.0.0",
-    "@ckeditor/ckeditor5-list": "^16.0.0",
-    "@ckeditor/ckeditor5-media-embed": "^16.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^16.0.0",
-    "@ckeditor/ckeditor5-typing": "^16.0.0",
-    "@ckeditor/ckeditor5-undo": "^16.0.0",
-    "@ckeditor/ckeditor5-utils": "^16.0.0",
+    "@ckeditor/ckeditor5-alignment": "^17.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^17.0.0",
+    "@ckeditor/ckeditor5-clipboard": "^17.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^17.0.0",
+    "@ckeditor/ckeditor5-engine": "^17.0.0",
+    "@ckeditor/ckeditor5-image": "^17.0.0",
+    "@ckeditor/ckeditor5-indent": "^17.0.0",
+    "@ckeditor/ckeditor5-list": "^17.0.0",
+    "@ckeditor/ckeditor5-media-embed": "^17.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^17.0.0",
+    "@ckeditor/ckeditor5-typing": "^17.0.0",
+    "@ckeditor/ckeditor5-undo": "^17.0.0",
+    "@ckeditor/ckeditor5-utils": "^17.0.0",
     "eslint": "^5.5.0",
     "eslint-config-ckeditor5": "^2.0.0",
     "husky": "^1.3.1",

+ 1 - 1
packages/ckeditor5-table/src/commands/insertcolumncommand.js

@@ -13,7 +13,7 @@ import { findAncestor } from './utils';
 /**
  * The insert column command.
  *
- * The command is registered by {@link module:table/tableediting~TableEditing} as `'insertTableColumnLeft'` and
+ * The command is registered by {@link module:table/tableediting~TableEditing} as the `'insertTableColumnLeft'` and
  * `'insertTableColumnRight'` editor commands.
  *
  * To insert a column to the left of the selected cell, execute the following command:

+ 1 - 1
packages/ckeditor5-table/src/commands/insertrowcommand.js

@@ -13,7 +13,7 @@ import { findAncestor } from './utils';
 /**
  * The insert row command.
  *
- * The command is registered by {@link module:table/tableediting~TableEditing} as `'insertTableRowBelow'` and
+ * The command is registered by {@link module:table/tableediting~TableEditing} as the `'insertTableRowBelow'` and
  * `'insertTableRowAbove'` editor commands.
  *
  * To insert a row below the selected cell, execute the following command:

+ 1 - 1
packages/ckeditor5-table/src/commands/inserttablecommand.js

@@ -13,7 +13,7 @@ import { findOptimalInsertionPosition } from '@ckeditor/ckeditor5-widget/src/uti
 /**
  * The insert table command.
  *
- * The command is registered by {@link module:table/tableediting~TableEditing} as `'insertTable'` editor command.
+ * The command is registered by {@link module:table/tableediting~TableEditing} as the `'insertTable'` editor command.
  *
  * To insert a table at the current selection, execute the command and specify the dimensions:
  *

+ 6 - 6
packages/ckeditor5-table/src/commands/mergecellcommand.js

@@ -14,7 +14,7 @@ import { findAncestor, updateNumericAttribute } from './utils';
 /**
  * The merge cell command.
  *
- * The command is registered by {@link module:table/tableediting~TableEditing} as `'mergeTableCellRight'`, `'mergeTableCellLeft'`,
+ * The command is registered by {@link module:table/tableediting~TableEditing} as the `'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.
@@ -240,7 +240,7 @@ function getVerticalCell( tableCell, direction ) {
 	return cellToMergeData && cellToMergeData.cell;
 }
 
-// Properly removes empty row from a table. Will update `rowspan` attribute of cells that overlaps removed row.
+// Properly removes an empty row from a table. It will update the `rowspan` attribute of cells that overlap the removed row.
 //
 // @param {module:engine/model/element~Element} removedTableCellRow
 // @param {module:engine/model/writer~Writer} writer
@@ -260,9 +260,9 @@ function removeEmptyRow( removedTableCellRow, writer ) {
 	writer.remove( removedTableCellRow );
 }
 
-// Merges two table cells - will ensure that after merging cells with empty paragraph the result table cell will only have one paragraph.
-// If one of the merged table cell is empty the merged table cell will have contents of the non-empty table cell.
-// If both are empty the merged table cell will have only one empty paragraph.
+// Merges two table cells. It will ensure that after merging cells with an empty paragraph, the resulting table cell will only have one
+// paragraph. If one of the merged table cell is empty, the merged table cell will have the contents of the non-empty table cell.
+// If both are empty, the merged table cell will have only one empty paragraph.
 //
 // @param {module:engine/model/element~Element} cellToRemove
 // @param {module:engine/model/element~Element} cellToExpand
@@ -280,7 +280,7 @@ function mergeTableCells( cellToRemove, cellToExpand, writer ) {
 	writer.remove( cellToRemove );
 }
 
-// Checks if passed table cell contains empty paragraph.
+// Checks if the passed table cell contains an empty paragraph.
 //
 // @param {module:engine/model/element~Element} tableCell
 // @returns {Boolean}

+ 1 - 1
packages/ckeditor5-table/src/commands/removecolumncommand.js

@@ -15,7 +15,7 @@ import { findAncestor, updateNumericAttribute } from './utils';
 /**
  * The remove column command.
  *
- * The command is registered by {@link module:table/tableediting~TableEditing} as `'removeTableColumn'` editor command.
+ * The command is registered by {@link module:table/tableediting~TableEditing} as the `'removeTableColumn'` editor command.
  *
  * To remove the column containing the selected cell, execute the command:
  *

+ 2 - 2
packages/ckeditor5-table/src/commands/removerowcommand.js

@@ -15,7 +15,7 @@ import { findAncestor, updateNumericAttribute } from './utils';
 /**
  * The remove row command.
  *
- * The command is registered by {@link module:table/tableediting~TableEditing} as `'removeTableRow'` editor command.
+ * The command is registered by {@link module:table/tableediting~TableEditing} as the `'removeTableRow'` editor command.
  *
  * To remove the row containing the selected cell, execute the command:
  *
@@ -105,7 +105,7 @@ export default class RemoveRowCommand extends Command {
 	}
 }
 
-// Returns a cell to focus on the same column of the focused table cell before removing a row.
+// Returns a cell that should be focused before removing the row, belonging to the same column as the currently focused cell.
 function getCellToFocus( table, removedRow, columnToFocus ) {
 	const row = table.getChild( removedRow );
 

+ 3 - 3
packages/ckeditor5-table/src/commands/setheadercolumncommand.js

@@ -14,7 +14,7 @@ import { findAncestor, updateNumericAttribute } from './utils';
 /**
  * The header column command.
  *
- * The command is registered by {@link module:table/tableediting~TableEditing} as `'setTableColumnHeader'` editor command.
+ * The command is registered by {@link module:table/tableediting~TableEditing} as the `'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:
@@ -62,8 +62,8 @@ export default class SetHeaderColumnCommand extends Command {
 	 *
 	 * @fires execute
 	 * @param {Object} [options]
-	 * @param {Boolean} [options.forceValue] If set, the command will set (`true`) or unset (`false`) header columns according to
-	 * `forceValue` parameter instead of the current model state.
+	 * @param {Boolean} [options.forceValue] If set, the command will set (`true`) or unset (`false`) the header columns according to
+	 * the `forceValue` parameter instead of the current model state.
 	 */
 	execute( options = {} ) {
 		const model = this.editor.model;

+ 3 - 3
packages/ckeditor5-table/src/commands/setheaderrowcommand.js

@@ -15,7 +15,7 @@ import TableWalker from '../tablewalker';
 /**
  * The header row command.
  *
- * The command is registered by {@link module:table/tableediting~TableEditing} as `'setTableColumnHeader'` editor command.
+ * The command is registered by {@link module:table/tableediting~TableEditing} as the `'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:
  *
@@ -61,8 +61,8 @@ export default class SetHeaderRowCommand extends Command {
 	 *
 	 * @fires execute
 	 * @param {Object} options
-	 * @param {Boolean} [options.forceValue] If set, the command will set (`true`) or unset (`false`) header rows according to `forceValue`
-	 * parameter instead of the current model state.
+	 * @param {Boolean} [options.forceValue] If set, the command will set (`true`) or unset (`false`) the header rows according to
+	 * the `forceValue` parameter instead of the current model state.
 	 */
 	execute( options = {} ) {
 		const model = this.editor.model;

+ 1 - 1
packages/ckeditor5-table/src/commands/splitcellcommand.js

@@ -13,7 +13,7 @@ import { findAncestor } from './utils';
 /**
  * The split cell command.
  *
- * The command is registered by {@link module:table/tableediting~TableEditing} as `'splitTableCellVertically'`
+ * The command is registered by {@link module:table/tableediting~TableEditing} as the `'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:

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

@@ -10,11 +10,11 @@
 import { isObject } from 'lodash-es';
 
 /**
- * Returns the parent element of given name. Returns undefined if positionOrElement is not inside desired parent.
+ * Returns the parent element of the given name. Returns undefined if the position or the element is not inside the desired parent.
  *
- * @param {String} parentName Name of parent element to find.
- * @param {module:engine/model/position~Position|module:engine/model/element~Element} positionOrElement
- * Position or parentElement to start searching.
+ * @param {String} parentName The name of the parent element to find.
+ * @param {module:engine/model/position~Position|module:engine/model/position~Position} positionOrElement The position or
+ * the parentElement to start searching.
  * @returns {module:engine/model/element~Element|module:engine/model/documentfragment~DocumentFragment}
  */
 export function findAncestor( parentName, positionOrElement ) {
@@ -32,11 +32,11 @@ export function findAncestor( parentName, positionOrElement ) {
 /**
  * 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 {String} key An attribute key.
  * @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/item~Item} item A model item on which the attribute will be set.
  * @param {module:engine/model/writer~Writer} writer
- * @param {*} defaultValue Default attribute value. If a value is lower or equal, it will be unset.
+ * @param {*} defaultValue The 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 ) {
@@ -47,11 +47,11 @@ export function updateNumericAttribute( key, value, item, writer, defaultValue =
 }
 
 /**
- * Common method to create empty table cell - it will create proper model structure as table cell must have at least one block inside.
+ * A common method to create an empty table cell. It creates a proper model structure as a table cell must have at least one block inside.
  *
- * @param {module:engine/model/writer~Writer} writer Model writer.
- * @param {module:engine/model/position~Position} insertPosition Position at which table cell should be inserted.
- * @param {Object} attributes Element's attributes.
+ * @param {module:engine/model/writer~Writer} writer The model writer.
+ * @param {module:engine/model/position~Position} insertPosition The position at which the table cell should be inserted.
+ * @param {Object} attributes The element attributes.
  */
 export function createEmptyTableCell( writer, insertPosition, attributes = {} ) {
 	const tableCell = writer.createElement( 'tableCell', attributes );
@@ -64,7 +64,7 @@ export function createEmptyTableCell( writer, insertPosition, attributes = {} )
  *
  * If a string is passed, it is treated as a single value (pass-through).
  *
- *		// returns 'foo':
+ *		// Returns 'foo':
  *		getSingleValue( { top: 'foo', right: 'foo', bottom: 'foo', left: 'foo' } );
  *		getSingleValue( 'foo' );
  *

+ 9 - 9
packages/ckeditor5-table/src/converters/downcast.js

@@ -169,7 +169,7 @@ export function downcastInsertCell( options = {} ) {
 }
 
 /**
- * Conversion helper that acts on heading rows table attribute change.
+ * Conversion helper that acts on heading row table attribute change.
  *
  * This converter will:
  *
@@ -246,9 +246,9 @@ export function downcastTableHeadingRowsChange( options = {} ) {
 }
 
 /**
- * Conversion helper that acts on heading columns table attribute change.
+ * Conversion helper that acts on heading column table attribute change.
  *
- * Depending on changed attributes this converter will rename `<td` to `<th>` elements or vice versa depending of the cell column index.
+ * Depending on changed attributes this converter will rename `<td` to `<th>` elements or vice versa depending on the cell column index.
  *
  * @returns {Function} Conversion helper.
  */
@@ -317,7 +317,7 @@ export function downcastRemoveRow() {
 
 // Renames an existing table cell in the view to a given element name.
 //
-// **Note** This method will not do anything if a view table cell was not yet converted.
+// **Note** This method will not do anything if a view table cell has not been converted yet.
 //
 // @param {module:engine/model/element~Element} tableCell
 // @param {String} desiredCellElementName
@@ -414,7 +414,7 @@ function createViewTableCellElement( tableWalkerValue, tableAttributes, insertPo
 	}
 }
 
-// Creates `<tr>` view element.
+// Creates a `<tr>` view element.
 //
 // @param {module:engine/view/element~Element} tableRow
 // @param {Number} rowIndex
@@ -469,7 +469,7 @@ 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 with caching.
 //
 // @param {String} sectionName
 // @param {module:engine/view/element~Element} viewTable
@@ -526,7 +526,7 @@ function removeTableSectionIfEmpty( sectionName, tableElement, conversionApi ) {
 
 // Moves view table rows associated with passed model rows to the provided table section element.
 //
-// **Note** This method will skip not converted table rows.
+// **Note**: This method will skip not converted table rows.
 //
 // @param {Array.<module:engine/model/element~Element>} rowsToMove
 // @param {module:engine/view/element~Element} viewTableSection
@@ -546,7 +546,7 @@ function moveViewRowsToTableSection( rowsToMove, viewTableSection, conversionApi
 	}
 }
 
-// Properly finds '<table>' element inside `<figure>` widget.
+// Finds a '<table>' element inside the `<figure>` widget.
 //
 // @param {module:engine/view/element~Element} viewFigure
 function getViewTable( viewFigure ) {
@@ -557,7 +557,7 @@ function getViewTable( viewFigure ) {
 	}
 }
 
-// Checks if element has any attribute set.
+// Checks if an element has any attributes set.
 //
 // @param {module:engine/model/element~Element element
 // @returns {Boolean}

+ 7 - 7
packages/ckeditor5-table/src/converters/table-cell-paragraph-post-fixer.js

@@ -8,9 +8,9 @@
  */
 
 /**
- * Injects a table cell post-fixer into the model which inserts `paragraph` element into empty table cells.
+ * Injects a table cell post-fixer into the model which inserts a `paragraph` element into empty table cells.
  *
- * A table cell must contain at least one block element as a child. An empty table cell will have empty `paragraph` as a child.
+ * A table cell must contain at least one block element as a child. An empty table cell will have an empty `paragraph` as a child.
  *
  *		<table>
  *			<tableRow>
@@ -91,8 +91,8 @@ function fixTableRow( tableRow, writer ) {
 }
 
 // Fixes all table cell content by:
-// - adding paragraph to a table cell without any child.
-// - wrapping direct $text in <paragraph>.
+// - Adding a paragraph to a table cell without any child.
+// - Wrapping direct $text in a `<paragraph>`.
 //
 // @param {module:engine/model/element~Element} table
 // @param {module:engine/model/writer~Writer} writer
@@ -117,9 +117,9 @@ function fixTableCellContent( tableCell, writer ) {
 	return !!textNodes.length;
 }
 
-// Check if differ change should fix table cell. This happens on:
-// - removing content from table cell (ie tableCell can be left empty).
-// - adding text node directly into a table cell.
+// Checks if a differ change should fix the table cell. This happens on:
+// - Removing content from the table cell (i.e. `tableCell` can be left empty).
+// - Adding a text node directly into a table cell.
 //
 // @param {Object} differ change entry
 // @returns {Boolean}

+ 8 - 8
packages/ckeditor5-table/src/converters/table-cell-refresh-post-fixer.js

@@ -11,10 +11,10 @@
  * Injects a table cell post-fixer into the model which marks the table cell in the differ to have it re-rendered.
  *
  * Model `paragraph` inside a table cell can be rendered as `<span>` or `<p>`. It is rendered as `<span>` if this is the only block
- * element in that table cell and it doesn't have any attributes. It is rendered as `<p>` otherwise.
+ * element in that table cell and it does not have any attributes. It is rendered as `<p>` otherwise.
  *
- * When table cell content changes, for example a second `paragraph` element is added we need to ensure that the first `paragraph` is
- * re-rendered so it changes to `<p>` from `<span>`. The easiest way to do it is to re-render whole table cell.
+ * When table cell content changes, for example a second `paragraph` element is added, we need to ensure that the first `paragraph` is
+ * re-rendered so it changes from `<span>` to `<p>`. The easiest way to do it is to re-render the entire table cell.
  *
  * @param {module:engine/model/model~Model} model
  */
@@ -49,16 +49,16 @@ function tableCellRefreshPostFixer( model ) {
 
 // Checks if the model table cell requires refreshing to be re-rendered to a proper state in the view.
 //
-// This methods detects changes that will require renaming <span> to <p> (or vice versa) in the view.
+// This method detects changes that will require renaming `<span>` to `<p>` (or vice versa) in the view.
 //
 // This method is a simple heuristic that checks only a single change and will sometimes give a false positive result when multiple changes
 // will result in a state that does not require renaming in the view (but will be seen as requiring a refresh).
 //
-// For instance: a `<span>` should be renamed to `<p>` when adding an attribute to a `<paragraph>`.
-// But adding one attribute and removing another one will result in a false positive: the check for added attribute will see one attribute
-// on a paragraph and will falsy qualify such change as adding an attribute to a paragraph without any attribute.
+// For instance: A `<span>` should be renamed to `<p>` when adding an attribute to a `<paragraph>`.
+// But adding one attribute and removing another one will result in a false positive: the check for an added attribute will see one
+// attribute on a paragraph and will falsely qualify such change as adding an attribute to a paragraph without any attribute.
 //
-// @param {module:engine/model/element~Element} tableCell Table cell to check.
+// @param {module:engine/model/element~Element} tableCell The table cell to check.
 // @param {String} type Type of change.
 function checkRefresh( tableCell, type ) {
 	const hasInnerParagraph = Array.from( tableCell.getChildren() ).some( child => child.is( 'paragraph' ) );

+ 39 - 39
packages/ckeditor5-table/src/converters/table-layout-post-fixer.js

@@ -19,19 +19,19 @@ import TableWalker from './../tablewalker';
  * The correct structure means that:
  *
  * * All table rows have the same size.
- * * None of a table cells that extend vertically beyond their section (either header or body).
- * * A table cell has always at least one element as child.
+ * * None of the table cells extend vertically beyond their section (either header or body).
+ * * A table cell has always at least one element as a child.
  *
  * If the table structure is not correct, the post-fixer will automatically correct it in two steps:
  *
- * 1. It will clip table cells that extends beyond it section.
- * 2. It will add empty table cells to those rows which are narrower then the widest table row.
+ * 1. It will clip table cells that extend beyond their section.
+ * 2. It will add empty table cells to the rows that are narrower than the widest table row.
  *
  * ## Clipping overlapping table cells
  *
- * Such situation may occur when pasting a table (or part of a table) to the editor from external sources.
+ * Such situation may occur when pasting a table (or a part of a table) to the editor from external sources.
  *
- * For example, see the following table which has the cell (FOO) with the rowspan attribute (2):
+ * For example, see the following table which has a cell (FOO) with the rowspan attribute (2):
  *
  *		<table headingRows="1">
  *			<tableRow>
@@ -44,7 +44,7 @@ import TableWalker from './../tablewalker';
  *			</tableRow>
  *		</table>
  *
- * will be rendered in the view as:
+ * It will be rendered in the view as:
  *
  *		<table>
  *			<thead>
@@ -61,22 +61,22 @@ import TableWalker from './../tablewalker';
  *			</tbody>
  *		</table>
  *
- * In the above example the table will be rendered as a table with two rows - one in the header and second one in the body.
- * The table cell (FOO) cannot span over multiple rows as it would expand from the header to the body section.
- * The `rowspan` attribute must be changed to (1). The value (1) is a default value of the `rowspan` attribute
+ * In the above example the table will be rendered as a table with two rows: one in the header and second one in the body.
+ * The table cell (FOO) cannot span over multiple rows as it would extend from the header to the body section.
+ * The `rowspan` attribute must be changed to (1). The value (1) is the default value of the `rowspan` attribute
  * so the `rowspan` attribute will be removed from the model.
  *
- * The table cell with BAZ contents will be in the first column of the table.
+ * The table cell with BAZ in the content will be in the first column of the table.
  *
  * ## Adding missing table cells
  *
- * The table post-fixer will insert empty table cells to equalize table rows sizes (number of columns).
- * The size of a table row is calculated by counting column spans of table cells - both horizontal (from the same row) and
- * vertical (from rows above).
+ * The table post-fixer will insert empty table cells to equalize table row sizes (the number of columns).
+ * The size of a table row is calculated by counting column spans of table cells, both horizontal (from the same row) and
+ * vertical (from the rows above).
  *
- * In the above example, the table row in the body section of the table is narrower then the row from the header - it has two cells
- * with the default colspan (1). The header row has one cell with colspan (1) and second with colspan (2).
- * The table cell (FOO) does not expand beyond the head section (and as such will be fixed in the first step of this post-fixer).
+ * In the above example, the table row in the body section of the table is narrower then the row from the header: it has two cells
+ * with the default colspan (1). The header row has one cell with colspan (1) and the second with colspan (2).
+ * The table cell (FOO) does not extend beyond the head section (and as such will be fixed in the first step of this post-fixer).
  * The post-fixer will add a missing table cell to the row in the body section of the table.
  *
  * The table from the above example will be fixed and rendered to the view as below:
@@ -96,15 +96,15 @@ import TableWalker from './../tablewalker';
  *			</tbody>
  *		</table>
  *
- * ## Collaboration & Undo - Expectations vs post-fixer results
+ * ## Collaboration and undo - Expectations vs post-fixer results
  *
- * The table post-fixer only ensures proper structure without deeper analysis of the nature of a change. As such, it might lead
- * to a structure which was not intended by the user changes. In particular, it will also fix undo steps (in conjunction with collaboration)
- * in which editor content might not return to the original state.
+ * The table post-fixer only ensures proper structure without a deeper analysis of the nature of the change. As such, it might lead
+ * to a structure which was not intended by the user. In particular, it will also fix undo steps (in conjunction with collaboration)
+ * in which the editor content might not return to the original state.
  *
- * This will usually happen when one or more users changes size of the table.
+ * This will usually happen when one or more users change the size of the table.
  *
- * As en example see a table below:
+ * As an example see the table below:
  *
  *		<table>
  *			<tbody>
@@ -119,11 +119,11 @@ import TableWalker from './../tablewalker';
  *			</tbody>
  *		</table>
  *
- * and user actions:
+ * and the user actions:
  *
- * 1. Both user have table with two rows and two columns.
- * 2. User A adds a column at the end of the table - this will insert empty table cells to two rows.
- * 3. User B adds a row at the end of the table- this will insert a row with two empty table cells.
+ * 1. Both users have a table with two rows and two columns.
+ * 2. User A adds a column at the end of the table. This will insert empty table cells to two rows.
+ * 3. User B adds a row at the end of the table. This will insert a row with two empty table cells.
  * 4. Both users will have a table as below:
  *
  *
@@ -146,7 +146,7 @@ import TableWalker from './../tablewalker';
  *			</tbody>
  *		</table>
  *
- * The last row is shorter then others so table post-fixer will add empty row to tha last row:
+ * The last row is shorter then others so the table post-fixer will add an empty row to the last row:
  *
  *		<table>
  *			<tbody>
@@ -163,14 +163,14 @@ import TableWalker from './../tablewalker';
  *				<tr>
  *					<td>(empty, inserted by B)</td>
  *					<td>(empty, inserted by B)</td>
- *					<td>(empty, inserted by a post-fixer)</td>
+ *					<td>(empty, inserted by the post-fixer)</td>
  *				</tr>
  *			</tbody>
  *		</table>
  *
- * Unfortunately undo doesn't know the nature of changes and depending which user will apply post-fixer changes undoing them might lead to
- * broken table. If User B will undo inserting column to a table the undo engine will undo only operations of
- * inserting empty cells to rows from initial table state (row 1 & 2) but the cell in post-fixed row will remain:
+ * Unfortunately undo does not know the nature of the changes and depending on which user applies the post-fixer changes, undoing them
+ * might lead to a broken table. If User B undoes inserting the column to the table, the undo engine will undo only the operations of
+ * inserting empty cells to rows from the initial table state (row 1 and 2) but the cell in the post-fixed row will remain:
  *
  *		<table>
  *			<tbody>
@@ -190,7 +190,7 @@ import TableWalker from './../tablewalker';
  *			</tbody>
  *		</table>
  *
- * After undo the table post-fixer will detect that two rows are shorter then other and will fix table to:
+ * After undo, the table post-fixer will detect that two rows are shorter than others and will fix the table to:
  *
  *		<table>
  *			<tbody>
@@ -260,11 +260,11 @@ function tableLayoutPostFixer( writer, model ) {
 	return wasFixed;
 }
 
-// Fixes the invalid value of the rowspan attribute because a table cell cannot vertically extend beyond the table section it belongs to.
+// Fixes the invalid value of the `rowspan` attribute because a table cell cannot vertically extend beyond the table section it belongs to.
 //
 // @param {module:engine/model/element~Element} table
 // @param {module:engine/model/writer~Writer} writer
-// @returns {Boolean} Returns true if table was fixed.
+// @returns {Boolean} Returns `true` if the table was fixed.
 function fixTableCellsRowspan( table, writer ) {
 	let wasFixed = false;
 
@@ -285,7 +285,7 @@ function fixTableCellsRowspan( table, writer ) {
 //
 // @param {module:engine/model/element~Element} table
 // @param {module:engine/model/writer~Writer} writer
-// @returns {Boolean} Returns true if table was fixed.
+// @returns {Boolean} Returns `true` if the table was fixed.
 function fixTableRowsSizes( table, writer ) {
 	let wasFixed = false;
 
@@ -313,8 +313,8 @@ function fixTableRowsSizes( table, writer ) {
 	return wasFixed;
 }
 
-// Searches for the table cells that extends beyond the table section to which they belong to. It will return an array of objects
-// that holds table cells to be trimmed and correct value of a rowspan attribute to set.
+// Searches for table cells that extend beyond the table section to which they belong to. It will return an array of objects
+// that stores table cells to be trimmed and the correct value of the `rowspan` attribute to set.
 //
 // @param {module:engine/model/element~Element} table
 // @returns {Array.<{{cell, rowspan}}>}
@@ -364,7 +364,7 @@ function getRowsLengths( table ) {
 	return lengths;
 }
 
-// Checks if the differ entry for an attribute change is one of table's attributes.
+// Checks if the differ entry for an attribute change is one of the table's attributes.
 //
 // @param entry
 // @returns {Boolean}

+ 4 - 4
packages/ckeditor5-table/src/converters/tableproperties.js

@@ -8,7 +8,7 @@
  */
 
 /**
- * Conversion helper for upcasting attribute using normalized styles.
+ * Conversion helper for upcasting attributes using normalized styles.
  *
  * @param {module:engine/conversion/conversion~Conversion} conversion
  * @param {String} modelElement
@@ -31,7 +31,7 @@ export function upcastStyleToAttribute( conversion, modelElement, modelAttribute
 }
 
 /**
- * Conversion helper for upcasting border styles for view element.
+ * Conversion helper for upcasting border styles for view elements.
  *
  * @param {module:engine/conversion/conversion~Conversion} conversion
  * @param {String} viewElementName
@@ -71,7 +71,7 @@ export function upcastBorderStyles( conversion, viewElementName ) {
 }
 
 /**
- * Conversion helper for downcasting attribute to a style.
+ * Conversion helper for downcasting an attribute to a style.
  *
  * @param {module:engine/conversion/conversion~Conversion} conversion
  * @param {String} modelElement
@@ -94,7 +94,7 @@ export function downcastAttributeToStyle( conversion, modelElement, modelAttribu
 }
 
 /**
- * Conversion helper for downcasting attributes from model's table to a view table (not to figure).
+ * Conversion helper for downcasting attributes from the model table to a view table (not to `<figure>`).
  *
  * @param {module:engine/conversion/conversion~Conversion} conversion
  * @param {String} modelAttribute

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

@@ -140,9 +140,9 @@ export function upcastTableCell( elementName ) {
 
 // Scans table rows and extracts required metadata from the table:
 //
-// headingRows    - the number of rows that goes as table header.
-// headingColumns - max number of row headings.
-// rows           - sorted `<tr>`s as they should go into the model - ie. if `<thead>` is inserted after `<tbody>` in the view.
+// headingRows    - The number of rows that go as table headers.
+// headingColumns - The maximum number of row headings.
+// rows           - Sorted `<tr>` elements 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}}
@@ -152,9 +152,9 @@ function scanTable( viewTable ) {
 		headingColumns: 0
 	};
 
-	// 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.
+	// The `<tbody>` and `<thead>` sections in the DOM do not have to be in order `<thead>` -> `<tbody>` and there might be more than one
+	// of them.
+	// As the model does not have these sections, rows from different sections must be sorted.
 	// For example, below is a valid HTML table:
 	//
 	//		<table>
@@ -163,7 +163,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 and 3 as (body).
+	// But browsers will render rows in order as: 1 as heading and 2 and 3 as the body.
 	const headRows = [];
 	const bodyRows = [];
 
@@ -208,12 +208,12 @@ function scanTable( viewTable ) {
 	return tableMeta;
 }
 
-// Scans `<tr>` and its children for metadata:
+// Scans a `<tr>` element and its children for metadata:
 // - For heading row:
-//     - either adds this row to heading or body rows.
-//     - updates number of heading rows.
+//     - Adds this row to either the heading or the body rows.
+//     - Updates the number of heading rows.
 // - For body rows:
-//     - calculates the number of column headings.
+//     - Calculates the number of column headings.
 //
 // @param {module:engine/view/element~Element} tr
 // @returns {Number}

+ 3 - 3
packages/ckeditor5-table/src/table.js

@@ -20,7 +20,7 @@ import '../theme/table.css';
  *
  * For a detailed overview, check the {@glink features/table Table feature documentation}.
  *
- * This is a "glue" plugin which loads the {@link module:table/tableediting~TableEditing table editing feature}
+ * This is a "glue" plugin that loads the {@link module:table/tableediting~TableEditing table editing feature}
  * and {@link module:table/tableui~TableUI table UI feature}.
  *
  * @extends module:core/plugin~Plugin
@@ -42,7 +42,7 @@ export default class Table extends Plugin {
 }
 
 /**
- * The configuration of the table features. Used by the table features in the `@ckeditor/ckeditor5-table` package.
+ * The configuration of the table feature. Used by the table feature in the `@ckeditor/ckeditor5-table` package.
  *
  *		ClassicEditor
  *			.create( editorElement, {
@@ -65,7 +65,7 @@ export default class Table extends Plugin {
  */
 
 /**
- * An array of colors definitions (either strings or objects).
+ * An array of color definitions (either strings or objects).
  *
  *		const colors = [
  *			{

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

@@ -14,7 +14,7 @@ import TableCellPropertiesEditing from './tablecellproperties/tablecellpropertie
 /**
  * The table cell properties feature.
  *
- * This is a "glue" plugin which loads the
+ * This is a "glue" plugin that loads the
  * {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing table cell properties editing feature} and
  * the {@link module:table/tablecellproperties/tablecellpropertiesui~TableCellPropertiesUI table cell properties UI feature}.
  *
@@ -37,10 +37,10 @@ export default class TableCellProperties extends Plugin {
 }
 
 /**
- * A configuration of the table cell properties user interface (balloon). It allows to define:
+ * The configuration of the table cell properties user interface (balloon). It allows to define:
  *
- * * the color palette for the cell border color style field (`tableCellProperties.borderColors`),
- * * the color palette for the cell background style field (`tableCellProperties.backgroundColors`).
+ * * The color palette for the cell border color style field (`tableCellProperties.borderColors`),
+ * * The color palette for the cell background style field (`tableCellProperties.backgroundColors`).
  *
  *		const tableConfig = {
  *			tableCellProperties: {
@@ -61,7 +61,7 @@ export default class TableCellProperties extends Plugin {
  *			}
  *		};
  *
- * **Note**: The configurations do not impact the data being loaded into the editor,
+ * **Note**: The configurations do not impact the data loaded into the editor,
  * i.e. they do not limit or filter the colors in the data. They are used only in the user interface
  * allowing users to pick colors in a more convenient way.
  *

+ 2 - 2
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellbackgroundcolorcommand.js

@@ -13,7 +13,7 @@ import TableCellPropertyCommand from './tablecellpropertycommand';
  * The table cell background color command.
  *
  * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
- * `'tableCellBackgroundColor'` editor command.
+ * the `'tableCellBackgroundColor'` editor command.
  *
  * To change the background color of selected cells, execute the command:
  *
@@ -21,7 +21,7 @@ import TableCellPropertyCommand from './tablecellpropertycommand';
  *			value: '#f00'
  *		} );
  *
- * @extends module:core/command~Command
+ * @extends module:table/tablecellproperties/commands/tablecellpropertycommand~TableCellPropertyCommand
  */
 export default class TableCellBackgroundColorCommand extends TableCellPropertyCommand {
 	/**

+ 3 - 3
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellbordercolorcommand.js

@@ -14,7 +14,7 @@ import { getSingleValue } from '../../commands/utils';
  * The table cell border color command.
  *
  * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
- * `'tableCellBorderColor'` editor command.
+ * the `'tableCellBorderColor'` editor command.
  *
  * To change the border color of selected cells, execute the command:
  *
@@ -22,11 +22,11 @@ import { getSingleValue } from '../../commands/utils';
  *			value: '#f00'
  *		} );
  *
- * @extends module:core/command~Command
+ * @extends module:table/tablecellproperties/commands/tablecellpropertycommand~TableCellPropertyCommand
  */
 export default class TableCellBorderColorCommand extends TableCellPropertyCommand {
 	/**
-	 * Creates a new `TableCellBorderWidthCommand` instance.
+	 * Creates a new `TableCellBorderColorCommand` instance.
 	 *
 	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
 	 */

+ 3 - 3
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellborderstylecommand.js

@@ -14,7 +14,7 @@ import { getSingleValue } from '../../commands/utils';
  * The table cell border style command.
  *
  * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
- * `'tableCellBorderStyle'` editor command.
+ * the `'tableCellBorderStyle'` editor command.
  *
  * To change the border style of selected cells, execute the command:
  *
@@ -22,11 +22,11 @@ import { getSingleValue } from '../../commands/utils';
  *			value: 'dashed'
  *		} );
  *
- * @extends module:core/command~Command
+ * @extends module:table/tablecellproperties/commands/tablecellpropertycommand~TableCellPropertyCommand
  */
 export default class TableCellBorderStyleCommand extends TableCellPropertyCommand {
 	/**
-	 * Creates a new `TableCellBorderWidthCommand` instance.
+	 * Creates a new `TableCellBorderStyleCommand` instance.
 	 *
 	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
 	 */

+ 2 - 2
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellborderwidthcommand.js

@@ -14,7 +14,7 @@ import TableCellPropertyCommand from './tablecellpropertycommand';
  * The table cell border width command.
  *
  * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
- * `'tableCellBorderWidth'` editor command.
+ * the `'tableCellBorderWidth'` editor command.
  *
  * To change the border width of selected cells, execute the command:
  *
@@ -30,7 +30,7 @@ import TableCellPropertyCommand from './tablecellpropertycommand';
  *
  * will set the `borderWidth` attribute to `'5px'` in the model.
  *
- * @extends module:core/command~Command
+ * @extends module:table/tablecellproperties/commands/tablecellpropertycommand~TableCellPropertyCommand
  */
 export default class TableCellBorderWidthCommand extends TableCellPropertyCommand {
 	/**

+ 2 - 2
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellheightcommand.js

@@ -14,7 +14,7 @@ import TableCellPropertyCommand from './tablecellpropertycommand';
  * The table cell height command.
  *
  * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
- * `'tableCellHeight'` editor command.
+ * the `'tableCellHeight'` editor command.
  *
  * To change the height of selected cells, execute the command:
  *
@@ -30,7 +30,7 @@ import TableCellPropertyCommand from './tablecellpropertycommand';
  *
  * will set the `height` attribute to `'50px'` in the model.
  *
- * @extends module:table/tablecellproperties/commands/tablecellpropertycommand
+ * @extends module:table/tablecellproperties/commands/tablecellpropertycommand~TableCellPropertyCommand
  */
 export default class TableCellHeightCommand extends TableCellPropertyCommand {
 	/**

+ 2 - 2
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellhorizontalalignmentcommand.js

@@ -13,7 +13,7 @@ import TableCellPropertyCommand from './tablecellpropertycommand';
  * The table cell horizontal alignment command.
  *
  * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
- * `'tableCellHorizontalAlignment'` editor command.
+ * the `'tableCellHorizontalAlignment'` editor command.
  *
  * To change the horizontal text alignment of selected cells, execute the command:
  *
@@ -21,7 +21,7 @@ import TableCellPropertyCommand from './tablecellpropertycommand';
  *			value: 'right'
  *		} );
  *
- * @extends module:table/tablecellproperties/commands/tablecellpropertycommand
+ * @extends module:table/tablecellproperties/commands/tablecellpropertycommand~TableCellPropertyCommand
  */
 export default class TableCellHorizontalAlignmentCommand extends TableCellPropertyCommand {
 	/**

+ 3 - 2
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellpaddingcommand.js

@@ -14,7 +14,7 @@ import TableCellPropertyCommand from './tablecellpropertycommand';
  * The table cell padding command.
  *
  * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
- * `'tableCellPadding'` editor command.
+ * the `'tableCellPadding'` editor command.
  *
  * To change the padding of selected cells, execute the command:
  *
@@ -29,7 +29,8 @@ import TableCellPropertyCommand from './tablecellpropertycommand';
  *		} );
  *
  * will set the `padding` attribute to `'5px'` in the model.
- * @extends module:table/tablecellproperties/commands/tablecellpropertycommand
+ *
+ * @extends module:table/tablecellproperties/commands/tablecellpropertycommand~TableCellPropertyCommand
  */
 export default class TableCellPaddingCommand extends TableCellPropertyCommand {
 	/**

+ 3 - 3
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellpropertycommand.js

@@ -50,9 +50,9 @@ export default class TableCellPropertyCommand extends Command {
 	 * @fires execute
 	 * @param {Object} [options]
 	 * @param {*} [options.value] If set, the command will set the attribute on selected table cells.
-	 * If it is not set, the command will remove the attribute from selected table cells.
+	 * If it is not set, the command will remove the attribute from the selected table cells.
 	 * @param {module:engine/model/batch~Batch} [options.batch] Pass the model batch instance to the command to aggregate changes,
-	 * e.g. allow a single undo step for multiple executions.
+	 * for example to allow a single undo step for multiple executions.
 	 */
 	execute( options = {} ) {
 		const model = this.editor.model;
@@ -89,7 +89,7 @@ export default class TableCellPropertyCommand extends Command {
 	}
 
 	/**
-	 * Returns the proper model value. Can be used to add a default unit to numeric values.
+	 * Returns the proper model value. It can be used to add a default unit to numeric values.
 	 *
 	 * @private
 	 * @param {*} value

+ 5 - 5
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellverticalalignmentcommand.js

@@ -13,7 +13,7 @@ import TableCellPropertyCommand from './tablecellpropertycommand';
  * The table cell vertical alignment command.
  *
  * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
- * `'tableCellVerticalAlignment'` editor command.
+ * the `'tableCellVerticalAlignment'` editor command.
  *
  * To change the vertical text alignment of selected cells, execute the command:
  *
@@ -21,15 +21,15 @@ import TableCellPropertyCommand from './tablecellpropertycommand';
  *			value: 'top'
  *		} );
  *
- * The following values are allowed corresponding to
- * [the `vertical-align` CSS attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align):
+ * The following values, corresponding to the
+ * [`vertical-align` CSS attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align), are allowed:
  *
  * * `'top'`
  * * `'bottom'`
  *
- * The `'middle'` value is default one so there's no need to set this value.
+ * The `'middle'` value is the default one so there is no need to set it.
  *
- * @extends module:table/tablecellproperties/commands/tablecellpropertycommand
+ * @extends module:table/tablecellproperties/commands/tablecellpropertycommand~TableCellPropertyCommand
  */
 export default class TableCellVerticalAlignmentCommand extends TableCellPropertyCommand {
 	/**

+ 4 - 4
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellwidthcommand.js

@@ -14,7 +14,7 @@ import TableCellPropertyCommand from './tablecellpropertycommand';
  * The table cell width command.
  *
  * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
- * `'tableCellWidth'` editor command.
+ * the `'tableCellWidth'` editor command.
  *
  * To change the width of selected cells, execute the command:
  *
@@ -22,15 +22,15 @@ import TableCellPropertyCommand from './tablecellpropertycommand';
  *			value: '50px'
  *		} );
  *
- * **Note**: This command adds a default `'px'` unit to a numeric values. Executing:
+ * **Note**: This command adds a default `'px'` unit to numeric values. Executing:
  *
  *		editor.execute( 'tableCellWidth', {
  *			value: '50'
  *		} );
  *
- * Will set `width` attribute to `'50px'` in the model.
+ * will set the `width` attribute to `'50px'` in the model.
  *
- * @extends module:table/tablecellproperties/commands/tablecellpropertycommand
+ * @extends module:table/tablecellproperties/commands/tablecellpropertycommand~TableCellPropertyCommand
  */
 export default class TableCellWidthCommand extends TableCellPropertyCommand {
 	/**

+ 8 - 8
packages/ckeditor5-table/src/tablecellproperties/tablecellpropertiesediting.js

@@ -29,21 +29,21 @@ const VALIGN_VALUES_REG_EXP = /^(top|bottom)$/;
 /**
  * The table cell properties editing feature.
  *
- * Introduces table cells's model attributes and their conversion:
+ * Introduces table cell model attributes and their conversion:
  *
  * - border: `borderStyle`, `borderColor` and `borderWidth`
  * - background color: `backgroundColor`
  * - cell padding: `padding`
  * - horizontal and vertical alignment: `horizontalAlignment`, `verticalAlignment`
- * - cell width & height: `width` & `height`
+ * - cell width and height: `width`, `height`
  *
  * It also registers commands used to manipulate the above attributes:
  *
- * - border: `'tableCellBorderStyle'`, `'tableCellBorderColor'` and `'tableCellBorderWidth'` commands
- * - background color: `'tableCellBackgroundColor'`
- * - cell padding: `'tableCellPadding'`
- * - horizontal and vertical alignment: `'tableCellHorizontalAlignment'`, `'tableCellVerticalAlignment'`
- * - width & height: `'tableCellWidth'` & `'tableCellHeight'`
+ * - border: the `'tableCellBorderStyle'`, `'tableCellBorderColor'` and `'tableCellBorderWidth'` commands
+ * - background color: the `'tableCellBackgroundColor'` command
+ * - cell padding: the `'tableCellPadding'` command
+ * - horizontal and vertical alignment: the `'tableCellHorizontalAlignment'` and `'tableCellVerticalAlignment'` commands
+ * - width and height: the `'tableCellWidth'` and `'tableCellHeight'` commands
  *
  * @extends module:core/plugin~Plugin
  */
@@ -99,7 +99,7 @@ export default class TableCellPropertiesEditing extends Plugin {
 	}
 }
 
-// Enables `'borderStyle'`, `'borderColor'` and `'borderWidth'` attributes for table cells.
+// Enables the `'borderStyle'`, `'borderColor'` and `'borderWidth'` attributes for table cells.
 //
 // @param {module:engine/model/schema~Schema} schema
 // @param {module:engine/conversion/conversion~Conversion} conversion

+ 7 - 7
packages/ckeditor5-table/src/tablecellproperties/tablecellpropertiesui.js

@@ -34,7 +34,7 @@ const ERROR_TEXT_TIMEOUT = 500;
 
 /**
  * The table cell properties UI plugin. It introduces the `'tableCellProperties'` button
- * that opens a form allowing to specify visual styling of a table cell.
+ * that opens a form allowing to specify the visual styling of a table cell.
  *
  * It uses the
  * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon plugin}.
@@ -272,7 +272,7 @@ export default class TableCellPropertiesUI extends Plugin {
 	/**
 	 * Shows the {@link #view} in the {@link #_balloon}.
 	 *
-	 * **Note**: Each time a view is shown, the new {@link #_undoStepBatch} is created that contains
+	 * **Note**: Each time a view is shown, a new {@link #_undoStepBatch} is created. It contains
 	 * all changes made to the document when the view is visible, allowing a single undo step
 	 * for all of them.
 	 *
@@ -322,7 +322,7 @@ export default class TableCellPropertiesUI extends Plugin {
 	}
 
 	/**
-	 * Returns `true` when the {@link #view} is the visible in the {@link #_balloon}.
+	 * Returns `true` when the {@link #view} is visible in the {@link #_balloon}.
 	 *
 	 * @private
 	 * @type {Boolean}
@@ -342,7 +342,7 @@ export default class TableCellPropertiesUI extends Plugin {
 	}
 
 	/**
-	 * Creates a callback that when executed upon {@link #view view's} property change
+	 * Creates a callback that when executed upon the {@link #view view's} property change
 	 * executes a related editor command with the new property value.
 	 *
 	 * @private
@@ -359,9 +359,9 @@ export default class TableCellPropertiesUI extends Plugin {
 	}
 
 	/**
-	 * Creates a callback that when executed upon {@link #view view's} property change:
-	 * * executes a related editor command with the new property value if the value is valid,
-	 * * or sets the error text next to the invalid field, if the value did not pass the validation.
+	 * Creates a callback that when executed upon the {@link #view view's} property change:
+	 * * Executes a related editor command with the new property value if the value is valid,
+	 * * Or sets the error text next to the invalid field, if the value did not pass the validation.
 	 *
 	 * @private
 	 * @param {Object} options

+ 4 - 4
packages/ckeditor5-table/src/tableediting.js

@@ -112,7 +112,7 @@ export default class TableEditing extends Plugin {
 		conversion.attributeToAttribute( { model: 'colspan', view: 'colspan' } );
 		conversion.attributeToAttribute( { model: 'rowspan', view: 'rowspan' } );
 
-		// Table heading rows and cols conversion.
+		// Table heading rows and columns conversion.
 		conversion.for( 'editingDowncast' ).add( downcastTableHeadingColumnsChange( { asWidget: true } ) );
 		conversion.for( 'dataDowncast' ).add( downcastTableHeadingColumnsChange() );
 		conversion.for( 'editingDowncast' ).add( downcastTableHeadingRowsChange( { asWidget: true } ) );
@@ -143,7 +143,7 @@ export default class TableEditing extends Plugin {
 		injectTableCellRefreshPostFixer( model );
 		injectTableCellParagraphPostFixer( model );
 
-		// Handle tab key navigation.
+		// Handle Tab key navigation.
 		this.editor.keystrokes.set( 'Tab', ( ...args ) => this._handleTabOnSelectedTable( ...args ), { priority: 'low' } );
 		this.editor.keystrokes.set( 'Tab', this._getTabHandler( true ), { priority: 'low' } );
 		this.editor.keystrokes.set( 'Shift+Tab', this._getTabHandler( false ), { priority: 'low' } );
@@ -188,7 +188,7 @@ export default class TableEditing extends Plugin {
 	 * inside table cell.
 	 *
 	 * @private
-	 * @param {Boolean} isForward Whether this handler will move selection to the next cell or previous.
+	 * @param {Boolean} isForward Whether this handler will move the selection to the next or the previous cell.
 	 */
 	_getTabHandler( isForward ) {
 		const editor = this.editor;
@@ -215,7 +215,7 @@ export default class TableEditing extends Plugin {
 			const isFirstCellInRow = currentCellIndex === 0;
 
 			if ( !isForward && isFirstCellInRow && currentRowIndex === 0 ) {
-				// It's the first cell of a table - don't do anything (stay in current position).
+				// It's the first cell of the table - don't do anything (stay in the current position).
 				return;
 			}
 

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

@@ -15,7 +15,7 @@ import TablePropertiesUI from './tableproperties/tablepropertiesui';
 /**
  * The table properties feature.
  *
- * This is a "glue" plugin which loads the
+ * This is a "glue" plugin that loads the
  * {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing table editing feature} and
  * the {@link module:table/tableproperties/tablepropertiesui~TablePropertiesUI table properties UI feature}.
  *
@@ -38,10 +38,10 @@ export default class TableProperties extends Plugin {
 }
 
 /**
- * A configuration of the table properties user interface (balloon). It allows to define:
+ * The configuration of the table properties user interface (balloon). It allows to define:
  *
- * * the color palette for the table border color style field (`tableProperties.borderColors`),
- * * the color palette for the table background style field (`tableProperties.backgroundColors`).
+ * * The color palette for the table border color style field (`tableProperties.borderColors`),
+ * * The color palette for the table background style field (`tableProperties.backgroundColors`).
  *
  *		const tableConfig = {
  *			tableProperties: {
@@ -62,7 +62,7 @@ export default class TableProperties extends Plugin {
  *			}
  *		};
  *
- * **Note**: The configurations do not impact the data being loaded into the editor,
+ * **Note**: The configurations do not impact the data loaded into the editor,
  * i.e. they do not limit or filter the colors in the data. They are used only in the user interface
  * allowing users to pick colors in a more convenient way.
  *

+ 2 - 2
packages/ckeditor5-table/src/tableproperties/commands/tablealignmentcommand.js

@@ -13,7 +13,7 @@ import TablePropertyCommand from './tablepropertycommand';
  * The table alignment command.
  *
  * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
- * `'tableAlignment'` editor command.
+ * the `'tableAlignment'` editor command.
  *
  * To change the alignment of the selected table, execute the command:
  *
@@ -21,7 +21,7 @@ import TablePropertyCommand from './tablepropertycommand';
  *			value: 'right'
  *		} );
  *
- * @extends module:table/tableproperties/commands/tablepropertycommand
+ * @extends module:table/tableproperties/commands/tablepropertycommand~TablePropertyCommand
  */
 export default class TableAlignmentCommand extends TablePropertyCommand {
 	/**

+ 2 - 2
packages/ckeditor5-table/src/tableproperties/commands/tablebackgroundcolorcommand.js

@@ -13,7 +13,7 @@ import TablePropertyCommand from './tablepropertycommand';
  * The table background color command.
  *
  * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
- * `'tableBackgroundColor'` editor command.
+ * the `'tableBackgroundColor'` editor command.
  *
  * To change the background color of the selected table, execute the command:
  *
@@ -21,7 +21,7 @@ import TablePropertyCommand from './tablepropertycommand';
  *			value: '#f00'
  *		} );
  *
- * @extends module:table/tableproperties/commands/tablepropertycommand
+ * @extends module:table/tableproperties/commands/tablepropertycommand~TablePropertyCommand
  */
 export default class TableBackgroundColorCommand extends TablePropertyCommand {
 	/**

+ 2 - 2
packages/ckeditor5-table/src/tableproperties/commands/tablebordercolorcommand.js

@@ -14,7 +14,7 @@ import { getSingleValue } from '../../commands/utils';
  * The table border color command.
  *
  * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
- * `'tableBorderColor'` editor command.
+ * the `'tableBorderColor'` editor command.
  *
  * To change the border color of the selected table, execute the command:
  *
@@ -22,7 +22,7 @@ import { getSingleValue } from '../../commands/utils';
  *			value: '#f00'
  *		} );
  *
- * @extends module:table/tableproperties/commands/tablepropertycommand
+ * @extends module:table/tableproperties/commands/tablepropertycommand~TablePropertyCommand
  */
 export default class TableBorderColorCommand extends TablePropertyCommand {
 	/**

+ 2 - 2
packages/ckeditor5-table/src/tableproperties/commands/tableborderstylecommand.js

@@ -14,7 +14,7 @@ import { getSingleValue } from '../../commands/utils';
  * The table style border command.
  *
  * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
- * `'tableBorderStyle'` editor command.
+ * the `'tableBorderStyle'` editor command.
  *
  * To change the border style of the selected table, execute the command:
  *
@@ -22,7 +22,7 @@ import { getSingleValue } from '../../commands/utils';
  *			value: 'dashed'
  *		} );
  *
- * @extends module:table/tableproperties/commands/tablepropertycommand
+ * @extends module:table/tableproperties/commands/tablepropertycommand~TablePropertyCommand
  */
 export default class TableBorderStyleCommand extends TablePropertyCommand {
 	/**

+ 3 - 3
packages/ckeditor5-table/src/tableproperties/commands/tableborderwidthcommand.js

@@ -14,7 +14,7 @@ import TablePropertyCommand from './tablepropertycommand';
  * The table width border command.
  *
  * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
- * `'tableBorderWidth'` editor command.
+ * the `'tableBorderWidth'` editor command.
  *
  * To change the border width of the selected table, execute the command:
  *
@@ -28,9 +28,9 @@ import TablePropertyCommand from './tablepropertycommand';
  *			value: '5'
  *		} );
  *
- * Will set the `borderWidth` attribute to `'5px'` in the model.
+ * will set the `borderWidth` attribute to `'5px'` in the model.
  *
- * @extends module:table/tableproperties/commands/tablepropertycommand
+ * @extends module:table/tableproperties/commands/tablepropertycommand~TablePropertyCommand
  */
 export default class TableBorderWidthCommand extends TablePropertyCommand {
 	/**

+ 4 - 4
packages/ckeditor5-table/src/tableproperties/commands/tableheightcommand.js

@@ -14,9 +14,9 @@ import { addDefaultUnitToNumericValue } from '../../commands/utils';
  * The table height command.
  *
  * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
- * `'tableHeight'` editor command.
+ * the `'tableHeight'` editor command.
  *
- * To change height of the selected table, execute the command:
+ * To change the height of the selected table, execute the command:
  *
  *		editor.execute( 'tableHeight', {
  *			value: '500px'
@@ -28,9 +28,9 @@ import { addDefaultUnitToNumericValue } from '../../commands/utils';
  *			value: '50'
  *		} );
  *
- * Will set the `height` attribute to `'50px'` in the model.
+ * will set the `height` attribute to `'50px'` in the model.
  *
- * @extends module:core/command~Command
+ * @extends module:table/tableproperties/commands/tablepropertycommand~TablePropertyCommand
  */
 export default class TableHeightCommand extends TablePropertyCommand {
 	/**

+ 3 - 3
packages/ckeditor5-table/src/tableproperties/commands/tablepropertycommand.js

@@ -14,7 +14,7 @@ import { findAncestor } from '../../commands/utils';
 /**
  * The table cell attribute command.
  *
- * The command is a base command for other table property commands.
+ * This command is a base command for other table property commands.
  *
  * @extends module:core/command~Command
  */
@@ -52,7 +52,7 @@ export default class TablePropertyCommand extends Command {
 	 * @param {*} [options.value] If set, the command will set the attribute on the selected table.
 	 * If not set, the command will remove the attribute from the selected table.
 	 * @param {module:engine/model/batch~Batch} [options.batch] Pass the model batch instance to the command to aggregate changes,
-	 * e.g. allow a single undo step for multiple executions.
+	 * for example, to allow a single undo step for multiple executions.
 	 */
 	execute( options = {} ) {
 		const model = this.editor.model;
@@ -88,7 +88,7 @@ export default class TablePropertyCommand extends Command {
 	}
 
 	/**
-	 * Returns the proper model value. Can be used to add a default unit to numeric values.
+	 * Returns the proper model value. It can be used to add a default unit to numeric values.
 	 *
 	 * @private
 	 * @param {*} value

+ 4 - 4
packages/ckeditor5-table/src/tableproperties/commands/tablewidthcommand.js

@@ -14,9 +14,9 @@ import TablePropertyCommand from './tablepropertycommand';
  * The table width command.
  *
  * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
- * `'tableWidth'` editor command.
+ * the `'tableWidth'` editor command.
  *
- * To change width of the selected table, execute the command:
+ * To change the width of the selected table, execute the command:
  *
  *		editor.execute( 'tableWidth', {
  *			value: '400px'
@@ -28,9 +28,9 @@ import TablePropertyCommand from './tablepropertycommand';
  *			value: '50'
  *		} );
  *
- * Will set the `width` attribute to `'50px'` in the model.
+ * will set the `width` attribute to `'50px'` in the model.
  *
- * @extends module:table/tableproperties/commands/tablepropertycommand
+ * @extends module:table/tableproperties/commands/tablepropertycommand~TablePropertyCommand
  */
 export default class TableWidthCommand extends TablePropertyCommand {
 	/**

+ 30 - 24
packages/ckeditor5-table/src/tableselection.js

@@ -16,10 +16,12 @@ import MouseSelectionHandler from './tableselection/mouseselectionhandler';
 import { findAncestor } from './commands/utils';
 import cropTable from './tableselection/croptable';
 
+import '../theme/tableselection.css';
+
 /**
  * The table selection plugin.
  *
- * It introduces the ability to select table cells. Table selection is described by two nodes: start and end.
+ * It introduces the ability to select table cells. The table selection is described by two nodes: start and end.
  * Both are the oposite corners of an rectangle that spans over them.
  *
  * Consider a table:
@@ -33,10 +35,10 @@ import cropTable from './tableselection/croptable';
  *		2 | h | i     | j |
  *		  +---+---+---+---+
  *
- * Setting table selection start as table cell "b" and end as table cell "g" will select table cells: "b", "c", "d", "f", and "g".
- * The cells that spans over multiple rows or columns can extend over the selection rectangle. For instance setting a selection from
- * table cell "a" to table cell "i" will create a selection in which table cell "i" will be extended over a rectangular of the selected
- * cell: "a", "b", "e", "f", "h", and "i".
+ * Setting the table selection start in table cell "b" and the end in table cell "g" will select table cells: "b", "c", "d", "f", and "g".
+ * The cells that span over multiple rows or columns can extend over the selection rectangle. For instance, setting a selection from
+ * the table cell "a" to the table cell "i" will create a selection in which the table cell "i" will be (partially) outside
+ * the rectangle of selected cells: "a", "b", "e", "f", "h", and "i".
  *
  * @extends module:core/plugin~Plugin
  */
@@ -71,16 +73,16 @@ export default class TableSelection extends Plugin {
 		this._mouseHandler = new MouseSelectionHandler( this, this.editor.editing );
 
 		/**
-		 * A table utilities.
+		 * A reference to the table utilities used across the class.
 		 *
 		 * @private
 		 * @readonly
-		 * @member {module:table/tableutils~TableUtils}
+		 * @member {module:table/tableutils~TableUtils} #_tableUtils
 		 */
 	}
 
 	/**
-	 * Flag indicating that there are selected table cells and the selection has more than one table cell.
+	 * A flag indicating that there are selected table cells and the selection includes more than one table cell.
 	 *
 	 * @type {Boolean}
 	 */
@@ -111,12 +113,13 @@ export default class TableSelection extends Plugin {
 	}
 
 	/**
-	 * Starts a selection process.
-	 *
-	 * This method enables the table selection process.
+	 * Marks the table cell as a start of a table selection.
 	 *
 	 *		editor.plugins.get( 'TableSelection' ).startSelectingFrom( tableCell );
 	 *
+	 * This method will clear the previous selection. The model selection will not be updated until
+	 * the {@link #setSelectingTo} method is used.
+	 *
 	 * @param {module:engine/model/element~Element} tableCell
 	 */
 	startSelectingFrom( tableCell ) {
@@ -127,13 +130,15 @@ export default class TableSelection extends Plugin {
 	}
 
 	/**
-	 * Updates current table selection end element. Table selection is defined by #start and #end element.
-	 * This method updates the #end element. Must be preceded by {@link #startSelectingFrom}.
+	 * Updates the current table selection end element. Table selection is defined by a start and an end element.
+	 * This method updates the end element. Must be preceded by {@link #startSelectingFrom}.
 	 *
 	 *		editor.plugins.get( 'TableSelection' ).startSelectingFrom( startTableCell );
 	 *
 	 *		editor.plugins.get( 'TableSelection' ).setSelectingTo( endTableCell );
 	 *
+	 * This method will update model selection if start and end cells are different and belongs to the same table.
+	 *
 	 * @param {module:engine/model/element~Element} tableCell
 	 */
 	setSelectingTo( tableCell ) {
@@ -153,13 +158,14 @@ export default class TableSelection extends Plugin {
 	}
 
 	/**
-	 * Stops selection process (but do not clear the current selection). The selecting process is ended but the selection in model remains.
+	 * Stops the selection process (but do not clear the current selection).
+	 * The selection process is finished but the selection in the model remains.
 	 *
 	 *		editor.plugins.get( 'TableSelection' ).startSelectingFrom( startTableCell );
 	 *		editor.plugins.get( 'TableSelection' ).setSelectingTo( endTableCell );
 	 *		editor.plugins.get( 'TableSelection' ).stopSelection();
 	 *
-	 * To clear selection use {@link #clearSelection}.
+	 * To clear the selection use {@link #clearSelection}.
 	 *
 	 * @param {module:engine/model/element~Element} [tableCell]
 	 */
@@ -172,7 +178,7 @@ export default class TableSelection extends Plugin {
 	}
 
 	/**
-	 * Stops current selection process and clears table selection.
+	 * Stops the current selection process and clears the table selection in the model.
 	 *
 	 *		editor.plugins.get( 'TableSelection' ).startSelectingFrom( startTableCell );
 	 *		editor.plugins.get( 'TableSelection' ).setSelectingTo( endTableCell );
@@ -186,13 +192,13 @@ export default class TableSelection extends Plugin {
 	}
 
 	/**
-	 * Returns iterator for selected table cells.
+	 * Returns an iterator for selected table cells.
 	 *
 	 *		tableSelection.startSelectingFrom( startTableCell );
 	 *		tableSelection.stopSelection( endTableCell );
 	 *
 	 *		const selectedTableCells = Array.from( tableSelection.getSelectedTableCells() );
-	 *		// The above array will consist a rectangular table selection.
+	 *		// The above array will represent a rectangular table selection.
 	 *
 	 * @returns {Iterable.<module:engine/model/element~Element>}
 	 */
@@ -204,11 +210,11 @@ export default class TableSelection extends Plugin {
 		const startLocation = this._tableUtils.getCellLocation( this._startElement );
 		const endLocation = this._tableUtils.getCellLocation( this._endElement );
 
-		const startRow = startLocation.row > endLocation.row ? endLocation.row : startLocation.row;
-		const endRow = startLocation.row > endLocation.row ? startLocation.row : endLocation.row;
+		const startRow = Math.min( startLocation.row, endLocation.row );
+		const endRow = Math.max( startLocation.row, endLocation.row );
 
-		const startColumn = startLocation.column > endLocation.column ? endLocation.column : startLocation.column;
-		const endColumn = startLocation.column > endLocation.column ? startLocation.column : endLocation.column;
+		const startColumn = Math.min( startLocation.column, endLocation.column );
+		const endColumn = Math.max( startLocation.column, endLocation.column );
 
 		for ( const cellInfo of new TableWalker( findAncestor( 'table', this._startElement ), { startRow, endRow } ) ) {
 			if ( cellInfo.column >= startColumn && cellInfo.column <= endColumn ) {
@@ -238,7 +244,7 @@ export default class TableSelection extends Plugin {
 	}
 
 	/**
-	 * Set proper model selection for currently selected table cells.
+	 * Synchronizes the model selection with currently selected table cells.
 	 *
 	 * @private
 	 */
@@ -263,7 +269,7 @@ export default class TableSelection extends Plugin {
 	}
 
 	/**
-	 * Checks if selection has changed from an external source and it is required to clear internal state.
+	 * Checks if the selection has changed via an external change and if it is required to clear the internal state of the plugin.
 	 *
 	 * @param {module:engine/model/documentselection~DocumentSelection} selection
 	 * @private

+ 3 - 3
packages/ckeditor5-table/src/tableselection/converters.js

@@ -8,7 +8,7 @@
  */
 
 /**
- * Adds a visual highlight style to a selected table cells.
+ * Adds a visual highlight style to selected table cells.
  *
  * @param {module:core/editor/editor~Editor} editor
  * @param {module:table/tableselection~TableSelection} tableSelection
@@ -27,7 +27,7 @@ export function setupTableSelectionHighlighting( editor, tableSelection ) {
 			for ( const tableCell of tableSelection.getSelectedTableCells() ) {
 				const viewElement = conversionApi.mapper.toViewElement( tableCell );
 
-				viewWriter.addClass( 'selected', viewElement );
+				viewWriter.addClass( 'ck-editor__editable_selected', viewElement );
 				highlighted.add( viewElement );
 			}
 
@@ -43,7 +43,7 @@ function clearHighlightedTableCells( highlighted, view ) {
 
 	view.change( writer => {
 		for ( const previouslyHighlighted of previous ) {
-			writer.removeClass( 'selected', previouslyHighlighted );
+			writer.removeClass( 'ck-editor__editable_selected', previouslyHighlighted );
 		}
 	} );
 }

+ 13 - 13
packages/ckeditor5-table/src/tableselection/mouseeventsobserver.js

@@ -10,16 +10,16 @@
 import DomEventObserver from '@ckeditor/ckeditor5-engine/src/view/observer/domeventobserver';
 
 /**
- * Mouse selection events observer.
+ * The mouse selection events observer.
  *
- * It register listener for DOM events:
+ * It registers listeners for DOM events:
  *
  * - `'mousemove'`
  * - `'mouseup'`
  * - `'mouseleave'`
  *
- * Note that this observer is not available by default. To make it available it needs to be added to
- * {@link module:engine/view/view~View} by {@link module:engine/view/view~View#addObserver} method.
+ * Note that this observer is disabled by default. To enable this observer it needs to be added to
+ * {@link module:engine/view/view~View} using the {@link module:engine/view/view~View#addObserver} method.
  *
  * It is registered by {@link module:table/tableselection/mouseselectionhandler~MouseSelectionHandler}.
  *
@@ -44,13 +44,13 @@ export default class MouseEventsObserver extends DomEventObserver {
 }
 
 /**
- * Fired when mouse button is released over one of the editables.
+ * Fired when the mouse button is released over one of the editables.
  *
  * Introduced by {@link module:table/tableselection/mouseeventsobserver~MouseEventsObserver}.
  *
  * Note that this event is not available by default. To make it available
- * {@link module:table/tableselection/mouseeventsobserver~MouseEventsObserver}  needs to be added
- * to {@link module:engine/view/view~View} by a {@link module:engine/view/view~View#addObserver} method.
+ * {@link module:table/tableselection/mouseeventsobserver~MouseEventsObserver} needs to be added
+ * to {@link module:engine/view/view~View} using the {@link module:engine/view/view~View#addObserver} method.
  *
  * @see module:table/tableselection/mouseeventsobserver~MouseEventsObserver
  * @event module:engine/view/document~Document#event:mouseup
@@ -58,13 +58,13 @@ export default class MouseEventsObserver extends DomEventObserver {
  */
 
 /**
- * Fired when mouse is moved over one of the editables.
+ * Fired when the mouse is moved over one of the editables.
  *
  * Introduced by {@link module:table/tableselection/mouseeventsobserver~MouseEventsObserver}.
  *
  * Note that this event is not available by default. To make it available
- * {@link module:table/tableselection/mouseeventsobserver~MouseEventsObserver}  needs to be added
- * to {@link module:engine/view/view~View} by a {@link module:engine/view/view~View#addObserver} method.
+ * {@link module:table/tableselection/mouseeventsobserver~MouseEventsObserver} needs to be added
+ * to {@link module:engine/view/view~View} using the {@link module:engine/view/view~View#addObserver} method.
  *
  * @see module:table/tableselection/mouseeventsobserver~MouseEventsObserver
  * @event module:engine/view/document~Document#event:mousemove
@@ -72,13 +72,13 @@ export default class MouseEventsObserver extends DomEventObserver {
  */
 
 /**
- * Fired when mouse is moved away from one of the editables.
+ * Fired when the mouse is moved out of one of the editables.
  *
  * Introduced by {@link module:table/tableselection/mouseeventsobserver~MouseEventsObserver}.
  *
  * Note that this event is not available by default. To make it available
- * {@link module:table/tableselection/mouseeventsobserver~MouseEventsObserver}  needs to be added
- * to {@link module:engine/view/view~View} by a {@link module:engine/view/view~View#addObserver} method.
+ * {@link module:table/tableselection/mouseeventsobserver~MouseEventsObserver} needs to be added
+ * to {@link module:engine/view/view~View} using the {@link module:engine/view/view~View#addObserver} method.
  *
  * @see module:table/tableselection/mouseeventsobserver~MouseEventsObserver
  * @event module:engine/view/document~Document#event:mouseleave

+ 11 - 13
packages/ckeditor5-table/src/tableselection/mouseselectionhandler.js

@@ -14,21 +14,21 @@ import { findAncestor } from '../commands/utils';
 import MouseEventsObserver from './mouseeventsobserver';
 
 /**
- * A mouse selection handler for table selection.
+ * A mouse selection handler class for the table selection.
  *
  * It registers the {@link module:table/tableselection/mouseeventsobserver~MouseEventsObserver} to observe view document mouse events
  * and invoke proper {@link module:table/tableselection~TableSelection} actions.
  */
 export default class MouseSelectionHandler {
 	/**
-	 * Creates instance of `MouseSelectionHandler`.
+	 * Creates an instance of the `MouseSelectionHandler`.
 	 *
 	 * @param {module:table/tableselection~TableSelection} tableSelection
 	 * @param {module:engine/controller/editingcontroller~EditingController} editing
 	 */
 	constructor( tableSelection, editing ) {
 		/**
-		 * Table selection.
+		 * The table selection plugin instance.
 		 *
 		 * @private
 		 * @readonly
@@ -38,7 +38,7 @@ export default class MouseSelectionHandler {
 
 		/**
 		 * A flag indicating that the mouse selection is "active". A selection is "active" if it was started and not yet finished.
-		 * A selection can be "active" for instance if user moves a mouse over a table while holding a mouse button down.
+		 * A selection can be "active", for instance, if a user moves a mouse over a table while holding a mouse button down.
 		 *
 		 * @readonly
 		 * @member {Boolean}
@@ -65,9 +65,9 @@ export default class MouseSelectionHandler {
 	}
 
 	/**
-	 * Handles starting a selection when "mousedown" event has table cell target.
+	 * Handles starting a selection when "mousedown" event has table cell as a DOM target.
 	 *
-	 * If no table cell in event target it will clear previous selection.
+	 * If there is no table cell in the event target, it will clear the previous selection.
 	 *
 	 * @param {module:engine/view/observer/domeventdata~DomEventData} domEventData
 	 * @private
@@ -87,9 +87,9 @@ export default class MouseSelectionHandler {
 	}
 
 	/**
-	 * Handles updating table selection when "mousemove" event has a table cell target.
+	 * Handles updating the table selection when the "mousemove" event has a table cell as a DOM target.
 	 *
-	 * Does nothing if no table cell in event target or selection is not started.
+	 * Does nothing if there is no table cell in event target or the selection has not been started yet.
 	 *
 	 * @param {module:engine/view/observer/domeventdata~DomEventData} domEventData
 	 * @private
@@ -111,9 +111,9 @@ export default class MouseSelectionHandler {
 	}
 
 	/**
-	 * Handles ending (not clearing) table selection on "mouseup" event.
+	 * Handles ending (not clearing) the table selection on the "mouseup" event.
 	 *
-	 * Does nothing if selection is not started.
+	 * Does nothing if the selection has not been started yet.
 	 *
 	 * @param {module:engine/view/observer/domeventdata~DomEventData} domEventData
 	 * @private
@@ -130,7 +130,7 @@ export default class MouseSelectionHandler {
 	}
 
 	/**
-	 * Finds model table cell for given DOM event.
+	 * Finds a model table cell for a given DOM event.
 	 *
 	 * @private
 	 * @param {module:engine/view/observer/domeventdata~DomEventData} domEventData
@@ -158,5 +158,3 @@ mix( MouseSelectionHandler, ObservableMixin );
 function isButtonPressed( domEventData ) {
 	return !!domEventData.domEvent.buttons;
 }
-
-mix( MouseSelectionHandler, ObservableMixin );

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

@@ -12,9 +12,9 @@ import { getSelectedTableWidget, getTableWidgetAncestor } from './utils';
 import WidgetToolbarRepository from '@ckeditor/ckeditor5-widget/src/widgettoolbarrepository';
 
 /**
- * The table toolbar class. It creates toolbars for the table feature and its content (for now only for a table cell content).
+ * The table toolbar class. It creates toolbars for the table feature and its content (for now only for the table cell content).
  *
- * Table toolbar shows up when a table widget is selected. Its components (e.g. buttons) are created based on the
+ * The table toolbar shows up when a table widget is selected. Its components (e.g. buttons) are created based on the
  * {@link module:table/table~TableConfig#tableToolbar `table.tableToolbar` configuration option}.
  *
  * Table content toolbar shows up when the selection is inside the content of a table. It creates its component based on the
@@ -69,7 +69,7 @@ export default class TableToolbar extends Plugin {
 
 /**
  * Items to be placed in the table content toolbar.
- * The {@link module:table/tabletoolbar~TableToolbar} plugin is required to make this toolbar working.
+ * The {@link module:table/tabletoolbar~TableToolbar} plugin is required to make this toolbar work.
  *
  * Assuming that you use the {@link module:table/tableui~TableUI} feature, the following toolbar items will be available
  * in {@link module:ui/componentfactory~ComponentFactory}:
@@ -87,14 +87,14 @@ export default class TableToolbar extends Plugin {
  * Of course, the same buttons can also be used in the
  * {@link module:core/editor/editorconfig~EditorConfig#toolbar main editor toolbar}.
  *
- * Read more about configuring toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
+ * Read more about configuring the toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
  *
  * @member {Array.<String>} module:table/table~TableConfig#contentToolbar
  */
 
 /**
  * Items to be placed in the table toolbar.
- * The {@link module:table/tabletoolbar~TableToolbar} plugin is required to make this toolbar working.
+ * The {@link module:table/tabletoolbar~TableToolbar} plugin is required to make this toolbar work.
  *
  * You can thus configure the toolbar like this:
  *
@@ -105,7 +105,7 @@ export default class TableToolbar extends Plugin {
  * Of course, the same buttons can also be used in the
  * {@link module:core/editor/editorconfig~EditorConfig#toolbar main editor toolbar}.
  *
- * Read more about configuring toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
+ * Read more about configuring the toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
  *
  * @member {Array.<String>} module:table/table~TableConfig#tableToolbar
  */

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

@@ -27,7 +27,7 @@ import tableMergeCellIcon from './../theme/icons/table-merge-cell.svg';
  * * The `'tableRow'` dropdown,
  * * The `'mergeTableCells'` dropdown.
  *
- * The `'tableColumn'`, `'tableRow'`, `'mergeTableCells'` dropdowns work best with {@link module:table/tabletoolbar~TableToolbar}.
+ * The `'tableColumn'`, `'tableRow'` and `'mergeTableCells'` dropdowns work best with {@link module:table/tabletoolbar~TableToolbar}.
  *
  * @extends module:core/plugin~Plugin
  */
@@ -208,7 +208,7 @@ export default class TableUI extends Plugin {
 	}
 
 	/**
-	 * Creates a dropdown view from the set of options.
+	 * Creates a dropdown view from a set of options.
 	 *
 	 * @private
 	 * @param {String} label The dropdown button label.
@@ -255,11 +255,11 @@ export default class TableUI extends Plugin {
 
 // Adds an option to a list view.
 //
-// @param {module:table/tableui~DropdownOption} option Configuration option.
+// @param {module:table/tableui~DropdownOption} option A configuration option.
 // @param {module:core/editor/editor~Editor} editor
-// @param {Array.<module:core/command~Command>} commands List of commands to update.
+// @param {Array.<module:core/command~Command>} commands The list of commands to update.
 // @param {Iterable.<module:ui/dropdown/utils~ListDropdownItemDefinition>} itemDefinitions
-// Collection of dropdown items to update with given option.
+// A collection of dropdown items to update with the given option.
 function addListOption( option, editor, commands, itemDefinitions ) {
 	const model = option.model = new Model( option.model );
 	const { commandName, bindIsOn } = option.model;

+ 16 - 16
packages/ckeditor5-table/src/tableutils.js

@@ -28,7 +28,7 @@ export default class TableUtils extends Plugin {
 	/**
 	 * Returns the table cell location as an object with table row and table column indexes.
 	 *
-	 * For instance in the table below:
+	 * For instance, in the table below:
 	 *
 	 *		    0   1   2   3
 	 *		  +---+---+---+---+
@@ -68,14 +68,14 @@ export default class TableUtils extends Plugin {
 	}
 
 	/**
-	 * Creates an empty table with proper structure. The table needs to be inserted into the model,
-	 * ie. using {@link module:engine/model/model~Model#insertContent} function.
+	 * Creates an empty table with a proper structure. The table needs to be inserted into the model,
+	 * for example, by using the {@link module:engine/model/model~Model#insertContent} function.
 	 *
 	 *		model.change( ( writer ) => {
 	 *			// Create a table of 2 rows and 7 columns:
 	 *			const table = tableUtils.createTable( writer, 2, 7);
 	 *
-	 *			// Insert table to the model at the best position taking current selection:
+	 *			// Insert a table to the model at the best position taking the current selection:
 	 *			model.insertContent( table );
 	 *		}
 	 *
@@ -114,7 +114,7 @@ export default class TableUtils extends Plugin {
 	 *
 	 * @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 the rows will be inserted.
+	 * @param {Number} [options.at=0] The row index at which the rows will be inserted.
 	 * @param {Number} [options.rows=1] The number of rows to insert.
 	 */
 	insertRows( table, options = {} ) {
@@ -189,7 +189,7 @@ export default class TableUtils extends Plugin {
 	 *
 	 * @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 the columns will be inserted.
+	 * @param {Number} [options.at=0] The column index at which the columns will be inserted.
 	 * @param {Number} [options.columns=1] The number of columns to insert.
 	 */
 	insertColumns( table, options = {} ) {
@@ -259,7 +259,7 @@ export default class TableUtils extends Plugin {
 	 * 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:
+	 * In the table below, if cell "a" is split into 3 cells:
 	 *
 	 *		+---+---+---+
 	 *		| a | b | c |
@@ -286,7 +286,7 @@ export default class TableUtils extends Plugin {
 	 *		| b | c | d |
 	 *		+---+---+---+
 	 *
-	 * 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`:
+	 * Splitting cell "a" with `colspan=3` into 2 cells will create 1 cell with a `colspan=a` and cell "a" that will have `colspan=2`:
 	 *
 	 *		+---+---+---+
 	 *		| a     |   |
@@ -383,7 +383,7 @@ export default class TableUtils extends Plugin {
 	 * 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 the table below cell "b" is split to 3 cells:
+	 * If in the table below cell "b" is split into 3 cells:
 	 *
 	 *		+---+---+---+
 	 *		| a | b | c |
@@ -418,7 +418,7 @@ export default class TableUtils extends Plugin {
 	 *		|   | h | i |
 	 *		+---+---+---+
 	 *
-	 * Splitting cell "a" with `rowspan=4` to 3 cells will create 2 cells with a `rowspan=1` and cell "a" will have `rowspan=2`:
+	 * Splitting cell "a" with `rowspan=4` into 3 cells will create 2 cells with a `rowspan=1` and cell "a" will have `rowspan=2`:
 	 *
 	 *		+---+---+---+
 	 *		| a | b | c |
@@ -556,9 +556,9 @@ export default class TableUtils extends Plugin {
 //
 // @param {module:engine/model/writer~Writer} writer
 // @param {module:engine/model/element~Element} table
-// @param {Number} insertAt Row index of row insertion.
-// @param {Number} rows Number of rows to create.
-// @param {Number} tableCellToInsert Number of cells to insert in each row.
+// @param {Number} insertAt The row index of row insertion.
+// @param {Number} rows The number of rows to create.
+// @param {Number} tableCellToInsert The number of cells to insert in each row.
 function createEmptyRows( writer, table, insertAt, rows, tableCellToInsert, attributes = {} ) {
 	for ( let i = 0; i < rows; i++ ) {
 		const tableRow = writer.createElement( 'tableRow' );
@@ -571,7 +571,7 @@ function createEmptyRows( writer, table, insertAt, rows, tableCellToInsert, attr
 
 // Creates cells at a given position.
 //
-// @param {Number} columns Number of columns to create
+// @param {Number} columns The number of columns to create
 // @param {module:engine/model/writer~Writer} writer
 // @param {module:engine/model/position~Position} insertPosition
 function createCells( cells, writer, insertPosition, attributes = {} ) {
@@ -589,8 +589,8 @@ function createCells( cells, writer, insertPosition, attributes = {} ) {
 //
 // 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.
+// @param {Number} span The span value do break.
+// @param {Number} numberOfCells The number of resulting spans.
 // @returns {{newCellsSpan: Number, updatedSpan: Number}}
 function breakSpanEvenly( span, numberOfCells ) {
 	if ( span < numberOfCells ) {

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

@@ -8,7 +8,7 @@
  */
 
 /**
- * Table iterator class. It allows to iterate over table cells. For each cell the iterator yields
+ * The 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 {
@@ -17,7 +17,7 @@ export default class TableWalker {
 	 *
 	 * 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,
+	 * By default it will output only the 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 the iterator are column and row indexes of a cell.
@@ -59,7 +59,7 @@ export default class TableWalker {
 	 *			console.log( 'Cell at ' + value.row + ' x ' + value.column + ' : ' + ( value.isSpanned ? 'is spanned' : 'has data' ) );
 	 *		}
 	 *
-	 * will log in the console for the table from previous example:
+	 * will log in the console for the table from the previous example:
 	 *
 	 *		'Cell at 1 x 0 : is spanned'
 	 *		'Cell at 1 x 1 : is spanned'
@@ -72,8 +72,8 @@ export default class TableWalker {
 	 * @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.
+	 * @param {Number} [options.startRow=0] A row index from which this iterator should start.
+	 * @param {Number} [options.endRow] A row index at which this iterator should end.
 	 * @param {Boolean} [options.includeSpanned=false] Also return values for spanned cells.
 	 */
 	constructor( table, options = {} ) {
@@ -86,7 +86,7 @@ export default class TableWalker {
 		this.table = table;
 
 		/**
-		 * A row index on which this iterator will start.
+		 * A row index from which this iterator will start.
 		 *
 		 * @readonly
 		 * @member {Number}
@@ -94,7 +94,7 @@ export default class TableWalker {
 		this.startRow = options.startRow || 0;
 
 		/**
-		 * A row index on which this iterator will end.
+		 * A row index at which this iterator will end.
 		 *
 		 * @readonly
 		 * @member {Number}
@@ -237,7 +237,7 @@ export default class TableWalker {
 	 * 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.
+	 * @param {Number} row The row index to skip.
 	 */
 	skipRow( row ) {
 		this._skipRows.add( row );
@@ -259,11 +259,11 @@ export default class TableWalker {
 	 *
 	 * @private
 	 * @param {module:engine/model/element~Element} cell The table cell to output.
-	 * @param {Number} column Column index (use the cached value).
-	 * @param {Boolean} isSpanned Whether the value is returned for a spanned cell location or actual cell.
-	 * @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}}}
+	 * @param {Number} column The column index (use the cached value).
+	 * @param {Boolean} isSpanned Whether the value is returned for a spanned cell location or an actual cell.
+	 * @param {Number} rowspan The rowspan of the current cell.
+	 * @param {Number} colspan The colspan of the current cell.
+	 * @returns {{done: Boolean, value: {cell: *, row: Number, column: *, rowspan: *, colspan: *, cellIndex: Number}}}
 	 */
 	_formatOutValue( cell, column, isSpanned, rowspan = 1, colspan = 1 ) {
 		return {
@@ -312,8 +312,8 @@ export default class TableWalker {
 	 * Checks if the current cell location (row x column) is spanned by another cell.
 	 *
 	 * @private
-	 * @param {Number} row Row index of a cell location to check.
-	 * @param {Number} column Column index of a cell location to check.
+	 * @param {Number} row The row index of a cell location to check.
+	 * @param {Number} column The column index of a cell location to check.
 	 * @returns {Boolean}
 	 */
 	_isSpanned( row, column ) {
@@ -329,11 +329,11 @@ export default class TableWalker {
 	}
 
 	/**
-	 * Returns the cell element that is spanned over `row` x `column` location.
+	 * Returns the cell element that is spanned over the `row` x `column` location.
 	 *
 	 * @private
-	 * @param {Number} row Row index of the cell location.
-	 * @param {Number} column Column index of the cell location.
+	 * @param {Number} row The row index of the cell location.
+	 * @param {Number} column The column index of the cell location.
 	 * @returns {module:engine/model/element~Element}
 	 */
 	_getSpanned( row, column ) {
@@ -344,11 +344,11 @@ export default class TableWalker {
 	 * Updates spanned cells map relative to the current cell location and its span dimensions.
 	 *
 	 * @private
-	 * @param {Number} row Row index of a cell.
-	 * @param {Number} column Column index of a cell.
+	 * @param {Number} row The row index of a cell.
+	 * @param {Number} column The column index of a cell.
 	 * @param {Number} rowspan Cell height.
 	 * @param {Number} colspan Cell width.
-	 * @param {module:engine/model/element~Element} cell Cell that is spanned.
+	 * @param {module:engine/model/element~Element} cell A cell that is spanned.
 	 */
 	_recordSpans( row, column, rowspan, colspan, cell ) {
 		// This will update all cell locations after current column - ie a cell has colspan set.
@@ -368,9 +368,9 @@ export default class TableWalker {
 	 * Marks the cell location as spanned by another cell.
 	 *
 	 * @private
-	 * @param {Number} row Row index of the cell location.
-	 * @param {Number} column Column index of the cell location.
-	 * @param {module:engine/model/element~Element} cell Cell that is spanned.
+	 * @param {Number} row The row index of the cell location.
+	 * @param {Number} column The column index of the cell location.
+	 * @param {module:engine/model/element~Element} cell A cell that is spanned.
 	 */
 	_markSpannedCell( row, column, cell ) {
 		if ( !this._spannedCells.has( row ) ) {
@@ -390,10 +390,10 @@ export default class TableWalker {
  * @property {module:engine/model/element~Element} cell The current table cell.
  * @property {Number} row The row index of a cell.
  * @property {Number} column The column index of a cell. Column index is adjusted to widths and heights of previous cells.
- * @param {Boolean} isSpanned Whether the value is returned for a spanned cell location or actual cell.
- * @property {Number} colspan The `colspan` attribute of a cell. It the model attribute is not present, it is set to `1`. For spanned
+ * @param {Boolean} isSpanned Whether the value is returned for a spanned cell location or an actual cell.
+ * @property {Number} colspan The `colspan` attribute of a cell. If the model attribute is not present, it is set to `1`. For spanned
  * table locations, it is set to `1`.
- * @property {Number} rowspan The `rowspan` attribute of a cell. It the model attribute is not present, it is set to `1`. For spanned
+ * @property {Number} rowspan The `rowspan` attribute of a cell. If the model attribute is not present, it is set to `1`. For spanned
  * table locations, it is set to `1`.
- * @property {Number} cellIndex The index of the current cell in a parent row.
+ * @property {Number} cellIndex The index of the current cell in the parent row.
  */

+ 3 - 3
packages/ckeditor5-table/src/ui/colorinputview.js

@@ -47,7 +47,7 @@ export default class ColorInputView extends View {
 		this.set( 'value', '' );
 
 		/**
-		 * The `id` attribute of the input (i.e. to pair with a `<label>` element).
+		 * The `id` attribute of the input (i.e. to pair with the `<label>` element).
 		 *
 		 * @observable
 		 * @member {String} #id
@@ -74,7 +74,7 @@ export default class ColorInputView extends View {
 		this.set( 'hasError', false );
 
 		/**
-		 * The `id` of the element describing this field, e.g. when it has
+		 * The `id` of the element describing this field. When the field has
 		 * some error, it helps screen readers read the error text.
 		 *
 		 * @observable
@@ -83,7 +83,7 @@ export default class ColorInputView extends View {
 		this.set( 'ariaDescribedById' );
 
 		/**
-		 * Cached reference to the options passed to the constructor.
+		 * A cached reference to the options passed to the constructor.
 		 *
 		 * @member {Object}
 		 */

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

@@ -51,7 +51,7 @@ export default class FormHeaderView extends View {
 		this.set( 'class', options.class || null );
 
 		/**
-		 * Label of the header.
+		 * The label of the header.
 		 *
 		 * @readonly
 		 * @member {String} #label

+ 2 - 2
packages/ckeditor5-table/src/ui/formrowview.js

@@ -12,7 +12,7 @@ import View from '@ckeditor/ckeditor5-ui/src/view';
 import '../../theme/formrow.css';
 
 /**
- * The class representing a single row in the complex form,
+ * The class representing a single row in a complex form,
  * used by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}.
  *
  * **Note**: For now this class is private. When more use cases arrive (beyond ckeditor5-table),
@@ -30,7 +30,7 @@ export default class FormRowView extends View {
 	 * @param {Array.<module:ui/view~View>} options.children
 	 * @param {String} [options.class]
 	 * @param {module:ui/view~View} [options.labelView] When passed, the row gets the `group` and `aria-labelledby`
-	 * DOM attributes and get described by the label.
+	 * DOM attributes and gets described by the label.
 	 */
 	constructor( locale, options = {} ) {
 		super( locale );

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

@@ -34,7 +34,7 @@ const isEmpty = val => val === '';
  * with respect to the table in the editor content, if one is selected.
  *
  * @param {module:core/editor/editor~Editor} editor The editor instance.
- * @param {String} target Either "cell" or "table". Determines the the target the balloon will
+ * @param {String} target Either "cell" or "table". Determines the target the balloon will
  * be attached to.
  */
 export function repositionContextualBalloon( editor, target ) {
@@ -154,7 +154,7 @@ export function colorFieldValidator( value ) {
 }
 
 /**
- * Returns `true` when the passed value is an empty string, number without unit or a valid CSS length expression.
+ * Returns `true` when the passed value is an empty string, a number without a unit or a valid CSS length expression.
  * Otherwise, `false` is returned.
  *
  * See {@link module:engine/view/styles/utils~isLength}.
@@ -170,7 +170,7 @@ export function lengthFieldValidator( value ) {
 }
 
 /**
- * Returns `true` when the passed value is an empty string, number without unit or a valid CSS length expression.
+ * Returns `true` when the passed value is an empty string, a number without a unit or a valid CSS length expression.
  * Otherwise, `false` is returned.
  *
  * See {@link module:engine/view/styles/utils~isLength}.
@@ -220,7 +220,7 @@ export function getBorderStyleDefinitions( view ) {
 }
 
 /**
- * A helper that fills a toolbar toolbar with buttons that:
+ * A helper that fills a toolbar with buttons that:
  *
  * * have some labels,
  * * have some icons,
@@ -233,7 +233,7 @@ export function getBorderStyleDefinitions( view ) {
  * @param {module:ui/toolbar/toolbarview~ToolbarView} options.toolbar
  * @param {Object.<String,String>} labels
  * @param {String} propertyName
- * @param {Function} nameToValue Function that maps button name to value. By default names are the same as values.
+ * @param {Function} nameToValue A function that maps a button name to a value. By default names are the same as values.
  */
 export function fillToolbar( { view, icons, toolbar, labels, propertyName, nameToValue } ) {
 	for ( const name in labels ) {
@@ -393,18 +393,18 @@ export const defaultColors = [
 ];
 
 /**
- * Returns a creator for color input with a label.
+ * Returns a creator for a color input with a label.
  *
- * For given options, it returns a function that creates an instance of
+ * For given options, it returns a function that creates an instance of a
  * {@link module:table/ui/colorinputview~ColorInputView color input} logically related to
- * a {@link module:ui/labeledview/labeledview~LabeledView labeled view} in DOM.
+ * a {@link module:ui/labeledview/labeledview~LabeledView labeled view} in the DOM.
  *
  * The helper does the following:
  *
- * * It sets color input's `id` and `ariaDescribedById` attributes.
- * * It binds color input's `isReadOnly` to the labeled view.
- * * It binds color input's `hasError` to the labeled view.
- * * It enables a logic that cleans up the error when user starts typing in the color input.
+ * * It sets the color input `id` and `ariaDescribedById` attributes.
+ * * It binds the color input `isReadOnly` to the labeled view.
+ * * It binds the color input `hasError` to the labeled view.
+ * * It enables a logic that cleans up the error when the user starts typing in the color input.
  *
  * Usage:
  *
@@ -414,7 +414,7 @@ export const defaultColors = [
  *		} );
  *
  *		const labeledInputView = new LabeledView( locale, colorInputCreator );
- *		console.log( labeledInputView.view ); // An color input instance.
+ *		console.log( labeledInputView.view ); // A color input instance.
  *
  * @private
  * @param options Color input options.

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

@@ -53,7 +53,7 @@ export function getSelectedTableWidget( selection ) {
 }
 
 /**
- * Returns a table widget editing view element if one is among selection's ancestors.
+ * Returns a table widget editing view element if one is among the selection's ancestors.
  *
  * @param {module:engine/view/selection~Selection|module:engine/view/documentselection~DocumentSelection} selection
  * @returns {module:engine/view/element~Element|null}

+ 10 - 2
packages/ckeditor5-table/tests/_utils/utils.js

@@ -328,7 +328,7 @@ export function assertTableCellStyle( editor, tableCellStyle ) {
 }
 
 /**
- * Helper method for asserting selected table cells.
+ * A helper method for asserting selected table cells.
  *
  * To check if a table has expected cells selected pass two dimensional array of truthy and falsy values:
  *
@@ -421,7 +421,7 @@ function makeRows( tableData, options ) {
 				const attributes = isObject ? tableCellData : {};
 
 				if ( asWidget ) {
-					attributes.class = WIDGET_TABLE_CELL_CLASS + ( attributes.class ? ` ${ attributes.class }` : '' );
+					attributes.class = getClassToSet( attributes );
 					attributes.contenteditable = 'true';
 				}
 
@@ -443,3 +443,11 @@ function makeRows( tableData, options ) {
 			return `${ previousRowsString }<${ rowElement }>${ tableRowString }</${ rowElement }>`;
 		}, '' );
 }
+
+// Properly handles passed CSS class - editor do sort them.
+function getClassToSet( attributes ) {
+	return ( WIDGET_TABLE_CELL_CLASS + ( attributes.class ? ` ${ attributes.class }` : '' ) )
+		.split( ' ' )
+		.sort()
+		.join( ' ' );
+}

+ 45 - 21
packages/ckeditor5-table/tests/tableselection/mouseselectionhandler.js

@@ -79,7 +79,10 @@ describe( 'table selection', () => {
 			] );
 
 			assertEqualMarkup( getViewData( view ), viewTable( [
-				[ { contents: '00', class: 'selected', isSelected: true }, { contents: '01', class: 'selected', isSelected: true } ],
+				[
+					{ contents: '00', class: 'ck-editor__editable_selected', isSelected: true },
+					{ contents: '01', class: 'ck-editor__editable_selected', isSelected: true }
+				],
 				[ '10', '11' ]
 			], { asWidget: true } ) );
 		} );
@@ -105,8 +108,14 @@ describe( 'table selection', () => {
 			] );
 
 			assertEqualMarkup( getViewData( view ), viewTable( [
-				[ { contents: '00', class: 'selected', isSelected: true }, { contents: '01', class: 'selected', isSelected: true } ],
-				[ { contents: '10', class: 'selected', isSelected: true }, { contents: '11', class: 'selected', isSelected: true } ]
+				[
+					{ contents: '00', class: 'ck-editor__editable_selected', isSelected: true },
+					{ contents: '01', class: 'ck-editor__editable_selected', isSelected: true }
+				],
+				[
+					{ contents: '10', class: 'ck-editor__editable_selected', isSelected: true },
+					{ contents: '11', class: 'ck-editor__editable_selected', isSelected: true }
+				]
 			], { asWidget: true } ) );
 		} );
 
@@ -131,8 +140,14 @@ describe( 'table selection', () => {
 			] );
 
 			assertEqualMarkup( getViewData( view ), viewTable( [
-				[ { contents: '00', class: 'selected', isSelected: true }, { contents: '01', class: 'selected', isSelected: true } ],
-				[ { contents: '10', class: 'selected', isSelected: true }, { contents: '11', class: 'selected', isSelected: true } ]
+				[
+					{ contents: '00', class: 'ck-editor__editable_selected', isSelected: true },
+					{ contents: '01', class: 'ck-editor__editable_selected', isSelected: true }
+				],
+				[
+					{ contents: '10', class: 'ck-editor__editable_selected', isSelected: true },
+					{ contents: '11', class: 'ck-editor__editable_selected', isSelected: true }
+				]
 			], { asWidget: true } ) );
 		} );
 
@@ -154,19 +169,19 @@ describe( 'table selection', () => {
 
 			assertEqualMarkup( getViewData( view ), viewTable( [
 				[
-					{ contents: '00', class: 'selected', isSelected: true },
-					{ contents: '01', class: 'selected', isSelected: true },
-					{ contents: '02', class: 'selected', isSelected: true }
+					{ contents: '00', class: 'ck-editor__editable_selected', isSelected: true },
+					{ contents: '01', class: 'ck-editor__editable_selected', isSelected: true },
+					{ contents: '02', class: 'ck-editor__editable_selected', isSelected: true }
 				],
 				[
-					{ contents: '10', class: 'selected', isSelected: true },
-					{ contents: '11', class: 'selected', isSelected: true },
-					{ contents: '12', class: 'selected', isSelected: true }
+					{ contents: '10', class: 'ck-editor__editable_selected', isSelected: true },
+					{ contents: '11', class: 'ck-editor__editable_selected', isSelected: true },
+					{ contents: '12', class: 'ck-editor__editable_selected', isSelected: true }
 				],
 				[
-					{ contents: '20', class: 'selected', isSelected: true },
-					{ contents: '21', class: 'selected', isSelected: true },
-					{ contents: '22', class: 'selected', isSelected: true }
+					{ contents: '20', class: 'ck-editor__editable_selected', isSelected: true },
+					{ contents: '21', class: 'ck-editor__editable_selected', isSelected: true },
+					{ contents: '22', class: 'ck-editor__editable_selected', isSelected: true }
 				]
 			], { asWidget: true } ) );
 
@@ -180,13 +195,13 @@ describe( 'table selection', () => {
 
 			assertEqualMarkup( getViewData( view ), viewTable( [
 				[
-					{ contents: '00', class: 'selected', isSelected: true },
-					{ contents: '01', class: 'selected', isSelected: true },
+					{ contents: '00', class: 'ck-editor__editable_selected', isSelected: true },
+					{ contents: '01', class: 'ck-editor__editable_selected', isSelected: true },
 					'02'
 				],
 				[
-					{ contents: '10', class: 'selected', isSelected: true },
-					{ contents: '11', class: 'selected', isSelected: true },
+					{ contents: '10', class: 'ck-editor__editable_selected', isSelected: true },
+					{ contents: '11', class: 'ck-editor__editable_selected', isSelected: true },
 					'12'
 				],
 				[
@@ -219,7 +234,10 @@ describe( 'table selection', () => {
 			] );
 
 			assertEqualMarkup( getViewData( view ), viewTable( [
-				[ { contents: '00', class: 'selected', isSelected: true }, { contents: '01', class: 'selected', isSelected: true } ],
+				[
+					{ contents: '00', class: 'ck-editor__editable_selected', isSelected: true },
+					{ contents: '01', class: 'ck-editor__editable_selected', isSelected: true }
+				],
 				[ '10', '11' ]
 			], { asWidget: true } ) );
 
@@ -267,7 +285,10 @@ describe( 'table selection', () => {
 			] );
 
 			assertEqualMarkup( getViewData( view ), viewTable( [
-				[ { contents: '00', class: 'selected', isSelected: true }, { contents: '01', class: 'selected', isSelected: true } ],
+				[
+					{ contents: '00', class: 'ck-editor__editable_selected', isSelected: true },
+					{ contents: '01', class: 'ck-editor__editable_selected', isSelected: true }
+				],
 				[ '10', '11' ]
 			], { asWidget: true } ) );
 
@@ -301,7 +322,10 @@ describe( 'table selection', () => {
 			] );
 
 			assertEqualMarkup( getViewData( view ), viewTable( [
-				[ { contents: '00', class: 'selected', isSelected: true }, { contents: '01', class: 'selected', isSelected: true } ],
+				[
+					{ contents: '00', class: 'ck-editor__editable_selected', isSelected: true },
+					{ contents: '01', class: 'ck-editor__editable_selected', isSelected: true }
+				],
 				[ '10', '11' ]
 			], { asWidget: true } ) );
 

+ 0 - 7
packages/ckeditor5-table/theme/tableediting.css

@@ -8,10 +8,3 @@
  * it acts as a message to the builder telling that it should look for the corresponding styles
  * **in the theme** when compiling the editor.
  */
-
-.ck-content .table table {
-	& td.selected,
-	& th.selected {
-		box-shadow: inset 0 0 0 1px var(--ck-color-focus-border);
-	}
-}

+ 17 - 0
packages/ckeditor5-table/theme/tableselection.css

@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/*
+ * Note: This file should contain the wireframe styles only. But since there are no such styles,
+ * it acts as a message to the builder telling that it should look for the corresponding styles
+ * **in the theme** when compiling the editor.
+ */
+
+.ck.ck-editor__editable .table table {
+	& td.ck-editor__editable_selected,
+	& th.ck-editor__editable_selected {
+		box-shadow: inset 0 0 0 1px var(--ck-color-focus-border);
+	}
+}