Improve selection with widgetselection plugin when widget is partially selected

CHANGES.md

@@ -12,6 +12,8 @@ Fixed Issues:
 
 * [#2672](https://github.com/ckeditor/ckeditor-dev/issues/2672): Fixed: When resizing [Enhanced Image](https://ckeditor.com/cke4/addon/image2) to minimum size with a resizer the image dialog doesn't show actual values.
 * [#1478](https://github.com/ckeditor/ckeditor-dev/issues/1478): Fixed: Custom colors added to [Color Button](https://ckeditor.com/cke4/addon/colorbutton) via [`config.colorButton_colors`](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-colorButton_colors) in form label/code don't work correctly.
+* [#2517](https://github.com/ckeditor/ckeditor-dev/issues/2517), [#3007](https://github.com/ckeditor/ckeditor-dev/issues/3007), [#3008](https://github.com/ckeditor/ckeditor-dev/issues/3008): Fixed: various issues when widget is partially selected by prohibiting such selection with the [Widget Selection](https://ckeditor.com/cke4/addon/widgetselection) plugin.
+* [#3041](https://github.com/ckeditor/ckeditor-dev/issues/3041): Fixed: [`range.deleteContents( true )`](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_dom_range.html#method-deleteContents) throws an error.
 
 API Changes:
 

core/dom/range.js

@@ -504,7 +504,7 @@ CKEDITOR.dom.range = function( root ) {
 					var topLeft = startParents[ commonLevel + 1 ];
 
 					// TopLeft may simply not exist if commonLevel == maxLevel or may be a text node.
-					if ( topLeft && topLeft.type == CKEDITOR.NODE_ELEMENT ) {
+					if ( topLeft && topLeft.type == CKEDITOR.NODE_ELEMENT && range.document.getDocumentElement().contains( topLeft ) ) {
 						var span = CKEDITOR.dom.element.createFromHtml( '<span ' +
 							'data-cke-bookmark="1" style="display:none">&nbsp;</span>', range.document );
 						span.insertAfter( topLeft );

plugins/widgetselection/plugin.js

@@ -16,13 +16,14 @@
 	CKEDITOR.plugins.add( 'widgetselection', {
 
 		init: function( editor ) {
-			if ( CKEDITOR.env.webkit ) {
-				var widgetselection = CKEDITOR.plugins.widgetselection;
 
-				editor.on( 'contentDom', function( evt ) {
+			editor.on( 'contentDom', function( evt ) {
 
-					var editor = evt.editor,
-						editable = editor.editable();
+				var editor = evt.editor,
+					editable = editor.editable();
+
+				if ( CKEDITOR.env.webkit ) {
+					var widgetselection = CKEDITOR.plugins.widgetselection;
 
 					editable.attachListener( editable, 'keydown', function( evt ) {
 						// Ctrl/Cmd + A
@@ -51,8 +52,64 @@
 					if ( 'selectall' in editor.plugins ) {
 						widgetselection.addSelectAllIntegration( editor );
 					}
+				}
+
+				// Normalize selection when only one end of range is in widget (#2517) (#3007) (#3008).
+				var selectionChangeListener = editor.on( 'selectionChange', selectionChangeCallback );
+
+				editable.getParent().getDocument().on( 'mousedown', function() {
+					selectionChangeListener.removeListener();
+
+					var mouseupListener = this.once( 'mouseup', function() {
+							fixRangesInWidgets();
+							mouseupListener.removeListener();
+							selectionChangeListener = editor.on( 'selectionChange', selectionChangeCallback );
+						} );
 				} );
-			}
+
+				function selectionChangeCallback( evt ) {
+					fixRangesInWidgets();
+					evt.cancel();
+				}
+
+				function fixRangesInWidgets() {
+					var selection = editor.getSelection(),
+						range = selection.getRanges()[ 0 ],
+						widget = CKEDITOR.plugins.widget,
+						isWidget = widget.isDomWidget.bind( widget ),
+						getByElement = editor.widgets.getByElement.bind( editor.widgets );
+
+					if ( selection.isFake || !range || selection.isCollapsed() ) {
+						return;
+					}
+
+					var startWidget = getByElement( range.startContainer.getAscendant( isWidget, true ) ),
+						endWidget = getByElement( range.endContainer.getAscendant( isWidget, true ) );
+
+					if ( startWidget !== endWidget ) {
+						fixSelectionInWidget( startWidget, 'start' );
+						fixSelectionInWidget( endWidget, 'end' );
+
+						range.select();
+					}
+
+					function fixSelectionInWidget( widget, prefix ) {
+						if ( !widget ) {
+							return;
+						}
+						var widgetOuter = widget.wrapper || widget.element,
+							container = range[ prefix + 'Container' ],
+							offset = range[ prefix + 'Offset' ],
+							limit = prefix === 'start' ? 0 : container.getChildCount();
+
+						if ( widgetOuter.equals( container ) && offset === limit ) {
+							range[ prefix === 'start' ? 'setStartBefore' : 'setEndAfter' ]( widgetOuter );
+						} else {
+							range[ prefix === 'start' ? 'setStartAfter' : 'setEndBefore' ]( widgetOuter );
+						}
+					}
+				}
+			} );
 		}
 	} );
 

tests/core/dom/range/deletecontents.js

@@ -204,6 +204,25 @@
 			range.deleteContents();
 
 			assert.isInnerHtmlMatching( '<h1></h1>[]<h2><br /></h2>', bender.tools.range.getWithHtml( root, range ) );
+		},
+
+		// (#3041)
+		'test deleteContents - range starts in wrapper, ends in second paragraph': function() {
+			var root = doc.createElement( 'div' ),
+				range = new CKEDITOR.dom.range( doc );
+
+			root.setAttribute( 'contenteditable', 'true' );
+			root.setHtml( '<p>foo</p><p>bar</p>' );
+
+			range.setStartAt( root, CKEDITOR.POSITION_AFTER_START );
+			range.setEndAt( root.getLast(), CKEDITOR.POSITION_BEFORE_END );
+
+			try {
+				range.deleteContents( true );
+				assert.pass();
+			} catch ( e ) {
+				assert.fail( e.message );
+			}
 		}
 	};
 

tests/core/dom/range/manual/deletecontents.html

@@ -0,0 +1,33 @@
+<textarea id="editor">
+	<p>Foo</p>
+	<p>Bar</p>
+</textarea>
+<p id="controls">
+	<button data-button-action="select">Create range</button>
+	<button data-button-action="delete">Delete range contents</button>
+	<button data-button-action="restore">Restore editor</button>
+</p>
+<script>
+	if ( bender.tools.env.mobile ) {
+		bender.ignore();
+	}
+	var editor = CKEDITOR.replace( 'editor' );
+
+	CKEDITOR.document.findOne( '#controls' ).on( 'click', function( evt ) {
+		switch ( evt.data.getTarget().data( 'button-action' ) ) {
+			case 'select': return select();
+			case 'delete': return editor.getSelection().getRanges()[ 0 ].deleteContents( true );
+			case 'restore': editor.setData( '<p>Foo</p><p>Bar</p>' );
+		}
+
+		function select() {
+			var rng = editor.createRange(),
+				editable = editor.editable();
+
+			rng.setStartAt( editable, CKEDITOR.POSITION_AFTER_START );
+			rng.setEndAt( editable.getLast(), CKEDITOR.POSITION_BEFORE_END );
+			editor.focus();
+			rng.select();
+		}
+	} );
+</script>

tests/core/dom/range/manual/deletecontents.md

@@ -0,0 +1,22 @@
+@bender-tags: 4.12.0, bug, 3041
+@bender-ui: collapsed
+@bender-ckeditor-plugins: widget, wysiwygarea, toolbar, sourcearea, image2, elementspath, undo, resize
+
+1. Open developer console.
+1. Press `Create range`.
+1. Press `Delete range contents`.
+
+	## Expected
+	Editor content is removed.
+	## Unexpected
+	Error thrown
+
+1. Press `Restore editor` and then `Create range`.
+1. Open `image2` dialog.
+1. Type any image URL, can be fake and press `OK`.
+
+## Expected
+Image is inserted into editor
+
+## Unexpected
+Error thrown

tests/plugins/widgetselection/manual/nativeselection.html

@@ -0,0 +1,11 @@
+<textarea id="editor">
+	<figure class="image"><img height="50" src="../../../_assets/lena.jpg" /><figcaption>Caption</figcaption></figure>
+	<p>Foo</p>
+</textarea>
+
+<script>
+	if ( bender.tools.env.mobile ) {
+		bender.ignore();
+	}
+	CKEDITOR.replace( 'editor' );
+</script>

tests/plugins/widgetselection/manual/nativeselection.md

@@ -0,0 +1,32 @@
+@bender-tags: 4.12.0, bug, 2517, 3007, 3008
+@bender-ui: collapsed
+@bender-ckeditor-plugins: widget, wysiwygarea, toolbar, sourcearea, image2, elementspath, undo, resize
+
+1. Open browser console.
+1. Start selecting text from right with mouse.
+1. Release mouse over bottom of a widget.
+1. Press <kbd>BACKSPACE</kbd>
+
+	- ## Expected
+		- Selected text is removed.
+		- [IE]: whole content is removed.
+
+	- ## Unexpected
+		- The widget caption is removed.
+		- Selection is in the widget caption.
+		- Selected text is not removed.
+
+1. Press `Undo`.
+
+	- ## Unexpected
+		- `Image` button is disabled.
+
+1. Press `Image` button.
+1. Enter any image source (may be fake) and press `OK`.
+
+## Expected
+- Image is inserted.
+
+## Unexpected
+- Image isn't inserted.
+- Error is thrown.

tests/plugins/widgetselection/nativeselection.js

@@ -0,0 +1,150 @@
+/* bender-tags: widgetcore */
+/* bender-ckeditor-plugins: widget,widgetselection,toolbar,clipboard */
+
+( function() {
+	'use strict';
+
+	bender.editors = {
+		classic: {
+			config: {
+				allowedContent: true
+			}
+		},
+		divarea: {
+			config: {
+				allowedContent: true,
+				extraPlugins: 'divarea'
+			}
+		}
+	};
+
+	var imageHtml = '<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" />',
+		tests = {
+			// (#2517) (#3007)
+			'test selection when starts at the end of a widget': assertSelection( {
+					initial: '<div contenteditable="false"><div>FakeWidget</div>[</div>foo]',
+					expected: '<div contenteditable="false"><div>FakeWidget</div></div>[foo]'
+				} ),
+			// (#2517) (#3007)
+			'test selection when starts at the beginning of a widget': assertSelection( {
+					initial: '<div contenteditable="false">[<div>FakeWidget</div></div>foo]',
+					expected: '[<div contenteditable="false"><div>FakeWidget</div></div>foo]'
+				} ),
+			// (#2517) (#3007)
+			'test selection when ends at the beginning of a widget': assertSelection( {
+					initial: '[foo<div contenteditable="false">]<div>FakeWidget</div></div>',
+					expected: '[foo]<div contenteditable="false"><div>FakeWidget</div></div>'
+				} ),
+			// (#2517) (#3007)
+			'test selection when ends at the end of a widget': assertSelection( {
+					initial: '[foo<div contenteditable="false"><div>FakeWidget</div>]</div>',
+					expected: '[foo<div contenteditable="false"><div>FakeWidget</div></div>]'
+				} ),
+			// (#2517) (#3007)
+			'test selection when starts at the end and ends at the beginning of a widget': assertSelection( {
+					initial: '<div contenteditable="false"><div>FakeWidget</div>[</div>foo<div contenteditable="false">]<div>FakeWidget</div></div>',
+					expected: '<div contenteditable="false"><div>FakeWidget</div></div>[foo]<div contenteditable="false"><div>FakeWidget</div></div>'
+				} ),
+			// (#2517) (#3007)
+			'test selection when starts at the beginning and ends at the end of a widget': assertSelection( {
+					initial: '<div contenteditable="false">[<div>FakeWidget</div></div>foo<div contenteditable="false"><div>FakeWidget</div>]</div>',
+					expected: '[<div contenteditable="false"><div>FakeWidget</div></div>foo<div contenteditable="false"><div>FakeWidget</div></div>]'
+				} ),
+			// (#2517) (#3007)
+			'test selection when starts in the drag handler': assertSelection( {
+					initial: '<div contenteditable="false">' +
+						'<figure>' + imageHtml + '<figcaption>caption</figcaption></figure>' +
+						'<span>' + imageHtml + '[</span></div>foo]',
+					expected: '<div contenteditable="false">' +
+						'<figure>'  + imageHtml + '<figcaption>caption</figcaption></figure>' +
+						'<span>'  + imageHtml + '</span></div>[foo]'
+				} ),
+			// (#3008)
+			'test selection when starts in the nested editable': assertSelection( {
+					initial: '<div contenteditable="false">' +
+						'<figure>'  + imageHtml + '<figcaption contenteditable="true">[caption</figcaption></figure>' +
+						'</div>foo]',
+					expected: '<div contenteditable="false">' +
+						'<figure>'  + imageHtml + '<figcaption contenteditable="true">caption</figcaption></figure>' +
+						'</div>[foo]'
+				} )
+		};
+
+	bender.test( bender.tools.createTestsForEditors( CKEDITOR.tools.objectKeys( bender.editors ), tests ) );
+
+	function assertSelection( options ) {
+		return function( editor, bot ) {
+			bot.setHtmlWithSelection( options.initial );
+
+			var filter = new CKEDITOR.htmlParser.filter( {
+						text: function( value ) {
+							return value.replace( '{', '[' ).replace( '}', ']' );
+						}
+					} ),
+				elements = [],
+				wrappers = [],
+				current, fakeWidget;
+
+			filter.addRules( {
+				elements: {
+						br: remove
+					},
+				attributes: {
+						'class': remove,
+						'data-cke-widget': remove,
+						'data-cke-widget-wrapper': remove,
+						'data-cke-widget-id': remove
+					}
+			}, { applyToAll: true } ); // Options can be added only via `addRules`.
+
+			current = bender.tools.compatHtml( bender.tools.selection.getWithHtml( editor ), true, true, true, true, true, true, [ filter ] );
+
+			if ( current.replace( '{', '[' ) !== options.initial ) {
+				// Browser can't create tested selection.
+				assert.ignore();
+			}
+
+			// Mock widgets.
+			editor.editable().forEach( function( node ) {
+				if ( node.type === CKEDITOR.NODE_TEXT ) {
+					return;
+				}
+				if ( node.getHtml().replace( '<br>', '' ) === 'FakeWidget' ) {
+					node.data( 'cke-widget', 'true' );
+					elements.push( node );
+				} else if ( node.getAttribute( 'contenteditable' ) === 'false' ) {
+					node.data( 'cke-widget-wrapper', 'true' );
+					node.data( 'cke-widget-id', wrappers.length + 1 );
+					wrappers.push( node );
+				}
+			} );
+
+			createFakeWidget( 0 );
+			editor.widgets.instances = {
+				1: fakeWidget
+			};
+
+			if ( elements[ 1 ] ) {
+				createFakeWidget( 1 );
+				editor.widgets.instances[ 2 ] = fakeWidget;
+			}
+
+			editor.fire( 'selectionChange', {
+				selection: editor.getSelection(),
+				path: editor.elementPath()
+			} );
+
+			assert.beautified.html( options.expected, bender.tools.selection.getWithHtml( editor ), { customFilters: [ filter ] } );
+
+			function createFakeWidget( index ) {
+				fakeWidget = CKEDITOR.tools.copy( CKEDITOR.plugins.widget.prototype );
+				fakeWidget.element = elements[ index ];
+				fakeWidget.wrapper = wrappers[ index ];
+			}
+
+			function remove() {
+				return false;
+			}
+		};
+	}
+} )();