Workaround for Edge not supporting custom MIME types in dataTransfer.setData
#968
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -187,6 +187,7 @@ | |
| } | ||
|
|
||
| editor.on( 'paste', function( evt ) { | ||
|
|
||
| // Init `dataTransfer` if `paste` event was fired without it, so it will be always available. | ||
| if ( !evt.data.dataTransfer ) { | ||
| evt.data.dataTransfer = new CKEDITOR.plugins.clipboard.dataTransfer(); | ||
|
|
@@ -558,7 +559,6 @@ | |
| // But don't you know any way to distinguish first two cases from last two? | ||
| // Only one - special flag set in CTRL+V handler and exec method of 'paste' | ||
| // command. And that's what we did using preventPasteEventNow(). | ||
| pasteDataFromClipboard( evt ); | ||
| } ); | ||
|
|
||
|
|
@@ -662,7 +662,6 @@ | |
| this.type == 'cut' && fixCut(); | ||
|
|
||
| var success = tryToCutCopy( this.type ); | ||
| if ( !success ) { | ||
| // Show cutError or copyError. | ||
| editor.showNotification( editor.lang.clipboard[ this.type + 'Error' ] ); // jshint ignore:line | ||
|
|
@@ -1515,7 +1514,7 @@ | |
| * @readonly | ||
| * @property {Boolean} | ||
| */ | ||
| isCustomCopyCutSupported: ( !CKEDITOR.env.ie || CKEDITOR.env.version >= 16 ) && !CKEDITOR.env.iOS, | ||
|
|
||
| /** | ||
| * True if the environment supports MIME types and custom data types in dataTransfer/cliboardData getData/setData methods. | ||
|
|
@@ -1524,7 +1523,7 @@ | |
| * @readonly | ||
| * @property {Boolean} | ||
| */ | ||
| isCustomDataTypesSupported: !CKEDITOR.env.ie || CKEDITOR.env.version >= 16, | ||
|
|
||
| /** | ||
| * True if the environment supports File API. | ||
|
|
@@ -1583,8 +1582,15 @@ | |
| return true; | ||
| } | ||
|
|
||
| // Edge 15 added support for Clipboard API | ||
| // (https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6515107-clipboard-api), however it is | ||
| // usable for our case starting from Edge 16 (#468). | ||
| if ( CKEDITOR.env.edge && CKEDITOR.env.version >= 16 ) { | ||
| return true; | ||
| } | ||
|
|
||
| // In older Safari and IE HTML data is not available though the Clipboard API. | ||
| // In older Edge version things are also a bit messy - | ||
| // https://connect.microsoft.com/IE/feedback/details/1572456/edge-clipboard-api-text-html-content-messed-up-in-event-clipboarddata | ||
| // It is safer to use the paste bin in unknown cases. | ||
| return false; | ||
|
|
@@ -2079,7 +2085,7 @@ | |
| */ | ||
| initPasteDataTransfer: function( evt, sourceEditor ) { | ||
| if ( !this.isCustomCopyCutSupported ) { | ||
| // Edge < 16 does not support custom copy/cut, but it have some useful data in the clipboardData (http://dev.ckeditor.com/ticket/13755). | ||
| return new this.dataTransfer( ( CKEDITOR.env.edge && evt && evt.data.$ && evt.data.$.clipboardData ) || null, sourceEditor ); | ||
| } else if ( evt && evt.data && evt.data.$ ) { | ||
| var dataTransfer = new this.dataTransfer( evt.data.$.clipboardData, sourceEditor ); | ||
|
|
@@ -2132,6 +2138,8 @@ | |
| this.$ = nativeDataTransfer; | ||
| } | ||
|
|
||
| this.customDataFallbackType = 'text/html'; | ||
|
|
||
| this._ = { | ||
| metaRegExp: /^<meta.*?>/i, | ||
| bodyRegExp: /<body(?:[\s\S]*?)>([\s\S]*)<\/body>/i, | ||
|
|
@@ -2169,16 +2177,6 @@ | |
| } | ||
| } | ||
|
|
||
| if ( editor ) { | ||
| this.sourceEditor = editor; | ||
|
|
||
|
|
@@ -2191,6 +2189,13 @@ | |
| } | ||
| } | ||
|
|
||
| // Set id as a last thing to not force rereading/rewriting custom data comment. | ||
| // In IE10+ we can not use any data type besides text, so we do not call setData. | ||
| if ( clipboardIdDataType != 'Text' ) { | ||
| // Try to set ID so it will be passed from the drag to the drop event. | ||
| this._setCustomData( clipboardIdDataType, this.id, CKEDITOR.env.ie && CKEDITOR.env.version >= 16 ); | ||
| } | ||
|
|
||
| /** | ||
| * Data transfer ID used to bind all dataTransfer | ||
| * objects based on the same event (e.g. in drag and drop events). | ||
|
|
@@ -2220,6 +2225,14 @@ | |
| * @private | ||
| * @property {Object} _ | ||
| */ | ||
|
|
||
| /** | ||
| * The MIME type which is used to store custom data (in special `<!-- cke-data: encoded JSON -->` comment) | ||
| * when browser does not allow to use custom MIME types in `dataTransfer.setData`. | ||
| * | ||
| * @readonly | ||
| * @property {String} customDataFallbackType | ||
| */ | ||
| }; | ||
|
|
||
| /** | ||
|
|
@@ -2288,6 +2301,7 @@ | |
| type = this._.normalizeType( type ); | ||
|
|
||
| var data = this._.data[ type ], | ||
| content, | ||
| result; | ||
|
|
||
| if ( isEmpty( data ) ) { | ||
|
|
@@ -2296,6 +2310,21 @@ | |
| } catch ( e ) {} | ||
| } | ||
|
|
||
| // If we are getting the same type which may store custom data we need to extract it (removing custom data comment). | ||
| // Or if we are getting different type and it is empty we need to check inside data comment if it is stored there. | ||
| if ( !isEmpty( data ) && type === this.customDataFallbackType ) { | ||
|
There was a problem hiding this comment. With this construction every modern browser will take a performance hit when calling |
||
| content = this._extractDataComment( data ); | ||
| data = content.content; | ||
|
|
||
|
There was a problem hiding this comment. No need for this empty line here. |
||
| } else if ( isEmpty( data ) ) { | ||
|
There was a problem hiding this comment. Couldn't we do this part in this catch statement https://github.com/ckeditor/ckeditor-dev/blob/ea41a52/plugins/clipboard/plugin.js#L2326 ? AFAIR Edge throws an exception when calling There was a problem hiding this comment. The point is to execute this (possibly intense) operation as little as possible. This is a clipboard, so these kind of optimizations are important. There was a problem hiding this comment. Unfortunately, Edge only throws error on |
||
| try { | ||
| content = this._extractDataComment( this.$.getData( this.customDataFallbackType ) ); | ||
| if ( content.data && content.data[ type ] ) { | ||
| data = content.data[ type ]; | ||
| } | ||
| } catch ( e ) {} | ||
| } | ||
|
|
||
| if ( isEmpty( data ) ) { | ||
| data = ''; | ||
| } | ||
|
|
@@ -2353,9 +2382,22 @@ | |
| this.id = value; | ||
| } | ||
|
|
||
| // Extract custom data if used type is the same one which is used for storing it. | ||
| // Then new value is added to a custom data so it will not be overwritten entirely. | ||
| if ( type === this.customDataFallbackType ) { | ||
| var content = null; | ||
| try { | ||
| content = this._extractDataComment( this.$.getData( this.customDataFallbackType ) ); | ||
| } catch ( e ) {} | ||
|
|
||
| if ( content && content.data ) { | ||
| value = this._applyDataComment( value, content.data ); | ||
| } | ||
| this._setCustomData( type, value ); | ||
|
|
||
| } else { | ||
| this._setCustomData( type, value, CKEDITOR.env.ie && CKEDITOR.env.version >= 16 ); | ||
| } | ||
| }, | ||
|
|
||
| /** | ||
|
|
@@ -2524,7 +2566,9 @@ | |
| _getImageFromClipboard: function() { | ||
| var file; | ||
|
|
||
| // The dataTransfer.items is not supported in IE/Edge. This function is used as a backup always after | ||
| // dataTransfer.files is checked so there is no need for implementing more logic than ignoring IE/Edge (#468). | ||
| if ( !CKEDITOR.env.ie && this.$ && this.$.items && this.$.items[ 0 ] ) { | ||
| try { | ||
| file = this.$.items[ 0 ].getAsFile(); | ||
| // Duck typing | ||
|
|
@@ -2537,6 +2581,89 @@ | |
| } | ||
|
|
||
| return undefined; | ||
| }, | ||
|
|
||
| /** | ||
| * Additional layer over `dataTransfer.setData` method. If used with `useFallback = true` in case of native `setData` | ||
| * throwing an error it will try to place passed value in | ||
| * {@link CKEDITOR.plugins.clipboard.dataTransfer#customDataFallbackType} type using special comment format: | ||
| * | ||
| * <!--cke-data:{ type: value }--> | ||
| * | ||
| * It is important to keep in mind that `{ type: value }` object is stringified (using `JSON.stringify`) | ||
| * and encoded (using `encodeURIComponent`). | ||
| * | ||
| * @private | ||
| * @param {String} type | ||
| * @param {String} value | ||
| * @param {Boolean} useFallback | ||
| */ | ||
| _setCustomData: function( type, value, useFallback ) { | ||
| try { | ||
| this.$.setData( type, value ); | ||
|
|
||
| } catch ( e ) { | ||
| if ( useFallback ) { | ||
| // Still in some situations some browsers may throw errors even when using predefined MIME types. | ||
| try { | ||
| // We need to get the data first to append `type` and not to overwrite whole custom data. | ||
| var content = this._extractDataComment( this.$.getData( this.customDataFallbackType ) ); | ||
|
|
||
| if ( !content.data ) { | ||
| content.data = {}; | ||
| } | ||
| content.data[ type ] = value; | ||
|
|
||
| this.$.setData( this.customDataFallbackType, this._applyDataComment( content.content, content.data ) ); | ||
| } catch ( e ) {} | ||
| } | ||
| } | ||
| }, | ||
|
|
||
| /** | ||
| * Extracts `cke-data` comment from the given content. Returns an object containing extracted data as `data` | ||
|
There was a problem hiding this comment.
It's better to inline it in a corresponding |
||
| * and content (without `cke-data` comment) as `content`. | ||
| * | ||
| * @private | ||
|
There was a problem hiding this comment. Missing introduction version number. There was a problem hiding this comment. As it will be moved to a new class which as a whole has |
||
| * @param {String} content | ||
| * @returns {Object} | ||
| * @returns {Object} return.data | ||
|
There was a problem hiding this comment. This could be a |
||
| * @returns {String} return.content | ||
| */ | ||
| _extractDataComment: function( content ) { | ||
| var result = { | ||
| data: null, | ||
| content: content || '' | ||
| }; | ||
|
|
||
| // At least 17 characters length: <!--cke-data:-->. | ||
| if ( content && content.length > 16 ) { | ||
| var matcher = /<!--cke-data:(.*?)-->/g, | ||
| matches; | ||
|
|
||
| matches = matcher.exec( content ); | ||
| if ( matches && matches[ 1 ] ) { | ||
| result.data = JSON.parse( decodeURIComponent( matches[ 1 ] ) ); | ||
| result.content = content.replace( matches[ 0 ], '' ); | ||
| } | ||
| } | ||
| return result; | ||
| }, | ||
|
|
||
| /** | ||
| * Creates `cke-data` comment containing stringified and encoded data object which is prepended to a given content. | ||
| * | ||
| * @private | ||
| * @param {String} content | ||
| * @param {Object} data | ||
| * @returns {String} | ||
| */ | ||
| _applyDataComment: function( content, data ) { | ||
| var customData = ''; | ||
| if ( data && CKEDITOR.tools.objectKeys( data ).length ) { | ||
| customData = '<!--cke-data:' + encodeURIComponent( JSON.stringify( data ) ) + '-->'; | ||
| } | ||
| return customData + ( content && content.length ? content : '' ); | ||
| } | ||
| }; | ||
| } )(); | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should mark it as a private property. This is a hax that others should not be concerned about.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
With that it's name should be prefixed with an underscore.