Use ContentState instead and persist over localStorage

src/components/views/rooms/MessageComposerInput.js

@@ -132,7 +132,10 @@ export default class MessageComposerInput extends React.Component {
             isRichtextEnabled,
 
             // the currently displayed editor state (note: this is always what is modified on input)
-            editorState: null,
+            editorState: this.createEditorState(
+                isRichtextEnabled,
+                MessageComposerStore.getContentState(this.props.room.roomId),
+            ),
 
             // the original editor state, before we started tabbing through completions
             originalEditorState: null,
@@ -142,10 +145,6 @@ export default class MessageComposerInput extends React.Component {
             currentlyComposedEditorState: null,
         };
 
-        // bit of a hack, but we need to do this here since createEditorState needs isRichtextEnabled
-        /* eslint react/no-direct-mutation-state:0 */
-        this.state.editorState = this.createEditorState();
-
         this.client = MatrixClientPeg.get();
     }
 
@@ -172,11 +171,6 @@ export default class MessageComposerInput extends React.Component {
     componentDidMount() {
         this.dispatcherRef = dis.register(this.onAction);
         this.historyManager = new ComposerHistoryManager(this.props.room.roomId);
-
-        // Reinstate the editor state for this room
-        this.setState({
-            editorState: MessageComposerStore.getEditorState(this.props.room.roomId),
-        });
     }
 
     componentWillUnmount() {
@@ -346,9 +340,9 @@ export default class MessageComposerInput extends React.Component {
             // Record the editor state for this room so that it can be retrieved after
             // switching to another room and back
             dis.dispatch({
-                action: 'editor_state',
+                action: 'content_state',
                 room_id: this.props.room.roomId,
-                editor_state: state.editorState,
+                content_state: state.editorState.getCurrentContent(),
             });
 
             if (!state.hasOwnProperty('originalEditorState')) {

src/stores/MessageComposerStore.js

@@ -15,9 +15,11 @@ limitations under the License.
 */
 import dis from '../dispatcher';
 import {Store} from 'flux/utils';
+import {convertToRaw, convertFromRaw} from 'draft-js';
 
 const INITIAL_STATE = {
-    editorStateMap: {},
+    editorStateMap: localStorage.getItem('content_state') ?
+        JSON.parse(localStorage.getItem('content_state')) : {},
 };
 
 /**
@@ -40,8 +42,8 @@ class MessageComposerStore extends Store {
 
     __onDispatch(payload) {
         switch (payload.action) {
-            case 'editor_state':
+            case 'content_state':
-                this._editorState(payload);
+                this._contentState(payload);
                 break;
             case 'on_logged_out':
                 this.reset();
@@ -49,16 +51,19 @@ class MessageComposerStore extends Store {
         }
     }
 
-    _editorState(payload) {
+    _contentState(payload) {
         const editorStateMap = this._state.editorStateMap;
-        editorStateMap[payload.room_id] = payload.editor_state;
+        editorStateMap[payload.room_id] = convertToRaw(payload.content_state);
+        localStorage.setItem('content_state', JSON.stringify(editorStateMap));
+        console.info(localStorage.getItem('content_state'));
         this._setState({
             editorStateMap: editorStateMap,
         });
     }
 
-    getEditorState(roomId) {
+    getContentState(roomId) {
-        return this._state.editorStateMap[roomId];
+        return this._state.editorStateMap[roomId] ?
+            convertFromRaw(this._state.editorStateMap[roomId]) : null;
     }
 
     reset() {