From 3e6199c0f79a7a7f13390a9089b35773b46b67c0 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Fri, 22 Feb 2019 14:41:27 +0000
Subject: [PATCH 1/2] Change Markdown buttons to `onClick`

`AccessibleButton` expects click handlers, which we can use here, as long we
make some additional changes to avoid race processing the new state (see
subsequent patch).

Fixes https://github.com/vector-im/riot-web/issues/8866
---
 src/components/views/rooms/MessageComposer.js      | 2 +-
 src/components/views/rooms/MessageComposerInput.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 7eef868ef7e..651974a4085 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -501,7 +501,7 @@ export default class MessageComposer extends React.Component {
                         { formatButtons }
                         <div style={{ flex: 1 }}></div>
                         <AccessibleButton className="mx_MessageComposer_formatbar_markdown mx_MessageComposer_markdownDisabled"
-                            onMouseDown={this.onToggleMarkdownClicked}
+                            onClick={this.onToggleMarkdownClicked}
                             title={_t("Markdown is disabled")}
                         />
                         <AccessibleButton element="img" title={_t("Hide Text Formatting Toolbar")}
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 1954ca0d849..1514b58e27f 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -1603,7 +1603,7 @@ export default class MessageComposerInput extends React.Component {
                 </div>
                 <div className={className}>
                     <AccessibleButton className={markdownClasses}
-                        onMouseDown={this.onMarkdownToggleClicked}
+                        onClick={this.onMarkdownToggleClicked}
                         title={this.state.isRichTextEnabled ? _t("Markdown is disabled") : _t("Markdown is enabled")}
                     />
                     <Editor ref={this._collectEditor}

From ccd4dee0d2fb80ebe1110510c0aa12cbcaf6a4f7 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Fri, 22 Feb 2019 15:12:28 +0000
Subject: [PATCH 2/2] Isolate rich text notifications from other input changes

The step that would notify parent components of rich text state changes was
stirred into the input's change handler, which leads to race which the parent is
sometimes notified of the old rich text state instead of the new.

Here we avoid this complication by using a separate path for sending the rich
text state when we know we have updated it correctly.
---
 src/components/views/rooms/MessageComposer.js      | 2 ++
 src/components/views/rooms/MessageComposerInput.js | 8 ++++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 651974a4085..be6fbee4f61 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -257,6 +257,8 @@ export default class MessageComposer extends React.Component {
     }
 
     onInputStateChanged(inputState) {
+        // Merge the new input state with old to support partial updates
+        inputState = Object.assign({}, this.state.inputState, inputState);
         this.setState({inputState});
     }
 
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 1514b58e27f..d55544293bc 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -628,7 +628,6 @@ export default class MessageComposerInput extends React.Component {
             }
             const inputState = {
                 marks: editorState.activeMarks,
-                isRichTextEnabled: this.state.isRichTextEnabled,
                 blockType,
             };
             this.props.onInputStateChanged(inputState);
@@ -698,8 +697,13 @@ export default class MessageComposerInput extends React.Component {
         this.setState({
             editorState: this.createEditorState(enabled, editorState),
             isRichTextEnabled: enabled,
-        }, ()=>{
+        }, () => {
             this._editor.focus();
+            if (this.props.onInputStateChanged) {
+                this.props.onInputStateChanged({
+                    isRichTextEnabled: enabled,
+                });
+            }
         });
 
         SettingsStore.setValue("MessageComposerInput.isRichTextEnabled", null, SettingLevel.ACCOUNT, enabled);