Support pasting a bunch of identifiers into the invite dialog

Part of element-hq/element-web#11199

Author: turt2live

src/components/views/dialogs/DMInviteDialog.js

@@ -30,6 +30,7 @@ import {getDefaultIdentityServerUrl, useDefaultIdentityServer} from "../../../ut
 import {abbreviateUrl} from "../../../utils/UrlUtils";
 import dis from "../../../dispatcher";
 import IdentityAuthClient from "../../../IdentityAuthClient";
+import Modal from "../../../Modal";
 
 // TODO: [TravisR] Make this generic for all kinds of invites
 
@@ -502,6 +503,70 @@ export default class DMInviteDialog extends React.PureComponent {
  }
  };
 
+ _onPaste = async (e) => {
+ // Prevent the text being pasted into the textarea
+ e.preventDefault();
+
+ // Process it as a list of addresses to add instead
+ const text = e.clipboardData.getData("text");
+ const possibleMembers = [
+ // If we can avoid hitting the profile endpoint, we should.
+ ...this.state.recents,
+ ...this.state.suggestions,
+ ...this.state.serverResultsMixin,
+ ...this.state.threepidResultsMixin,
+ ];
+ const toAdd = [];
+ const failed = [];
+ const potentialAddresses = text.split(/[\s,]+/);
+ for (const address of potentialAddresses) {
+ const member = possibleMembers.find(m => m.userId === address);
+ if (member) {
+ toAdd.push(member.user);
+ continue;
+ }
+
+ if (address.indexOf('@') > 0 && Email.looksValid(address)) {
+ toAdd.push(new ThreepidMember(address));
+ continue;
+ }
+
+ if (address[0] !== '@') {
+ failed.push(address); // not a user ID
+ continue;
+ }
+
+ try {
+ const profile = await MatrixClientPeg.get().getProfileInfo(address);
+ const displayName = profile ? profile.displayname : null;
+ const avatarUrl = profile ? profile.avatar_url : null;
+ toAdd.push(new DirectoryMember({
+ user_id: address,
+ display_name: displayName,
+ avatar_url: avatarUrl,
+ }));
+ } catch (e) {
+ console.error("Error looking up profile for " + address);
+ console.error(e);
+ failed.push(address);
+ }
+ }
+
+ if (failed.length > 0) {
+ const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
+ Modal.createTrackedDialog('Invite Paste Fail', '', QuestionDialog, {
+ title: _t('Failed to find the following users'),
+ description: _t(
+ "The following users might not exist or are invalid, and cannot be invited: %(csvNames)s",
+ {csvNames: failed.join(", ")},
+ ),
+ button: _t('OK'),
+ });
+ }
+
+ this.setState({targets: [...this.state.targets, ...toAdd]});
+ };
+
  _onClickInputArea = (e) => {
  // Stop the browser from highlighting text
  e.preventDefault();
@@ -624,6 +689,7 @@ export default class DMInviteDialog extends React.PureComponent {
  onChange={this._updateFilter}
  defaultValue={this.state.filterText}
  ref={this._editorRef}
+ onPaste={this._onPaste}
  />
  );
  return (

src/i18n/strings/en_EN.json

@@ -1422,6 +1422,8 @@
  "View Servers in Room": "View Servers in Room",
  "Toolbox": "Toolbox",
  "Developer Tools": "Developer Tools",
+ "Failed to find the following users": "Failed to find the following users",
+ "The following users might not exist or are invalid, and cannot be invited: %(csvNames)s": "The following users might not exist or are invalid, and cannot be invited: %(csvNames)s",
  "Recent Conversations": "Recent Conversations",
  "Suggestions": "Suggestions",
  "Show more": "Show more",