chinwag/chinwagsocial
chinwag/chinwagsocial
2
0
Fork 0
Code Issues Pull requests Releases 14 Wiki Activity

Fix caret position after selected suggestion and media upload (#7595)

Browse source 
* Fix media upload reseting caret position to last inserted emoji

* Fix caret position after inserting suggestions (fixes #6089)
This commit is contained in:
ThibG 2018-05-23 15:20:15 +02:00 • committed by Eugen Rochko
commit d8864b9e9d
3 changed files with 11 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

10
app/javascript/mastodon/features/compose/components/compose_form.js
View file

@ -40,6 +40,7 @@ export default class ComposeForm extends ImmutablePureComponent {
privacy: PropTypes.string,
spoiler_text: PropTypes.string,
focusDate: PropTypes.instanceOf(Date),
caretPosition: PropTypes.number,
preselectDate: PropTypes.instanceOf(Date),
is_submitting: PropTypes.bool,
is_uploading: PropTypes.bool,
@ -96,7 +97,6 @@ export default class ComposeForm extends ImmutablePureComponent {
}
onSuggestionSelected = (tokenStart, token, value) => {
this._restoreCaret = null;
this.props.onSuggestionSelected(tokenStart, token, value);
}
@ -116,9 +116,9 @@ export default class ComposeForm extends ImmutablePureComponent {
if (this.props.preselectDate !== prevProps.preselectDate) {
selectionEnd = this.props.text.length;
selectionStart = this.props.text.search(/\s/) + 1;
} else if (typeof this._restoreCaret === 'number') {
selectionStart = this._restoreCaret;
selectionEnd = this._restoreCaret;
} else if (typeof this.props.caretPosition === 'number') {
selectionStart = this.props.caretPosition;
selectionEnd = this.props.caretPosition;
} else {
selectionEnd = this.props.text.length;
selectionStart = selectionEnd;
@ -138,10 +138,8 @@ export default class ComposeForm extends ImmutablePureComponent {
handleEmojiPick = (data) => {
const { text } = this.props;
const position = this.autosuggestTextarea.textarea.selectionStart;
const emojiChar = data.native;
const needsSpace = data.custom && position > 0 && !allowedAroundShortCode.includes(text[position - 1]);
this._restoreCaret = position + emojiChar.length + 1 + (needsSpace ? 1 : 0);
this.props.onPickEmoji(position, data, needsSpace);
}

1
app/javascript/mastodon/features/compose/containers/compose_form_container.js
View file

@ -19,6 +19,7 @@ const mapStateToProps = state => ({
spoiler_text: state.getIn(['compose', 'spoiler_text']),
privacy: state.getIn(['compose', 'privacy']),
focusDate: state.getIn(['compose', 'focusDate']),
caretPosition: state.getIn(['compose', 'caretPosition']),
preselectDate: state.getIn(['compose', 'preselectDate']),
is_submitting: state.getIn(['compose', 'is_submitting']),
is_uploading: state.getIn(['compose', 'is_uploading']),

7
app/javascript/mastodon/reducers/compose.js
View file

@ -44,6 +44,7 @@ const initialState = ImmutableMap({
privacy: null,
text: '',
focusDate: null,
caretPosition: null,
preselectDate: null,
in_reply_to: null,
is_composing: false,
@ -91,7 +92,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'))) {
@ -119,6 +119,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());
});
};
@ -142,6 +143,7 @@ const insertEmoji = (state, position, emojiData, needsSpace) => {
return state.merge({
text: `${oldText.slice(0, position)}${emoji} ${oldText.slice(position)}`,
focusDate: new Date(),
caretPosition: position + emoji.length + 1,
idempotencyKey: uuid(),
});
};
@ -216,6 +218,7 @@ export default function compose(state = initialState, action) {
map.set('text', statusToTextMentions(state, action.status));
map.set('privacy', privacyPreference(action.status.get('visibility'), state.get('default_privacy')));
map.set('focusDate', new Date());
map.set('caretPosition', null);
map.set('preselectDate', new Date());
map.set('idempotencyKey', uuid());
@ -259,6 +262,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:
@ -266,6 +270,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: