PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

force editor rerender when we swap editorStates

Browse source
This commit is contained in:
Aviral Dasgupta 2017-02-10 03:40:57 +05:30
parent 46d30c378d
commit 5fbe06ed91
No known key found for this signature in database
GPG key ID: 5FD1E9F4FFD3DA80
2 changed files with 25 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/components/views/rooms/Autocomplete.js
View file

@ -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)}
</div>
) : null;
}).filter(completion => !!completion);
}).filter((completion) => !!completion);
return !this.state.hide && renderedCompletions.length > 0 ? (
<div className="mx_Autocomplete" ref={(e) => this.container = e}>

19
src/components/views/rooms/MessageComposerInput.js
View file

@ -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;
};