Fixed issue with cursor position in Composer, fixes emoji picker postioning

• Fixed:
- issue with cursor position in Composer, fixes emoji picker postioning
This commit is contained in:
mgabdev 2020-12-31 18:48:35 -05:00
parent 4174597a24
commit 3809700f17
4 changed files with 11 additions and 7 deletions

View File

@ -670,10 +670,9 @@ export const changeComposeVisibility = (value) => ({
/** /**
* *
*/ */
export const insertEmojiCompose = (emoji, needsSpace) => ({ export const insertEmojiCompose = (emoji) => ({
type: COMPOSE_EMOJI_INSERT, type: COMPOSE_EMOJI_INSERT,
emoji, emoji,
needsSpace,
}) })
/** /**

View File

@ -175,13 +175,17 @@ class Composer extends React.PureComponent {
plainText: value, plainText: value,
}) })
const selectionState = editorState.getSelection() const selectionState = editorState.getSelection()
const currentBlockKey = selectionState.getStartKey()
const currentBlockIndex = blocks.findIndex((k) => k.key === currentBlockKey)
const priorBlockTextLength = blocks.splice(0, currentBlockIndex).map(block => (!block.text.trim() && '') || block.text).join('\n').length
const selectionStart = selectionState.getStartOffset() const selectionStart = selectionState.getStartOffset()
const cursorPosition = priorBlockTextLength + selectionStart
const rawObject = convertToRaw(content) const rawObject = convertToRaw(content)
const markdownString = this.props.isPro ? draftToMarkdown(rawObject,markdownOptions) : null const markdownString = this.props.isPro ? draftToMarkdown(rawObject,markdownOptions) : null
this.props.onChange(null, value, markdownString, selectionStart) this.props.onChange(null, value, markdownString, cursorPosition)
} }
handleOnFocus = () => { handleOnFocus = () => {

View File

@ -285,7 +285,7 @@ const mapDispatchToProps = (dispatch) => ({
onPickEmoji: (emoji) => { onPickEmoji: (emoji) => {
dispatch(useEmoji(emoji)) dispatch(useEmoji(emoji))
dispatch(insertEmojiCompose(emoji, false)) dispatch(insertEmojiCompose(emoji))
}, },
}) })

View File

@ -179,8 +179,9 @@ const updateSuggestionTags = (state, token) => {
}); });
}; };
const insertEmoji = (state, emojiData, needsSpace) => { const insertEmoji = (state, emojiData) => {
const position = state.get('caretPosition') const position = state.get('caretPosition')
const needsSpace = !!emojiData.custom && position !== 0
const oldText = state.get('text'); const oldText = state.get('text');
const emoji = needsSpace ? ' ' + emojiData.native : emojiData.native; const emoji = needsSpace ? ' ' + emojiData.native : emojiData.native;
@ -365,7 +366,7 @@ export default function compose(state = initialState, action) {
return state; return state;
} }
case COMPOSE_EMOJI_INSERT: case COMPOSE_EMOJI_INSERT:
return insertEmoji(state, action.emoji, action.needsSpace); return insertEmoji(state, action.emoji);
case COMPOSE_UPLOAD_CHANGE_SUCCESS: case COMPOSE_UPLOAD_CHANGE_SUCCESS:
return state return state
.set('is_changing_upload', false) .set('is_changing_upload', false)