Skip to content
Permalink
Browse files

Merge branch 't/16777' into major

  • Loading branch information...
Comandeer committed Jan 27, 2017
2 parents ebe3d3e + ae7d09b commit a7d8e4da49d6299a258e75f3115d91dc44f5807d
@@ -9,6 +9,7 @@ Fixed Issues:
* [#16810](http://dev.ckeditor.com/ticket/16810): Fixed: Vertical align in tables not supported by [Paste from Word](http://ckeditor.com/addon/pastefromword) plugin.
* [#11956](http://dev.ckeditor.com/ticket/11956): [Blink, IE] Fixed: [Link](http://ckeditor.com/addon/link) dialog does not open on a double click on the second word of the link with background color or other styles.
* [#10472](http://dev.ckeditor.com/ticket/10472): Fixed: Unable to use [Table Resize](http://ckeditor.com/addon/tableresize) on table's header and footer.
* [#16777](https://dev.ckeditor.com/ticket/16777): [Edge] Fixed: [Clipboard](http://ckeditor.com/addon/clipboard) plugin doesn't allow to drop widgets into editor.

## CKEditor 4.6.2

@@ -1373,6 +1373,12 @@
// we drop image it will overwrite document.

editable.attachListener( dropTarget, 'dragover', function( evt ) {
// Edge requires this handler to have `preventDefault()` regardless of the situation.
if ( CKEDITOR.env.edge ) {
evt.data.preventDefault();
return;
}

var target = evt.data.getTarget();

// Prevent reloading page when dragging image on empty document (#12619).
@@ -1863,7 +1869,7 @@
return dropEvt.data.testRange;

// Webkits.
if ( document.caretRangeFromPoint ) {
if ( document.caretRangeFromPoint && editor.document.$.caretRangeFromPoint( x, y ) ) {
$range = editor.document.$.caretRangeFromPoint( x, y );
range.setStart( CKEDITOR.dom.node( $range.startContainer ), $range.startOffset );
range.collapse( true );
@@ -1177,6 +1177,25 @@ var testsForMultipleEditor = {

assert.isTrue( spy.called, 'preventDefault called.' );
assert.areEqual( 'none', data.$.dataTransfer.dropEffect, 'dropEffect reset to \'none\'' );
},

'test dragOver Edge': function() {
if ( !CKEDITOR.env.edge ) {
assert.ignore();
}

var editor = this.editors.divarea,
bot = this.editorBots[ editor.name ],
spy = sinon.spy(),
data = {
preventDefault: spy
};

bot.setHtmlWithSelection( '<p>Test area.</p>' );

editor.editable().fire( 'dragover', data );

assert.isTrue( spy.called, 'preventDefault called.' );
}
};

@@ -0,0 +1,134 @@
<style>
.contacts img {
height: 2em;
}
.contacts ul {
list-style-type: none;
}
.contact {
cursor: pointer;
min-height: 40px;
}
</style>

<textarea name="editor1" id="editor1" cols="30" rows="10">
<p>Drop contacts here.</p>
<p>Or here.</p>
</textarea>
<div class="contacts">
<h3>List of Droppable Contacts</h3>
<ul id="contactList"></ul>
</div>

<script>
/**
* Test inspired by the SDK "Drag & Drop" sample.
* */
if ( !CKEDITOR.env.edge ) {
bender.ignore();
}
var CONTACTS = [
{ name: 'Huckleberry Finn', tel: '+48 1345 234 235', email: 'h.finn@example.com', avatar: 'hfin' },
{ name: 'D\'Artagnan', tel: '+45 2345 234 235', email: 'dartagnan@example.com', avatar: 'dartagnan' },
{ name: 'Phileas Fogg', tel: '+44 3345 234 235', email: 'p.fogg@example.com', avatar: 'pfog' },
{ name: 'Alice', tel: '+20 4345 234 235', email: 'alice@example.com', avatar: 'alice' },
{ name: 'Little Red Riding Hood', tel: '+45 2345 234 235', email: 'lrrh@example.com', avatar: 'lrrh' },
{ name: 'Winnetou', tel: '+44 3345 234 235', email: 'winnetou@example.com', avatar: 'winetou' },
{ name: 'Edmond Dantès', tel: '+20 4345 234 235', email: 'count@example.com', avatar: 'edantes' },
{ name: 'Robinson Crusoe', tel: '+45 2345 234 235', email: 'r.crusoe@example.com', avatar: 'rcrusoe' }
];
CKEDITOR.plugins.add( 'hcard', {
requires: 'widget',
init: function( editor ) {
editor.widgets.add( 'hcard', {
allowedContent: 'span(!h-card); a[href](!u-email,!p-name); span(!p-tel)',
requiredContent: 'span(h-card)',
pathName: 'hcard',
upcast: function( el ) {
return el.name == 'span' && el.hasClass( 'h-card' );
}
} );
// This feature does not have a button, so it needs to be registered manually.
editor.addFeature( editor.widgets.registered.hcard );
// Handle dropping a contact by transforming the contact object into HTML.
// Note: All pasted and dropped content is handled in one event - editor#paste.
editor.on( 'paste', function( evt ) {
var contact = evt.data.dataTransfer.getData( 'contact' );
if ( !contact ) {
return;
}
evt.data.dataValue =
'<span class="h-card">' +
'<a href="mailto:' + contact.email + '" class="p-name u-email">' + contact.name + '</a>' +
' ' +
'<span class="p-tel">' + contact.tel + '</span>' +
'</span>';
} );
}
} );
CKEDITOR.on( 'instanceReady', function() {
// When an item in the contact list is dragged, copy its data into the drag and drop data transfer.
// This data is later read by the editor#paste listener in the hcard plugin defined above.
CKEDITOR.document.getById( 'contactList' ).on( 'dragstart', function( evt ) {
// The target may be some element inside the draggable div (e.g. the image), so get the div.h-card.
var target = evt.data.getTarget().getAscendant( 'div', true );
CKEDITOR.plugins.clipboard.initDragDataTransfer( evt );
var dataTransfer = evt.data.dataTransfer;
dataTransfer.setData( 'contact', CONTACTS[ target.data( 'contact' ) ] );
dataTransfer.setData( 'text/html', target.getText() );
if ( dataTransfer.$.setDragImage ) {
dataTransfer.$.setDragImage( target.findOne( 'img' ).$, 0, 0 );
}
} );
} );
CKEDITOR.replace( 'editor1', {
extraPlugins: 'hcard',
imageUploadUrl: 'http://sub.ckeditor.dev/'
} );
addItems(
CKEDITOR.document.getById( 'contactList' ),
new CKEDITOR.template(
'<div class="contact h-card" data-contact="{id}">' +
'<img src="/tests/_assets/lena.jpg" alt="avatar" class="u-photo" /> {name}' +
'</div>'
),
CONTACTS
);
function addItems( listElement, template, items ) {
for ( var i = 0, draggable, item; i < items.length; i++ ) {
item = new CKEDITOR.dom.element( 'li' );
draggable = CKEDITOR.dom.element.createFromHtml(
template.output( {
id: i,
name: items[ i ].name,
avatar: items[ i ].avatar
} )
);
draggable.setAttributes( {
draggable: 'true',
tabindex: '0'
} );
item.append( draggable );
listElement.append( item );
}
}
</script>
@@ -0,0 +1,17 @@
@bender-tags: tc, 4.7.0, 16777, dataTransfer
@bender-ui: collapsed
@bender-ckeditor-plugins: wysiwygarea, toolbar, undo, sourcearea, elementspath, clipboard, image2, uploadimage, uploadwidget
@bender-include: ../../../plugins/uploadwidget/manual/_helpers/xhr.js
## Test scenario
- Drop a few of the "Droppable Contacts" into the editable.
- Drop an image from the filesystem into the editable.
## Expected result
Both operations possible, no errors.
## Unexpected
Impossible to drop either contacts, or image, or both.

0 comments on commit a7d8e4d

Please sign in to comment.
You can’t perform that action at this time.