glitchier-soc/app/javascript/flavours/glitch/features/composer/textarea/index.js

//  Package imports.
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import {
  defineMessages,
  FormattedMessage,
} from 'react-intl';
import Textarea from 'react-textarea-autosize';

//  Components.
import EmojiPicker from 'flavours/glitch/features/emoji_picker';
import ComposerTextareaSuggestions from './suggestions';

//  Utils.
import { isRtl } from 'flavours/glitch/util/rtl';
import {
  assignHandlers,
  hiddenComponent,
} from 'flavours/glitch/util/react_helpers';

//  Messages.
const messages = defineMessages({
  placeholder: {
    defaultMessage: 'What is on your mind?',
    id: 'compose_form.placeholder',
  },
});

//  Handlers.
const handlers = {

  //  When blurring the textarea, suggestions are hidden.
  blur () {
    this.setState({ suggestionsHidden: true });
  },

  //  When the contents of the textarea change, we have to pull up new
  //  autosuggest suggestions if applicable, and also change the value
  //  of the textarea in our store.
  change ({
    target: {
      selectionStart,
      value,
    },
  }) {
    const {
      onChange,
      onSuggestionsFetchRequested,
      onSuggestionsClearRequested,
    } = this.props;
    const { lastToken } = this.state;

    //  This gets the token at the caret location, if it begins with an
    //  `@` (mentions) or `:` (shortcodes).
    const left = value.slice(0, selectionStart).search(/[^\s\u200B]+$/);
    const right = value.slice(selectionStart).search(/[\s\u200B]/);
    const token = function () {
      switch (true) {
      case left < 0 || /[@:]/.test(!value[left]):
        return null;
      case right < 0:
        return value.slice(left);
      default:
        return value.slice(left, right + selectionStart).trim().toLowerCase();
      }
    }();

    //  We only request suggestions for tokens which are at least 3
    //  characters long.
    if (onSuggestionsFetchRequested && token && token.length >= 3) {
      if (lastToken !== token) {
        this.setState({
          lastToken: token,
          selectedSuggestion: 0,
          tokenStart: left,
        });
        onSuggestionsFetchRequested(token);
      }
    } else {
      this.setState({ lastToken: null });
      if (onSuggestionsClearRequested) {
        onSuggestionsClearRequested();
      }
    }

    //  Updates the value of the textarea.
    if (onChange) {
      onChange(value);
    }
  },

  //  Handles a click on an autosuggestion.
  clickSuggestion (index) {
    const { textarea } = this;
    const {
      onSuggestionSelected,
      suggestions,
    } = this.props;
    const {
      lastToken,
      tokenStart,
    } = this.state;
    onSuggestionSelected(tokenStart, lastToken, suggestions.get(index));
    textarea.focus();
  },

  //  Handles a keypress.  If the autosuggestions are visible, we need
  //  to allow keypresses to navigate and sleect them.
  keyDown (e) {
    const {
      disabled,
      onSubmit,
      onSuggestionSelected,
      suggestions,
    } = this.props;
    const {
      lastToken,
      suggestionsHidden,
      selectedSuggestion,
      tokenStart,
    } = this.state;

    //  Keypresses do nothing if the composer is disabled.
    if (disabled) {
      e.preventDefault();
      return;
    }

    //  Switches over the pressed key.
    switch(e.key) {

    //  On arrow down, we pick the next suggestion.
    case 'ArrowDown':
      if (suggestions && suggestions.size > 0 && !suggestionsHidden) {
        e.preventDefault();
        this.setState({ selectedSuggestion: Math.min(selectedSuggestion + 1, suggestions.size - 1) });
      }
      return;

    //  On arrow up, we pick the previous suggestion.
    case 'ArrowUp':
      if (suggestions && suggestions.size > 0 && !suggestionsHidden) {
        e.preventDefault();
        this.setState({ selectedSuggestion: Math.max(selectedSuggestion - 1, 0) });
      }
      return;

    //  On enter or tab, we select the suggestion.
    case 'Enter':
    case 'Tab':
      if (onSuggestionSelected && lastToken !== null && suggestions && suggestions.size > 0 && !suggestionsHidden) {
        e.preventDefault();
        e.stopPropagation();
        onSuggestionSelected(tokenStart, lastToken, suggestions.get(selectedSuggestion));
      }
      return;
    }

    //  We submit the status on control/meta + enter.
    if (onSubmit && e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
      onSubmit();
    }
  },

  //  When the escape key is released, we either close the suggestions
  //  window or focus the UI.
  keyUp ({ key }) {
    const { suggestionsHidden } = this.state;
    if (key === 'Escape') {
      if (!suggestionsHidden) {
        this.setState({ suggestionsHidden: true });
      } else {
        document.querySelector('.ui').parentElement.focus();
      }
    }
  },

  //  Handles the pasting of images into the composer.
  paste (e) {
    const { onPaste } = this.props;
    let d;
    if (onPaste && (d = e.clipboardData) && (d = d.files).length === 1) {
      onPaste(d);
      e.preventDefault();
    }
  },

  //  Saves a reference to the textarea.
  refTextarea (textarea) {
    this.textarea = textarea;
  },
};

//  The component.
export default class ComposerTextarea extends React.Component {

  //  Constructor.
  constructor (props) {
    super(props);
    assignHandlers(this, handlers);
    this.state = {
      suggestionsHidden: false,
      selectedSuggestion: 0,
      lastToken: null,
      tokenStart: 0,
    };

    //  Instance variables.
    this.textarea = null;
  }

  //  When we receive new suggestions, we unhide the suggestions window
  //  if we didn't have any suggestions before.
  componentWillReceiveProps (nextProps) {
    const { suggestions } = this.props;
    const { suggestionsHidden } = this.state;
    if (nextProps.suggestions && nextProps.suggestions !== suggestions && nextProps.suggestions.size > 0 && suggestionsHidden) {
      this.setState({ suggestionsHidden: false });
    }
  }

  //  Rendering.
  render () {
    const {
      blur,
      change,
      clickSuggestion,
      keyDown,
      keyUp,
      paste,
      refTextarea,
    } = this.handlers;
    const {
      autoFocus,
      disabled,
      intl,
      onPickEmoji,
      suggestions,
      value,
    } = this.props;
    const {
      selectedSuggestion,
      suggestionsHidden,
    } = this.state;

    //  The result.
    return (
      <div className='autosuggest-textarea'>
        <label>
          <span {...hiddenComponent}><FormattedMessage {...messages.placeholder} /></span>
          <Textarea
            aria-autocomplete='list'
            autoFocus={autoFocus}
            disabled={disabled}
            inputRef={refTextarea}
            onBlur={blur}
            onChange={change}
            onKeyDown={keyDown}
            onKeyUp={keyUp}
            onPaste={paste}
            placeholder={intl.formatMessage(messages.placeholder)}
            value={value}
            style={{ direction: isRtl(value) ? 'rtl' : 'ltr' }}
          />
        </label>
        <EmojiPicker onPickEmoji={onPickEmoji} />
        <ComposerTextareaSuggestions
          hidden={suggestionsHidden}
          onSuggestionClick={clickSuggestion}
          suggestions={suggestions}
          value={selectedSuggestion}
        />
      </div>
    );
  }

}

//  Props.
ComposerTextarea.propTypes = {
  autoFocus: PropTypes.bool,
  disabled: PropTypes.bool,
  intl: PropTypes.object.isRequired,
  onChange: PropTypes.func,
  onPaste: PropTypes.func,
  onPickEmoji: PropTypes.func,
  onSubmit: PropTypes.func,
  onSuggestionsClearRequested: PropTypes.func,
  onSuggestionsFetchRequested: PropTypes.func,
  onSuggestionSelected: PropTypes.func,
  suggestions: ImmutablePropTypes.list,
  value: PropTypes.string,
};

//  Default props.
ComposerTextarea.defaultProps = { autoFocus: true };