IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

MM-54856: Place emoji at cursor position while editing message (#27418)

Browse Source 
* MM-54856: fix issue with emoji position in edit post editor

* use useRef instead of useState

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
This commit is contained in:
Ashish Dhama 2024-07-13 01:29:22 +05:30 committed by GitHub
parent a4f2ec744c
commit 9bb22a369a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
webapp/channels/src/components/edit_post/edit_post.tsx
View File

@ -100,6 +100,7 @@ const EditPost = ({editingPost, actions, canEditPost, config, channelId, draft,
draft.message || editingPost?.post?.message_source || editingPost?.post?.message || '',
);
const [selectionRange, setSelectionRange] = useState<State['selectionRange']>({start: editText.length, end: editText.length});
const caretPosition = useRef<number>(editText.length);
const [postError, setPostError] = useState<React.ReactNode | null>(null);
const [errorClass, setErrorClass] = useState<string>('');
const [showEmojiPicker, setShowEmojiPicker] = useState<boolean>(false);
@ -160,7 +161,12 @@ const EditPost = ({editingPost, actions, canEditPost, config, channelId, draft,
}, [selectionRange]);
// just a helper so it's not always needed to update with setting both properties to the same value
const setCaretPosition = (position: number) => setSelectionRange({start: position, end: position});
const setSelectionRangeByCaretPosition = (position: number) => setSelectionRange({start: position, end: position});
const handleBlur = (e: React.FocusEvent<TextboxElement, Element>) => {
const target = e.target as HTMLTextAreaElement;
caretPosition.current = target.selectionEnd;
};
const handlePaste = useCallback((e: ClipboardEvent) => {
const {clipboardData, target} = e;
@ -194,7 +200,7 @@ const EditPost = ({editingPost, actions, canEditPost, config, channelId, draft,
}
setEditText(message);
setCaretPosition(newCaretPosition);
setSelectionRangeByCaretPosition(newCaretPosition);
}, [canEditPost, selectionRange, editText]);
const isSaveDisabled = () => {
@ -411,7 +417,7 @@ const EditPost = ({editingPost, actions, canEditPost, config, channelId, draft,
if (editText.length > 0) {
const {firstPiece, lastPiece} = splitMessageBasedOnCaretPosition(
selectionRange.start,
caretPosition.current,
editText,
);
@ -427,7 +433,7 @@ const EditPost = ({editingPost, actions, canEditPost, config, channelId, draft,
};
setEditText(newMessage);
setCaretPosition(newCaretPosition);
setSelectionRangeByCaretPosition(newCaretPosition);
setShowEmojiPicker(false);
textboxRef.current?.focus();
};
@ -510,6 +516,7 @@ const EditPost = ({editingPost, actions, canEditPost, config, channelId, draft,
onChange={handleChange}
onKeyPress={handleEditKeyPress}
onKeyDown={handleKeyDown}
onBlur={handleBlur}
onHeightChange={handleHeightChange}
handlePostError={handlePostError}
onPaste={handlePaste}

2
webapp/channels/src/components/suggestion/suggestion_box/suggestion_box.jsx
View File

@ -296,7 +296,7 @@ export default class SuggestionBox extends React.PureComponent {
this.setState({focused: false});
if (this.props.onBlur) {
this.props.onBlur();
this.props.onBlur(e);
}
};