Fix caret position after inserting suggestions (fixes #281)
This commit is contained in:
		
							parent
							
								
									2e017e752f
								
							
						
					
					
						commit
						f9a8240394
					
				
					 2 changed files with 12 additions and 7 deletions
				
			
		| 
						 | 
				
			
			@ -56,6 +56,7 @@ function mapStateToProps (state) {
 | 
			
		|||
    advancedOptions: state.getIn(['compose', 'advanced_options']),
 | 
			
		||||
    amUnlocked: !state.getIn(['accounts', me, 'locked']),
 | 
			
		||||
    focusDate: state.getIn(['compose', 'focusDate']),
 | 
			
		||||
    caretPosition: state.getIn(['compose', 'caretPosition']),
 | 
			
		||||
    isSubmitting: state.getIn(['compose', 'is_submitting']),
 | 
			
		||||
    isUploading: state.getIn(['compose', 'is_uploading']),
 | 
			
		||||
    layout: state.getIn(['local_settings', 'layout']),
 | 
			
		||||
| 
						 | 
				
			
			@ -117,7 +118,6 @@ const handlers = {
 | 
			
		|||
  handleEmoji (data) {
 | 
			
		||||
    const { textarea: { selectionStart } } = this;
 | 
			
		||||
    const { onInsertEmoji } = this.props;
 | 
			
		||||
    this.caretPos = selectionStart + data.native.length + 1;
 | 
			
		||||
    if (onInsertEmoji) {
 | 
			
		||||
      onInsertEmoji(selectionStart, data);
 | 
			
		||||
    }
 | 
			
		||||
| 
						 | 
				
			
			@ -139,7 +139,6 @@ const handlers = {
 | 
			
		|||
  //  Selects a suggestion from the autofill.
 | 
			
		||||
  handleSelect (tokenStart, token, value) {
 | 
			
		||||
    const { onSelectSuggestion } = this.props;
 | 
			
		||||
    this.caretPos = null;
 | 
			
		||||
    if (onSelectSuggestion) {
 | 
			
		||||
      onSelectSuggestion(tokenStart, token, value);
 | 
			
		||||
    }
 | 
			
		||||
| 
						 | 
				
			
			@ -191,7 +190,6 @@ class Composer extends React.Component {
 | 
			
		|||
    assignHandlers(this, handlers);
 | 
			
		||||
 | 
			
		||||
    //  Instance variables.
 | 
			
		||||
    this.caretPos = null;
 | 
			
		||||
    this.textarea = null;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -220,11 +218,11 @@ class Composer extends React.Component {
 | 
			
		|||
  //        everyone else from the conversation.
 | 
			
		||||
  componentDidUpdate (prevProps) {
 | 
			
		||||
    const {
 | 
			
		||||
      caretPos,
 | 
			
		||||
      textarea,
 | 
			
		||||
    } = this;
 | 
			
		||||
    const {
 | 
			
		||||
      focusDate,
 | 
			
		||||
      caretPosition,
 | 
			
		||||
      isSubmitting,
 | 
			
		||||
      preselectDate,
 | 
			
		||||
      text,
 | 
			
		||||
| 
						 | 
				
			
			@ -238,8 +236,8 @@ class Composer extends React.Component {
 | 
			
		|||
        selectionStart = text.search(/\s/) + 1;
 | 
			
		||||
        selectionEnd = text.length;
 | 
			
		||||
        break;
 | 
			
		||||
      case !isNaN(caretPos) && caretPos !== null:
 | 
			
		||||
        selectionStart = selectionEnd = caretPos;
 | 
			
		||||
      case !isNaN(caretPosition) && caretPosition !== null:
 | 
			
		||||
        selectionStart = selectionEnd = caretPosition;
 | 
			
		||||
        break;
 | 
			
		||||
      default:
 | 
			
		||||
        selectionStart = selectionEnd = text.length;
 | 
			
		||||
| 
						 | 
				
			
			@ -396,6 +394,7 @@ Composer.propTypes = {
 | 
			
		|||
  advancedOptions: ImmutablePropTypes.map,
 | 
			
		||||
  amUnlocked: PropTypes.bool,
 | 
			
		||||
  focusDate: PropTypes.instanceOf(Date),
 | 
			
		||||
  caretPosition: PropTypes.number,
 | 
			
		||||
  isSubmitting: PropTypes.bool,
 | 
			
		||||
  isUploading: PropTypes.bool,
 | 
			
		||||
  layout: PropTypes.string,
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -56,6 +56,7 @@ const initialState = ImmutableMap({
 | 
			
		|||
  privacy: null,
 | 
			
		||||
  text: '',
 | 
			
		||||
  focusDate: null,
 | 
			
		||||
  caretPosition: null,
 | 
			
		||||
  preselectDate: null,
 | 
			
		||||
  in_reply_to: null,
 | 
			
		||||
  is_submitting: false,
 | 
			
		||||
| 
						 | 
				
			
			@ -148,6 +149,7 @@ function continueThread (state, status) {
 | 
			
		|||
    map.update('media_attachments', list => list.clear());
 | 
			
		||||
    map.set('idempotencyKey', uuid());
 | 
			
		||||
    map.set('focusDate', new Date());
 | 
			
		||||
    map.set('caretPosition', null);
 | 
			
		||||
    map.set('preselectDate', new Date());
 | 
			
		||||
  });
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -159,7 +161,6 @@ function appendMedia(state, media) {
 | 
			
		|||
    map.update('media_attachments', list => list.push(media));
 | 
			
		||||
    map.set('is_uploading', false);
 | 
			
		||||
    map.set('resetFileKey', Math.floor((Math.random() * 0x10000)));
 | 
			
		||||
    map.set('focusDate', new Date());
 | 
			
		||||
    map.set('idempotencyKey', uuid());
 | 
			
		||||
 | 
			
		||||
    if (prevSize === 0 && (state.get('default_sensitive') || state.get('spoiler'))) {
 | 
			
		||||
| 
						 | 
				
			
			@ -187,6 +188,7 @@ const insertSuggestion = (state, position, token, completion) => {
 | 
			
		|||
    map.set('suggestion_token', null);
 | 
			
		||||
    map.update('suggestions', ImmutableList(), list => list.clear());
 | 
			
		||||
    map.set('focusDate', new Date());
 | 
			
		||||
    map.set('caretPosition', position + completion.length + 1);
 | 
			
		||||
    map.set('idempotencyKey', uuid());
 | 
			
		||||
  });
 | 
			
		||||
};
 | 
			
		||||
| 
						 | 
				
			
			@ -197,6 +199,7 @@ const insertEmoji = (state, position, emojiData) => {
 | 
			
		|||
  return state.withMutations(map => {
 | 
			
		||||
    map.update('text', oldText => `${oldText.slice(0, position)}${emoji}\u200B${oldText.slice(position)}`);
 | 
			
		||||
    map.set('focusDate', new Date());
 | 
			
		||||
    map.set('caretPosition', position + emoji.length + 1);
 | 
			
		||||
    map.set('idempotencyKey', uuid());
 | 
			
		||||
  });
 | 
			
		||||
};
 | 
			
		||||
| 
						 | 
				
			
			@ -278,6 +281,7 @@ export default function compose(state = initialState, action) {
 | 
			
		|||
        map => map.merge(new ImmutableMap({ do_not_federate: /👁\ufe0f?\u200b?(?:<\/p>)?$/.test(action.status.get('content')) }))
 | 
			
		||||
      );
 | 
			
		||||
      map.set('focusDate', new Date());
 | 
			
		||||
      map.set('caretPosition', null);
 | 
			
		||||
      map.set('preselectDate', new Date());
 | 
			
		||||
      map.set('idempotencyKey', uuid());
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -325,6 +329,7 @@ export default function compose(state = initialState, action) {
 | 
			
		|||
    return state.withMutations(map => {
 | 
			
		||||
      map.update('text', text => [text.trim(), `@${action.account.get('acct')} `].filter((str) => str.length !== 0).join(' '));
 | 
			
		||||
      map.set('focusDate', new Date());
 | 
			
		||||
      map.set('caretPosition', null);
 | 
			
		||||
      map.set('idempotencyKey', uuid());
 | 
			
		||||
    });
 | 
			
		||||
  case COMPOSE_DIRECT:
 | 
			
		||||
| 
						 | 
				
			
			@ -332,6 +337,7 @@ export default function compose(state = initialState, action) {
 | 
			
		|||
      map.update('text', text => [text.trim(), `@${action.account.get('acct')} `].filter((str) => str.length !== 0).join(' '));
 | 
			
		||||
      map.set('privacy', 'direct');
 | 
			
		||||
      map.set('focusDate', new Date());
 | 
			
		||||
      map.set('caretPosition', null);
 | 
			
		||||
      map.set('idempotencyKey', uuid());
 | 
			
		||||
    });
 | 
			
		||||
  case COMPOSE_SUGGESTIONS_CLEAR:
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in a new issue