Fix for: Dragging widget in read-only mode

CHANGES.md

@@ -3,6 +3,11 @@
 
 ## CKEditor 4.13
 
+Fixed Issues:
+
+* [#808](https://github.com/ckeditor/ckeditor-dev/issues/808): Fixed: [Widget](https://ckeditor.com/cke4/addon/widget) and other content disappear on drag and drop in [read-only mode](https://ckeditor.com/docs/ckeditor4/latest/guide/dev_readonly.html).
+* [#3260](https://github.com/ckeditor/ckeditor-dev/issues/3260): Fixed: [Widget](https://ckeditor.com/cke4/addon/widget) drag handler is visible in [read-only mode](https://ckeditor.com/docs/ckeditor4/latest/guide/dev_readonly.html).
+
 ## CKEditor 4.12.1
 
 Fixed Issues:

plugins/clipboard/plugin.js

@@ -1508,6 +1508,11 @@
 				// Cancel native drop.
 				evt.data.preventDefault();
 
+				// We shouldn't start drop action when editor is in read only mode (#808).
+				if ( editor.readOnly ) {
+					return;
+				}
+
 				var target = evt.data.getTarget(),
 					readOnly = target.isReadOnly();
 

plugins/widget/plugin.js

@@ -49,11 +49,7 @@
 					'position:absolute;' +
 					'width:' + DRAG_HANDLER_SIZE + 'px;' +
 					'height:0;' +
-					// Initially drag handler should not be visible, until its position will be
-					// calculated (https://dev.ckeditor.com/ticket/11177).
-					// We need to hide unpositined handlers, so they don't extend
-					// widget's outline far to the left (https://dev.ckeditor.com/ticket/12024).
-					'display:none;' +
+					'display:block;' +
 					'opacity:0.75;' +
 					'transition:height 0s 0.2s;' + // Delay hiding drag handler.
 					// Prevent drag handler from being misplaced (https://dev.ckeditor.com/ticket/11198).
@@ -66,6 +62,9 @@
 				'.cke_widget_drag_handler_container:hover{' +
 					'opacity:1' +
 				'}' +
+				'.cke_editable[contenteditable="false"] .cke_widget_drag_handler_container{' + // Hide drag handler in read only mode (#3260).
+					'display:none;' +
+				'}' +
 				'img.cke_widget_drag_handler{' +
 					'cursor:move;' +
 					'width:' + DRAG_HANDLER_SIZE + 'px;' +
@@ -1534,9 +1533,10 @@
 			editor.fire( 'lockSnapshot' );
 			this.dragHandlerContainer.setStyles( {
 				top: newPos.y + 'px',
-				left: newPos.x + 'px',
-				display: 'block'
+				left: newPos.x + 'px'
 			} );
+			this.dragHandlerContainer.removeStyle( 'display' );
+
 			editor.fire( 'unlockSnapshot' );
 			!initialDirty && editor.resetDirty();
 
@@ -3346,7 +3346,12 @@
 			container.setAttributes( {
 				'class': 'cke_reset cke_widget_drag_handler_container',
 				// Split background and background-image for IE8 which will break on rgba().
-				style: 'background:rgba(220,220,220,0.5);background-image:url(' + editor.plugins.widget.path + 'images/handle.png)'
+				// Initially drag handler should not be visible, until its position will be
+				// calculated (https://dev.ckeditor.com/ticket/11177).
+				// We need to hide unpositined handlers, so they don't extend
+				// widget's outline far to the left (https://dev.ckeditor.com/ticket/12024).
+				style: 'background:rgba(220,220,220,0.5);background-image:url(' + editor.plugins.widget.path + 'images/handle.png);' +
+					'display:none;'
 			} );
 
 			img = new CKEDITOR.dom.element( 'img', editor.document );

tests/plugins/clipboard/drop.js

@@ -658,6 +658,7 @@ var testsForMultipleEditor = {
 				assert.areSame( '<p class="p">^foo</p>', bender.tools.getHtmlWithSelection( editor ), 'after drop' );
 			} );
 		},
+
 		// #(2292)
 		'test internal drag and drop on editors margin': function( editor ) {
 			var evt = bender.tools.mockDropEvent();
@@ -683,7 +684,28 @@ var testsForMultipleEditor = {
 				expectedDataType: 'html',
 				expectedDataValue: '<ol><li><a href="http://test.com">one</a>@</li><li>two</li><li>three</li><li>four</li></ol>'
 			} );
+		},
 
+		// (#808)
+		'test drop after range end in readOnlyMode': function( editor, bot ) {
+			var evt = bender.tools.mockDropEvent();
+
+			bot.setHtmlWithSelection( '<p class="p">^foo</p>' );
+			editor.setReadOnly( true );
+
+			drag( editor, evt );
+
+			drop( editor, evt, {
+				dropContainer: editor.editable(),
+				dropOffset: 0,
+				expectedPasteEventCount: 0,
+				expectedDropPrevented: true
+			}, function() {
+				return true;
+			}, function() {
+				editor.setReadOnly( false );
+				assert.areSame( '<p class="p">foo</p>', editor.getData(), 'after drop' );
+			} );
 		}
 	},
 	testsForOneEditor = {

tests/plugins/widget/manual/draghandlerreadonly.html

@@ -0,0 +1,39 @@
+<div id="editor">
+	<img src="../../../_assets/logo.png">
+	<p>Some text</p>
+</div>
+
+<label><input id="readonly" type="checkbox">Editor readonly</label>
+
+<script>
+	if ( bender.env.mobile ) {
+		bender.ignore();
+	}
+
+	CKEDITOR.replace( 'editor', {
+		on: {
+			instanceReady: function() {
+				var readonlyCheckBox = CKEDITOR.document.findOne( '#readonly' ),
+					editor = this;
+
+				setReadOnly();
+
+				if ( CKEDITOR.env.ie && !CKEDITOR.env.edge ) {
+					setInterval( function() {
+						setReadOnly();
+					}, 150 );
+				} else {
+					readonlyCheckBox.on( 'change', function() {
+						setReadOnly( readonlyCheckBox.$.checked );
+					} );
+				}
+
+				function setReadOnly() {
+					if ( editor.readOnly !== readonlyCheckBox.$.checked ) {
+						editor.setReadOnly( readonlyCheckBox.$.checked );
+					}
+				}
+			}
+		}
+	} );
+</script>

tests/plugins/widget/manual/draghandlerreadonly.md

@@ -0,0 +1,31 @@
+@bender-tags: 4.13.0, bug, 3260
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, widget, clipboard, image2
+
+## Scenario 1:
+
+Mouse hover on widget.
+
+### Expected
+
+Drag handler appears.
+
+### Unexpected
+
+Drag handler doesn't appear.
+
+---
+
+## Scenario 2:
+
+1. Make editor readonly with checkbox.
+
+1. Mouse hover on widget.
+
+### Expected
+
+Drag handler doesn't appear.
+
+### Unexpected
+
+Drag handler appears.