From e3643bf17abf2f88704aa0807ece25728e2e76e6 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 9 Sep 2019 18:12:52 +0100
Subject: [PATCH 1/3] EditMessageComposer: disable Save button until a change
 has been made

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 .../views/rooms/EditMessageComposer.js        | 31 ++++++++++++++-----
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/components/views/rooms/EditMessageComposer.js b/src/components/views/rooms/EditMessageComposer.js
index d58279436d..58f1f75726 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 = {
+            changed: false,
+        };
     }
 
     _setEditorRef = ref => {
@@ -176,16 +180,16 @@ 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 (this._isModifiedOrSameAsOld(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);
 
         dis.dispatch({action: "edit_event", event: null});
         dis.dispatch({action: 'focus_composer'});
-    }
+    };
 
     _cancelPreviousPendingEdit() {
         const originalEvent = this.props.editState.getEvent();
@@ -240,6 +244,16 @@ export default class EditMessageComposer extends React.Component {
         return caretPosition;
     }
 
+    _onChange = () => {
+        if (this.state.changed || !this._editorRef || !this._editorRef.isModified()) {
+            return;
+        }
+
+        this.setState({
+            changed: true,
+        });
+    };
+
     render() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         return (<div className={classNames("mx_EditMessageComposer", this.props.className)} onKeyDown={this._onKeyDown}>
@@ -249,10 +263,13 @@ export default class EditMessageComposer extends React.Component {
                 room={this._getRoom()}
                 initialCaret={this.props.editState.getCaret()}
                 label={_t("Edit message")}
+                onChange={this._onChange}
             />
             <div className="mx_EditMessageComposer_buttons">
                 <AccessibleButton kind="secondary" onClick={this._cancelEdit}>{_t("Cancel")}</AccessibleButton>
-                <AccessibleButton kind="primary" onClick={this._sendEdit}>{_t("Save")}</AccessibleButton>
+                <AccessibleButton kind="primary" onClick={this._sendEdit} disabled={!this.state.changed}>
+                    {_t("Save")}
+                </AccessibleButton>
             </div>
         </div>);
     }

From 2ff98b7c1f99ef2b9ec09c878c1824b0791f9f83 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 10 Sep 2019 08:51:27 +0100
Subject: [PATCH 2/3] clear up ambiguity by poor naming

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/rooms/EditMessageComposer.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/EditMessageComposer.js b/src/components/views/rooms/EditMessageComposer.js
index 58f1f75726..89aea64139 100644
--- a/src/components/views/rooms/EditMessageComposer.js
+++ b/src/components/views/rooms/EditMessageComposer.js
@@ -164,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() ||
@@ -181,12 +181,14 @@ export default class EditMessageComposer extends React.Component {
         const editContent = createEditContent(this.model, editedEvent);
         const newContent = editContent["m.new_content"];
 
-        if (this._isModifiedOrSameAsOld(newContent)) {
+        // 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);
         }
 
+        // close the event editing and focus composer
         dis.dispatch({action: "edit_event", event: null});
         dis.dispatch({action: 'focus_composer'});
     };

From 792b70913c5d43ef3ea3b5bf17e4a2d323f09d31 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 11 Sep 2019 17:29:52 +0100
Subject: [PATCH 3/3] invert and rename changed to saveDisabled for clarity

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/rooms/EditMessageComposer.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/views/rooms/EditMessageComposer.js b/src/components/views/rooms/EditMessageComposer.js
index 89aea64139..a1d6fa618f 100644
--- a/src/components/views/rooms/EditMessageComposer.js
+++ b/src/components/views/rooms/EditMessageComposer.js
@@ -114,7 +114,7 @@ export default class EditMessageComposer extends React.Component {
         this._editorRef = null;
 
         this.state = {
-            changed: false,
+            saveDisabled: true,
         };
     }
 
@@ -247,12 +247,12 @@ export default class EditMessageComposer extends React.Component {
     }
 
     _onChange = () => {
-        if (this.state.changed || !this._editorRef || !this._editorRef.isModified()) {
+        if (!this.state.saveDisabled || !this._editorRef || !this._editorRef.isModified()) {
             return;
         }
 
         this.setState({
-            changed: true,
+            saveDisabled: false,
         });
     };
 
@@ -269,7 +269,7 @@ export default class EditMessageComposer extends React.Component {
             />
             <div className="mx_EditMessageComposer_buttons">
                 <AccessibleButton kind="secondary" onClick={this._cancelEdit}>{_t("Cancel")}</AccessibleButton>
-                <AccessibleButton kind="primary" onClick={this._sendEdit} disabled={!this.state.changed}>
+                <AccessibleButton kind="primary" onClick={this._sendEdit} disabled={this.state.saveDisabled}>
                     {_t("Save")}
                 </AccessibleButton>
             </div>