Merge pull request #15112 from ckeditor/ck/15085-preview-is-blackened…

…-when-using-the-block-balloon Internal (clipboard): Drag and drop preview should not have black background on iOS. Closes #15085.
ckeditor · Oct 4, 2023 · 4146775 · 4146775
2 parents 256eb37 + 7816f00
commit 4146775
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 0 deletions.
diff --git a/packages/ckeditor5-clipboard/src/dragdrop.ts b/packages/ckeditor5-clipboard/src/dragdrop.ts
@@ -659,6 +659,14 @@ export default class DragDrop extends Plugin {
  preview.style.width = computedStyle.width;
  preview.style.paddingLeft = `${ domRect.left - clientX + domEditablePaddingLeft }px`;
 
+ /**
+ * Set white background in drag and drop preview if iOS.
+ * Check: https://github.com/ckeditor/ckeditor5/issues/15085
+ */
+ if ( env.isiOS ) {
+ preview.style.backgroundColor = 'white';
+ }
+
  preview.innerHTML = dataTransfer.getData( 'text/html' );
 
  dataTransfer.setDragImage( preview, 0, 0 );

diff --git a/packages/ckeditor5-clipboard/tests/dragdropblocktoolbar.js b/packages/ckeditor5-clipboard/tests/dragdropblocktoolbar.js
@@ -320,6 +320,70 @@ describe( 'Drag and Drop Block Toolbar', () => {
 
  expect( dragDropBlockToolbar._isBlockDragging ).to.be.false;
  } );
+
+ it( 'should show preview with white background on iOS', () => {
+ const originalEnviOs = env.isiOS;
+
+ env.isiOS = true;
+
+ setModelData( model, '<paragraph>[foo]bar</paragraph>' );
+
+ const dataTransfer = new DataTransfer();
+ const spy = sinon.spy( dataTransfer, 'setDragImage' );
+
+ const dragStartEvent = new DragEvent( 'dragstart', {
+ dataTransfer
+ } );
+
+ blockToolbarButton.dispatchEvent( dragStartEvent );
+
+ sinon.assert.calledOnce( spy );
+
+ sinon.assert.calledWith( spy, sinon.match( {
+ style: {
+ backgroundColor: 'white'
+ },
+ className: 'ck ck-content',
+ firstChild: sinon.match( {
+ tagName: 'P',
+ innerHTML: 'foobar'
+ } )
+ } ), 0, 0 );
+
+ env.isiOS = originalEnviOs;
+ } );
+
+ it( 'should show preview without white background if not iOS', () => {
+ const originalEnviOs = env.isiOS;
+
+ env.isiOS = false;
+
+ setModelData( model, '<paragraph>[foo]bar</paragraph>' );
+
+ const dataTransfer = new DataTransfer();
+ const spy = sinon.spy( dataTransfer, 'setDragImage' );
+
+ const dragStartEvent = new DragEvent( 'dragstart', {
+ dataTransfer
+ } );
+
+ blockToolbarButton.dispatchEvent( dragStartEvent );
+
+ sinon.assert.calledOnce( spy );
+
+ sinon.assert.calledWith( spy, sinon.match( {
+ style: {
+ backgroundColor: ''
+ },
+ className: 'ck ck-content',
+ firstChild: sinon.match( {
+ tagName: 'P',
+ innerHTML: 'foobar'
+ } )
+ } ), 0, 0 );
+
+ env.isiOS = originalEnviOs;
+ } );
  } );
 
  function expectDraggingMarker( targetPositionOrRange ) {