Allow basic d&d element/image in tables when tableselection is on

CHANGES.md

@@ -5,6 +5,11 @@ CKEditor 4 Changelog
 
 ## CKEditor 4.17.2 [IN DEVELOPMENT]
 
+Fixed issues:
+
+* [#547](https://github.com/ckeditor/ckeditor4/issues/547): Fixed: Element/Image drag to move within the table is no longer available.
+
+
 ## CKEditor 4.17.1
 
 **Highlights:**

plugins/tableselection/plugin.js

@@ -381,6 +381,9 @@
 	function fakeSelectionDragHandler( evt ) {
 		var table = evt.data.getTarget().getAscendant( 'table', true );
 
+		// Prevent table selection during dragging. (#547)
+		fakeSelection.active = false;
+
 		// (#2945)
 		if ( table && table.hasAttribute( ignoredTableAttribute ) ) {
 			return;
@@ -391,10 +394,6 @@
 		if ( !cell || cell.hasClass( fakeSelectedClass ) ) {
 			return;
 		}
-
-		// We're not supporting dragging in our table selection for the time being.
-		evt.cancel();
-		evt.data.preventDefault();
 	}
 
 	function copyTable( editor, isCut ) {
@@ -789,6 +788,11 @@
 			return;
 		}
 
+		// #(547)
+		if ( evt.data.method === 'drop' ) {
+			return;
+		}
+
 		selectedTable = selectedCells[ 0 ].getAscendant( 'table' );
 		tableSel = new TableSelection( getSelectedCells( selection, selectedTable ) );
 

tests/plugins/tableselection/manual/draganddropimage.html

@@ -0,0 +1,44 @@
+<textarea id="editor">
+	<table border="1" cellpadding="1" cellspacing="1" style="width:500px">
+		<tbody>
+			<tr>
+				<td><img alt="" src="http://via.placeholder.com/100" />&nbsp;</td>
+				<td>test</td>
+			</tr>
+			<tr>
+				<td>
+				<p>&nbsp;</p>
+				<table border="1" cellpadding="1" cellspacing="1" style="width:500px">
+					<tbody>
+						<tr>
+							<td>&nbsp;</td>
+							<td>&nbsp;</td>
+						</tr>
+					</tbody>
+				</table>
+
+				<p>&nbsp;</p>
+				</td>
+				<td>&nbsp;</td>
+			</tr>
+			<tr>
+				<td>&nbsp;</td>
+				<td>&nbsp;</td>
+			</tr>
+		</tbody>
+	</table>
+</textarea>
+
+<script>
+	( function() {
+		if ( bender.tools.env.mobile ) {
+			return bender.ignore();
+		}
+
+		bender.tools.ignoreUnsupportedEnvironment( 'tableselection' );
+
+		CKEDITOR.replace( 'editor', {
+			height: 350
+		} );
+	} )();
+</script>

tests/plugins/tableselection/manual/draganddropimage.md

@@ -0,0 +1,18 @@
+@bender-tags: dialog, 4.17.2, 547, bug
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, table, tableselection, image, undo, sourcearea, basicstyles, elementspath
+
+
+1. Open browser's console.
+3. Using drag&drop move image to other table cell.
+
+**Expected**
+
+* Image was moved properly.
+* The content looking good and there is no error in the console.
+
+**Unxpected**
+
+* Image was not moved.
+* There's error in the console.
+* After the image was moved, the table was modified - an extra cell was added.

tests/plugins/tableselection/manual/draganddropmixedcontent.html

@@ -0,0 +1,47 @@
+<textarea id="editor">
+	<table border="1" cellpadding="1" cellspacing="1" style="width:500px">
+		<tbody>
+			<tr>
+				<td>--&gt;&nbsp;<img alt="" src="http://via.placeholder.com/100" />&nbsp;<br />
+				Lorem ipsum dolor &lt;--<br />
+				sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&nbsp;</td>
+				<td>test</td>
+			</tr>
+			<tr>
+				<td>
+				<p> </p>
+
+				<table border="1" cellpadding="1" cellspacing="1" style="width:500px">
+					<tbody>
+						<tr>
+							<td> </td>
+							<td> </td>
+						</tr>
+					</tbody>
+				</table>
+
+				<p> </p>
+				</td>
+				<td> </td>
+			</tr>
+			<tr>
+				<td> </td>
+				<td> </td>
+			</tr>
+		</tbody>
+	</table>
+</textarea>
+
+<script>
+	( function() {
+		if ( bender.tools.env.mobile ) {
+			return bender.ignore();
+		}
+
+		bender.tools.ignoreUnsupportedEnvironment( 'tableselection' );
+
+		CKEDITOR.replace( 'editor', {
+			height: 350
+		} );
+	} )();
+</script>

tests/plugins/tableselection/manual/draganddropmixedcontent.md

@@ -0,0 +1,19 @@
+@bender-tags: dialog, 4.17.2 547, bug
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, table, tableselection, undo, sourcearea, elementspath, image, basicstyles
+
+**Note:** Before you start moving the selected mixed content text using D&D, hold down the left mouse button for a moment on selected text.
+
+1. Open browser's console.
+2. Select content between `--> <--`.
+3. Using drag&drop move selected content to other table cell.
+
+**Expected**
+
+* Selected content was moved properly.
+* The content looking good and there is no error in the console.
+
+**Unxpected**
+
+* Selected content was not moved.
+* There's error in the console.

tests/plugins/tableselection/manual/draganddroptext.html

@@ -0,0 +1,41 @@
+<textarea id="editor">
+	<table border="1" cellspacing="1" cellpadding="1" style="width:500px">
+		<tbody>
+			<tr>
+				<td>Move me.</td>
+				<td>test</td>
+			</tr>
+			<tr>
+				<td>
+					&nbsp;
+					<table border="1" cellspacing="1" cellpadding="1" style="width:500px">
+						<tbody>
+							<tr>
+								<td></td>
+								<td></td>
+							</tr>
+						</tbody>
+					</table>
+					&nbsp;
+				</td>
+				<td> </td>
+			</tr>
+			<tr>
+				<td></td>
+				<td></td>
+			</tr>
+		</tbody>
+	</table>
+</textarea>
+
+<script>
+	( function() {
+		if ( bender.tools.env.mobile ) {
+			return bender.ignore();
+		}
+
+		bender.tools.ignoreUnsupportedEnvironment( 'tableselection' );
+
+		CKEDITOR.replace( 'editor' );
+	} )();
+</script>

tests/plugins/tableselection/manual/draganddroptext.md

@@ -0,0 +1,19 @@
+@bender-tags: dialog, 4.17.2 547, bug
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, table, tableselection, undo, sourcearea, elementspath
+
+**Note:** Before you start moving the selected text using D&D, hold down the left mouse button for a moment on selected text.
+
+1. Open browser's console.
+2. Select only text `Move me.`.
+3. Using drag&drop move selected text to other table cell.
+
+**Expected**
+
+* Selected text was moved properly.
+* The content looking good and there is no error in the console.
+
+**Unxpected**
+
+* Selected text was not moved.
+* There's error in the console.