Store component state for editors

to prevent a forceUpdate from /sync causing the editors to revert
before the user had a chance to hit "Save".

Part of fixing https://github.com/vector-im/riot-web/issues/6019

src/components/views/rooms/RoomTopicEditor.js

@@ -28,26 +28,41 @@ module.exports = React.createClass({
         room: PropTypes.object.isRequired,
     },
 
+    getInitialState: function() {
+        return {
+            topic: null,
+        };
+    },
+
     componentWillMount: function() {
         const room = this.props.room;
         const topic = room.currentState.getStateEvents('m.room.topic', '');
-        this._initialTopic = topic ? topic.getContent().topic : '';
+        this.setState({
+            topic: topic ? topic.getContent().topic : '',
+        });
     },
 
     getTopic: function() {
-        return this.refs.editor.getValue();
+        return this.state.topic;
+    },
+
+    _onValueChanged: function(value) {
+        this.setState({
+            topic: value,
+        });
     },
 
     render: function() {
         const EditableText = sdk.getComponent("elements.EditableText");
 
         return (
-                <EditableText ref="editor"
+                <EditableText
                      className="mx_RoomHeader_topic mx_RoomHeader_editable"
                      placeholderClassName="mx_RoomHeader_placeholder"
                      placeholder={_t("Add a topic")}
                      blurToCancel={false}
-                     initialValue={this._initialTopic}
+                     initialValue={this.state.topic}
+                     onValueChanged={this._onValueChanged}
                      dir="auto" />
         );
     },