chinwag/chinwagsocial
chinwag/chinwagsocial
2
0
Fork 0
Code Issues Pull requests Releases 5 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 { return {
type: COMPOSE_EMOJI_INSERT, type: COMPOSE_EMOJI_INSERT,
position, position,
emoji, 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 { length } from 'stringz';
import { countableText } from '../util/counter'; 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({ const messages = defineMessages({
placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' }, placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Write your warning here' }, spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Write your warning here' },
@ -144,10 +146,13 @@ export default class ComposeForm extends ImmutablePureComponent {
} }
handleEmojiPick = (data) => { handleEmojiPick = (data) => {
const { text } = this.props;
const position = this.autosuggestTextarea.textarea.selectionStart; const position = this.autosuggestTextarea.textarea.selectionStart;
const emojiChar = data.native; const emojiChar = data.native;
this._restoreCaret = position + emojiChar.length + 1; const needsSpace = data.custom && position > 0 && !allowedAroundShortCode.includes(text[position - 1]);
this.props.onPickEmoji(position, data);
this._restoreCaret = position + emojiChar.length + 1 + (needsSpace ? 1 : 0);
this.props.onPickEmoji(position, data, needsSpace);
} }
render () { render () {

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

@ -56,8 +56,8 @@ const mapDispatchToProps = (dispatch) => ({
dispatch(uploadCompose(files)); dispatch(uploadCompose(files));
}, },
onPickEmoji (position, data) { onPickEmoji (position, data, needsSpace) {
dispatch(insertEmojiCompose(position, data)); 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 uuid from '../uuid';
import { me } from '../initial_state'; 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({ const initialState = ImmutableMap({
mounted: 0, mounted: 0,
sensitive: false, 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 oldText = state.get('text');
const needsSpace = emojiData.custom && position > 0 && !allowedAroundShortCode.includes(oldText[position - 1]);
const emoji = needsSpace ? ' ' + emojiData.native : emojiData.native; const emoji = needsSpace ? ' ' + emojiData.native : emojiData.native;
return state.merge({ return state.merge({
@ -288,7 +285,7 @@ export default function compose(state = initialState, action) {
return state; return state;
} }
case COMPOSE_EMOJI_INSERT: 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: case COMPOSE_UPLOAD_CHANGE_SUCCESS:
return state return state
.set('is_submitting', false) .set('is_submitting', false)