Skip to content

Input Interaction: allow text to be dragged inside and across blocks - #14574

Closed
ellatrix wants to merge 1 commit into
trunkfrom
try/rich-text-drag-html
Closed

ellatrix wants to merge 1 commit into
trunkfrom
try/rich-text-drag-html

Conversation

@ellatrix

@ellatrix ellatrix commented Mar 22, 2019 •

Copy link
Copy Markdown
Member

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
Copy Markdown
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
Copy Markdown
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)

}, value.formats );
}

function extractData( dataTransfer ) {

Copy link
Copy Markdown
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
Copy Markdown

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
Copy Markdown
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
Copy Markdown
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

guarani commented Oct 27, 2020

Copy link
Copy Markdown
Contributor

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
@ellatrix ellatrix mentioned this pull request Aug 13, 2026
33 of 70 tasks
@ellatrix

Copy link
Copy Markdown
Member Author

Closing in favor of #81603.

@ellatrix ellatrix closed this Oct 19, 2026
@ellatrix
ellatrix deleted the try/rich-text-drag-html branch October 19, 2026 02:47
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