AkkomaGang/masto-fe
2
2
Fork 0
Code Issues 3 Pull requests Projects Releases Wiki Activity

Fix caret position after inserting emoji (#7167)

Browse source
This commit is contained in:
abcang 2018-04-17 20:50:33 +09:00 committed by Eugen Rochko
parent 609bf93029
commit 727917e91e
4 changed files with 13 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/javascript/mastodon/actions/compose.js
View file

@ -446,11 +446,12 @@ export function changeComposeVisibility(value) {
};
};
export function insertEmojiCompose(position, emoji) {
export function insertEmojiCompose(position, emoji, needsSpace) {
return {
type: COMPOSE_EMOJI_INSERT,
position,
emoji,
needsSpace,
};
};

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

@ -19,6 +19,8 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import { length } from 'stringz';
import { countableText } from '../util/counter';
const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d';
const messages = defineMessages({
placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Write your warning here' },
@ -144,10 +146,13 @@ export default class ComposeForm extends ImmutablePureComponent {
}
handleEmojiPick = (data) => {
const { text } = this.props;
const position = this.autosuggestTextarea.textarea.selectionStart;
const emojiChar = data.native;
this._restoreCaret = position + emojiChar.length + 1;
this.props.onPickEmoji(position, data);
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);
}
render () {

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

@ -56,8 +56,8 @@ const mapDispatchToProps = (dispatch) => ({
dispatch(uploadCompose(files));
},
onPickEmoji (position, data) {
dispatch(insertEmojiCompose(position, data));
onPickEmoji (position, data, needsSpace) {
dispatch(insertEmojiCompose(position, data, needsSpace));
},
});

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

@ -36,8 +36,6 @@ import { Map as ImmutableMap, List as ImmutableList, OrderedSet as ImmutableOrde
import uuid from '../uuid';
import { me } from '../initial_state';
const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d';
const initialState = ImmutableMap({
mounted: 0,
sensitive: false,
@ -137,9 +135,8 @@ const updateSuggestionTags = (state, token) => {
});
};
const insertEmoji = (state, position, emojiData) => {
const insertEmoji = (state, position, emojiData, needsSpace) => {
const oldText = state.get('text');
const needsSpace = emojiData.custom && position > 0 && !allowedAroundShortCode.includes(oldText[position - 1]);
const emoji = needsSpace ? ' ' + emojiData.native : emojiData.native;
return state.merge({
@ -288,7 +285,7 @@ export default function compose(state = initialState, action) {
return state;
}
case COMPOSE_EMOJI_INSERT:
return insertEmoji(state, action.position, action.emoji);
return insertEmoji(state, action.position, action.emoji, action.needsSpace);
case COMPOSE_UPLOAD_CHANGE_SUCCESS:
return state
.set('is_submitting', false)