diff --git a/src/components/views/rooms/EditMessageComposer.js b/src/components/views/rooms/EditMessageComposer.js index d58279436d1..a1d6fa618fa 100644 --- a/src/components/views/rooms/EditMessageComposer.js +++ b/src/components/views/rooms/EditMessageComposer.js @@ -112,6 +112,10 @@ export default class EditMessageComposer extends React.Component { super(props, context); this.model = null; this._editorRef = null; + + this.state = { + saveDisabled: true, + }; } _setEditorRef = ref => { @@ -160,7 +164,7 @@ export default class EditMessageComposer extends React.Component { dis.dispatch({action: 'focus_composer'}); } - _isModifiedOrSameAsOld(newContent) { + _isContentModified(newContent) { // if nothing has changed then bail const oldContent = this.props.editState.getEvent().getContent(); if (!this._editorRef.isModified() || @@ -176,16 +180,18 @@ export default class EditMessageComposer extends React.Component { const editedEvent = this.props.editState.getEvent(); const editContent = createEditContent(this.model, editedEvent); const newContent = editContent["m.new_content"]; - if (!this._isModifiedOrSameAsOld(newContent)) { - return; + + // If content is modified then send an updated event into the room + if (this._isContentModified(newContent)) { + const roomId = editedEvent.getRoomId(); + this._cancelPreviousPendingEdit(); + this.context.matrixClient.sendMessage(roomId, editContent); } - const roomId = editedEvent.getRoomId(); - this._cancelPreviousPendingEdit(); - this.context.matrixClient.sendMessage(roomId, editContent); + // close the event editing and focus composer dis.dispatch({action: "edit_event", event: null}); dis.dispatch({action: 'focus_composer'}); - } + }; _cancelPreviousPendingEdit() { const originalEvent = this.props.editState.getEvent(); @@ -240,6 +246,16 @@ export default class EditMessageComposer extends React.Component { return caretPosition; } + _onChange = () => { + if (!this.state.saveDisabled || !this._editorRef || !this._editorRef.isModified()) { + return; + } + + this.setState({ + saveDisabled: false, + }); + }; + render() { const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); return (
@@ -249,10 +265,13 @@ export default class EditMessageComposer extends React.Component { room={this._getRoom()} initialCaret={this.props.editState.getCaret()} label={_t("Edit message")} + onChange={this._onChange} />
{_t("Cancel")} - {_t("Save")} + + {_t("Save")} +
); }