diff --git a/CHANGES.md b/CHANGES.md index b68a578e1ee..814668e72d2 100644 --- a/CHANGES.md +++ b/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: diff --git a/plugins/clipboard/plugin.js b/plugins/clipboard/plugin.js index 5f6afc48611..995994b956a 100644 --- a/plugins/clipboard/plugin.js +++ b/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(); diff --git a/plugins/widget/plugin.js b/plugins/widget/plugin.js index 61cdfb3b706..cb3c589cc43 100644 --- a/plugins/widget/plugin.js +++ b/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 ); diff --git a/tests/plugins/clipboard/drop.js b/tests/plugins/clipboard/drop.js index 68dcc5796b0..a21b579e39a 100644 --- a/tests/plugins/clipboard/drop.js +++ b/tests/plugins/clipboard/drop.js @@ -658,6 +658,7 @@ var testsForMultipleEditor = { assert.areSame( '

^foo

', 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: '
  1. one@
  2. two
  3. three
  4. four
' } ); + }, + // (#808) + 'test drop after range end in readOnlyMode': function( editor, bot ) { + var evt = bender.tools.mockDropEvent(); + + bot.setHtmlWithSelection( '

^foo

' ); + 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( '

foo

', editor.getData(), 'after drop' ); + } ); } }, testsForOneEditor = { diff --git a/tests/plugins/widget/manual/draghandlerreadonly.html b/tests/plugins/widget/manual/draghandlerreadonly.html new file mode 100644 index 00000000000..2be3f9d7d15 --- /dev/null +++ b/tests/plugins/widget/manual/draghandlerreadonly.html @@ -0,0 +1,39 @@ +
+ +

Some text

+
+ + + + diff --git a/tests/plugins/widget/manual/draghandlerreadonly.md b/tests/plugins/widget/manual/draghandlerreadonly.md new file mode 100644 index 00000000000..e251d174c9c --- /dev/null +++ b/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.