-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Input Interaction: allow text to be dragged inside and across blocks #14574
base: trunk
Are you sure you want to change the base?
Conversation
I tried to make an e2e test but it didn't work out. |
5809921
to
3ce88ca
Compare
// Cancel multi-selection. | ||
this.props.onSelectionEnd(); | ||
// Revert to selecting the block if there is multi-selection. | ||
this.props.onSelect(); |
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.
Should we do these two calls constantly or check if needed (trying to be mindful of rerenders)
@@ -104,6 +104,46 @@ function createPrepareEditableTree( props ) { | |||
}, value.formats ); | |||
} | |||
|
|||
function extractData( 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.
Do you think this is unit testable?
I'd love to see this revisited. 👍 |
const item = find( [ ...items, ...files ], ( { type } ) => /^image\/(?:jpe?g|png|gif)$/.test( type ) ); | ||
if ( item && ! html ) { | ||
const file = item.getAsFile ? item.getAsFile() : item; | ||
const file = find( files, ( { type } ) => /^image\/(?:jpe?g|png|gif)$/.test( type ) ); |
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 need to use Lodash here:
const file = find( files, ( { type } ) => /^image\/(?:jpe?g|png|gif)$/.test( type ) ); | |
const file = files.find( ( { type } ) => /^image\/(?:jpe?g|png|gif)$/.test( type ) ); |
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.
Or if files
may be nullish:
const file = find( files, ( { type } ) => /^image\/(?:jpe?g|png|gif)$/.test( type ) ); | |
const file = files?.find( ( { type } ) => /^image\/(?:jpe?g|png|gif)$/.test( type ) ); |
Looks like this needs to be rebased with |
Description
Fixes #3339. This one was a bit harder to figure out than I thought.
Currently, it is not possible to drag text at all. Not within the same editable field (rich or plain), not across blocks. This PR allows the user to do so.
How has this been tested?
Select some text, drag it to another rich text area, then drop. Do the same within a rich text area.
Screenshots
Types of changes
Checklist: