Преглед на файлове

Merge pull request #251 from ckeditor/i/6306

Tests: Improved the content of table selection and clipboard manual tests. Closes ckeditor/ckeditor5#6306.
Aleksander Nowodzinski преди 5 години
родител
ревизия
63bf470553

+ 174 - 0
packages/ckeditor5-table/tests/manual/tableclipboard.html

@@ -0,0 +1,174 @@
+<style>
+	body {
+		font-family: Helvetica, Arial, sans-serif;
+		font-size: 14px;
+	}
+
+	.print-selected {
+		background: #b8e3ff;
+	}
+</style>
+
+<div style="display:flex">
+	<div style="flex:1;">
+
+		<h3>A "content" test editor</h3>
+
+		<div id="editor-content">
+			<p>Jelly-o topping chocolate danish. Powder donut dragée cupcake sesame snaps cotton candy. Cotton candy pudding apple pie liquorice
+				sugar plum cookie. Powder gummi bears macaroon. Gingerbread soufflé liquorice jelly-o marzipan pudding. Toffee sweet candy canes danish
+				macaroon cotton candy fruitcake. Sesame snaps cake cookie chocolate cupcake. Ice cream pie apple pie sweet. Wafer ice cream gingerbread
+				fruitcake donut jelly sweet. Sugar plum chocolate gummi bears. Jelly-o oat cake wafer brownie gingerbread pie dragée. Marshmallow
+				marzipan candy canes. Cotton candy liquorice cake soufflé pie candy.</p>
+
+			<figure class="table" style="width:60%;">
+				<table
+					style="background-color:hsl(0,0%,90%);border-bottom:2px solid hsl(30, 75%, 60%);border-left:2px solid hsl(30, 75%, 60%);border-right:2px solid hsl(30, 75%, 60%);border-top:2px solid hsl(30, 75%, 60%);">
+					<thead>
+						<tr>
+							<th>0</th>
+							<th>1</th>
+							<th>2</th>
+							<th>3</th>
+							<th>4</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td>a</td>
+							<td>b</td>
+							<td style="border-bottom:4px dashed hsl(0, 75%, 60%);border-left:4px dashed hsl(0, 75%, 60%);border-right:4px dashed hsl(0, 75%, 60%);border-top:4px dashed hsl(0, 75%, 60%);height:30px;text-align:right;vertical-align:top;width:30px;">
+								c
+							</td>
+							<td>d</td>
+							<td><i><strong>e</strong></i></td>
+						</tr>
+						<tr>
+							<td style="background-color:hsl(210,75%,60%);">f</td>
+							<td style="background-color:hsl(210,75%,60%);">g</td>
+							<td style="background-color:hsl(210,75%,60%);">h</td>
+							<td style="background-color:hsl(210,75%,60%);">i</td>
+							<td style="background-color:hsl(210,75%,60%);"><i><strong>j</strong></i></td>
+						</tr>
+						<tr>
+							<td>k</td>
+							<td>l</td>
+							<td>m</td>
+							<td>n</td>
+							<td><i><strong>o</strong></i></td>
+						</tr>
+						<tr>
+							<td>p</td>
+							<td>q</td>
+							<td>r</td>
+							<td>s</td>
+							<td>t</td>
+						</tr>
+					</tbody>
+				</table>
+			</figure>
+		</div>
+
+		<h3>A "geometry" test editor</h3>
+
+		<div id="editor-geometry">
+			<figure class="table">
+				<table>
+					<thead>
+						<tr>
+							<th>a</th>
+							<th>b</th>
+							<th>c</th>
+							<th>d</th>
+							<th>e</th>
+							<th>f</th>
+							<th>g</th>
+							<th>h</th>
+							<th>i</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td>00</td>
+							<td>01</td>
+							<td rowspan="4">02</td>
+							<td>03</td>
+							<td colspan="2" rowspan="7">04</td>
+							<td>07</td>
+							<td>07</td>
+							<td>08</td>
+						</tr>
+						<tr>
+							<td>10</td>
+							<td>11</td>
+							<td>13</td>
+							<td>17</td>
+							<td>17</td>
+							<td>18</td>
+						</tr>
+						<tr>
+							<td>20</td>
+							<td>21</td>
+							<td>23</td>
+							<td colspan="3">27</td>
+						</tr>
+						<tr>
+							<td>30</td>
+							<td>31</td>
+							<td>33</td>
+							<td>37</td>
+							<td colspan="2">37</td>
+						</tr>
+						<tr>
+							<td colspan="4">40</td>
+							<td>47</td>
+							<td>47</td>
+							<td>48</td>
+						</tr>
+						<tr>
+							<td>50</td>
+							<td>51</td>
+							<td>52</td>
+							<td>53</td>
+							<td rowspan="4">57</td>
+							<td>57</td>
+							<td>58</td>
+						</tr>
+						<tr>
+							<td>60</td>
+							<td colspan="3">61</td>
+							<td>67</td>
+							<td>68</td>
+						</tr>
+						<tr>
+							<td>70</td>
+							<td rowspan="2">71</td>
+							<td>72</td>
+							<td>73</td>
+							<td>74</td>
+							<td>75</td>
+							<td>77</td>
+							<td>78</td>
+						</tr>
+						<tr>
+							<td>80</td>
+							<td>82</td>
+							<td>83</td>
+							<td>84</td>
+							<td>85</td>
+							<td>87</td>
+							<td>88</td>
+						</tr>
+					</tbody>
+				</table>
+			</figure>
+		</div>
+	</div>
+
+	<div style="padding-left: 2em;flex: 1;">
+		<h3>Content editable to test paste</h3>
+		<div contenteditable="true" class="ck-content" style="padding: 1em;border: 1px dotted #333;">
+			paste here
+		</div>
+	</div>
+</div>

+ 44 - 0
packages/ckeditor5-table/tests/manual/tableclipboard.js

@@ -0,0 +1,44 @@
+/**
+ * @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 console, document, window, CKEditorInspector */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+import Table from '../../src/table';
+import TableToolbar from '../../src/tabletoolbar';
+import TableSelection from '../../src/tableselection';
+import TableClipboard from '../../src/tableclipboard';
+import TableProperties from '../../src/tableproperties';
+import TableCellProperties from '../../src/tablecellproperties';
+
+window.editors = {};
+
+createEditor( '#editor-content', 'content' );
+createEditor( '#editor-geometry', 'geometry' );
+
+function createEditor( target, inspectorName ) {
+	ClassicEditor
+		.create( document.querySelector( target ), {
+			plugins: [ ArticlePluginSet, Table, TableToolbar, TableSelection, TableClipboard, TableProperties, TableCellProperties ],
+			toolbar: [
+				'heading', '|',
+				'insertTable', '|',
+				'bold', 'italic', 'link', '|',
+				'bulletedList', 'numberedList', 'blockQuote', '|',
+				'undo', 'redo'
+			],
+			table: {
+				contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties' ]
+			}
+		} )
+		.then( editor => {
+			window.editors[ inspectorName ] = editor;
+			CKEditorInspector.attach( inspectorName, editor );
+		} )
+		.catch( err => {
+			console.error( err.stack );
+		} );
+}

+ 21 - 0
packages/ckeditor5-table/tests/manual/tableclipboard.md

@@ -0,0 +1,21 @@
+### Testing
+
+Copying selected table cells:
+
+1. Select a fragment of table cell.
+2. Use copy shortcut <kbd>ctrl</kbd>+<kbd>C</kbd>.
+3. Paste selected content:
+    - somewhere in the document.
+    - in the editable field on the right.
+4. The pasted table should:
+    - be rectangular (no missing nor exceeding table cells)
+    - have proper headings
+5. The editors are exposed as:
+    - `window.editor.content` and "content" editor in CKEditor inspector
+    - `window.editor.geometry` and "geometry" editor in CKEditor inspector
+
+Note that table copy:
+
+- have cut disabled
+- paste in table is not possible
+- pasted table can be fixed by a post-fixer (use content editable to verify what's being copied)

+ 161 - 144
packages/ckeditor5-table/tests/manual/tableselection.html

@@ -13,154 +13,171 @@
 		border: solid 1px hsl(0, 0%, 85%);
 	}
 </style>
-<div style="display:flex">
-	<div style="flex:1;">
-		<div id="editor">
-			<h3>A simple table to test selection:</h3>
-			<table>
-				<thead>
-					<tr>
-						<td>0</td>
-						<td>1</td>
-						<td>2</td>
-						<td>3</td>
-						<td>4</td>
-					</tr>
-				</thead>
-				<tbody>
-					<tr>
-						<td>a</td>
-						<td>b</td>
-						<td>c</td>
-						<td>d</td>
-						<td>e</td>
-					</tr>
-					<tr>
-						<td>f</td>
-						<td>g</td>
-						<td>h</td>
-						<td>i</td>
-						<td>j</td>
-					</tr>
-					<tr>
-						<td>k</td>
-						<td>l</td>
-						<td>m</td>
-						<td>n</td>
-						<td>o</td>
-					</tr>
-					<tr>
-						<td>p</td>
-						<td>q</td>
-						<td>r</td>
-						<td>s</td>
-						<td>t</td>
-					</tr>
-				</tbody>
-			</table>
 
-			<h3>A complex table</h3>
+<h3>A "content" test editor</h3>
 
-			<figure class="table">
-				<table>
-					<thead>
-						<tr>
-							<td>a</td>
-							<td>b</td>
-							<td>c</td>
-							<td>d</td>
-							<td>e</td>
-							<td>f</td>
-							<td>g</td>
-							<td>h</td>
-							<td>i</td>
-						</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<td>00</td>
-							<td>01</td>
-							<td rowspan="4">02</td>
-							<td>03</td>
-							<td rowspan="7" colspan="2">04</td>
-							<td>07</td>
-							<td>07</td>
-							<td>08</td>
-						</tr>
-						<tr>
-							<td>10</td>
-							<td>11</td>
-							<td>13</td>
-							<td>17</td>
-							<td>17</td>
-							<td>18</td>
-						</tr>
-						<tr>
-							<td>20</td>
-							<td>21</td>
-							<td>23</td>
-							<td colspan="3">27</td>
-						</tr>
-						<tr>
-							<td>30</td>
-							<td>31</td>
-							<td>33</td>
-							<td>37</td>
-							<td colspan="2">37</td>
-						</tr>
-						<tr>
-							<td colspan="4">40</td>
-							<td>47</td>
-							<td>47</td>
-							<td>48</td>
-						</tr>
-						<tr>
-							<td>50</td>
-							<td>51</td>
-							<td>52</td>
-							<td>53</td>
-							<td rowspan="4">57</td>
-							<td>57</td>
-							<td>58</td>
-						</tr>
-						<tr>
-							<td>60</td>
-							<td colspan="3">61</td>
-							<td>67</td>
-							<td>68</td>
-						</tr>
-						<tr>
-							<td>70</td>
-							<td rowspan="2">71</td>
-							<td>72</td>
-							<td>73</td>
-							<td>74</td>
-							<td>75</td>
-							<td>77</td>
-							<td>78</td>
-						</tr>
-						<tr>
-							<td>80</td>
-							<td>82</td>
-							<td>83</td>
-							<td>84</td>
-							<td>85</td>
-							<td>87</td>
-							<td>88</td>
-						</tr>
-					</tbody>
-				</table>
-			</figure>
-		</div>
+<div id="editor-content">
+	<p>Jelly-o topping chocolate danish. Powder donut dragée cupcake sesame snaps cotton candy. Cotton candy pudding apple pie liquorice
+	sugar plum cookie. Powder gummi bears macaroon. Gingerbread soufflé liquorice jelly-o marzipan pudding. Toffee sweet candy canes danish
+	macaroon cotton candy fruitcake. Sesame snaps cake cookie chocolate cupcake. Ice cream pie apple pie sweet. Wafer ice cream gingerbread
+	fruitcake donut jelly sweet. Sugar plum chocolate gummi bears. Jelly-o oat cake wafer brownie gingerbread pie dragée. Marshmallow
+	marzipan candy canes. Cotton candy liquorice cake soufflé pie candy.</p>
+	<figure class="table">
+		<table>
+			<thead>
+				<tr>
+					<th>0</th>
+					<th>1</th>
+					<th>2</th>
+					<th>3</th>
+					<th>4</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>a</td>
+					<td>b</td>
+					<td><strong>c</strong></td>
+					<td><a href="https://example.com">d</a></td>
+					<td>e</td>
+				</tr>
+				<tr>
+					<td><i>f</i></td>
+					<td><i>g</i></td>
+					<td><i><strong>h</strong></i></td>
+					<td><i>i</i></td>
+					<td><i>j</i></td>
+				</tr>
+				<tr>
+					<td>k</td>
+					<td>l</td>
+					<td><strong>m</strong></td>
+					<td>n</td>
+					<td>o</td>
+				</tr>
+				<tr>
+					<td>p</td>
+					<td>
+						<ul>
+							<li>q</li>
+							<li>q</li>
+						</ul>
+					</td>
+					<td>
+						<ol>
+							<li>r</li>
+							<li>r</li>
+						</ol>
+					</td>
+					<td>s</td>
+					<td>
+						<blockquote><p>t</p></blockquote>
+						<p>t</p></td>
+				</tr>
+			</tbody>
+		</table>
+	</figure>
+	<p>Halvah oat cake lemon drops. Cake tart caramels. Topping soufflé cheesecake. Chocolate bar sugar plum pastry sesame snaps bear claw
+		gummies cotton candy topping. Tootsie roll topping cake chocolate bar marshmallow lemon drops. Cheesecake cookie croissant chupa
+		chups. Biscuit jujubes lollipop fruitcake sesame snaps halvah. Marzipan croissant dessert chocolate cheesecake halvah jelly beans.
+		Caramels pastry bear claw oat cake sugar plum muffin sweet roll cake. Chocolate bar sweet roll sweet roll bonbon apple pie pastry
+		lemon drops icing. Apple pie wafer marzipan. Cake donut macaroon pudding. Gummi bears wafer toffee chocolate bar bear claw.
+		Fruitcake jelly chocolate bar.</p>
+</div>
 
-	</div>
+<h3>A "geometry" test editor</h3>
 
-	<div style="padding-left: 2em;flex: 1;">
-		<h3>Content editable to test paste</h3>
-		<div contenteditable="true" class="ck-content external-source" style="padding: 1em;border: 1px dotted #333;">
-			paste here
-		</div>
-	</div>
+<div id="editor-geometry">
+	<figure class="table">
+		<table>
+			<thead>
+				<tr>
+					<th>a</th>
+					<th>b</th>
+					<th>c</th>
+					<th>d</th>
+					<th>e</th>
+					<th>f</th>
+					<th>g</th>
+					<th>h</th>
+					<th>i</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>00</td>
+					<td>01</td>
+					<td rowspan="4">02</td>
+					<td>03</td>
+					<td colspan="2" rowspan="7">04</td>
+					<td>07</td>
+					<td>07</td>
+					<td>08</td>
+				</tr>
+				<tr>
+					<td>10</td>
+					<td>11</td>
+					<td>13</td>
+					<td>17</td>
+					<td>17</td>
+					<td>18</td>
+				</tr>
+				<tr>
+					<td>20</td>
+					<td>21</td>
+					<td>23</td>
+					<td colspan="3">27</td>
+				</tr>
+				<tr>
+					<td>30</td>
+					<td>31</td>
+					<td>33</td>
+					<td>37</td>
+					<td colspan="2">37</td>
+				</tr>
+				<tr>
+					<td colspan="4">40</td>
+					<td>47</td>
+					<td>47</td>
+					<td>48</td>
+				</tr>
+				<tr>
+					<td>50</td>
+					<td>51</td>
+					<td>52</td>
+					<td>53</td>
+					<td rowspan="4">57</td>
+					<td>57</td>
+					<td>58</td>
+				</tr>
+				<tr>
+					<td>60</td>
+					<td colspan="3">61</td>
+					<td>67</td>
+					<td>68</td>
+				</tr>
+				<tr>
+					<td>70</td>
+					<td rowspan="2">71</td>
+					<td>72</td>
+					<td>73</td>
+					<td>74</td>
+					<td>75</td>
+					<td>77</td>
+					<td>78</td>
+				</tr>
+				<tr>
+					<td>80</td>
+					<td>82</td>
+					<td>83</td>
+					<td>84</td>
+					<td>85</td>
+					<td>87</td>
+					<td>88</td>
+				</tr>
+			</tbody>
+		</table>
+	</figure>
 </div>
 
 <h2>Model contents:</h2>

+ 34 - 21
packages/ckeditor5-table/tests/manual/tableselection.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* globals console, window, document, global */
+/* globals console, window, document, global, CKEditorInspector */
 
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
@@ -12,28 +12,41 @@ import TableToolbar from '../../src/tabletoolbar';
 import { getData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 import TableSelection from '../../src/tableselection';
 import TableClipboard from '../../src/tableclipboard';
+import TableProperties from '../../src/tableproperties';
+import TableCellProperties from '../../src/tablecellproperties';
 
-ClassicEditor
-	.create( document.querySelector( '#editor' ), {
-		plugins: [ ArticlePluginSet, Table, TableToolbar, TableSelection, TableClipboard ],
-		toolbar: [
-			'heading', '|', 'insertTable', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
-		],
-		table: {
-			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
-		}
-	} )
-	.then( editor => {
-		window.editor = editor;
-		editor.model.document.on( 'change', () => {
-			printModelContents( editor );
-		} );
+window.editors = {};
+
+createEditor( '#editor-content', 'content' );
+createEditor( '#editor-geometry', 'geometry' );
+
+function createEditor( target, inspectorName ) {
+	ClassicEditor
+		.create( document.querySelector( target ), {
+			plugins: [ ArticlePluginSet, Table, TableToolbar, TableSelection, TableClipboard, TableProperties, TableCellProperties ],
+			toolbar: [
+				'heading', '|',
+				'insertTable', '|',
+				'bold', 'italic', 'link', '|',
+				'bulletedList', 'numberedList', 'blockQuote', '|',
+				'undo', 'redo'
+			],
+			table: {
+				contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties' ]
+			}
+		} )
+		.then( editor => {
+			window.editors[ inspectorName ] = editor;
+			CKEditorInspector.attach( inspectorName, editor );
 
-		printModelContents( editor );
-	} )
-	.catch( err => {
-		console.error( err.stack );
-	} );
+			editor.model.document.on( 'change', () => {
+				printModelContents( editor );
+			} );
+		} )
+		.catch( err => {
+			console.error( err.stack );
+		} );
+}
 
 const modelDiv = global.document.querySelector( '#model' );
 

+ 3 - 15
packages/ckeditor5-table/tests/manual/tableselection.md

@@ -4,18 +4,6 @@ Selecting table cells:
 
 1. It should be possible to select multiple table cells.
 2. Observe selection inn the below model representation - for a block selection the table cells should be selected.
-
-Copying selected table cells:
-
-1. Select a fragment of table cell.
-2. Use copy shortcut <kbd>ctrl</kbd>+<kbd>C</kbd>.
-3. Paste somewhere in the document.
-4. The pasted table should:
-   - be rectangular (no missing nor exceeding table cells)
-   - have proper headings
-
-Note that table copy:
-
-- have cut disabled
-- paste in table is not possible
-- pasted table can be fixed by a post-fixer (use content editable to verify what's being copied)
+3. The editors are exposed as:
+    - `window.editor.content` and "content" editor in CKEditor inspector
+    - `window.editor.geometry` and "geometry" editor in CKEditor inspector