From 759a4a54efc75ee0834de1d5d51b07a03ac5438a Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 14 May 2019 10:37:57 +0100
Subject: [PATCH] send the actual m.replace event from composer content

---
 res/css/views/elements/_MessageEditor.scss    |  9 ++---
 .../views/elements/MessageEditor.js           | 39 ++++++++++++-------
 2 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/res/css/views/elements/_MessageEditor.scss b/res/css/views/elements/_MessageEditor.scss
index da1dbb23cb..2829413a27 100644
--- a/res/css/views/elements/_MessageEditor.scss
+++ b/res/css/views/elements/_MessageEditor.scss
@@ -47,16 +47,13 @@ limitations under the License.
 
     .buttons {
         display: flex;
-        flex-direction: column;
-        align-items: end;
+        flex-direction: row;
+        justify-content: end;
         padding: 5px 0;
 
         .mx_AccessibleButton {
-            background-color: $button-bg-color;
-            border-radius: 4px;
+            margin-left: 5px;
             padding: 5px 40px;
-            color: $button-fg-color;
-            font-weight: 600;
         }
     }
 
diff --git a/src/components/views/elements/MessageEditor.js b/src/components/views/elements/MessageEditor.js
index bc5cd021dd..62f4d442a7 100644
--- a/src/components/views/elements/MessageEditor.js
+++ b/src/components/views/elements/MessageEditor.js
@@ -21,11 +21,12 @@ import dis from '../../../dispatcher';
 import EditorModel from '../../../editor/model';
 import {setCaretPosition} from '../../../editor/caret';
 import {getCaretOffsetAndText} from '../../../editor/dom';
+import {htmlSerialize, textSerialize, requiresHtml} from '../../../editor/serialize';
 import parseEvent from '../../../editor/parse-event';
 import Autocomplete from '../rooms/Autocomplete';
 // import AutocompleteModel from '../../../editor/autocomplete';
 import {PartCreator} from '../../../editor/parts';
-import {renderModel, rerenderModel} from '../../../editor/render';
+import {renderModel} from '../../../editor/render';
 import {MatrixEvent, MatrixClient} from 'matrix-js-sdk';
 
 export default class MessageEditor extends React.Component {
@@ -109,6 +110,26 @@ export default class MessageEditor extends React.Component {
         dis.dispatch({action: "edit_event", event: null});
     }
 
+    _onSaveClicked = () => {
+        const content = {
+            "msgtype": "m.text",
+            "body": textSerialize(this.model),
+            "m.relates_to": {
+                "rel_type": "m.replace",
+                "event_id": this.props.event.getId(),
+            },
+        };
+        if (requiresHtml(this.model)) {
+            content.format = "org.matrix.custom.html";
+            content.formatted_body = htmlSerialize(this.model);
+        }
+
+        const roomId = this.props.event.getRoomId();
+        this.context.matrixClient.sendMessage(roomId, content);
+
+        dis.dispatch({action: "edit_event", event: null});
+    }
+
     _collectEditorRef = (ref) => {
         this._editorRef = ref;
     }
@@ -130,15 +151,6 @@ export default class MessageEditor extends React.Component {
     }
 
     render() {
-        // const parts = this.state.parts.map((p, i) => {
-        //     const key = `${i}-${p.type}`;
-        //     switch (p.type) {
-        //         case "plain": return p.text;
-        //         case "room-pill": return (<span key={key} className="room-pill">{p.text}</span>);
-        //         case "user-pill": return (<span key={key} className="user-pill">{p.text}</span>);
-        //     }
-        // });
-        // const modelOutput = JSON.stringify(this.state.parts, undefined, 2);
         let autoComplete;
         if (this.state.autoComplete) {
             const query = this.state.query;
@@ -161,14 +173,13 @@ export default class MessageEditor extends React.Component {
                     className="editor"
                     contentEditable="true"
                     tabIndex="1"
-                    // suppressContentEditableWarning={true}
                     onInput={this._onInput}
                     onKeyDown={this._onKeyDown}
                     ref={this._collectEditorRef}
-                >
-                </div>
+                ></div>
                 <div className="buttons">
-                    <AccessibleButton onClick={this._onCancelClicked}>{_t("Cancel")}</AccessibleButton>
+                    <AccessibleButton kind="secondary" onClick={this._onCancelClicked}>{_t("Cancel")}</AccessibleButton>
+                    <AccessibleButton kind="primary" onClick={this._onSaveClicked}>{_t("Save")}</AccessibleButton>
                 </div>
                 <code className="model"></code>
             </div>;