use css variable for preview background

ckeditor · Oct 4, 2023 · c462115 · c462115
1 parent e450fea
commit c462115
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git a/packages/ckeditor5-clipboard/src/dragdrop.ts b/packages/ckeditor5-clipboard/src/dragdrop.ts
@@ -664,7 +664,7 @@ export default class DragDrop extends Plugin {
  * Check: https://github.com/ckeditor/ckeditor5/issues/15085
  */
  if ( env.isiOS ) {
- preview.style.backgroundColor = 'white';
+ preview.style.backgroundColor = computedStyle.getPropertyValue( '--ck-color-base-background' );
  }
 
  preview.innerHTML = dataTransfer.getData( 'text/html' );

diff --git a/packages/ckeditor5-clipboard/tests/dragdropblocktoolbar.js b/packages/ckeditor5-clipboard/tests/dragdropblocktoolbar.js
@@ -341,7 +341,39 @@ describe( 'Drag and Drop Block Toolbar', () => {
 
  sinon.assert.calledWith( spy, sinon.match( {
  style: {
- backgroundColor: 'white'
+ backgroundColor: 'rgb(255, 255, 255)'
+ },
+ 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( {