959 lines
27 KiB
JavaScript
Executable File
959 lines
27 KiB
JavaScript
Executable File
import React from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
|
import Flux from '../lib/flux';
|
|
import lodash from 'lodash';
|
|
import classNames from 'classnames';
|
|
import EmojiStore from '../stores/EmojiStore';
|
|
import Textarea from './common/TextareaAutosize';
|
|
import Spinner from './common/Spinner';
|
|
import PresenceStore from '../stores/PresenceStore';
|
|
import ChannelStore from '../stores/ChannelStore';
|
|
import GuildStore from '../stores/GuildStore';
|
|
import StreamerModeStore from '../stores/StreamerModeStore';
|
|
import UserStore from '../stores/UserStore';
|
|
import Avatar from './common/Avatar';
|
|
import FileInput from './common/FileInput';
|
|
import DiscordTag from './common/DiscordTag';
|
|
import PermissionMixin from '../mixins/PermissionMixin';
|
|
import IntegrationActionCreators from '../actions/IntegrationActionCreators';
|
|
import IntegrationQueryStore from '../stores/IntegrationQueryStore';
|
|
import UserSettingsModalActionCreators from '../actions/UserSettingsModalActionCreators';
|
|
import AutocompleteUtils from '../utils/AutocompleteUtils';
|
|
import i18n from '../i18n';
|
|
import InProgressTextCreators from '../actions/InProgressTextCreators';
|
|
import UserSettingsStore from '../stores/UserSettingsStore';
|
|
import RegexUtils from '../utils/RegexUtils';
|
|
import UploadMixin from '../mixins/web/UploadMixin';
|
|
import EmojiButton from './EmojiPicker';
|
|
import ComponentDispatchMixin from '../mixins/ComponentDispatchMixin';
|
|
import {
|
|
Permissions,
|
|
ChannelTypes,
|
|
TextareaTypes,
|
|
StatusTypes,
|
|
MAX_USER_AUTOCOMPLETE_RESULTS,
|
|
ComponentActions,
|
|
UserSettingsSections,
|
|
} from '../Constants';
|
|
import './ChannelTextarea.styl';
|
|
|
|
const RESULTS_REF = 'results';
|
|
const COMMAND_ENABLED = () => true;
|
|
|
|
const COMMANDS = [
|
|
{
|
|
command: 'gamerescape',
|
|
title: 'Gamer Escape',
|
|
description: i18n.Messages.COMMAND_GAMER_ESCAPE_DESCRIPTION,
|
|
integration: true,
|
|
enabled: COMMAND_ENABLED,
|
|
images: false,
|
|
},
|
|
{
|
|
command: 'xivdb',
|
|
title: 'XIVDB',
|
|
description: i18n.Messages.COMMAND_XIVDB_DESCRIPTION,
|
|
integration: true,
|
|
enabled: COMMAND_ENABLED,
|
|
images: false,
|
|
},
|
|
{
|
|
command: 'giphy',
|
|
title: 'Giphy',
|
|
description: i18n.Messages.COMMAND_GIPHY_DESCRIPTION,
|
|
integration: true,
|
|
enabled: COMMAND_ENABLED,
|
|
images: true,
|
|
},
|
|
{
|
|
command: 'tenor',
|
|
title: 'Tenor',
|
|
description: i18n.Messages.COMMAND_GIPHY_DESCRIPTION, // Just reuse Giphy description.
|
|
integration: true,
|
|
enabled: COMMAND_ENABLED,
|
|
images: true,
|
|
},
|
|
{
|
|
command: 'tts',
|
|
description: i18n.Messages.COMMAND_TTS_DESCRIPTION,
|
|
integration: false,
|
|
enabled: (can, context) => UserSettingsStore.enableTTSCommand && can(Permissions.SEND_TSS_MESSAGES, context),
|
|
images: false,
|
|
},
|
|
{
|
|
command: 'me',
|
|
description: i18n.Messages.COMMAND_ME_DESCRIPTION,
|
|
integration: false,
|
|
enabled: COMMAND_ENABLED,
|
|
images: false,
|
|
},
|
|
{
|
|
command: 'tableflip',
|
|
description: i18n.Messages.COMMAND_TABLEFLIP_DESCRIPTION,
|
|
integration: false,
|
|
enabled: COMMAND_ENABLED,
|
|
images: false,
|
|
},
|
|
{
|
|
command: 'unflip',
|
|
description: i18n.Messages.COMMAND_TABLEUNFLIP_DESCRIPTION,
|
|
integration: false,
|
|
enabled: COMMAND_ENABLED,
|
|
images: false,
|
|
},
|
|
{
|
|
command: 'shrug',
|
|
description: i18n.Messages.COMMAND_SHRUG_DESCRIPTION,
|
|
integration: false,
|
|
enabled: COMMAND_ENABLED,
|
|
images: false,
|
|
},
|
|
{
|
|
command: 'nick',
|
|
description: i18n.Messages.COMMAND_NICK_DESCRIPTION,
|
|
integration: false,
|
|
enabled: (can, context) => can(Permissions.CHANGE_NICKNAME, context) || can(Permissions.MANAGE_NICKNAMES, context),
|
|
images: false,
|
|
},
|
|
];
|
|
|
|
const MENTION_EVERYONE = {
|
|
content: 'everyone',
|
|
description: i18n.Messages.MENTION_EVERYONE_AUTOCOMPLETE_DESCRIPTION,
|
|
};
|
|
|
|
const MENTION_HERE = {
|
|
content: 'here',
|
|
description: i18n.Messages.MENTION_HERE_AUTOCOMPLETE_DESCRIPTION,
|
|
};
|
|
|
|
const MENTION_SENTINEL = '@';
|
|
const CHANNEL_SENTINEL = '#';
|
|
const EMOJI_SENTINEL = ':';
|
|
const COMMAND_SENTINEL = '/';
|
|
const PREFIX_RE = new RegExp(`${MENTION_SENTINEL}|${CHANNEL_SENTINEL}|${EMOJI_SENTINEL}|^${COMMAND_SENTINEL}`);
|
|
const COMMAND_RE = new RegExp(`^/(${COMMANDS.filter(c => c.integration).map(c => c.command).join('|')})\\s(.+)`, 'i');
|
|
const WHITESPACE_RE = /(\t|\s)/;
|
|
|
|
const TYPE_NONE = 0;
|
|
const TYPE_MENTION = 1;
|
|
const TYPE_EMOJI = 2;
|
|
const TYPE_COMMAND = 3;
|
|
const TYPE_INTEGRATION = 4;
|
|
const TYPE_CHANNEL = 5;
|
|
|
|
const UploadButton = React.createClass({
|
|
mixins: [UploadMixin, ComponentDispatchMixin, PureRenderMixin],
|
|
|
|
getSubscriptions() {
|
|
return {
|
|
[ComponentActions.UPLOAD_FILE]: this.uploadFile,
|
|
};
|
|
},
|
|
|
|
uploadFile() {
|
|
if (this._input) {
|
|
this._input.activateUploadDialogue();
|
|
}
|
|
},
|
|
|
|
handleFileChange(e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
this.promptToUpload(e.target.files, this.props.channel.id);
|
|
},
|
|
|
|
setRef(ref) {
|
|
this._input = ref;
|
|
},
|
|
|
|
render() {
|
|
return (
|
|
// Can't wrap input in a button for firefox: http://bit.ly/1AOwTFd
|
|
<div className="channel-textarea-upload">
|
|
<FileInput ref={this.setRef} onChange={this.handleFileChange} multiple={true} />
|
|
</div>
|
|
);
|
|
},
|
|
});
|
|
|
|
const ResultsMixin = {
|
|
getInitialState() {
|
|
return {
|
|
selectedIndex: 0,
|
|
};
|
|
},
|
|
|
|
getDefaultProps() {
|
|
return {
|
|
prefix: '',
|
|
query: '',
|
|
};
|
|
},
|
|
|
|
handleKeyDown(e) {
|
|
const results = this.state.results || this.props.results;
|
|
if (results == null || results.length === 0 || this.state.loading) return;
|
|
let selectedIndex = this.state.selectedIndex;
|
|
switch (e.which) {
|
|
case 40: // DOWN
|
|
e.preventDefault();
|
|
if (++selectedIndex >= results.length) {
|
|
selectedIndex = 0;
|
|
}
|
|
this.setState({selectedIndex});
|
|
break;
|
|
case 38: // UP
|
|
e.preventDefault();
|
|
if (--selectedIndex < 0) {
|
|
selectedIndex = results.length - 1;
|
|
}
|
|
this.setState({selectedIndex});
|
|
break;
|
|
case 9: // TAB
|
|
case 13: // ENTER
|
|
e.preventDefault();
|
|
this.handleSelect();
|
|
break;
|
|
}
|
|
},
|
|
|
|
setSelectedIndex(selectedIndex) {
|
|
this.setState({selectedIndex});
|
|
},
|
|
|
|
handleSelect(e = null) {
|
|
const results = this.state.results || this.props.results;
|
|
if (results == null || results.length === 0 || this.state.loading) return;
|
|
let value = results[this.state.selectedIndex];
|
|
switch (this.props.type) {
|
|
case TYPE_MENTION:
|
|
if (value.content) {
|
|
value = MENTION_SENTINEL + value.content;
|
|
} else {
|
|
const user = value.user;
|
|
if (StreamerModeStore.hidePersonalInformation) {
|
|
value = MENTION_SENTINEL + user.username;
|
|
} else {
|
|
value = MENTION_SENTINEL + `${user.username}#${user.discriminator}`;
|
|
}
|
|
}
|
|
break;
|
|
case TYPE_EMOJI:
|
|
value = EMOJI_SENTINEL + value.name + EMOJI_SENTINEL;
|
|
break;
|
|
case TYPE_COMMAND:
|
|
value = COMMAND_SENTINEL + value.command;
|
|
break;
|
|
case TYPE_INTEGRATION:
|
|
value = value.url;
|
|
break;
|
|
case TYPE_CHANNEL:
|
|
value = CHANNEL_SENTINEL + value.name;
|
|
break;
|
|
}
|
|
e && e.preventDefault();
|
|
this.props.onSelect(value);
|
|
},
|
|
|
|
render() {
|
|
let results;
|
|
if (this.state.loading) {
|
|
results = <Spinner />;
|
|
} else {
|
|
const renderRow = (result, i) => {
|
|
return this.renderRow(result, {
|
|
key: i,
|
|
className: classNames({active: this.state.selectedIndex === i}),
|
|
onMouseDown: this.handleSelect,
|
|
onMouseEnter: () => this.setSelectedIndex(i),
|
|
});
|
|
};
|
|
results = (
|
|
<ul className={classNames({images: this.props.command && this.props.command.images})}>
|
|
{(this.props.results || this.state.results).map(renderRow)}
|
|
</ul>
|
|
);
|
|
}
|
|
return (
|
|
<div className="channel-textarea-autocomplete">
|
|
<div className="channel-textarea-autocomplete-inner">
|
|
<header>{this.renderHeader()}</header>
|
|
{results}
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
const IntegrationResults = React.createClass({
|
|
mixins: [ResultsMixin, Flux.StoreListenerMixin(IntegrationQueryStore)],
|
|
|
|
getStateFromStores() {
|
|
return this.getResults(this.props);
|
|
},
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
this.setState(this.getResults(nextProps));
|
|
},
|
|
|
|
getResults(props) {
|
|
let results = IntegrationQueryStore.getResults(props.integration, props.query);
|
|
if (this.props.command.images && this.isMounted()) {
|
|
let width = ReactDOM.findDOMNode(this).offsetWidth;
|
|
const newResults = results.results.filter(result => {
|
|
if (width < 0) {
|
|
return false;
|
|
} else {
|
|
width -= result.width + 15;
|
|
return true;
|
|
}
|
|
});
|
|
results = {...results, results: newResults};
|
|
}
|
|
return results;
|
|
},
|
|
|
|
renderHeader() {
|
|
const command = this.props.command.title;
|
|
const query = this.props.query;
|
|
return <div>{i18n.Messages.CONTENT_MATCHING.format({command, query})}</div>;
|
|
},
|
|
|
|
renderRow(result, props) {
|
|
if (this.props.command.images) {
|
|
return (
|
|
<li {...props}>
|
|
<img width={result['width']} height={result['height']} src={result['src']} />
|
|
</li>
|
|
);
|
|
} else {
|
|
let icon;
|
|
if (result['icon_url']) {
|
|
icon = <img className="command-icon" src={result['icon_url']} />;
|
|
}
|
|
let type;
|
|
if (result['type']) {
|
|
type = <span className="command-description">{result['type']}</span>;
|
|
}
|
|
return (
|
|
<li {...props}>
|
|
{icon}
|
|
<span className="command">{result.title}</span>
|
|
{type}
|
|
</li>
|
|
);
|
|
}
|
|
},
|
|
});
|
|
|
|
const EmojiResults = React.createClass({
|
|
mixins: [ResultsMixin],
|
|
|
|
renderHeader() {
|
|
const items = [];
|
|
if (this.props.prefix.length > 1) {
|
|
items.push(
|
|
<div key="emoji-autocomplete-query">
|
|
{i18n.Messages.EMOJI_MATCHING.format({prefix: this.props.prefix})}
|
|
</div>
|
|
);
|
|
} else {
|
|
items.push(<div key="emoji-autocomplete-title">{i18n.Messages.EMOJI}</div>);
|
|
}
|
|
const user = UserStore.getCurrentUser();
|
|
if (!user.premium) {
|
|
// preventDefault is required onMouseDown to stop blur from firing on
|
|
// ChannelTextArea and hiding the autocomplete and thus not allowing
|
|
// click to fire
|
|
items.push(
|
|
<div key="emoji-autocomplete-promo" className="premium-promo-autocomplete">
|
|
{i18n.Messages.PREMIUM_PROMO_AUTOCOMPLETE}
|
|
{' — '}
|
|
<span
|
|
onMouseDown={event => event.preventDefault()}
|
|
onClick={event => {
|
|
event.preventDefault();
|
|
UserSettingsModalActionCreators.open(UserSettingsSections.PREMIUM);
|
|
}}>
|
|
{i18n.Messages.PREMIUM_PROMO_AUTOCOMPLETE_CTA}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
return items;
|
|
},
|
|
|
|
renderRow(emoji, props) {
|
|
const emojiPattern = EMOJI_SENTINEL + emoji.name + EMOJI_SENTINEL;
|
|
let emojiPreview;
|
|
|
|
if (emoji.url) {
|
|
emojiPreview = <img className="emoji" src={emoji.url} />;
|
|
} else {
|
|
emojiPreview = <span className="raw-emoji">{emoji.surrogates}</span>;
|
|
}
|
|
|
|
return (
|
|
<li {...props}>
|
|
{emojiPreview}
|
|
{emojiPattern}
|
|
</li>
|
|
);
|
|
},
|
|
});
|
|
|
|
const MentionResults = React.createClass({
|
|
mixins: [ResultsMixin],
|
|
|
|
renderHeader() {
|
|
if (this.props.prefix.length > 1) {
|
|
return <div>{i18n.Messages.MEMBERS_MATCHING.format({prefix: this.props.prefix})}</div>;
|
|
} else {
|
|
return i18n.Messages.MEMBERS;
|
|
}
|
|
},
|
|
|
|
renderRow(result, props) {
|
|
if (result.user != null) {
|
|
const user = result.user;
|
|
const status = PresenceStore.getStatus(user.id);
|
|
const avatar = <Avatar user={user} status={status === StatusTypes.OFFLINE ? null : status} />;
|
|
const tag = <DiscordTag user={user} />;
|
|
if (result.nick != null) {
|
|
return (
|
|
<li {...props}>
|
|
<span className="user">
|
|
{avatar}
|
|
<span className="username">{result.nick}</span>
|
|
</span>
|
|
<span className="user-description">
|
|
{tag}
|
|
</span>
|
|
</li>
|
|
);
|
|
} else {
|
|
return (
|
|
<li {...props}>
|
|
{avatar}
|
|
{tag}
|
|
</li>
|
|
);
|
|
}
|
|
}
|
|
return (
|
|
<li {...props} style={{color: result.colorString}}>
|
|
<span className="command">{MENTION_SENTINEL + result.content}</span>
|
|
<span className="command-description">{result.description}</span>
|
|
</li>
|
|
);
|
|
},
|
|
});
|
|
|
|
const CommandResults = React.createClass({
|
|
mixins: [ResultsMixin],
|
|
|
|
renderHeader() {
|
|
if (this.props.prefix.length > 1) {
|
|
return <div>{i18n.Messages.COMMANDS_MATCHING.format({prefix: this.props.prefix})}</div>;
|
|
} else {
|
|
return i18n.Messages.COMMANDS;
|
|
}
|
|
},
|
|
|
|
renderRow({command, description}, props) {
|
|
return (
|
|
<li {...props}>
|
|
<span className="command">{COMMAND_SENTINEL + command}</span>
|
|
<span className="command-description">{description}</span>
|
|
</li>
|
|
);
|
|
},
|
|
});
|
|
|
|
const ChannelResults = React.createClass({
|
|
mixins: [ResultsMixin],
|
|
|
|
renderHeader() {
|
|
if (this.props.prefix.length > 1) {
|
|
return <div>{i18n.Messages.TEXT_CHANNELS_MATCHING.format({prefix: this.props.prefix})}</div>;
|
|
} else {
|
|
return i18n.Messages.TEXT_CHANNELS;
|
|
}
|
|
},
|
|
|
|
renderRow(channel, props) {
|
|
return (
|
|
<li {...props}>
|
|
<span className="channel-name">{channel.toString()}</span>
|
|
</li>
|
|
);
|
|
},
|
|
});
|
|
|
|
const ChannelTextArea = React.createClass({
|
|
mixins: [PermissionMixin, UploadMixin, ComponentDispatchMixin],
|
|
|
|
propTypes: {
|
|
onSubmit: React.PropTypes.func.isRequired,
|
|
onFocus: React.PropTypes.func,
|
|
onBlur: React.PropTypes.func,
|
|
placeholder: React.PropTypes.string,
|
|
type: React.PropTypes.string,
|
|
defaultValue: React.PropTypes.string,
|
|
allowSlashCommands: React.PropTypes.bool,
|
|
inputType: React.PropTypes.string,
|
|
blurEvent: React.PropTypes.string,
|
|
},
|
|
|
|
getDefaultProps() {
|
|
return {
|
|
type: TextareaTypes.NORMAL,
|
|
defaultValue: '',
|
|
blurEvent: ComponentActions.TEXTAREA_BLUR,
|
|
};
|
|
},
|
|
|
|
getInitialState() {
|
|
return {
|
|
type: TYPE_NONE,
|
|
focused: false,
|
|
prefix: null,
|
|
};
|
|
},
|
|
|
|
getSubscriptions() {
|
|
const subscriptions = {
|
|
[ComponentActions.INSERT_TEXT]: this.handleInsertText,
|
|
};
|
|
if (this.props.blurEvent) {
|
|
subscriptions[this.props.blurEvent] = this.forceBlur;
|
|
}
|
|
return subscriptions;
|
|
},
|
|
|
|
forceBlur() {
|
|
if (this.refs.textarea) {
|
|
this.refs.textarea.blur();
|
|
}
|
|
},
|
|
|
|
handleInsertText({content}) {
|
|
this.insertText(content);
|
|
this.focus();
|
|
},
|
|
|
|
shouldComponentUpdate(nextProps, nextState) {
|
|
return (
|
|
this.props.channel.id !== nextProps.channel.id ||
|
|
this.props.placeholder !== nextProps.placeholder ||
|
|
this.state.type !== nextState.type ||
|
|
this.state.focused !== nextState.focused ||
|
|
this.state.prefix !== nextState.prefix ||
|
|
this.state.integration !== nextState.integration ||
|
|
this.state.query !== nextState.query ||
|
|
this.didPermissionsUpdate(nextState, nextProps.channel) ||
|
|
this.props.type !== nextProps.type
|
|
);
|
|
},
|
|
|
|
componentWillUnmount() {
|
|
if (this.props.type === TextareaTypes.NORMAL) {
|
|
InProgressTextCreators.saveCurrentText(this.props.channel.id, this.getValue());
|
|
}
|
|
},
|
|
|
|
componentDidMount() {
|
|
// move cursor to the end of the text field we were editing, if there was any restored text
|
|
const textarea = ReactDOM.findDOMNode(this.refs.textarea);
|
|
textarea.selectionStart = textarea.selectionEnd = textarea.value.length;
|
|
},
|
|
|
|
clearValue() {
|
|
InProgressTextCreators.saveCurrentText(this.props.channel.id, '');
|
|
this.refs.textarea.clear();
|
|
},
|
|
|
|
getValue() {
|
|
return ReactDOM.findDOMNode(this.refs.textarea).value.trim();
|
|
},
|
|
|
|
setValue(val) {
|
|
const textarea = ReactDOM.findDOMNode(this.refs.textarea);
|
|
if (textarea) {
|
|
textarea.value = val;
|
|
this.refs.textarea.recalculateSize();
|
|
}
|
|
},
|
|
|
|
hasOpenCodeBlock() {
|
|
const textarea = ReactDOM.findDOMNode(this.refs.textarea);
|
|
const match = textarea.value.slice(0, textarea.selectionStart).match(/```/g);
|
|
return match != null && match.length > 0 && match.length % 2 !== 0;
|
|
},
|
|
|
|
focus() {
|
|
ReactDOM.findDOMNode(this.refs.textarea).focus();
|
|
},
|
|
|
|
handleFocus(e) {
|
|
if (this.props.onFocus) {
|
|
this.props.onFocus(e);
|
|
}
|
|
this.setState({focused: true});
|
|
},
|
|
|
|
handleBlur(e) {
|
|
if (this.props.onBlur) {
|
|
this.props.onBlur(e);
|
|
}
|
|
this.setState({focused: false});
|
|
},
|
|
|
|
handleKeyPress(e) {
|
|
if (e.which === 13 /* RETURN */ && !(e.shiftKey || e.ctrlKey) && !this.hasOpenCodeBlock()) {
|
|
e.preventDefault();
|
|
const value = this.getValue();
|
|
if (this.props.onSubmit(value) && this.props.type === TextareaTypes.NORMAL) {
|
|
this.clearValue();
|
|
}
|
|
}
|
|
if (this.props.onKeyUp) {
|
|
this.props.onKeyUp(e);
|
|
}
|
|
},
|
|
|
|
handleKeyDown(e) {
|
|
const results = this.refs[RESULTS_REF];
|
|
if (results != null) {
|
|
results.handleKeyDown(e);
|
|
}
|
|
if (e.which === 9 /* TAB */) {
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
const value = this.getValue();
|
|
this.props.onKeyDown && this.props.onKeyDown(e, value);
|
|
},
|
|
|
|
handleKeyUp() {
|
|
this.maybeShowAutocomplete();
|
|
},
|
|
|
|
handlePasta(e) {
|
|
if (
|
|
this.props.type !== TextareaTypes.NORMAL ||
|
|
!e.clipboardData ||
|
|
!e.clipboardData.items ||
|
|
(!this.props.channel.isPrivate() && !this.can(Permissions.ATTACH_FILES, this.props.channel))
|
|
) {
|
|
return;
|
|
}
|
|
|
|
for (let i = 0; i < e.clipboardData.items.length; i++) {
|
|
const clipboardItem = e.clipboardData.items[i];
|
|
|
|
switch (clipboardItem.type) {
|
|
case 'image/png':
|
|
e.preventDefault();
|
|
const fileBlob = clipboardItem.getAsFile();
|
|
|
|
if (fileBlob == null) {
|
|
break;
|
|
}
|
|
|
|
// In chrome, some files will have an additional
|
|
// html node that contains the filename.
|
|
if (e.clipboardData.items.length === 2) {
|
|
e.clipboardData.items[0].getAsString(s => {
|
|
fileBlob.overrideName = this.extractFileName(s);
|
|
this.promptToUpload([fileBlob], this.props.channel.id);
|
|
});
|
|
} else {
|
|
this.promptToUpload([fileBlob], this.props.channel.id);
|
|
}
|
|
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
|
|
extractFileName(htmlString) {
|
|
const div = document.createElement('div');
|
|
|
|
div.innerHTML = htmlString;
|
|
const img = div.querySelector('img');
|
|
|
|
if (img) {
|
|
const a = document.createElement('a');
|
|
a.href = img.src;
|
|
|
|
let filename = a.pathname.split('/').pop();
|
|
|
|
if (filename) {
|
|
filename = filename.replace(/\..+$/, '');
|
|
|
|
if (filename) {
|
|
return filename + '.png';
|
|
}
|
|
}
|
|
}
|
|
|
|
return undefined;
|
|
},
|
|
|
|
maybeShowAutocomplete(callback) {
|
|
// click event on textbox passes event obj
|
|
if (typeof callback !== 'function') {
|
|
callback = null;
|
|
}
|
|
|
|
const textarea = ReactDOM.findDOMNode(this.refs.textarea);
|
|
|
|
let start = textarea.selectionStart;
|
|
const end = textarea.selectionEnd;
|
|
|
|
let type = TYPE_NONE;
|
|
const value = textarea.value;
|
|
let prefix;
|
|
let results;
|
|
|
|
const match = value.match(COMMAND_RE);
|
|
if (match) {
|
|
const integration = match[1].toLowerCase();
|
|
const query = match[2];
|
|
if (this.state.integration === integration && this.state.query === query) {
|
|
if (callback) {
|
|
callback();
|
|
}
|
|
return;
|
|
}
|
|
IntegrationActionCreators.search(integration, query);
|
|
this.setState(
|
|
{
|
|
type: TYPE_INTEGRATION,
|
|
integration,
|
|
command: COMMANDS.filter(c => c.command === integration)[0],
|
|
query,
|
|
prefix: null,
|
|
results: null,
|
|
start: 0,
|
|
end: value.length,
|
|
},
|
|
callback
|
|
);
|
|
return;
|
|
}
|
|
|
|
const channel = ChannelStore.getChannel(this.props.channel.id);
|
|
const guildId = channel ? channel.getGuildId() : null;
|
|
const guild = guildId ? GuildStore.getGuild(guildId) : null;
|
|
|
|
do {
|
|
if (PREFIX_RE.test(value[start])) {
|
|
if (start === 0 || WHITESPACE_RE.test(value[start - 1])) {
|
|
prefix = value.slice(start, end);
|
|
if (this.state.prefix !== prefix) {
|
|
const regex = new RegExp(`^${RegexUtils.escape(prefix.slice(1))}`, 'i');
|
|
const test = v => regex.test(v);
|
|
switch (prefix[0]) {
|
|
case MENTION_SENTINEL:
|
|
type = TYPE_MENTION;
|
|
results = AutocompleteUtils.queryChannelUsers(this.props.channel.id, prefix.slice(1));
|
|
|
|
if (
|
|
results.length < MAX_USER_AUTOCOMPLETE_RESULTS &&
|
|
(this.can(Permissions.MENTION_EVERYONE, this.props.channel) ||
|
|
this.props.channel.type === ChannelTypes.GROUP_DM)
|
|
) {
|
|
if (test(MENTION_EVERYONE.content)) {
|
|
results.push(MENTION_EVERYONE);
|
|
}
|
|
if (results.length < MAX_USER_AUTOCOMPLETE_RESULTS && test(MENTION_HERE.content)) {
|
|
results.push(MENTION_HERE);
|
|
}
|
|
}
|
|
|
|
if (guild && results.length < MAX_USER_AUTOCOMPLETE_RESULTS) {
|
|
lodash(guild.roles)
|
|
.filter(({mentionable, name}) => mentionable && test(name))
|
|
.map(role => ({
|
|
content: role.name,
|
|
colorString: role.colorString,
|
|
description: i18n.Messages.MENTION_USERS_WITH_ROLE,
|
|
}))
|
|
.take(MAX_USER_AUTOCOMPLETE_RESULTS - results.length)
|
|
.forEach(item => results.push(item));
|
|
}
|
|
break;
|
|
case EMOJI_SENTINEL:
|
|
type = TYPE_EMOJI;
|
|
if (prefix.length > 2) {
|
|
results = EmojiStore.search(channel, prefix.slice(1), 10);
|
|
} else {
|
|
results = [];
|
|
}
|
|
break;
|
|
case COMMAND_SENTINEL:
|
|
if (start === 0 && this.props.type !== TextareaTypes.FORM) {
|
|
type = TYPE_COMMAND;
|
|
results = COMMANDS.filter(
|
|
({command, enabled}) => enabled(this.can, this.props.channel) && test(command)
|
|
).slice(0, 10);
|
|
}
|
|
break;
|
|
case CHANNEL_SENTINEL:
|
|
type = TYPE_CHANNEL;
|
|
const currentChannel = ChannelStore.getChannel(this.props.channel.id);
|
|
// TODO replace with AutocompleteUtils.queryTextChannels
|
|
results = lodash(ChannelStore.getChannels())
|
|
.filter(channel => channel['guild_id'] === currentChannel['guild_id'])
|
|
.filter(channel => channel.type === ChannelTypes.GUILD_TEXT)
|
|
.filter(channel => channel !== currentChannel && test(channel.name.toLowerCase()))
|
|
.filter(channel => this.can(Permissions.READ_MESSAGES, channel))
|
|
.sortBy(channel => channel.name)
|
|
.take(10)
|
|
.value();
|
|
break;
|
|
}
|
|
} else {
|
|
type = this.state.type;
|
|
results = this.state.results;
|
|
}
|
|
}
|
|
break;
|
|
} else if (WHITESPACE_RE.test(value[start - 1])) {
|
|
break;
|
|
}
|
|
} while (--start >= 0);
|
|
|
|
this.setState({type, prefix, results, start, end, command: null, integration: null}, callback);
|
|
},
|
|
|
|
insertText(value, atCarrot = true) {
|
|
const textarea = ReactDOM.findDOMNode(this.refs.textarea);
|
|
const before = textarea.value.slice(0, atCarrot ? textarea.selectionStart : this.state.start);
|
|
const after = textarea.value.slice(atCarrot ? textarea.selectionEnd : this.state.end);
|
|
value += ' ';
|
|
textarea.value = before + value + after;
|
|
textarea.selectionStart = textarea.selectionEnd = before.length + value.length;
|
|
this.setState({start: textarea.selectionStart, end: textarea.selectionEnd});
|
|
|
|
if (this.props.type === TextareaTypes.NORMAL) {
|
|
InProgressTextCreators.saveCurrentText(this.props.channel.id, textarea.value);
|
|
}
|
|
|
|
return textarea;
|
|
},
|
|
|
|
performAutocomplete(value) {
|
|
// Race condition fix for state start/end (tab right after entering char)
|
|
// (setState does not appear to instantly update)
|
|
this.maybeShowAutocomplete(() => {
|
|
this.insertText(value, false);
|
|
|
|
// closes autocomplete dialogs after use
|
|
this.maybeShowAutocomplete();
|
|
});
|
|
},
|
|
|
|
insertEmoji(emojiObject) {
|
|
if (emojiObject !== null) {
|
|
this.insertText(`:${emojiObject.name}:`);
|
|
}
|
|
|
|
const textarea = ReactDOM.findDOMNode(this.refs.textarea);
|
|
textarea.focus();
|
|
},
|
|
|
|
render() {
|
|
const disabled = !this.props.channel.isPrivate() && !this.can(Permissions.SEND_MESSAGES, this.props.channel);
|
|
let placeholder = this.props.placeholder;
|
|
if (disabled) {
|
|
placeholder = i18n.Messages.NO_SEND_MESSAGES_PERMISSION_PLACEHOLDER;
|
|
}
|
|
|
|
let uploadButton;
|
|
if (
|
|
this.props.type === TextareaTypes.NORMAL &&
|
|
(this.props.channel.isPrivate() || (this.can(Permissions.ATTACH_FILES, this.props.channel) && !disabled))
|
|
) {
|
|
uploadButton = <UploadButton channel={this.props.channel} />;
|
|
}
|
|
|
|
const autocompleteComponent =
|
|
this.state.focused &&
|
|
{
|
|
[TYPE_MENTION]: MentionResults,
|
|
[TYPE_EMOJI]: EmojiResults,
|
|
[TYPE_COMMAND]: CommandResults,
|
|
[TYPE_INTEGRATION]: IntegrationResults,
|
|
[TYPE_CHANNEL]: ChannelResults,
|
|
}[this.state.type];
|
|
let autocomplete;
|
|
if (autocompleteComponent) {
|
|
autocomplete = React.createElement(autocompleteComponent, {
|
|
key: this.state.query || this.state.prefix,
|
|
ref: RESULTS_REF,
|
|
type: this.state.type,
|
|
integration: this.state.integration,
|
|
command: this.state.command,
|
|
query: this.state.query,
|
|
prefix: this.state.prefix,
|
|
results: this.state.results,
|
|
onSelect: this.performAutocomplete,
|
|
});
|
|
}
|
|
|
|
const classes = {
|
|
'channel-textarea': true,
|
|
'channel-textarea-disabled': disabled,
|
|
'has-results':
|
|
this.state.focused &&
|
|
(this.state.integration != null || (this.state.results != null && this.state.results.length > 0)),
|
|
};
|
|
|
|
const channel = ChannelStore.getChannel(this.props.channel.id);
|
|
|
|
let emojiButton;
|
|
if (!disabled) {
|
|
emojiButton = <EmojiButton onSelectEmoji={this.insertEmoji} name={this.props.type} channel={channel} />;
|
|
}
|
|
|
|
return (
|
|
<div className={classNames(classes)} onClick={this.focus}>
|
|
<div className="channel-textarea-inner">
|
|
{uploadButton}
|
|
<Textarea
|
|
ref="textarea"
|
|
rows={1}
|
|
fontWidthEstimate={6}
|
|
autoFocus={true}
|
|
placeholder={placeholder}
|
|
disabled={disabled}
|
|
onChange={this.props.onChange}
|
|
onResize={this.props.onResize}
|
|
onKeyUp={this.handleKeyUp}
|
|
onKeyDown={this.handleKeyDown}
|
|
onKeyPress={this.handleKeyPress}
|
|
onFocus={this.handleFocus}
|
|
onBlur={this.handleBlur}
|
|
onPaste={this.handlePasta}
|
|
onClick={this.maybeShowAutocomplete}
|
|
defaultValue={this.props.defaultValue}
|
|
/>
|
|
{emojiButton}
|
|
</div>
|
|
{autocomplete}
|
|
</div>
|
|
);
|
|
},
|
|
});
|
|
|
|
export default ChannelTextArea;
|
|
|
|
|
|
|
|
// WEBPACK FOOTER //
|
|
// ./discord_app/components/ChannelTextArea.js
|