erik/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2024-08-20 21:08:15 -07:00
Code Issues Projects Releases Wiki Activity

refactor drag'n'drop on search input

Browse source 
current default behavior is to insert additional drag & drop content into pre-existing content: e.g. first `alpha` is dropped, then `beta`; and the search-string becomes `alpbetaha`.  This change causes additional dropped content to overwrite pre-existing content entirely, such that `alpha` becomes `beta`.  Currently, drag-and-drop content in Chrome consists of the URL of the item being dragged; but in Firefox, using the `x-moz-url-desc`, if a tag or an account is dragged, then the display-text (e.g. `#somehashtag` or `@user`) will be dropped instead.  This enables the content-specific search drop-down to work on the more specific data-types (so, search for hashtag, or profile).  This functionality currently only works with Firefox, though: hence the `TODO` annotation
This commit is contained in:
Matt Panaro 2023-11-12 13:23:32 -05:00
parent 69d00e2721
commit c724d7b09c
1 changed files with 21 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
app/javascript/mastodon/features/compose/components/search.jsx
View file

@ -165,6 +165,25 @@ class Search extends PureComponent {
this.setState({ expanded: false, selectedOption: -1 });
};
handleDragOver = (e) => {
e.preventDefault();
};
handleDrop = (e) => {
const { onChange } = this.props;
e.preventDefault();
this.setState({ expanded: true, selectedOption: -1 });
// TODO: update the type parameter if/when `url-desc` is standardized
let query = e.dataTransfer.getData('text/x-moz-url-desc') ||
e.dataTransfer.getData('text/uri-list') ||
e.dataTransfer.getData('text/plain');
onChange(query);
this._calculateOptions(query);
e.target.focus();
};
handleHashtagClick = () => {
const { value, onClickSearchResult, history } = this.props;
@ -333,6 +352,8 @@ class Search extends PureComponent {
onKeyDown={this.handleKeyDown}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
onDragOver={this.handleDragOver}
onDrop={this.handleDrop}
/>
<div role='button' tabIndex={0} className='search__icon' onClick={this.handleClear}>