-
Notifications
You must be signed in to change notification settings - Fork 8
T/16 Introduce DataTransfer#files property, change the clipboardInput event and add the inputTranformation event #17
Conversation
src/clipboard.js
Outdated
@@ -95,7 +95,7 @@ export default class Clipboard extends Plugin { | |||
* @inheritDoc | |||
*/ | |||
static get pluginName() { | |||
return 'clipboard/clipboard'; |
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.
@Reinmar Not sure whether this should be a clipboard
or clipboard/clipboard
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.
See the documentation of Plugin.pluginName
. It should be clipboard/clipboard
– one is the package name (meaningful part of it) and the other is the module inside it.
Note that this PR also introduced "files" in the dataTransfer object. It should be mentioned in the commit message. |
Also the |
src/clipboard.js
Outdated
@@ -179,34 +191,28 @@ export default class Clipboard extends Plugin { | |||
} | |||
|
|||
/** | |||
* Fired with a content which comes from the clipboard (was pasted or dropped) and | |||
* Fired with a `dataTransfer`, which comes from the clipboard (was pasted or dropped) and | |||
* should be processed in order to be inserted into the editor. | |||
* It's part of the {@link module:clipboard/clipboard~Clipboard "clipboard pipeline"}. |
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.
This is observers event now. Docs should be moved to the clipboard observer.
Fixed. Added some docs improvements. |
You know guys that the |
src/clipboardobserver.js
Outdated
// Prevent page refreshing. | ||
data.preventDefault(); | ||
|
||
doc.fire( 'input', { dataTransfer: data.dataTransfer } ); |
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.
This event is really confusing. There's a nativeinput
event. So this one would need to be called clipboardInput
. Is it ok?
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.
That's fine for me.
src/clipboardobserver.js
Outdated
doc.on( 'drop', _handleInput, { priority: 'low' } ); | ||
|
||
function _handleInput( evt, data ) { | ||
// Prevent page refreshing. |
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.
This is not true. This line doesn't prevent page refreshing. It prevents the default action (which only in case of file dropping can be page reload). No reason to comment it.
src/clipboardobserver.js
Outdated
doc.on( 'paste', _handleInput, { priority: 'low' } ); | ||
doc.on( 'drop', _handleInput, { priority: 'low' } ); | ||
|
||
function _handleInput( evt, data ) { |
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.
No reason to prefix this function name with _
.
src/clipboardobserver.js
Outdated
this.domEventType = [ 'paste', 'copy', 'cut' ]; | ||
this.domEventType = [ 'paste', 'copy', 'cut', 'drop' ]; | ||
|
||
doc.on( 'paste', _handleInput, { priority: 'low' } ); |
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.
This is unsafe and incorrect. this.listenTo()
should be used. Those listeners should be gone together with the observer.
src/datatransfer.js
Outdated
@@ -42,4 +50,26 @@ export default class DataTransfer { | |||
setData( type, data ) { | |||
this._native.setData( type, data ); | |||
} | |||
|
|||
*_getFiles() { |
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.
Why is this function a generator if above we do Array.from()
anyway? It doesn't make sense.
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.
Besides, it needs at least minimal docs. Or even better – move it out of the prototype as it doesn't make sense here (unless for testing purposes, but then document this too).
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.
That's because of the historical reasons. There were no files
at the very beginning because there are some performance problems with reading files handlers, but then I realized that you need to get files handlers anyway to check if there are files, so the property was created. That's true that there is not a reason to keep it as a generator.
src/datatransfer.js
Outdated
if ( files.length ) { | ||
yield* files; | ||
} | ||
// // Chrome have empty DataTransfer.files, but let get files through the items interface. |
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.
Doubled //
.
src/datatransfer.js
Outdated
} | ||
} | ||
|
||
get types() { |
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.
Properties should be before methods and public stuff must be before protected and private stuff. Plus, it misses docs.
src/datatransfer.js
Outdated
/** | ||
* The array of files created from the native `DataTransfer#files` and `DataTransfer#items` objects. | ||
* | ||
* @public |
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.
It's also @readonly
.
src/datatransfer.js
Outdated
@@ -19,6 +19,14 @@ export default class DataTransfer { | |||
* @member {DataTransfer} #_native | |||
*/ | |||
this._native = nativeDataTransfer; | |||
|
|||
/** | |||
* The array of files created from the native `DataTransfer#files` and `DataTransfer#items` objects. |
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.
This is confusing – it indicates that #files
is a combination of these two native properties while it's either one or another.
src/clipboard.js
Outdated
* this.listenTo( editor.editing.view, 'input', ( evt, data ) => { | ||
* const content = customTransform( data.dataTransfer.get( 'text/html' ) ); | ||
* const transformedContent = transform( content ); | ||
* data.dataTransfer.set( 'text/html', transformedContent ); |
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.
Indentation.
@@ -50,7 +64,7 @@ import HtmlDataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/html | |||
* At this stage the pasted content can be processed by the features. E.g. a feature which wants to transform | |||
* a pasted text into a link can be implemented in this way: | |||
* | |||
* this.listenTo( editor.editing.view, 'clipboardInput', ( evt, data ) => { | |||
* this.listenTo( editor.plugins.get( 'clipboard/clipboard' ), 'inputTransformation', ( evt, data ) => { |
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.
Hm... I'm not sure that it makes sense to showcase this method of retrieving a plugin. It may not be loaded and such code would break. OTOH, showing the right way would make this code unnecessarily long, so perhaps we can leave this.
R- for now. I haven't checked all but the rest should be cosmetics. |
It's ready for the review once again. |
Feature: Introduced DataTransfer#files property. Change the clipboard input pipeline. Closes #16. BREAKING CHANGE: The `clipboardInput` event now contains only `DataTransfer`, no `content` there anymore. The separate `inputTransformation` event was introduced for the content transformations.
Suggested merge commit message (convention)
Feature: Introduced
DataTransfer#files
property. Changed theclipboardInput
event and added theinputTranformation
event. Closes ckeditor/ckeditor5#2656.