8
0
فهرست منبع

Merge pull request #248 from ckeditor/i/6137

Docs: Brought table properties and table cell properties to the feature guide. Closes ckeditor/ckeditor5#6137.
Piotrek Koszuliński 6 سال پیش
والد
کامیت
caedfdfdc5
24فایلهای تغییر یافته به همراه688 افزوده شده و 109 حذف شده
  1. 40 0
      packages/ckeditor5-table/docs/_snippets/features/table-styling-colors.html
  2. 123 0
      packages/ckeditor5-table/docs/_snippets/features/table-styling-colors.js
  3. 73 51
      packages/ckeditor5-table/docs/_snippets/features/table-styling.html
  4. 93 1
      packages/ckeditor5-table/docs/_snippets/features/table-styling.js
  5. 1 1
      packages/ckeditor5-table/docs/api/table.md
  6. 339 38
      packages/ckeditor5-table/docs/features/table.md
  7. 1 1
      packages/ckeditor5-table/src/tablecellproperties.js
  8. 1 1
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellbackgroundcolorcommand.js
  9. 1 1
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellbordercolorcommand.js
  10. 1 1
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellborderstylecommand.js
  11. 1 1
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellborderwidthcommand.js
  12. 1 1
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellheightcommand.js
  13. 1 1
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellhorizontalalignmentcommand.js
  14. 2 1
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellpaddingcommand.js
  15. 1 1
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellverticalalignmentcommand.js
  16. 1 1
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellwidthcommand.js
  17. 1 1
      packages/ckeditor5-table/src/tableproperties.js
  18. 1 1
      packages/ckeditor5-table/src/tableproperties/commands/tablealignmentcommand.js
  19. 1 1
      packages/ckeditor5-table/src/tableproperties/commands/tablebackgroundcolorcommand.js
  20. 1 1
      packages/ckeditor5-table/src/tableproperties/commands/tablebordercolorcommand.js
  21. 1 1
      packages/ckeditor5-table/src/tableproperties/commands/tableborderstylecommand.js
  22. 1 1
      packages/ckeditor5-table/src/tableproperties/commands/tableborderwidthcommand.js
  23. 1 1
      packages/ckeditor5-table/src/tableproperties/commands/tableheightcommand.js
  24. 1 1
      packages/ckeditor5-table/src/tableproperties/commands/tablewidthcommand.js

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

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

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

@@ -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.
  *

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

@@ -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 {
 	/**

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

@@ -22,7 +22,7 @@ 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 {
 	/**

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

@@ -22,7 +22,7 @@ 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 {
 	/**

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

@@ -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 {
 	/**

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

@@ -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 {
 	/**

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

@@ -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 {
 	/**

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

@@ -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 {
 	/**

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

@@ -29,7 +29,7 @@ import TableCellPropertyCommand from './tablecellpropertycommand';
  *
  * 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 {
 	/**

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

@@ -30,7 +30,7 @@ import TableCellPropertyCommand from './tablecellpropertycommand';
  *
  * 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 {
 	/**

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

@@ -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.
  *

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

@@ -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 {
 	/**

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

@@ -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 {
 	/**

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

@@ -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 {
 	/**

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

@@ -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 {
 	/**

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

@@ -30,7 +30,7 @@ import TablePropertyCommand from './tablepropertycommand';
  *
  * 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 {
 	/**

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

@@ -30,7 +30,7 @@ import { addDefaultUnitToNumericValue } from '../../commands/utils';
  *
  * 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 {
 	/**

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

@@ -30,7 +30,7 @@ import TablePropertyCommand from './tablepropertycommand';
  *
  * 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 {
 	/**