From d5c8c6cbc934c2b1ba10e533828dd883696a4287 Mon Sep 17 00:00:00 2001 From: Kuba Niegowski Date: Fri, 26 Mar 2021 18:00:43 +0100 Subject: [PATCH 1/2] Fixed dragging text in read-only mode. Fixed dragging nested editable. --- packages/ckeditor5-clipboard/src/dragdrop.js | 4 +- .../ckeditor5-clipboard/tests/dragdrop.js | 83 ++++++++++++++++++- 2 files changed, 84 insertions(+), 3 deletions(-) diff --git a/packages/ckeditor5-clipboard/src/dragdrop.js b/packages/ckeditor5-clipboard/src/dragdrop.js index 881aa8ce216..fa6965bcd35 100644 --- a/packages/ckeditor5-clipboard/src/dragdrop.js +++ b/packages/ckeditor5-clipboard/src/dragdrop.js @@ -242,7 +242,7 @@ export default class DragDrop extends Plugin { const selection = modelDocument.selection; // Don't drag the editable element itself. - if ( data.target && data.target.is( 'rootElement' ) ) { + if ( data.target && data.target.is( 'editableElement' ) ) { data.preventDefault(); return; @@ -470,7 +470,7 @@ export default class DragDrop extends Plugin { // If this was not a widget then we should check if we need to drag some text content. // In Chrome set a 'draggable' attribute on closest editable to allow immediate dragging of the selected text range. // In Firefox this is not needed. In Safari it makes the whole editable draggable (not just textual content). - if ( env.isBlink && !draggableElement && !viewDocument.selection.isCollapsed ) { + if ( env.isBlink && !editor.isReadOnly && !draggableElement && !viewDocument.selection.isCollapsed ) { const selectedElement = viewDocument.selection.getSelectedElement(); if ( !selectedElement || !isWidget( selectedElement ) ) { diff --git a/packages/ckeditor5-clipboard/tests/dragdrop.js b/packages/ckeditor5-clipboard/tests/dragdrop.js index 5c87fe682c8..c94383f3fc9 100644 --- a/packages/ckeditor5-clipboard/tests/dragdrop.js +++ b/packages/ckeditor5-clipboard/tests/dragdrop.js @@ -769,6 +769,38 @@ describe( 'Drag and Drop', () => { expect( spyClipboardOutput.notCalled ).to.be.true; } ); + it( 'should not start dragging if the editable would be dragged itself', () => { + setModelData( model, '[foo]bar
' ); + + const dataTransferMock = createDataTransfer(); + const spyClipboardOutput = sinon.spy(); + const spyPreventDefault = sinon.spy(); + + viewDocument.on( 'clipboardOutput', ( event, data ) => spyClipboardOutput( data ) ); + + const modelElement = root.getNodeByPath( [ 0, 0, 0 ] ); + const eventData = prepareEventData( model.createPositionAt( modelElement.getChild( 0 ), 3 ) ); + eventData.target = mapper.toViewElement( modelElement ); + eventData.domTarget = domConverter.mapViewToDom( eventData.target ); + + expect( eventData.target.is( 'editableElement', 'td' ) ).to.be.true; + + viewDocument.fire( 'mousedown', { + ...eventData + } ); + + viewDocument.fire( 'dragstart', { + ...eventData, + dataTransfer: dataTransferMock, + preventDefault: spyPreventDefault, + stopPropagation: () => { + } + } ); + + expect( spyPreventDefault.called ).to.be.true; + expect( spyClipboardOutput.notCalled ).to.be.true; + } ); + it( 'should mark allowed effect as "copy" if the editor is read-only', () => { setModelData( model, '[foo]bar' ); @@ -781,7 +813,7 @@ describe( 'Drag and Drop', () => { fireDragStart( dataTransferMock ); - expect( viewDocument.getRoot().hasAttribute( 'draggable' ) ).to.be.true; + expect( viewDocument.getRoot().hasAttribute( 'draggable' ) ).to.be.false; expect( dataTransferMock.effectAllowed ).to.equal( 'copy' ); } ); @@ -851,6 +883,55 @@ describe( 'Drag and Drop', () => { ); } ); + it( 'should start dragging by grabbing the widget selection handle (in read only mode)', () => { + setModelData( model, + '[]foobar' + + 'abc
' + ); + + editor.isReadOnly = true; + + const dataTransferMock = createDataTransfer(); + const spyClipboardOutput = sinon.spy(); + + viewDocument.on( 'clipboardOutput', ( event, data ) => spyClipboardOutput( data ) ); + + const domNode = view.getDomRoot().querySelector( '.ck-widget__selection-handle' ); + const widgetViewElement = viewDocument.getRoot().getChild( 1 ); + const selectionHandleElement = widgetViewElement.getChild( 0 ); + + expect( selectionHandleElement.hasClass( 'ck-widget__selection-handle' ) ).to.be.true; + + const eventData = { + domTarget: domNode, + target: selectionHandleElement, + domEvent: {} + }; + + viewDocument.fire( 'mousedown', { + ...eventData + } ); + + viewDocument.fire( 'dragstart', { + ...eventData, + dataTransfer: dataTransferMock, + stopPropagation: () => {} + } ); + + expect( dataTransferMock.getData( 'text/html' ) ).to.equal( + '
abc
' + ); + + expect( widgetViewElement.getAttribute( 'draggable' ) ).to.equal( 'true' ); + + expect( spyClipboardOutput.called ).to.be.true; + expect( spyClipboardOutput.firstCall.firstArg.method ).to.equal( 'dragstart' ); + expect( spyClipboardOutput.firstCall.firstArg.dataTransfer ).to.equal( dataTransferMock ); + expect( stringifyView( spyClipboardOutput.firstCall.firstArg.content ) ).to.equal( + '
abc
' + ); + } ); + it( 'should start dragging by grabbing the widget element directly', () => { setModelData( model, '[]foobar' + From f46e02b26515932f2b8401718e1046df27e93ae5 Mon Sep 17 00:00:00 2001 From: Szymon Cofalik Date: Tue, 6 Apr 2021 16:18:19 +0200 Subject: [PATCH 2/2] Update packages/ckeditor5-clipboard/src/dragdrop.js --- packages/ckeditor5-clipboard/src/dragdrop.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/ckeditor5-clipboard/src/dragdrop.js b/packages/ckeditor5-clipboard/src/dragdrop.js index fa6965bcd35..0ad7892b42a 100644 --- a/packages/ckeditor5-clipboard/src/dragdrop.js +++ b/packages/ckeditor5-clipboard/src/dragdrop.js @@ -470,6 +470,8 @@ export default class DragDrop extends Plugin { // If this was not a widget then we should check if we need to drag some text content. // In Chrome set a 'draggable' attribute on closest editable to allow immediate dragging of the selected text range. // In Firefox this is not needed. In Safari it makes the whole editable draggable (not just textual content). + // Disabled in read-only mode because draggable="true" + contenteditable="false" results + // in not firing selectionchange event ever, which makes the selection stuck in read-only mode. if ( env.isBlink && !editor.isReadOnly && !draggableElement && !viewDocument.selection.isCollapsed ) { const selectedElement = viewDocument.selection.getSelectedElement();