8
0
Просмотр исходного кода

Added: Tab/Shift+Tab should properly move selection when part of block content is selected inside table cell.

Maciej Gołaszewski 7 лет назад
Родитель
Сommit
3fd9ede38a

+ 13 - 2
packages/ckeditor5-table/src/commands/utils.js

@@ -8,16 +8,27 @@
  */
 
 /**
- * Returns the parent table.
+ * Returns the parent table. Returns undefined if position is not inside table.
  *
  * @param {module:engine/model/position~Position} position
  * @returns {module:engine/model/element~Element|module:engine/model/documentfragment~DocumentFragment}
  */
 export function getParentTable( position ) {
+	return getParentElement( 'table', position );
+}
+
+/**
+ * Returns the parent element of given name. Returns undefined if position is not inside desired parent.
+ *
+ * @param {String} parentName Name of parent element to find.
+ * @param {module:engine/model/position~Position} position
+ * @returns {module:engine/model/element~Element|module:engine/model/documentfragment~DocumentFragment}
+ */
+export function getParentElement( parentName, position ) {
 	let parent = position.parent;
 
 	while ( parent ) {
-		if ( parent.name === 'table' ) {
+		if ( parent.name === parentName ) {
 			return parent;
 		}
 

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

@@ -31,7 +31,7 @@ import RemoveRowCommand from './commands/removerowcommand';
 import RemoveColumnCommand from './commands/removecolumncommand';
 import SetHeaderRowCommand from './commands/setheaderrowcommand';
 import SetHeaderColumnCommand from './commands/setheadercolumncommand';
-import { getParentTable } from './commands/utils';
+import { getParentElement, getParentTable } from './commands/utils';
 import TableUtils from './tableutils';
 
 import '../theme/tableediting.css';
@@ -199,7 +199,9 @@ export default class TableEditing extends Plugin {
 		const editor = this.editor;
 		const selection = editor.model.document.selection;
 
-		const table = getParentTable( selection.getFirstPosition() );
+		const firstPosition = selection.getFirstPosition();
+
+		const table = getParentTable( firstPosition );
 
 		if ( !table ) {
 			return;
@@ -208,7 +210,7 @@ export default class TableEditing extends Plugin {
 		domEventData.preventDefault();
 		domEventData.stopPropagation();
 
-		const tableCell = selection.focus.parent;
+		const tableCell = getParentElement( 'tableCell', firstPosition );
 		const tableRow = tableCell.parent;
 
 		const currentRowIndex = table.getChildIndex( tableRow );

+ 50 - 1
packages/ckeditor5-table/tests/manual/table.html

@@ -6,6 +6,53 @@
 </style>
 
 <div id="editor">
+
+	<p>Table with block contents:</p>
+
+	<table>
+		<thead>
+		<tr>
+			<th>what</th>
+			<th>example</th>
+		</tr>
+		</thead>
+		<tbody>
+		<tr>
+			<td>text</td>
+			<td>Foo</td>
+		</tr>
+		<tr>
+			<td>paragraph</td>
+			<td><p>Foo</p></td>
+		</tr>
+		<tr>
+			<td>list</td>
+			<td>
+				<ul>
+					<li>foo</li>
+					<li>bar</li>
+				</ul>
+			</td>
+		</tr>
+		<tr>
+			<td>heading</td>
+			<td>
+				<h1>a h1</h1>
+				<h2>a h2</h2>
+				<h3>a h3</h3>
+				<h4>a h4</h4>
+				<h5>a h5</h5>
+			</td>
+		</tr>
+		<tr>
+			<td>block quote</td>
+			<td>
+				<blockquote>a quote</blockquote>
+			</td>
+		</tr>
+		</tbody>
+	</table>
+
 	<p>Table with everything:</p>
 
 	<figure>
@@ -140,7 +187,9 @@
 				<td>5906.4</td>
 				<td>-225</td>
 				<td>5</td>
-				<td>Declassified as a planet in 2006, but this <a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">remains controversial</a>.</td>
+				<td>Declassified as a planet in 2006, but this <a
+					href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">remains controversial</a>.
+				</td>
 			</tr>
 			</tbody>
 		</table>

+ 5 - 2
packages/ckeditor5-table/tests/manual/table.js

@@ -9,12 +9,15 @@ 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 Alignment from '../../../ckeditor5-alignment/src/alignment';
 
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
-		plugins: [ ArticlePluginSet, Table, TableToolbar ],
+		plugins: [ ArticlePluginSet, Table, TableToolbar, Alignment ],
 		toolbar: [
-			'heading', '|', 'insertTable', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
+			'heading', '|', 'insertTable', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote',
+			'alignment', 'insertImage',
+			'|', 'undo', 'redo'
 		],
 		table: {
 			toolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]

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

@@ -274,6 +274,18 @@ describe( 'TableEditing', () => {
 				] ) );
 			} );
 
+			it( 'should move to the next table cell if part of block content is selected', () => {
+				setModelData( model, modelTable( [
+					[ '11', '<paragraph>12</paragraph><paragraph>[foo]</paragraph><paragraph>bar</paragraph>', '13' ],
+				] ) );
+
+				editor.editing.view.document.fire( 'keydown', domEvtDataStub );
+
+				expect( formatTable( getModelData( model ) ) ).to.equal( formattedModelTable( [
+					[ '11', '<paragraph>12</paragraph><paragraph>foo</paragraph><paragraph>bar</paragraph>', '[13]' ],
+				] ) );
+			} );
+
 			describe( 'on table widget selected', () => {
 				beforeEach( () => {
 					editor.model.schema.register( 'block', {
@@ -388,6 +400,18 @@ describe( 'TableEditing', () => {
 					[ '21', '22' ]
 				] ) );
 			} );
+
+			it( 'should move to the previous table cell if part of block content is selected', () => {
+				setModelData( model, modelTable( [
+					[ '11', '<paragraph>12</paragraph><paragraph>[foo]</paragraph><paragraph>bar</paragraph>', '13' ],
+				] ) );
+
+				editor.editing.view.document.fire( 'keydown', domEvtDataStub );
+
+				expect( formatTable( getModelData( model ) ) ).to.equal( formattedModelTable( [
+					[ '[11]', '<paragraph>12</paragraph><paragraph>foo</paragraph><paragraph>bar</paragraph>', '13' ],
+				] ) );
+			} );
 		} );
 	} );