Skip to content
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

Open
wants to merge 1 commit into
base: trunk
Choose a base branch
from

Conversation

ellatrix
Copy link
Member

@ellatrix ellatrix commented Mar 22, 2019

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:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.

@ellatrix
Copy link
Member Author

I tried to make an e2e test but it didn't work out.

@ellatrix ellatrix added [Type] Bug An existing feature does not function as intended [Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... labels Mar 28, 2019
@ellatrix ellatrix force-pushed the try/rich-text-drag-html branch from 5809921 to 3ce88ca Compare April 4, 2019 07:44
@ellatrix ellatrix added the Good First Review A PR that's suitable for someone looking to contribute for the first time by reviewing code label Apr 4, 2019
// Cancel multi-selection.
this.props.onSelectionEnd();
// Revert to selecting the block if there is multi-selection.
this.props.onSelect();
Copy link
Contributor

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 ) {
Copy link
Contributor

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?

@youknowriad youknowriad self-requested a review April 19, 2019 08:47
@GlennMartin1
Copy link

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 ) );
Copy link
Member

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:

Suggested change
const file = find( files, ( { type } ) => /^image\/(?:jpe?g|png|gif)$/.test( type ) );
const file = files.find( ( { type } ) => /^image\/(?:jpe?g|png|gif)$/.test( type ) );

Copy link
Member

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:

Suggested change
const file = find( files, ( { type } ) => /^image\/(?:jpe?g|png|gif)$/.test( type ) );
const file = files?.find( ( { type } ) => /^image\/(?:jpe?g|png|gif)$/.test( type ) );

@guarani
Copy link
Contributor

guarani commented Oct 27, 2020

Looks like this needs to be rebased with master and conflicts resolved to be testable on mobile since this PR pre-dates the monorepo changes.

@carolinan carolinan removed the Good First Review A PR that's suitable for someone looking to contribute for the first time by reviewing code label Feb 27, 2021
Base automatically changed from master to trunk March 1, 2021 15:42
@guarani guarani removed their request for review January 19, 2022 12:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

click-and-hold highlighted text to reposition it
6 participants