diff --git a/src/components/views/rooms/BasicMessageComposer.js b/src/components/views/rooms/BasicMessageComposer.js index 4ec43d8af2..92c2ae29e6 100644 --- a/src/components/views/rooms/BasicMessageComposer.js +++ b/src/components/views/rooms/BasicMessageComposer.js @@ -90,6 +90,7 @@ export default class BasicMessageEditor extends React.Component { this._modifiedFlag = false; this._isIMEComposing = false; this._hasTextSelected = false; + this._emoticonSettingHandle = null; } _replaceEmoticon = (caretPosition, inputType, diff) => { @@ -437,18 +438,25 @@ export default class BasicMessageEditor extends React.Component { this.setState({completionIndex}); } + _configureEmoticonAutoReplace() { + const shouldReplace = SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji'); + this.props.model.setTransformCallback(shouldReplace ? this._replaceEmoticon : null); + } + componentWillUnmount() { this._editorRef.removeEventListener("input", this._onInput, true); this._editorRef.removeEventListener("compositionstart", this._onCompositionStart, true); this._editorRef.removeEventListener("compositionend", this._onCompositionEnd, true); + SettingsStore.unwatchSetting(this._emoticonSettingHandle); } componentDidMount() { const model = this.props.model; model.setUpdateCallback(this._updateEditorState); - if (SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji')) { - model.setTransformCallback(this._replaceEmoticon); - } + this._emoticonSettingHandle = SettingsStore.watchSetting('MessageComposerInput.autoReplaceEmoji', null, () => { + this._configureEmoticonAutoReplace(); + }); + this._configureEmoticonAutoReplace(); const partCreator = model.partCreator; // TODO: does this allow us to get rid of EditorStateTransfer? // not really, but we could not serialize the parts, and just change the autoCompleter