Docs for table caption got a demo snippet.

ckeditor · Apr 22, 2021 · 0756be7 · 0756be7
1 parent 75d586c
commit 0756be7
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 65 deletions.
diff --git a/packages/ckeditor5-table/docs/_snippets/features/table-caption.html b/packages/ckeditor5-table/docs/_snippets/features/table-caption.html
@@ -1,48 +1,32 @@
 <div id="snippet-table-caption">
-	<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>
+	<figure class="table">
+		<table>
+			<tbody>
+				<tr>
+					<td>
+						<p style="text-align:center;">Friendly</p>
+					</td>
+				</tr>
+				<tr>
+					<td>
+						<p style="text-align:center;">Intelligent</p>
+					</td>
+				</tr>
+				<tr>
+					<td>
+						<p style="text-align:center;">Generally good with people</p>
+					</td>
+				</tr>
+				<tr>
+					<td>
+						<p style="text-align:center;">Has a lot of energy</p>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+		<figcaption>
+			The <a href="https://en.wikipedia.org/wiki/Norwegian_Forest_cat#Personality">Norwegian Forest cat</a> personality traits.
+		</figcaption>
+	</figure>
 </div>
 
diff --git a/packages/ckeditor5-table/docs/_snippets/features/table-caption.js b/packages/ckeditor5-table/docs/_snippets/features/table-caption.js
@@ -11,18 +11,19 @@ ClassicEditor
 			CKEditorPlugins.TableCaption
 		],
 		table: {
-			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', '|', 'toggleTableCaption' ]
+			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'toggleTableCaption' ]
+		},
+		image: {
+			toolbar: [
+				'imageStyle:full',
+				'imageStyle:side',
+				'|',
+				'imageTextAlternative'
+			]
 		}
 	} )
 	.then( editor => {
-		window.editor = editor;
-
-		window.attachTourBalloon( {
-			target: window.findToolbarItem( editor.ui.view.toolbar,
-				item => item.buttonView && item.buttonView.label && item.buttonView.label === 'Toggle caption off' ),
-			text: 'Click to hide table caption.',
-			editor
-		} );
+		window.editorCaption = editor;
 	} )
 	.catch( err => {
 		console.error( err.stack );

diff --git a/packages/ckeditor5-table/docs/_snippets/features/table.js b/packages/ckeditor5-table/docs/_snippets/features/table.js
@@ -8,7 +8,7 @@
 ClassicEditor
 	.create( document.querySelector( '#snippet-table' ), {
 		table: {
-			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', '|', 'toggleTableCaption' ]
+			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
 		},
 		image: {
 			toolbar: [
@@ -21,16 +21,6 @@ ClassicEditor
 	} )
 	.then( editor => {
 		window.editor = editor;
-
-		window.attachTourBalloon( {
-			target: window.findToolbarItem( editor.ui.view.toolbar,
-				item => item.buttonView && item.buttonView.label && item.buttonView.label === 'Insert table' ),
-			text: 'Click to create a table.',
-			editor,
-			tippyOptions: {
-				placement: 'bottom-start'
-			}
-		} );
 	} )
 	.catch( err => {
 		console.error( err.stack );

diff --git a/packages/ckeditor5-table/docs/features/table.md b/packages/ckeditor5-table/docs/features/table.md
@@ -415,6 +415,10 @@ The table plugins register the following UI components:
 			<td>The <code>'tableProperties'</code> button</td>
 			<td>{@link module:table/tableproperties~TableProperties}</td>
 		</tr>
+		<tr>
+			<td>The <code>'toggleTableCaption'</code> button</td>
+			<td>{@link module:table/tablecaption~TableCaption}</td>
+		</tr>
 		<tr>
 			<td>The <code>'tableCellProperties'</code> button</td>
 			<td>{@link module:table/tablecellproperties~TableCellProperties}</td>