From 5fbe06ed91497eeff46e395f1e38164d99475d6d Mon Sep 17 00:00:00 2001 From: Aviral Dasgupta Date: Fri, 10 Feb 2017 03:40:57 +0530 Subject: [PATCH] force editor rerender when we swap editorStates --- src/components/views/rooms/Autocomplete.js | 23 +++++++++---------- .../views/rooms/MessageComposerInput.js | 19 +++++++++++---- 2 files changed, 25 insertions(+), 17 deletions(-) diff --git a/src/components/views/rooms/Autocomplete.js b/src/components/views/rooms/Autocomplete.js index 9a3a04376d..c06786a80c 100644 --- a/src/components/views/rooms/Autocomplete.js +++ b/src/components/views/rooms/Autocomplete.js @@ -58,7 +58,7 @@ export default class Autocomplete extends React.Component { return; } - const completionList = flatMap(completions, provider => provider.completions); + const completionList = flatMap(completions, (provider) => provider.completions); // Reset selection when completion list becomes empty. let selectionOffset = COMPOSER_SELECTED; @@ -69,7 +69,7 @@ export default class Autocomplete extends React.Component { const currentSelection = this.state.selectionOffset === 0 ? null : this.state.completionList[this.state.selectionOffset - 1].completion; selectionOffset = completionList.findIndex( - completion => completion.completion === currentSelection); + (completion) => completion.completion === currentSelection); if (selectionOffset === -1) { selectionOffset = COMPOSER_SELECTED; } else { @@ -82,8 +82,8 @@ export default class Autocomplete extends React.Component { let hide = this.state.hide; // These are lists of booleans that indicate whether whether the corresponding provider had a matching pattern - const oldMatches = this.state.completions.map(completion => !!completion.command.command), - newMatches = completions.map(completion => !!completion.command.command); + const oldMatches = this.state.completions.map((completion) => !!completion.command.command), + newMatches = completions.map((completion) => !!completion.command.command); // So, essentially, we re-show autocomplete if any provider finds a new pattern or stops finding an old one if (!isEqual(oldMatches, newMatches)) { @@ -170,7 +170,7 @@ export default class Autocomplete extends React.Component { } setSelection(selectionOffset: number) { - this.setState({selectionOffset}); + this.setState({selectionOffset, hide: false}); } componentDidUpdate() { @@ -195,17 +195,16 @@ export default class Autocomplete extends React.Component { const EmojiText = sdk.getComponent('views.elements.EmojiText'); let position = 1; - let renderedCompletions = this.state.completions.map((completionResult, i) => { - let completions = completionResult.completions.map((completion, i) => { - + const renderedCompletions = this.state.completions.map((completionResult, i) => { + const completions = completionResult.completions.map((completion, i) => { const className = classNames('mx_Autocomplete_Completion', { 'selected': position === this.state.selectionOffset, }); - let componentPosition = position; + const componentPosition = position; position++; - let onMouseOver = () => this.setSelection(componentPosition); - let onClick = () => { + const onMouseOver = () => this.setSelection(componentPosition); + const onClick = () => { this.setSelection(componentPosition); this.onCompletionClicked(); }; @@ -226,7 +225,7 @@ export default class Autocomplete extends React.Component { {completionResult.provider.renderCompletions(completions)} ) : null; - }).filter(completion => !!completion); + }).filter((completion) => !!completion); return !this.state.hide && renderedCompletions.length > 0 ? (
this.container = e}> diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js index c0d19987c7..7908d7f375 100644 --- a/src/components/views/rooms/MessageComposerInput.js +++ b/src/components/views/rooms/MessageComposerInput.js @@ -414,6 +414,8 @@ export default class MessageComposerInput extends React.Component { } } + console.log(state); + super.setState(state, () => { if (callback != null) { callback(); @@ -425,7 +427,7 @@ export default class MessageComposerInput extends React.Component { const selection = RichText.selectionStateToTextOffsets( this.state.editorState.getSelection(), this.state.editorState.getCurrentContent().getBlocksAsArray()); - + console.log(textContent); this.props.onContentChanged(textContent, selection); } }); @@ -629,12 +631,12 @@ export default class MessageComposerInput extends React.Component { } }; - onEscape = (e) => { + onEscape = async (e) => { e.preventDefault(); if (this.autocomplete) { this.autocomplete.onEscape(e); } - this.setDisplayedCompletion(null); // restore originalEditorState + await this.setDisplayedCompletion(null); // restore originalEditorState }; /* If passed null, restores the original editor content from state.originalEditorState. @@ -645,7 +647,14 @@ export default class MessageComposerInput extends React.Component { if (displayedCompletion == null) { if (this.state.originalEditorState) { - this.setState({editorState: this.state.originalEditorState}); + console.log('setting editorState to originalEditorState'); + let editorState = this.state.originalEditorState; + // This is a workaround from https://github.com/facebook/draft-js/issues/458 + // Due to the way we swap editorStates, Draft does not rerender at times + editorState = EditorState.forceSelection(editorState, + editorState.getSelection()); + this.setState({editorState}); + } return false; } @@ -663,7 +672,7 @@ export default class MessageComposerInput extends React.Component { this.setState({editorState, originalEditorState: activeEditorState}); // for some reason, doing this right away does not update the editor :( - setTimeout(() => this.refs.editor.focus(), 50); + // setTimeout(() => this.refs.editor.focus(), 50); return true; };